/* Regadget Draft 4 · one site-wide system.
   Structure, scale, radii, spacing, nav, footer and phone collapse: measured from zendesk.com (2026-09-28).
   Colours: Direction C "Floor" (ink / floor grey / paper / lime). Type: Overpass at Zendesk's measured scale.
   Tokens and every component's markup pattern: handoffs/draft4/SYSTEM.md. */

/* Overpass is loaded by each page's <link rel="stylesheet"> (SYSTEM.md head recipe); no @import (fix pass 1, S4). */

/* Overpass draws the middle dot "·" with almost no right side-bearing, so "Regadget · 4999" reads "Regadget ·4999".
   This face covers ONLY U+00B7 and takes it from a system sans with a centred dot; every other character stays
   Overpass. No text changes (fix pass 1, group B grade). */
@font-face {
  font-family: "Regadget Dot";
  src: local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica"), local("Arial"), local("ArialMT"),
       local("Segoe UI"), local("Roboto"), local("DejaVu Sans"), local("Liberation Sans");
  unicode-range: U+00B7;
}

/* ---------- tokens ---------- */
:root {
  /* Direction C colours */
  --ink: #121311;
  --ink-2: #1b1c19;
  --ink-3: #2a2c28;
  /* X17 (Tom 09-28, "our brand only (lime/black/white)"; RESOLVED CONFIRMED 09-29): the Direction C floor grey is
     retired. The surface token keeps its name so every page and group sheet follows, but it is now a light tint of
     brand lime (about 15% lime on white), and the hover step about 24%. */
  --floor: #eef6e2;
  --floor-2: #e2f0cd;
  --paper: #ffffff;
  --lime: #8ec63f;
  --lime-press: #a3d85c;
  --steel: #8d9088;
  --text-2: #3b3d38;
  --on-ink-2: #c6c8c0;
  --err: #b42318;
  /* form control borders: >= 3:1 against BOTH the white field and the floor panel they sit on (C+D grade S7) */
  --field-line: #6b6e67;
  /* accent words on white (phone hero, links hover): Zendesk turns its lime to a dark green on white; ours passes AA */
  --green-text: #4e7600;          /* 5.36:1 on white, 4.9:1 on the lime-tint floor */

  /* legacy names kept so older page CSS still resolves */
  --ink-muted: var(--text-2);
  --lime-hover: var(--lime-press);
  --lime-active: #7fb137;
  --hairline: rgb(18 19 17 / 0.14);
  --field: var(--field-line);
  --error: var(--err);
  --on-dark: #ffffff;
  --on-dark-muted: var(--on-ink-2);
  --hairline-dark: rgb(255 255 255 / 0.16);
  --tint: var(--floor);

  --font-display: "Regadget Dot", "Overpass", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: var(--font-display);

  /* Zendesk scale (1440 -> 390) */
  --fs-display: clamp(2.6875rem, 1.9rem + 3.2vw, 4.25rem);   /* 43 -> 68 */
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(1.875rem, 1.6rem + 1.15vw, 2.625rem);        /* 30 -> 42 */
  --fs-h3: clamp(1.375rem, 1.3rem + 0.4vw, 1.625rem);          /* 22 -> 26 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);          /* 17 -> 20 */
  --fs-body: 1rem;                                             /* 16 at every width (X19, WD-11) */
  --fs-prose: 1.125rem;                                        /* 18: articles and long answers (X19) */
  --fs-small: 0.875rem;                                        /* 14 */
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);    /* 12 -> 14 */
  --lh-tight: 1.05;
  --lh-head: 1.15;
  --lh-body: 1.45;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;
  --section-y: 64px;
  --gutter: 16px;
  --container: 1102px;             /* Zendesk content width at 1440 */
  --wide: 1150px;                  /* Zendesk inset dark section width */
  --measure: 40rem;

  --r-btn: 16px;                   /* Zendesk buttons: 48 tall, 16 radius (not a full pill) */
  --r-input: 12px;
  --r-card: 40px;                  /* panels and big cards */
  --r-hero: 32px;                  /* hero photo card */
  --r-band: 16px;                  /* inset dark section, small cards */
  --inset: 16px;                   /* hero card inset from the page edge */

  --header-h: 60px;
  --utility-h: 0px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 150ms;
  /* the one arrow glyph (design run 10-06, DESIGN.md "Arrow link"): the same 24-box stroke as .door2__arrow / .hx__ghost,
     used as a mask so an inline arrow takes the text's colour. Never type "→" into copy or ::after. */
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  /* the same stroke pointing up-right: links that leave the site (finish review A 10-07) */
  --ico-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E");
}
@media (min-width: 48rem) { :root { --section-y: 88px; --gutter: 24px; } }
@media (min-width: 64rem) { :root { --section-y: 112px; --gutter: 24px; --header-h: 80px; --utility-h: 44px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
  -webkit-font-smoothing: antialiased; font-kerning: normal;
}
::selection { background: var(--lime); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
/* no one-word last lines ("gone / by.", "is the / point.", "next move is / ours."): laptop QA 2026-09-28 */
p, li, dd, dt, blockquote, figcaption { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
address { font-style: normal; }
strong, b { font-weight: 700; }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(var(--wide) + 2 * var(--gutter)); }

/* focus: C's double ring; on ink surfaces the ring turns lime */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink);
}
:where(.is-dark, .footer, .trip, .zd-panel, .zd-dark, .hero__card) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime);
}
main:focus { outline: none; }

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--lime); color: var(--ink); padding: var(--s3) var(--s5); font-weight: 700; border-radius: var(--r-btn);
}
.skip-link:focus { top: var(--s2); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 63.99rem) { [data-desktop-only] { display: none !important; } }
@media (min-width: 64rem) { [data-mobile-only] { display: none !important; } }

/* ---------- type ---------- */
.display, .h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 500; letter-spacing: -0.02em; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 500; letter-spacing: -0.015em; max-width: 24ch; }
.h2--inverse { color: var(--on-dark); }
.h2--quiet { font-size: var(--fs-h3); max-width: none; }
.h2--display { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); }
.eyebrow {
  font-size: var(--fs-eyebrow); line-height: 1.3; font-weight: 700; letter-spacing: 0.054em; text-transform: uppercase;
  color: var(--ink);
}
.accent { color: var(--green-text); }
:where(.is-dark, .zd-panel, .zd-dark, .hero__card, .trip) .accent { color: var(--lime); }
:where(.is-dark, .zd-panel, .zd-dark, .trip) .eyebrow { color: var(--on-ink-2); }

/* links */
.textlink {
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.textlink:hover { text-decoration-color: currentColor; }
.textlink--strong { font-size: 1.125rem; }
.textlink--quiet { font-weight: 400; text-decoration-color: var(--steel); text-decoration-thickness: 1px; }
.textlink--quiet:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
/* text-align: inherit (finish review A 10-07, request 10): a <button> centres its label by default, so a link-button that
   wraps at 390 ("Buying for next year instead? Switch to Buy refurbished") sat centred in a left-aligned form */
.linkbutton {
  background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; min-height: 44px; text-align: inherit;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.linkbutton:hover { text-decoration-color: currentColor; }

/* buttons (Zendesk: 48 tall, 10/20 padding, 16 radius, 18/28 600). Filled lime + ink text is the only primary. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  /* 3px more padding on top than bottom: the face reserves descender space, so a metric-centred label reads 3px high
     (measured 17px above the letters vs 23px below the baseline on a 52px button, Tom 10-05) */
  min-height: 48px; padding: 12px 20px 8px; border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.3; text-decoration: none;
  cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--lime); color: var(--ink); }
.btn--primary:hover { background: var(--lime-press); }
.btn--primary:active { background: var(--lime-active); }
.btn--lg { min-height: 52px; padding: 14px 24px 10px; }
/* secondary: same shape, 1px outline (Zendesk "Learn more" / "View demo") */
/* .header__cta.is-outline dropped from these two rules 2026-10-09 (Tom: header pickup button green everywhere); site.js still
   toggles the class but it no longer changes the look */
.btn--outline, .btn--secondary {
  background: transparent; color: var(--ink); border-color: rgb(18 19 17 / 0.55);
}
.btn--outline:hover, .btn--secondary:hover { border-color: var(--ink); background: rgb(18 19 17 / 0.04); }
:where(.is-dark, .zd-panel, .zd-dark, .hero__card, .trip) :where(.btn--outline, .btn--secondary) { color: var(--on-dark); border-color: rgb(255 255 255 / 0.5); }
:where(.is-dark, .zd-panel, .zd-dark, .hero__card, .trip) :where(.btn--outline, .btn--secondary):hover { border-color: var(--on-dark); background: rgb(255 255 255 / 0.06); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 47.99rem) {
  /* Zendesk phone: every CTA full width, stacked 12 apart */
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
}

/* ---------- header: utility row (scrolls away) + main bar (sticky) ---------- */
.header { position: sticky; top: calc(-1 * var(--utility-h)); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--hairline); }
@media (max-height: 30rem) { .header { position: static; } }
.utility { height: var(--utility-h); font-size: var(--fs-small); }
.utility .wrap, .header .wrap { max-width: none; padding-inline: var(--gutter); }
.utility__inner { display: flex; justify-content: flex-end; height: 100%; }
.utility__list { display: flex; gap: var(--s4); align-items: center; }
.utility__list a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 4px; text-decoration: none; }
.utility__list a:hover { text-decoration: underline; }
/* live dot: lime with an ink ring (red is the error colour and off-palette; /live/ fix 3, X17) */
.utility__marker { display: inline-block; width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); border-radius: 50%; margin-right: 6px; }
.header__inner { display: flex; align-items: center; gap: var(--s3); min-height: var(--header-h); }
.header__logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.header__logo img { width: 108px; height: auto; }
.header__cta {
  margin-left: auto; min-height: 44px; padding: 11px 14px 5px; font-size: 1rem; line-height: 1.2;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s;
}
.header__cta.is-hidden { visibility: hidden; opacity: 0; }
.header__menu {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 48px; min-height: 48px; padding: 4px; background: none; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 0.75rem; font-weight: 600;
}
.header__menu-icon, .header__menu-icon::before, .header__menu-icon::after {
  display: block; width: 22px; height: 2px; background: var(--ink); content: ""; position: relative; border-radius: 2px;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.header__menu-icon::before { position: absolute; top: -7px; }
.header__menu-icon::after { position: absolute; top: 7px; }
.header__menu-icon { margin: 8px 0 7px; }
.header__menu[aria-expanded="true"] .header__menu-icon { background: transparent; }
.header__menu[aria-expanded="true"] .header__menu-icon::before { transform: translateY(7px) rotate(45deg); }
.header__menu[aria-expanded="true"] .header__menu-icon::after { transform: translateY(-7px) rotate(-45deg); }
/* Zendesk phone bar: logo, one filled button, hamburger (fix pass 1, S1/S6). site.js marks the header button
   .is-outline while the hero's actions are on screen and .is-past-hero after. On phones the button is not shown while the
   hero's own full-width button is in view, then appears filled on ONE line. */
@media (max-width: 63.99rem) {
  .header__cta { white-space: nowrap; font-size: 0.875rem; padding: 11px 12px 5px; min-height: 44px; }
}
@media (max-width: 47.99rem) {
  .header__logo img { width: 92px; }
  .header__inner { gap: var(--s2); }
  .header__menu { min-width: 44px; }
  .js body:has([data-hero-actions]) .header__cta:not(.is-past-hero) { visibility: hidden; }
}
/* 320-wide phones and 320 desktop windows: the one-line button pushed the menu button 48px off screen and gave every
   page a sideways scroll (laptop QA 2026-09-28). Below 22rem the button may take two lines. */
@media (max-width: 22rem) {
  .header__cta { font-size: 0.8125rem; padding-inline: 8px; white-space: normal; text-align: center; line-height: 1.15; min-width: 0; flex: 0 1 auto; }
  .header__logo img { width: 84px; }
}
body.drawer-open .header__cta { visibility: hidden; }
@media (min-width: 64rem) {
  .header__inner { gap: var(--s6); }
  .header__logo img { width: 124px; }
  .header__cta { margin-left: 0; padding: 13px 16px 7px; min-height: 44px; font-size: 1rem; }
}
/* ---------- header, template pass 2026-09-29 (X2, X3, X4, X7) ----------
   Laptop and desktop (64rem+), one row: logo · task nav · phone + "Shop ↗" (quiet text) · "Get free ITAD pickup" (the
   one solid lime button, Tom 09-28) · "Talk to us" (white, thin outline). "Talk to us" replaces "Book a call": no
   calendar exists, so the label names what the link does (RESOLVED X2; ux-copy "match the outcome to the label").
   Phones and tablets (<64rem): logo · the page's own filled button (.header__cta: retire pages "Get free ITAD pickup",
   buy pages "Request a quote", /partners/ "Become a partner") · Menu. "Talk to us" lives in the drawer.
   X4: the phone number shows at every laptop width (1024 up), not only at 1440+, because 1280/1366 laptops are
   where IT, K-12 and work-at-home callers sit. Shop joins from 1200. */
.header__phone, .header__shop, .header__pickup, .header__talk { display: none; }
@media (min-width: 64rem) {
  :root { --utility-h: 0px; }
  .utility { display: none; }
  .header__inner { gap: var(--s3); }
  .header .nav { margin-inline: auto; }
  .header__phone, .header__shop { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 4px 0; flex: none;
    font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .header__shop { color: var(--text-2); font-weight: 500; }
  .header__phone:hover, .header__shop:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime);
    text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .header__pickup, .header__talk { display: inline-flex; align-items: center; justify-content: center; flex: none;
    height: 44px; min-height: 44px; padding: 3px 18px 0; line-height: 1; border-radius: 12px; font-size: 1rem; white-space: nowrap; }
  .header__talk { background: var(--paper); color: var(--ink); border: 1px solid rgb(18 19 17 / 0.32); }
  .header__talk:hover { border-color: var(--ink); background: var(--paper); }
  .header__talk[aria-current="page"] { border-color: var(--ink); }
}
.nav__button, .nav__link { white-space: nowrap; }
/* 1024-1359: the nav tightens (items 15px, 9px side padding) so phone + both buttons fit on one row at 1280.
   Shop joins at 1520 (it is always in the Buy refurbished menu; 10-05: at 1360-1519 the full row overflowed by up to 110px); "Talk to us" joins at 1152 (always in About > Contact). */
@media (min-width: 64rem) and (max-width: 94.99rem) {
  .header .nav__list { gap: 0; }
  .header .nav__button, .header .nav__link { padding: 11px 9px 5px; font-size: 0.9375rem; }
  .header .nav__chev { width: 12px; height: 12px; }
  .header__pickup, .header__talk { padding-inline: 14px; font-size: 0.9375rem; }
  .header__inner { gap: 10px; }
  .header__shop { display: none; }
}
@media (min-width: 64rem) and (max-width: 71.99rem) { .header__talk { display: none; } }
/* a hero right under the breadcrumb bar starts closer to it (the bar already gives the top air) */
nav.crumbs + .hero--inner { padding-top: var(--s2); }
@media (min-width: 64rem) { nav.crumbs + .hero--inner { padding-top: var(--s8); } }

/* desktop nav: centred between logo and button, 16/600 items, chevrons; menus are rounded cards */
.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s2); }
.nav__item { position: relative; }
.nav__button, .nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  background: none; border: 0; cursor: pointer; font-weight: 600; font-size: 1rem; text-decoration: none;
}
.nav__button:hover, .nav__link:hover, .nav__button[aria-expanded="true"] { background: var(--floor); }
.nav__caret { font-size: 0.7rem; transition: transform var(--dur) var(--ease); }
.nav__button[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; width: 26rem;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 24px;
  box-shadow: 0 16px 40px rgb(18 19 17 / 0.14); padding: var(--s3);
}
.menu--end { left: auto; right: 0; }
.menu__link { display: block; padding: var(--s3) var(--s4); border-radius: 16px; text-decoration: none; }
.menu__link:hover { background: var(--floor); }
.menu__label { display: block; font-weight: 600; }
.menu__desc { display: block; font-size: var(--fs-small); color: var(--text-2); line-height: 1.4; }
.menu__aside {
  display: flex; align-items: center; min-height: 44px; margin: var(--s2) var(--s4) 0; padding-top: var(--s3);
  border-top: 1px solid var(--hairline); font-weight: 600; font-size: var(--fs-small);
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}

/* ---------- desktop menu panels (Tom GO 2026-09-28): task-first labels, Zendesk's panel anatomy in Regadget colours.
   "What we do" + "Who it's for" columns, lime-tinted icon tiles, one line under every link, black next-step strip.
   Each panel stays at 6 links or fewer, so no mega-menu grid (USWDS). site.js still toggles [hidden] via aria-controls. */
/* 6px more padding on top than bottom (11/5): a metric-centred label reads ~2.5px high in this face, same fix as .btn (Tom 10-05) */
.nav__button, .nav__link { border-radius: 999px; padding: 11px 14px 5px; }
.nav__button:hover, .nav__link:hover, .nav__button[aria-expanded="true"] { background: var(--floor); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--lime); border-radius: 0; }
.nav__chev { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.nav__button[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.menu--panel { display: grid; grid-template-columns: 1fr 1fr; width: 45rem; left: -20px; top: calc(100% + 14px); padding: 0; border: 0;
  box-shadow: 0 2px 6px rgb(18 19 17 / 0.06), 0 30px 70px -24px rgb(18 19 17 / 0.42), inset 0 0 0 1px rgb(18 19 17 / 0.07); }
.menu--panel[hidden] { display: none; }
.menu--single { grid-template-columns: 1fr; width: 24rem; }
.menu--panel.menu--end { left: auto; right: 0; }
.mp__col { padding: 26px 26px 22px; }
.mp__col--side { box-shadow: inset 1px 0 0 rgb(18 19 17 / 0.09); background: linear-gradient(180deg, #fafdf6 0%, #f3f9ea 100%); border-radius: 0 24px 0 0; }
.mp__head { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2);
  padding-bottom: 12px; margin-bottom: 8px; box-shadow: inset 0 -1px 0 rgb(18 19 17 / 0.1); }
.mp__list { display: grid; gap: 2px; }
.mp__link { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 10px; margin: 0 -10px;
  border-radius: 14px; text-decoration: none; transition: background-color var(--dur) var(--ease); }
.mp__link:hover { background: rgb(142 198 63 / 0.12); }
.mp__link[aria-current="page"] { background: rgb(142 198 63 / 0.16); }
.mp__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink);
  background: linear-gradient(180deg, #f3f9e8 0%, #dcefbf 100%); box-shadow: inset 0 0 0 1px rgb(78 118 0 / 0.18), 0 4px 10px -6px rgb(78 118 0 / 0.5); }
.mp__ico svg { width: 20px; height: 20px; }
.mp__label { display: block; font-weight: 700; line-height: 1.3; color: var(--ink); }
.mp__desc { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }
.mp__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 26px;
  border-radius: 0 0 24px 24px; background: var(--ink); color: var(--on-dark); font-size: 0.9375rem; }
.mp__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lime); font-weight: 700; text-decoration: none; }
.mp__foot a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.menu--panel :where(a):focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.mp__foot a:focus-visible { outline-color: var(--lime); }

/* drawer (phone menu) */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border-top: 1px solid var(--hairline); padding: 8px var(--gutter) var(--s12);
}
.drawer__row { display: flex; align-items: center; min-height: 52px; font-weight: 600; text-decoration: none; }
.drawer__phone { border-bottom: 1px solid var(--hairline); font-size: 1.125rem; }
.drawer__list > li { border-bottom: 1px solid var(--hairline); }
.drawer__hub { display: flex; align-items: stretch; }
.drawer__hub-link, .drawer__single { flex: 1; display: flex; align-items: center; min-height: 60px; font-weight: 500; font-size: 1.375rem; letter-spacing: -0.01em; text-decoration: none; }
.drawer__toggle { flex: none; width: 56px; min-height: 60px; background: none; border: 0; cursor: pointer; position: relative; }
.drawer__sign { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--floor); }
.drawer__sign::before, .drawer__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); }
.drawer__sign::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--dur) var(--ease); }
.drawer__toggle[aria-expanded="true"] .drawer__sign { background: var(--lime); }
.drawer__toggle[aria-expanded="true"] .drawer__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.drawer__sub { padding: 0 0 var(--s3); margin-bottom: var(--s2); }
.drawer__sub a { display: block; padding: 10px var(--s4); border-radius: 16px; text-decoration: none; min-height: 44px; }
.drawer__sub a:hover { background: var(--floor); }
.drawer__aside { font-weight: 600; text-decoration: underline !important; text-decoration-color: var(--lime) !important; text-decoration-thickness: 2px !important; }
.drawer__foot { margin-top: var(--s4); }
body.drawer-open { overflow: hidden; }

/* ---------- section primitives (Zendesk structure) ---------- */
/* .zd-section: vertical rhythm. Top padding only, so two plain sections never stack double space. */
.zd-section { padding-top: var(--section-y); }
.zd-section:last-child { padding-bottom: var(--section-y); }
/* centred heading block: H2 (max 727px at 1440), one paragraph, buttons centred */
.zd-head { display: grid; gap: var(--s4); justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; }
.zd-head .h2 { max-width: none; }
.zd-head .lead, .zd-head p { max-width: 42rem; }
.zd-head + * { margin-top: var(--s12); }
/* split: text column + media/card column (Zendesk "Standalone AI agents" row) */
.zd-split { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 64rem) { .zd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); } .zd-split--rev > :first-child { order: 2; } }

/* card: floor grey, 40 radius, 40 padding (24 on phones) */
.zd-card { background: var(--floor); border-radius: var(--r-card); padding: var(--s6); }
@media (min-width: 48rem) { .zd-card { padding: var(--s10); } }
.zd-card--paper { background: var(--paper); border: 1px solid var(--hairline); }
.zd-card--ink { background: var(--ink-2); color: var(--on-dark); }
.zd-card__media { margin: calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s6); border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; }
@media (min-width: 48rem) { .zd-card__media { margin: calc(-1 * var(--s10)) calc(-1 * var(--s10)) var(--s8); } }
.zd-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.zd-cards { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .zd-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zd-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .zd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* panel: ink rounded panel (Zendesk's dark green partnership panel -> C ink). 40 radius, 64/96 padding (32/24 phone). */
.zd-panel { background: var(--ink); color: var(--on-dark); border-radius: var(--r-card); padding: var(--s8) var(--s6); }
@media (min-width: 48rem) { .zd-panel { padding: var(--s16) var(--s24); } }
.zd-panel--floor { background: var(--floor); color: var(--ink); }

/* dark band: Zendesk's inset dark section (1150 wide, 16 radius, radial glow) in C ink. Full-bleed below 48rem. */
.zd-dark {
  background: radial-gradient(120% 90% at 50% 100%, var(--ink-3) 0%, var(--ink) 62%);
  color: var(--on-dark); padding-block: var(--s12);
}
@media (min-width: 48rem) {
  .zd-dark { max-width: var(--wide); margin-inline: auto; border-radius: var(--r-band); padding-block: 88px; }
}
@media (min-width: 48rem) and (max-width: 72rem) { .zd-dark { margin-inline: var(--s3); } }
.zd-dark .wrap { max-width: calc(1070px + 2 * var(--gutter)); }

/* photo frame: rounded crop */
.zd-photo { border-radius: var(--r-card); overflow: hidden; background: var(--floor); }
.zd-photo img { width: 100%; height: 100%; object-fit: cover; }
.zd-photo--hero { border-radius: var(--r-hero); }
.zd-photo--sm { border-radius: var(--r-band); }

/* chip label (Zendesk NEW / Featured tag; C lime label) */
.zd-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 8px; background: var(--lime); color: var(--ink); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.054em; text-transform: uppercase; }

/* ---------- page hero (shared by every page): Zendesk inset photo card ----------
   Markup: section.hero > .hero__grid > .hero__text + figure.hero__photo (picture > img). On 64rem+ the photo fills the
   rounded card behind the text with a dark grade (text white, accent words lime). Below 64rem the text sits on white
   above the photo card and accent words turn --green-text. */
.hero { padding-top: var(--s6); }
.hero__grid { position: relative; display: grid; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; padding-inline: var(--gutter); }
.hero .eyebrow { margin-bottom: var(--s3); }
.hero__h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 500; letter-spacing: -0.02em; max-width: none; text-wrap: balance; }
@media (min-width: 64rem) { .hero__h1 { max-width: 13ch; } }
/* home H1 on phones: three even lines "Free pickup / for your old / computers." (fix pass 1, S5) */
@media (max-width: 63.99rem) { .hero--home .hero__h1 { max-width: 6.4em; } }
/* home floor photo: crop below the ceiling line at every width (fix pass 1, S2); other pages set their own crop */
.hero--home .hero__photo img { object-position: 50% 72%; }
.hero__h1 .accent { color: var(--green-text); }
.hero__sub { margin-top: var(--s5); font-size: var(--fs-lead); line-height: 1.5; max-width: 36rem; }
.hero__hook { margin-top: var(--s3); font-weight: 700; font-size: var(--fs-lead); }
.hero__actions { margin-top: var(--s8); display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
/* the hero's secondary text link takes the secondary button shape (Zendesk: filled + outlined) */
.hero__actions .textlink--strong {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 24px 10px;
  border: 1px solid rgb(18 19 17 / 0.55); border-radius: var(--r-btn); text-decoration: none; font-size: 1.125rem;
  /* same metrics as .btn--lg so both hero labels share one baseline (Tom 10-06 "CTA text/font looks off") */
  font-family: var(--font-body); font-weight: 600; line-height: 1.3;
}
.hero__actions .textlink--strong:hover { border-color: var(--ink); }
.hero__company { margin-top: var(--s6); font-size: var(--fs-small); color: var(--text-2); }
.hero__since { margin-top: var(--s6); font-size: var(--fs-small); font-weight: 700; }
/* fix pass 1: the figure no longer clips; the photo carries the radius, and the place label (.hero__proof, first in the
   DOM) is shown as a caption UNDER the photo, never on it (standing rule: no year next to a place on/near a photo). */
.hero__photo { position: relative; display: flex; flex-direction: column-reverse; margin: var(--s10) var(--inset) 0; }
.hero__photo picture { display: block; border-radius: var(--r-hero); overflow: hidden; background: var(--ink); }
.hero__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__proof {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s3); padding-left: var(--s2);
  color: var(--text-2); font-size: var(--fs-small); font-weight: 600;
}
.hero__proof::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
@media (min-width: 48rem) {
  .hero__actions { flex-direction: row; align-items: center; width: auto; }
}
@media (min-width: 64rem) {
  .hero { padding: var(--inset) var(--inset) 0; }
  .hero:has(.hero__proof) { padding-bottom: var(--s10); }
  .hero__grid {
    min-height: min(772px, calc(100svh - var(--header-h) - var(--utility-h) - var(--inset)));
    border-radius: var(--r-hero); background: var(--ink); isolation: isolate;
    align-items: center;
  }
  .hero__photo { position: absolute; inset: 0; margin: 0; z-index: -1; display: block; }
  .hero__photo picture { position: absolute; inset: 0; border-radius: var(--r-hero); }
  /* crop below the ceiling line: the lower two-thirds of the floor photo (fix pass 1, S2) */
  .hero__photo img { height: 100%; aspect-ratio: auto; }
  .hero__proof { position: absolute; top: 100%; right: var(--s6); margin-top: var(--s3); }
  /* the grade: dark behind the 41rem text column only, photo clear from ~55% (fix pass 1, S2). White text is measured
     against the lightest pixel under it (HOME-LOG contrast section). */
  .hero__photo::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--r-hero);
    background:
      linear-gradient(90deg, rgb(18 19 17 / 0.88) 0%, rgb(18 19 17 / 0.8) 44%, rgb(18 19 17 / 0.66) 58%, rgb(18 19 17 / 0.2) 70%, rgb(18 19 17 / 0.03) 82%),
      linear-gradient(0deg, rgb(18 19 17 / 0.35) 0%, rgb(18 19 17 / 0) 30%);
  }
  /* text starts on the page's content edge (Zendesk: x=169 at 1440), i.e. the container edge minus the card inset */
  /* the text column is a larger share of a narrower card: carry the grade further right below 80rem */
  @media (max-width: 79.99rem) {
    .hero__photo::after {
      background:
        linear-gradient(90deg, rgb(18 19 17 / 0.88) 0%, rgb(18 19 17 / 0.8) 54%, rgb(18 19 17 / 0.66) 70%, rgb(18 19 17 / 0.2) 82%, rgb(18 19 17 / 0.03) 94%),
        linear-gradient(0deg, rgb(18 19 17 / 0.35) 0%, rgb(18 19 17 / 0) 30%);
    }
  }
  .hero__text {
    width: 100%;
    padding: 96px max(var(--s10), (100vw - var(--container)) / 2 - var(--inset));
    color: var(--on-dark);
  }
  .hero__text > * { max-width: 41rem; }
  .hero .eyebrow { color: var(--on-dark); }
  .hero__h1 .accent { color: var(--lime); }
  .hero__company { color: var(--on-ink-2); }
  .hero__actions .textlink--strong { color: var(--on-dark); border-color: rgb(255 255 255 / 0.5); }
  .hero__actions .textlink--strong:hover { border-color: var(--on-dark); }
  .hero :where(a, button):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
}

/* ---------- §2 home router: centred heading + three floor cards ---------- */
.router { padding-top: var(--section-y); }
.router__grid { display: grid; gap: var(--s10); }
.router__head { display: grid; justify-items: center; text-align: center; gap: var(--s5); }
.router__h2 { max-width: none; }
.gadget { display: flex; align-items: center; gap: var(--s4); text-align: left; }
.gadget img { width: 72px; height: auto; flex: none; }
.gadget__line { font-size: var(--fs-lead); line-height: 1.35; max-width: 22rem; color: var(--text-2); }
.doors { display: grid; gap: var(--s4); }
.door {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  background: var(--floor); border-radius: var(--r-card); padding: var(--s6);
  transition: background-color var(--dur) var(--ease);
}
.door:hover { background: var(--floor-2); }
.door--lead { background: var(--ink); color: var(--on-dark); }
.door--lead:hover { background: var(--ink-2); }
.door__label { font-size: var(--fs-h3); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.door__link { text-decoration: none; }
.door__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.door__link:focus-visible { box-shadow: none; }
.door:has(.door__link:focus-visible) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.door__desc { color: var(--text-2); }
.door--lead .door__desc { color: var(--on-ink-2); }
.door__cue { margin-top: auto; padding-top: var(--s4); font-weight: 600; }
.door--lead .door__cue { color: var(--lime); }
.textrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s6); margin-top: var(--s6); }
.textrow a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
@media (min-width: 48rem) { .door { padding: var(--s8) var(--s10); } }
@media (min-width: 64rem) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
  .door { padding: var(--s10); }
}

/* home router moved INTO the hero, above the fold (Tom, 2026-09-28: "We need the Routing to be above the fold").
   Phones: text, then the three doors, then the photo. 64rem+: the doors sit as a compact row on the photo card
   under the buttons; the hero loses its fixed min-height and its tall padding so all three show on a laptop screen. */
.router { padding-top: var(--s10); }
.router .router__grid { gap: var(--s4); }
.router .textrow { margin-top: 0; }
.hero__actions .hero__since { margin-top: 0; }
.hero__router { padding-inline: var(--gutter); margin-top: var(--s8); }
.hero__router .door { padding: var(--s5) var(--s6); gap: var(--s1, 4px); }
.hero__router .door__label { font-size: 1.25rem; }
.hero__router .door__cue { padding-top: var(--s2); }
@media (min-width: 64rem) {
  .hero--home .hero__grid { min-height: 0; align-items: start; }
  .hero--home .hero__text { padding-top: 40px; padding-bottom: 0; }
  .hero--home .hero__h1 { max-width: 11.5em; font-size: clamp(2.6875rem, 1.2rem + 2.9vw, 4rem); }
  .hero--home .hero__sub { margin-top: var(--s4); }
  .hero--home .hero__actions { margin-top: var(--s6); }
  .hero--home .hero__since { margin: 0 0 0 var(--s4); }
  .hero__router {
    width: 100%; margin-top: 0;
    padding: var(--s6) max(var(--s10), (100vw - var(--container)) / 2 - var(--inset)) var(--s6);
  }
  .hero__router .doors { gap: var(--s4); }
  .hero__router .door { background: rgb(255 255 255 / 0.95); color: var(--ink); border-radius: 24px; }
  .hero__router .door:hover { background: var(--paper); }
  .hero__router .door--lead { background: var(--lime); }
  .hero__router .door--lead:hover { background: #9ed34f; }
  .hero__router .door__desc, .hero__router .door--lead .door__desc { color: var(--text-2); }
  .hero__router .door--lead .door__desc { color: var(--ink); }
  .hero__router .door--lead .door__cue { color: var(--ink); }
  .hero__router .door__link::after { border-radius: 24px; }
  .hero__router .door:has(.door__link:focus-visible) { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
}

/* ---------- INNER HERO (.hero.hero--inner) — Zendesk's inner-page hero, measured live on zendesk.com/service/
   (2026-09-28): white section, 88px top/bottom padding at 1440; text column 515px at the content edge; H1 68/71.4 500
   ink (43/45 at 390); eyebrow 14/700 uppercase; body 16; a 445px square photo card, radius 40, in the right column,
   vertically centred; a faint lime glow bottom-right. Phones: text on white, photo card below, buttons full width.
   Same markup as the home hero plus the modifier; the figure is optional (no-photo variant = type and actions only). */
.hero--inner {
  padding: var(--s8) 0 var(--s4);
  /* the glow is an ellipse wholly inside the section (right edge <= 97%, bottom <= 93%), fading to 0 at its rim,
     so no hard line shows where the hero ends (fix pass 1c) */
  background: var(--paper);
}
/* finish review A 10-07 (request 6, family E): the radial lime glow that sat behind every inner-hero photo card at 64rem+
   is gone; on white it read as a blurred halo round the card (DESIGN.md Elevation: flat by default, glow is the doors').
   Every inner hero is plain paper at every width. */
.hero--inner .hero__grid { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.hero--inner .hero__text { padding-inline: 0; }
.hero--inner .hero__h1 { max-width: 18ch; }
.hero--inner .hero__photo { margin: var(--s10) 0 0; }
.hero--inner .hero__photo picture { border-radius: var(--r-card); }
.hero--inner .hero__photo img { aspect-ratio: 4 / 3; }
.hero--inner .hero__photo::after { content: none; }
.hero__crumbs { margin-bottom: var(--s4); font-size: var(--fs-small); color: var(--text-2); }
.hero__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0; margin: 0; list-style: none; }
.hero__crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.hero__crumbs li + li::before { content: "/"; color: var(--steel); }
.hero__crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 0.25em; }
.hero__crumbs a:hover { text-decoration-color: var(--ink); }
@media (min-width: 64rem) {
  .hero--inner { padding: 88px 0; }
  .hero--inner .hero__grid {
    min-height: 0; background: none; border-radius: 0; isolation: auto;
    grid-template-columns: minmax(0, 515fr) minmax(0, 445fr); column-gap: clamp(64px, 10vw, 142px); align-items: center;
  }
  .hero--inner .hero__text { padding: 0; color: var(--ink); }
  .hero--inner .hero__text > * { max-width: none; }
  .hero--inner .hero__h1 { max-width: none; }
  .hero--inner .eyebrow { color: var(--ink); }
  .hero--inner .hero__h1 .accent { color: var(--green-text); }
  .hero--inner .hero__company { color: var(--text-2); }
  .hero--inner .hero__actions .textlink--strong { color: var(--ink); border-color: rgb(18 19 17 / 0.55); }
  .hero--inner .hero__actions .textlink--strong:hover { border-color: var(--ink); }
  .hero--inner :where(a, button):focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
  .hero--inner .hero__photo { position: relative; inset: auto; z-index: auto; margin: 0; }
  .hero--inner .hero__photo picture { position: relative; inset: auto; }
  .hero--inner .hero__photo img { aspect-ratio: 1 / 1; height: auto; }
  .hero--inner .hero__proof { position: static; margin-top: var(--s3); }
  .hero--inner:has(.hero__proof) { padding-bottom: 88px; }
  /* no-photo variant: one column, type and actions on PLAIN white (never a glow), a sensible height (fix pass 2, D2/N1) */
  .hero--inner:not(:has(.hero__photo:not([hidden]))) { background: var(--paper); }
  .hero--inner:not(:has(.hero__photo)) { padding: var(--s16) 0 var(--s12); }
  .hero--inner:not(:has(.hero__photo)) .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--inner:not(:has(.hero__photo)) .hero__text > * { max-width: 46rem; }
  /* laptop QA batch 2c: a no-photo hero is a CENTRED column, as Zendesk's no-photo pages (zendesk.com/pricing/,
     2026-09-28): heading, subline and actions on the page's centre line, so the right half is not left empty.
     Legal pages (privacy, accessibility) keep Zendesk's left-aligned legal layout; /about/ keeps its split. */
  .hero--inner:not(:has(.hero__photo, picture)):not(.d-hero--legal, .d-hero--split) .hero__text {
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .hero--inner:not(:has(.hero__photo, picture)):not(.d-hero--legal, .d-hero--split) :is(.hero__text, .gc-hero__main, .gc-hero__side, .hd__body) > * { margin-inline: auto; }
  .hero--inner:not(:has(.hero__photo, picture)):not(.d-hero--legal, .d-hero--split) :is(.gc-hero__main, .gc-hero__side, .hd__body) { width: 100%; max-width: 46rem; justify-items: center; }
  .hero--inner:not(:has(.hero__photo, picture)):not(.d-hero--legal, .d-hero--split) :is(.hero__actions, .hd__actions, .crumbs ol, .hero__crumbs ol) { justify-content: center; }
  .hero--inner:not(:has(.hero__photo, picture)):not(.d-hero--legal, .d-hero--split) :is(.gc-hero__proof, .hb__proof) { justify-content: center; text-align: left; }
  /* the guides' boxed answer is a paragraph to read: centred box, left-aligned text */
  .hero--inner:not(:has(.hero__photo, picture)) .gh__answer { text-align: left; }
}

/* ---------- 404 (reuses hero + router; photo-less ink hero card) ---------- */
@media (min-width: 64rem) { .nf-hero:not(.hero--inner) .hero__grid { min-height: 360px; } }
.nf { padding-bottom: var(--section-y); }
/* the 404 has no hero button, so the phone header button is the page's one filled primary (Zendesk phone bar) */
@media (max-width: 63.99rem) { body:has(.nf-hero) .header__cta { background: var(--lime); border-color: transparent; } }
.nf__help { display: grid; gap: var(--s6); justify-items: center; text-align: center; background: var(--floor); border-radius: var(--r-card); padding: var(--s8) var(--s6); }
.nf__contact p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--s5); }
.nf__contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.nf__addr { font-size: var(--fs-small); color: var(--text-2); }
.nf .gadget { flex-direction: column; text-align: center; }

/* ---------- §3 the trip: Zendesk inset dark section with three stop cards ---------- */
.trip { margin-top: var(--section-y); background: radial-gradient(120% 90% at 50% 100%, var(--ink-3) 0%, var(--ink) 62%); color: var(--on-dark); padding-block: var(--s12); }
@media (min-width: 48rem) { .trip { max-width: var(--wide); margin-inline: var(--s3); border-radius: var(--r-band); padding-block: 88px; } }
@media (min-width: 73.5rem) { .trip { margin-inline: auto; } }
.trip__intro { display: grid; gap: var(--s4); justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto; }
.trip__intro .h2 { max-width: none; }
.trip__answer { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-ink-2); }
.track { margin-top: var(--s10); }
.track__wipe {
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  margin-bottom: var(--s6); font-weight: 600; color: var(--on-dark);
}
.track__wipe::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.track__stops { display: grid; gap: var(--s4); counter-reset: none; }
.stop {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "photo label" "photo pin";
  column-gap: var(--s4); row-gap: var(--s2); align-items: start;
  background: rgb(255 255 255 / 0.06); border: 1px solid var(--hairline-dark); border-radius: 24px; padding: var(--s4);
}
.stop__label { grid-area: label; font-size: 1.25rem; line-height: 1.25; font-weight: 500; padding-top: 30px; }
.stop__photo { grid-area: photo; display: block; border-radius: var(--r-band); overflow: hidden; align-self: start; }
.stop__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.stop__node {
  position: absolute; top: var(--s4); left: calc(var(--s4) + 96px + var(--s4));
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-size: 0.8125rem; font-weight: 700;
}
.stop__pin {
  grid-area: pin; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--on-dark);
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.track__exit {
  margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; text-align: center;
  color: var(--on-ink-2);
}
.track__exit-label { color: var(--on-dark); font-weight: 700; }
@media (min-width: 64rem) {
  .track__stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
  .stop { grid-template-columns: 1fr; grid-template-areas: "photo" "label" "pin"; grid-template-rows: auto auto 1fr; align-content: start; row-gap: var(--s3); padding: var(--s4) var(--s4) var(--s6); border-radius: var(--r-card); }
  .stop__photo { border-radius: 28px; }
  .stop__photo img { aspect-ratio: 4 / 3; }
  .stop__label { padding: var(--s2) var(--s4) 0; font-size: var(--fs-h3); }
  .stop__pin { padding-inline: var(--s4); }
  .stop__node { top: calc(var(--s4) + 16px); left: calc(var(--s4) + 16px); width: 36px; height: 36px; font-size: 1rem; }
}

/* ---------- §4 security: Zendesk split (text left, spec card right) ---------- */
.security { padding-top: var(--section-y); }
.security__grid { display: grid; gap: var(--s6); }
.security__text { display: grid; gap: var(--s4); align-content: start; }
.spec { background: var(--floor); border-radius: var(--r-card); padding: var(--s3) var(--s6); }
.spec__row { display: grid; gap: 2px; padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.spec__row:last-child { border-bottom: 0; }
.spec dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.054em; text-transform: uppercase; color: var(--text-2); }
.spec dd { font-size: 1.0625rem; line-height: 1.45; }
.security__actions { display: grid; gap: var(--s3); justify-items: start; }
.security__link .textlink { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 47.99rem) { .security__cta, .security__cta .btn { width: 100%; } }
@media (min-width: 64rem) {
  .security__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s12); row-gap: var(--s8); align-items: start; }
  .security__text { grid-column: 1; grid-row: 1; }
  .security__actions { grid-column: 1; grid-row: 2; align-self: end; }
  .spec { grid-column: 2; grid-row: 1 / span 2; padding: var(--s6) var(--s10); }
  .spec__row { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; }
}

/* ---------- §5 equity: ink panel (Zendesk partnership panel) ---------- */
.equity { padding-top: var(--section-y); }
.equity__band {
  background: var(--ink); color: var(--on-dark); border-radius: var(--r-card);
  padding: var(--s10) var(--s6); max-width: var(--container);
}
/* the panel sits inside the page gutter at every width (768 was full-bleed with cut corners; fix pass 2) */
.equity__band { width: auto; margin-inline: max(var(--gutter), (100% - var(--container)) / 2); }
@media (min-width: 48rem) { .equity__band { padding: var(--s16) var(--s24); } }
.equity__band > * { max-width: 46rem; }
.equity__band :where(a, button):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
.equity .textlink { color: var(--on-dark); }
.equity__answer { color: var(--on-ink-2); }
.equity__h2 { max-width: 22ch; }
.equity__answer { margin-top: var(--s4); }
.equity__voice { margin-top: var(--s8); font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.equity__push { color: var(--lime); white-space: nowrap; } /* keep "We push for the desk." on one line (fix pass 3) */
.equity__link { margin-top: var(--s6); }
.equity__link .textlink { display: inline; padding-block: 12px; line-height: 1.6; }
.track__wipe { text-wrap: balance; }
/* Zendesk's partnership-panel row at 64rem+: statement left, next step right (fix pass 1, polish) */
@media (min-width: 64rem) {
  /* fix pass 2 (D1): statement | button row, as Zendesk's partnership panel: the link takes the outlined-button shape,
     vertically centred against the statement, aligned to the end. Words unchanged. */
  .equity__band { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s16); padding: var(--s16) var(--s16); }
  /* laptop QA 2026-09-28: same shape as the steps band above it (1150 wide, 16 radius, same glow), not a second size */
  .equity__band {
    max-width: var(--wide); margin-inline: max(var(--s3), (100% - var(--wide)) / 2); border-radius: var(--r-band);
    background: radial-gradient(120% 90% at 50% 100%, var(--ink-3) 0%, var(--ink) 62%);
  }
  .equity__h2, .equity__answer, .equity__voice { grid-column: 1; }
  .equity__link { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; margin-top: 0; }
  .equity__link .textlink {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; white-space: nowrap;
    border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--r-btn); text-decoration: none;
    font-size: 1.125rem; font-weight: 600; line-height: 1.3;
  }
  .equity__link .textlink:hover { border-color: var(--on-dark); background: rgb(255 255 255 / 0.06); }
  .equity__band .equity__foot { grid-column: 1 / -1; max-width: none; }
}
/* buying heading block centred like Zendesk's "Built for businesses of all sizes" (fix pass 1, polish) */
@media (min-width: 64rem) { .buying__text { justify-items: center; justify-self: center; text-align: center; } .buying__text .h2 { max-width: none; } }
.equity__foot { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--hairline-dark); color: var(--on-ink-2); max-width: 46rem; }
.equity__foot .textlink { color: var(--on-dark); white-space: nowrap; } /* never leave "by side →" alone (batch 2b) */

/* ---------- §6 buying: split with photo card and spec rows ---------- */
.buying { padding-top: var(--section-y); }
.buying__grid { display: grid; gap: var(--s6); }
.buying__text { display: grid; gap: var(--s3); }
.buying__sub { font-size: var(--fs-lead); color: var(--text-2); }
.buying__media { display: grid; gap: var(--s6); }
.buying__photo { border-radius: var(--r-card); overflow: hidden; }
.buying__photo picture, .zd-photo picture, .stop__photo { display: block; height: 100%; }
.buying__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.worries { background: var(--floor); border-radius: var(--r-card); padding: var(--s3) var(--s6); }
.worries li { padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.worries li:last-child { border-bottom: 0; }
.worries strong { display: block; font-weight: 600; font-size: 1.125rem; margin-bottom: 2px; }
.buying__next { display: grid; gap: var(--s6); }
.buying__cta .btn { min-width: 12rem; }
.fork__q { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; }
.fork__list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.fork__list li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fork__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgb(18 19 17 / 0.55); text-decoration: none; font-weight: 600;
}
.fork__list a:hover { border-color: var(--ink); background: var(--floor); }
.fork__cue { color: var(--text-2); font-size: var(--fs-small); }
@media (max-width: 47.99rem) { .buying__cta .btn { width: 100%; } }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .buying__media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .buying__photo img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 64rem) {
  .buying__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s12); row-gap: var(--s10); }
  .buying__text { grid-column: 1 / -1; max-width: 46rem; }
  .buying__media { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: stretch; }
  .buying__photo img { height: 100%; aspect-ratio: auto; }
  .worries { padding: var(--s4) var(--s10); }
  /* laptop QA 2026-09-28: the question, its four chips on one centred row, the Nonprofits note as a caption under its
     chip, then the button (was: a lone button in a left column, chips wrapping, the note wedged between chips) */
  .buying__next { grid-column: 1 / -1; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s6); margin-top: var(--s4); }
  .buying__next .fork { order: -1; display: grid; justify-items: center; }
  .fork__list { justify-content: center; flex-wrap: nowrap; padding-bottom: var(--s8); }
  .fork__list li:first-child { position: relative; }
  .fork__list li:first-child .fork__cue { position: absolute; top: calc(100% + 6px); left: 17px; white-space: nowrap; text-align: left; }
}

/* ---------- §7 voice: Zendesk customer-quote card ---------- */
.voice { padding-top: var(--section-y); }
.voice__col { }
.voice__col > * { }
.voice .voice__h2 { display: block; text-align: center; margin-bottom: var(--s6); }
.quote { background: var(--floor); border-radius: var(--r-card); padding: var(--s8) var(--s6); }
.quote__text { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.quote__who { margin-top: var(--s5); font-weight: 700; }
.awards { display: grid; gap: var(--s3); margin-top: var(--s6); }
.awards li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: var(--s3) var(--s5); border: 1px solid var(--hairline); border-radius: 20px; font-weight: 600; font-size: var(--fs-small); }
.awards li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
@media (min-width: 48rem) {
  .quote { padding: var(--s16) var(--s24); text-align: center; }
  .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .awards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } }

/* ---------- FAQ (shared): Zendesk accordion, heading left, rows with round +/- ---------- */
.faq { padding-top: var(--section-y); }
.faq__grid { display: grid; gap: var(--s6); }
.faq__list { border-top: 1px solid var(--hairline); }
/* Open Q&A (template pass 09-29, X8): every answer is visible in the HTML, question as an H3, answer directly under it.
   No accordion: seo-aeo NEVER 3 (collapsed JS answers are not extracted) and 40-60 word answers read in one glance.
   Markup: <div class="qa"><h3 class="qa__q">Question?</h3><div class="qa__a" id="qa-n"><p>Answer…</p></div></div> */
.qa { display: grid; gap: var(--s2); padding: var(--s6) 0; border-bottom: 1px solid var(--hairline); }
.qa__q { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); max-width: 40rem; }
.qa__a { max-width: 66ch; color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; } /* 66ch cap (DESIGN.md), was 42rem (~70ch) */
.qa__a > * + * { margin-top: var(--s3); }
.qa__links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: var(--s2); }
.qa__links .textlink { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.qa__a p .textlink { display: inline; padding-block: 10px; color: var(--ink); }
.qa__a p .textlink:focus-visible {
  outline: 2px solid transparent; box-shadow: none;
  background-color: var(--ink); background-clip: content-box; color: var(--paper);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (min-width: 64rem) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); align-items: start; }
  .qa { padding: var(--s8) 0; }
  .qa__q { font-size: 1.3125rem; }
  .faq__grid > .h2 { position: sticky; top: calc(var(--header-h) + var(--s8)); }
}

/* ---------- closing band (shared): floor panel holding the form, ink contact card ---------- */
.closing { padding-block: var(--section-y); }
.closing .wrap { max-width: calc(var(--wide) + 2 * var(--gutter)); }
.closing__grid { display: grid; gap: var(--s6); background: var(--floor); border-radius: var(--r-card); padding: var(--s8) var(--s5); }
/* design run 10-06 (family D finding on /buyback/ at 390): a wide intrinsic control (native file input) grew the grid's
   auto track past the panel; grid items never set the panel's width. */
.closing__grid > * { min-width: 0; }
.closing__head { display: grid; gap: var(--s2); }
.closing__sub { font-size: var(--fs-lead); max-width: 40rem; } /* lead measure (DESIGN.md 66ch rule) */
.closing__hint { color: var(--text-2); }
@media (min-width: 48rem) { .closing__grid { padding: var(--s16); } }
@media (min-width: 64rem) {
  .closing__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s12); row-gap: var(--s8); padding: var(--s16) var(--s16) var(--s16); }
  .closing__head { grid-column: 1 / -1; grid-row: 1; }
  .form { grid-column: 1; grid-row: 2; }
  .panel { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + var(--s8)); }
  .form__button { width: auto; }
}

/* ---------- form (shared) ---------- */
.form { display: grid; gap: var(--s5); max-width: 40rem; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 600; line-height: 1.35; padding: 0; }
.field__help { font-size: var(--fs-small); color: var(--text-2); line-height: 1.4; }
.field__input {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--r-input);
  background: var(--paper); font-size: 1rem; line-height: 1.3;
}
.field__input:hover { border-color: var(--ink); }
.field__input:focus-visible { border-color: var(--ink); }
.field__input--short { max-width: 10rem; }
.field__select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; max-width: 18rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat;
}
.field__textarea { min-height: 7rem; resize: vertical; }
.field--group { border: 0; padding: 0; margin: 0; }
.field.is-invalid .field__input { border: 2px solid var(--err); }
.field__error { color: var(--err); font-weight: 700; font-size: var(--fs-small); display: flex; gap: 6px; align-items: flex-start; }
.field__error-icon { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--err); color: var(--paper); font-size: 0.75rem; margin-top: 1px; }
.form__summary-errors { background: var(--paper); border: 2px solid var(--err); border-radius: 20px; padding: var(--s5); }
.form__summary-errors:focus { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.form__errors-title { font-weight: 700; font-size: 1rem; line-height: 1.4; }
.form__summary-errors ul { margin-top: var(--s2); padding-left: var(--s5); list-style: disc; }
.form__summary-errors a { color: var(--err); font-weight: 700; }
.form__summary-errors li a { display: inline-flex; align-items: center; min-height: 44px; }

.intent { padding: var(--s4) var(--s5); background: var(--paper); border-radius: 20px; }
.intent__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); font-weight: 600; font-size: 1.125rem; }
/* design run 10-06: the "·" between the current intent and the change link dangled at the end of a line at 390; the
   separator is now the gap (DESIGN.md: a separator is layout) and the link's own underline. */
.intent__summary > [aria-hidden] { display: none; }
.intent__note:empty { display: none; }
.intent__note { font-size: var(--fs-small); background: var(--ink); color: var(--on-dark); padding: var(--s2) var(--s3); border-radius: 12px; margin-top: var(--s2); }
.intent__choices { border: 0; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
.intent__choices legend { margin-bottom: var(--s2); }
.choice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--field-line); border-radius: 16px; background: var(--paper); cursor: pointer; }
.choice:has(input:checked) { border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--lime); }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.choice__label { display: block; font-weight: 600; }
.choice__desc { display: block; font-size: var(--fs-small); color: var(--text-2); line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* 10px 16px 7px: the pill carries the same 3px top-heavy padding as .btn so its label reads centred (DESIGN.md Optical centre) */
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px 7px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--paper); font-size: var(--fs-small); font-weight: 600; }
.chip input:checked + span { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }

.details__toggle { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.details__sign { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1px solid var(--field-line); }
.details__sign::before, .details__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); }
.details__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.details__toggle[aria-expanded="true"] .details__sign { background: var(--lime); border-color: var(--lime); }
.details__toggle[aria-expanded="true"] .details__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.details__panel { display: grid; gap: var(--s4); padding: var(--s5); background: var(--paper); border-radius: 20px; margin-top: var(--s2); }

.consent__label { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; min-height: 44px; }
.consent__label input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { display: grid; gap: var(--s3); justify-items: start; }
.form__button { width: 100%; }
.form__button[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.form__next { font-weight: 600; }
.form__privacy { font-size: var(--fs-small); color: var(--text-2); }
.form__privacy a { color: var(--ink); font-weight: 600; }
.form__pointer .textlink { display: inline-flex; align-items: center; min-height: 44px; }
.form__status { background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; padding: var(--s4) var(--s5); font-size: var(--fs-small); width: 100%; }
.form__status--error { border-color: var(--err); }
.form__status .btn { margin-top: var(--s3); min-height: 44px; }

/* contact panel: ink card, phone number large */
.panel { align-self: start; display: grid; gap: var(--s2); background: var(--ink); color: var(--on-dark); border-radius: 32px; padding: var(--s6); }
.panel__lead { font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; }
.panel__phone a {
  display: inline-flex; align-items: center; min-height: 48px; font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); text-decoration: none; color: var(--lime); line-height: 1.2;
}
.panel__phone a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.panel__email a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.panel__address { font-size: var(--fs-small); color: var(--on-ink-2); }
/* Tom 10-13 item 5: phone hours sit tight under the number, quieter than it, same tone as the address line */
.panel__hours { margin-top: calc(-1 * var(--s2)); font-size: var(--fs-small); color: var(--on-ink-2); }
.panel :where(a):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
@media (min-width: 64rem) { .panel { padding: var(--s10); } }

/* ---------- footer (shared): Zendesk ink footer ---------- */
.footer { background: var(--ink); color: var(--on-dark); padding-block: var(--s16) var(--s10); font-size: var(--fs-small); }
.footer a { color: var(--on-dark); }
.footer :where(a):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
.footer__top { display: grid; gap: var(--s4); padding-bottom: var(--s10); border-bottom: 1px solid var(--hairline-dark); }
.footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__logo img { width: 124px; filter: brightness(0) invert(1); }
.footer__company { display: grid; gap: var(--s1); max-width: 36rem; font-size: 1rem; color: var(--on-ink-2); }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s6); padding-block: var(--s10); }
.footer__h { font-weight: 600; font-size: 1rem; margin-bottom: var(--s3); }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; line-height: 1.3; padding: 4px 0; }
.footer__col a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; }
.footer__base { display: grid; gap: var(--s6); padding-top: var(--s10); border-top: 1px solid var(--hairline-dark); }
.footer__nap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s6); color: var(--on-ink-2); }
.footer__nap a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--on-dark); }
.footer__slogan { font-weight: 500; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.015em; color: var(--lime); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5); color: var(--on-ink-2); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 48rem) { .footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s16); align-items: center; }
  .footer__base { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s10); }
  .footer__slogan { grid-column: 1 / -1; grid-row: 1; padding-bottom: var(--s8); border-bottom: 1px solid var(--hairline-dark); }
  .footer__legal { grid-column: 1 / -1; }
}

/* ---------- phone tightening ---------- */
@media (max-width: 47.99rem) {
  .qa { padding: var(--s5) 0; }
  .qa__q { font-size: 1.125rem; }
  .qa__a { font-size: 1rem; }
  /* home: keep the phone page near Zendesk's density without dropping anything */
  .gadget img { width: 56px; }
  .router__grid { gap: var(--s8); }
  .doors { gap: var(--s3); }
  .door { gap: var(--s2); }
  .door__cue { padding-top: var(--s2); }
  .buying__photo img { aspect-ratio: 16 / 9; }
  .awards { gap: var(--s2); }
  .awards li { min-height: 44px; padding: var(--s2) var(--s4); border-radius: 14px; }
  .quote { padding: var(--s6) var(--s5); }
  .fork__cue { flex-basis: 100%; }
  .closing__grid { border-radius: 32px; }
  .panel { padding: var(--s5); border-radius: 24px; }
  .footer { padding-block: var(--s12) var(--s8); }
  .footer__nav { gap: var(--s6) var(--s4); padding-block: var(--s8); }
  .footer__col a { min-height: 44px; }
}

/* Windows forced colours */
@media (forced-colors: active) {
  .btn, .zd-card, .zd-panel, .door, .spec, .worries, .quote, .closing__grid, .panel, .stop, .hero__proof { border: 1px solid CanvasText; }
  .chip input:checked + span { outline: 3px solid Highlight; outline-offset: -3px; }
  .drawer__sign::before, .drawer__sign::after,
  .details__sign::before, .details__sign::after,
  .header__menu-icon, .header__menu-icon::before, .header__menu-icon::after { background: CanvasText; }
  .header__menu[aria-expanded="true"] .header__menu-icon { background: transparent; }
  .field__select { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 12px; }
  .hero__photo::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .utility, .header, .drawer, .footer__nav { display: none !important; }
  .trip, .footer, .zd-panel, .zd-dark, .panel { background: none; color: var(--ink); }
}

/* ---------- home hero + routing boxes (Tom GO 2026-09-28) ---------- */
/* Proposal: the promise names BOTH sides of the business (in and out), the company line says what we are,
   and the three jobs sit as one selector directly under the photo, inside a short laptop screen.
   No hero buttons: the three doors are the calls to action; the header keeps the quote button. */
.hx { padding: var(--inset) var(--inset) 0; }
.hx__card { position: relative; isolation: isolate; border-radius: var(--r-hero); overflow: hidden; background: var(--ink); color: var(--on-dark); }
/* Tom's fold line (09-28): on any laptop/desktop window the hero photo takes whatever height is left so the three
   routing buttons are cut in half by the fold (Tom sketch 09-28). 190px = card top padding + title + 3-line paragraph + gap + half the CTA.
   Floor 300px so short windows keep a real hero (there the buttons fall just below the fold). */
@media (min-width: 64rem) {
  .hx__card { display: grid; align-content: center;
    min-height: max(300px, calc(100svh - var(--header-h) - var(--utility-h) - 2 * var(--inset) - 290px)); }
  /* 290px (was 190) since the boxes gained an icon row and a pain-point hook (Tom 09-28): keeps the fold through the box CTAs. */
}
.hx__card picture, .hx__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; z-index: -2; }
/* Tom 09-29: the facility video loops behind the hero (muted, no controls, decorative). It sits over the photo, which
   stays as the fallback and is all that shows when the visitor asks for reduced motion. */
.hx__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: -2; pointer-events: none;
  /* The source frames are small photos zoomed in, so grain is baked in. A slight blur turns it into soft focus behind the
     text; the 1.04 scale hides the blurred edge. Remove both once a full-resolution version exists. */
  filter: blur(1.6px); transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .hx__video { display: none; } }
.hx__card::after { 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) 46%, rgb(18 19 17 / 0.45) 66%, rgb(18 19 17 / 0.08) 84%); }
.hx__text { padding: 28px max(var(--s10), (100vw - var(--container)) / 2 - var(--inset)); }
.hx__text > * { max-width: 44rem; }
@media (min-width: 64rem) { .hx__h1 .accent { display: block; } }
.hx__eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); }
/* 10-09 Tom: every hero eyebrow takes the K-12 colour, the site grey (on-ink-2 on ink; text-2 where the .hero text sits on paper
   below 64rem), and sits 12px above the H1 */
.hx__eyebrow { color: var(--on-ink-2); }
.hero .hx__eyebrow { margin: 0 0 var(--s3); color: var(--text-2); }
@media (min-width: 64rem) { .hero .hx__eyebrow { color: var(--on-ink-2); } }
.hx__h1 { margin-top: 10px; font-size: clamp(2.25rem, 0.9rem + 2.65vw, 3.5rem); line-height: 1.03; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
.hx__h1 .accent { color: var(--lime); }
.hx__sub { margin-top: 10px; max-width: 40rem; font-size: var(--fs-lead); line-height: 1.5; color: #e4e5df; }
.hx__since { margin-top: 10px; font-size: var(--fs-small); font-weight: 700; color: var(--on-ink-2); }

.hx__route { margin: 16px 0 0; }
@media (min-width: 64rem) { .hx__route { padding-inline: max(var(--s10), (100vw - var(--container)) / 2 - var(--inset)); } }
/* Three doors drawn to Tom's own sketch (09-28): title, short paragraph, one CTA; no photo. The row sits on the same
   left/right edges as the hero text. Polish comes from depth: a white card on a soft two-layer shadow. (.door2__panel
   rules below are unused since the photos came out; kept only until the next CSS tidy.) */
.hx__doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.door2 { position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(18 19 17 / 0.06), 0 12px 32px -14px rgb(18 19 17 / 0.28), inset 0 0 0 1px rgb(18 19 17 / 0.06);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); }
.door2:hover { transform: translateY(-4px);
  box-shadow: 0 2px 4px rgb(18 19 17 / 0.06), 0 24px 44px -18px rgb(18 19 17 / 0.38), inset 0 0 0 1px rgb(18 19 17 / 0.08); }
.door2__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 28px 28px; }
/* Tom 09-28 routing anatomy: lime icon tile + who-it's-for label, then the buyer's pain point as the hook, then what
   is behind the click. The label stays the h2 (it names the service); the hook carries the visual weight. */
.door2__head { display: flex; align-items: center; gap: 12px; }
.door2__ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.door2__ico svg { width: 20px; height: 20px; }
.door2__label { font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.door2__hook { margin-top: 16px; font-size: clamp(1.25rem, 1rem + 0.55vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.22; color: var(--ink); text-wrap: pretty; }
.door2__desc { margin-top: 10px; margin-bottom: 20px; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
/* One door, one action (Tom 09-28 + his routing note): an outlined ghost CTA that names its destination, and its
   hit area stretched over the whole card, so the entire box is the door. Book a call stays the only solid button. */
.door2__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; min-height: 44px; padding: 9px 18px;
  border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  transition: background-color .3s cubic-bezier(.2,.8,.2,1), color .3s cubic-bezier(.2,.8,.2,1); }
.door2__cta svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.door2__cta::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
.door2:hover .door2__cta { background: var(--ink); color: var(--lime); }
.door2:hover .door2__cta svg { transform: translateX(4px); }
.door2:hover { box-shadow: 0 2px 4px rgb(18 19 17 / 0.06), 0 24px 44px -18px rgb(18 19 17 / 0.38), inset 0 0 0 2px var(--lime); }
.door2:has(.door2__cta:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.door2__cta:focus-visible { outline: none; }
.door2__panel { position: relative; flex: 1; min-height: 230px; margin: 0 10px 10px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: var(--ink); }
.door2__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.door2__panel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 70% at 50% 115%, rgb(142 198 63 / 0.5) 0%, rgb(142 198 63 / 0.16) 38%, rgb(142 198 63 / 0) 62%),
    linear-gradient(180deg, rgb(18 19 17 / 0.6) 0%, rgb(18 19 17 / 0.22) 45%, rgb(18 19 17 / 0.55) 100%); }
.door2:hover .door2__panel img { transform: scale(1.05); }
.door2 :is(a, .btn):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .door2, .door2__panel img { transition: none; } .door2:hover { transform: none; } .door2:hover .door2__panel img { transform: none; } }

.hx__more { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; font-size: 0.9375rem; }
.hx__more a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.hx__more span { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-2); }
/* phones (design run 10-06, review-1006 home R18): the label takes its own line and the links sit two to a row, so
   "Watch us sell live" and "Gaming" no longer float alone under a ragged centred line. */
@media (max-width: 47.99rem) {
  .hx__more { row-gap: 0; column-gap: var(--s4); }
  .hx__more > span { flex: 1 1 100%; justify-content: center; min-height: 36px; }
  .hx__more > a { flex: 1 1 42%; justify-content: center; }
}

@media (max-width: 63.99rem) {
  .hx__text { padding: 32px 24px; }
  .hx__card::after { background: linear-gradient(180deg, rgb(18 19 17 / 0.84) 0%, rgb(18 19 17 / 0.78) 100%); }
  .hx__route { margin-top: 12px; }
  .hx__doors { grid-template-columns: 1fr; gap: 12px; }
  .door2__panel { min-height: 170px; }
}

/* Hero dual CTA (Tom GO 09-28, notebook 915eeeb5 #21: primary high-intent + secondary low-friction). Solid lime for ready
   buyers; a white ghost for the ones still looking, pointing at the before-pickup checklist we already publish. */
.hx__actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hx__primary { border-radius: 999px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 8px 20px -10px rgb(142 198 63 / 0.95); }
/* finish review A 10-07 (request 12, family D): the landing heroes (.iv-hx: /itad/, /itad/data-destruction/) draw their
   primary flat, like every .btn--primary hero (DESIGN.md: no shadow at rest). Home keeps the glow: its hero is Tom's
   approved v37 (pixel alignment only); whether Home drops it too is his call. */
.iv-hx .hx__primary { box-shadow: none; }
.hx__ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.55); color: var(--on-dark); font-weight: 600; text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.hx__ghost svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.hx__ghost:hover { border-color: var(--on-dark); background: rgb(255 255 255 / 0.08); }
.hx__ghost:hover svg { transform: translateX(3px); }
.hx__ghost:focus-visible, .hx__primary:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
/* Tom 09-28 language pass: the second CTA is now "Secure Data Destruction" (-> /itad/#proof), a real button on every width,
   so the phone rule that turned the old checklist ghost into a text link is gone. */
/* Proof line under the buttons (Tom 09-28): one quiet line, the data proof now lives behind "Secure Data Destruction".
   Florence and 2017 stay two facts split by a dot until Tom confirms the company was in Florence in 2017. */
.hx__proof { margin-top: 16px; font-size: var(--fs-small); font-weight: 600; color: var(--on-ink-2); }
.hx__proof span { margin: 0 6px; color: var(--lime); }
@media (max-width: 47.99rem) { .hx__actions .hx__primary, .hx__actions .hx__ghost { flex: 1 1 100%; justify-content: center; } }
/* Award row under the routing boxes, to Tom's Asana-style example (09-28): one prominent line on the left, colour logos
   in a row on the right, no years, no captions (the names live in the alt text). Edges match the routing boxes. */
.hx__trust { margin-top: 40px; display: grid; gap: 20px; align-items: center; }
.hx__trust-line { max-width: 18ch; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.25; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.hx__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.hx__logos img { display: block; height: 56px; width: auto; }
.hx__logos img[src*="smart50"] { border-radius: 10px; }
@media (min-width: 64rem) {
  .hx__trust { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 48px;
    padding-inline: max(var(--s10), (100vw - var(--container)) / 2 - var(--inset)); }
  .hx__logos { justify-content: space-between; flex-wrap: nowrap; }
  .hx__logos img { height: 64px; }
}
@media (max-width: 47.99rem) { .hx__trust { padding-inline: 4px; } .hx__logos { gap: 16px 24px; } .hx__logos img { height: 48px; } }
/* Tom 09-28 pill fix (12px corners, text optically lowered 3px, second button white with a thin outline) now lives in
   the header block near the top of this file (template pass 09-29). */
.hx__primary, .hx__ghost { border-radius: 12px; }
.hx__primary { display: inline-flex; align-items: center; justify-content: center; padding-top: 14px; padding-bottom: 10px; line-height: 1.3; }
.hx__ghost { padding-top: 13px; padding-bottom: 10px; line-height: 1; }

/* =====================================================================================================================
   TEMPLATE PASS 2026-09-29 (web, template owner). Shared parts every page uses. Page builders may not edit this file;
   the classes below are documented in handoffs/draft4/TEMPLATE-NOTES.md.
   ===================================================================================================================== */

/* ---------- breadcrumb bar (X20): first thing in <main> on every inner page, starts at Home ---------- */
nav.crumbs { padding-top: var(--s2); }
nav.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-small); color: var(--text-2); }
nav.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
nav.crumbs li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--text-2); border-top: 1.5px solid var(--text-2);
  transform: rotate(45deg); margin-right: 4px; }
nav.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
nav.crumbs a:hover { text-decoration-color: currentColor; }
nav.crumbs [aria-current="page"] { color: var(--text-2); font-weight: 400; }
@media (min-width: 64rem) { nav.crumbs .wrap { max-width: none; padding-inline: max(var(--gutter), (100vw - var(--container)) / 2); } }

/* ---------- drawer: "Talk to us" (X3: the second header button lives in the phone menu) ---------- */
.drawer__talk { font-size: 1.125rem; }
.drawer__foot li + li { border-top: 1px solid var(--hairline); }

/* ---------- form: who reads it (X5) + proof in the contact card (X6) ---------- */
.form__who { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--ink); max-width: 36rem; }
.form__who::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  background: var(--lime) no-repeat center / 13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121311' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.form__next { font-weight: 400; color: var(--text-2); }
.panel__proof { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--hairline-dark); display: grid; gap: var(--s3); }
.panel__proof-h { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; color: var(--on-ink-2); }

/* ---------- proof list (X6 and anywhere approved proof lines sit as a list): lime check, one line each ---------- */
.proof-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.proof-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.45; }
.proof-list li::before { content: ""; width: 22px; height: 22px; margin-top: 0; border-radius: 50%;
  background: var(--lime) no-repeat center / 13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121311' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.panel .proof-list li { color: var(--on-dark); }
/* the same list laid out in a row (under a hero, beside a button): one per line on phones */
.proof-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: 0; padding: 0; list-style: none; font-weight: 600; }
.proof-row li { display: inline-flex; align-items: center; gap: 10px; }
.proof-row li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--lime) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121311' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
@media (max-width: 47.99rem) { .proof-row { flex-direction: column; } }

/* ---------- footer additions (X26, X23) ---------- */
/* design run 10-06: the two trust facts wrapped at 1920 with a lone lime "·" ending line 1. Each fact now carries its
   own lime dot (the .hx__facts / .proof idiom) and wraps as a unit; the typed dot is gone at every width. */
.footer__trust { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); color: var(--on-dark); font-weight: 600; }
.footer__trust .footer__dot { display: none; }
.footer__fact { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.footer__fact::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
@media (max-width: 47.99rem) { .footer__trust { flex-direction: column; gap: var(--s1); } .footer__fact { align-items: flex-start; white-space: normal; }
  .footer__fact::before { margin-top: 0.5em; } }
.footer__col a .footer__sub { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.35; color: var(--on-ink-2); font-weight: 400; }
.footer__col a:has(.footer__sub) { flex-direction: column; align-items: flex-start; justify-content: center; }
.footer__col a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* ---------- home hero video pause control (X21, WCAG 2.2.2). Small, bottom-right of the photo card ---------- */
.hx__pause { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.4); background: rgb(18 19 17 / 0.55); color: var(--on-dark); cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hx__pause:hover { background: rgb(18 19 17 / 0.8); border-color: var(--on-dark); }
.hx__pause:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; box-shadow: none; }
.hx__pause svg { width: 16px; height: 16px; fill: currentColor; }
.hx__pause .hx__play-i, .hx__pause[aria-pressed="true"] .hx__pause-i { display: none; }
.hx__pause[aria-pressed="true"] .hx__play-i { display: block; }
@media (max-width: 47.99rem) { .hx__video, .hx__pause { display: none; } }

/* ---------- BUILDER KIT: section rhythm, grids, cards, steps, numeral, answer, prose ----------
   Use these instead of new page CSS. Lime/black/white only: surfaces are paper (white), tint (var(--floor), lime at
   ~15%) or ink. One filled lime button per view. */
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--tint { background: var(--floor); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--ink :where(a, button, input, select, textarea, [tabindex]):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); }
.section--ink .accent { color: var(--lime); }
.section-head { display: grid; gap: var(--s4); max-width: 46rem; margin-bottom: var(--s10); }
.section-head--center { justify-items: center; text-align: center; margin-inline: auto; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); } }
@media (min-width: 64rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* split: heading left, answer or media right; equal halves at 64rem (X16: never leave one half near-empty) */
.split { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 64rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); } .split--center { align-items: center; } }

/* card: one component (X18). White with a hairline on paper; tint and ink variants. One action goes last (.card__link);
   .card--link makes the whole card the hit area. No pills, no decorative tick-boxes. */
.card { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); border-radius: 24px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.card--tint { background: var(--floor); box-shadow: none; }
.card--ink { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.card--ink .card__text { color: var(--on-ink-2); }
.card__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.card__text { color: var(--text-2); line-height: 1.55; }
.card__link { margin-top: auto; padding-top: var(--s2); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; color: inherit; }
.card--link .card__link::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.card--link:has(.card__link:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.card--link .card__link:focus-visible { box-shadow: none; outline: none; }
@media (hover: hover) {
  .card--link { transition: box-shadow var(--dur) var(--ease); }
  .card--link:hover { box-shadow: inset 0 0 0 2px var(--lime), 0 16px 32px -20px rgb(18 19 17 / 0.4); }
  .card--link:hover .card__link { text-decoration-color: currentColor; }
}
@media (min-width: 48rem) { .card { padding: var(--s8); } }

/* steps: numbered, a real <ol>. Vertical on phones; .steps--row lays 3-4 short steps in a row at 64rem */
.steps { counter-reset: step; display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s4); row-gap: 4px; align-items: start; }
.steps > li::before { content: counter(step); grid-row: span 2; 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; }
.steps__title { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; padding-top: 9px; }
.steps__text { color: var(--text-2); line-height: 1.55; }
.section--ink .steps__text, .card--ink .steps__text { color: var(--on-ink-2); }
@media (min-width: 64rem) {
  .steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s8); }
  .steps--row > li { grid-template-columns: minmax(0, 1fr); }
  .steps--row > li::before { grid-row: auto; margin-bottom: var(--s3); }
  .steps--row .steps__title { padding-top: 0; }
}

/* numeral: one proof number set large (e.g. "35,000+", always with its year in the label). Lime on ink; ink on tint */
.stat { display: grid; gap: var(--s3); align-content: center; padding: var(--s8); border-radius: var(--r-card); background: var(--ink); color: var(--on-dark); }
.stat__num { font-size: clamp(3.5rem, 2.2rem + 5vw, 6rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.035em; color: var(--lime);
  font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--fs-lead); line-height: 1.45; color: var(--on-ink-2); max-width: 26rem; }
.stat--tint { background: var(--floor); color: var(--ink); }
.stat--tint .stat__num { color: var(--ink); }
.stat--tint .stat__label { color: var(--text-2); }

/* answer: the 40-60 word lead answer directly under a question heading (X8, X22: open with "Regadget …") */
.answer { font-size: var(--fs-lead); line-height: 1.55; max-width: 44rem; color: var(--ink); }

/* prose: articles and guides (X19: 18px at about 66 characters) */
.prose { font-size: var(--fs-prose); line-height: 1.65; max-width: 66ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-h2); line-height: var(--lh-head); margin-top: 1.6em; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.25; margin-top: 1.4em; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose a { text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; font-weight: 600; }

/* arrow text link (the one "go to" link style) */
/* finish review A 10-07 (request 3, family D): inline-block, not inline-flex, so a label that wraps keeps the arrow right
   after its last word instead of pushed to the far edge of a full-width flex box at 390. 10 + 24 + 10 keeps the 44px
   target. Same values as D's page-scoped copies, which are now redundant. */
.link-arrow { display: inline-block; min-height: 0; padding-block: 10px; line-height: 24px; font-weight: 700; color: inherit;
  text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link-arrow::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 8px; vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease); }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow:hover::after { transform: translateX(3px); }
/* inline arrow icon (design run 10-06): <span class="ico-arrow" aria-hidden="true">→</span>. The glyph stays in the markup
   for copy-paste and old browsers but is pushed out of the box; the drawn arrow takes the link's colour. --up turns it
   for an in-page link that scrolls up. .mp__foot gets the same treatment without a class (shared header markup). */
/* .form__pointer (shared form on every page) carries the same glyph span: drawn as the icon with no markup change; an in-page
   target (href="#…") points back up the page, so that one turns (family D's request, 10-06). */
.form__pointer a[href^="#"] > [aria-hidden] { transform: rotate(-90deg); }
.ico-arrow, .mp__foot a > [aria-hidden], .form__pointer a > [aria-hidden] { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; overflow: hidden;
  white-space: nowrap; text-indent: 200%; background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease); }
.ico-arrow--up { transform: rotate(-90deg); }
a:hover > .ico-arrow:not(.ico-arrow--up), .mp__foot a:hover > [aria-hidden] { transform: translateX(3px); }
a:hover > .ico-arrow--up { transform: rotate(-90deg) translateX(3px); }

/* touch: hover lifts only where hover exists (X18: guard :hover for touch) */
@media (hover: none) { .door2:hover { transform: none; } }

/* Retire devices menu: second group heading (Business / Education), Tom 2026-09-30 */
.mp__head--next { margin-top: var(--s6); }

/* ---------- One hero for every landing page (Tom 10-01: "fix all our HEROs... shouldn't the HERO be full width of the
   screen?"; Home "can match the others" now the routing boxes no longer need it). The /itad/ hero is the pattern: text
   on solid ink at left, a real photo at right, and the card runs the full window width with square ends. The text column
   still starts on the logo/menu line. Research kept: the card stops short of the fold so the next section peeks in
   (webdesign-page-interface WD-09: never a false floor). Mirrors pages-g2-itad.css so any page can use hx + iv-hx. ---------- */
.hx__card { margin-inline: calc(-1 * var(--inset)); border-radius: 0; }
/* Tom 10-09: "the HOME page hero never got its height adjusted... it's shorter than the rest of the page heroes" (498 vs 596px at
   1280x900). Home takes the service-page hero height (pages-schools-v3 .sv-hero clamp + its 16px), superseding the 09-28 fold rule. */
@media (min-width: 64rem) {
  .hx:not(.iv-hx) .hx__card { min-height: clamp(476px, calc(100svh - var(--header-h) - var(--utility-h) - 184px), 596px); }
  /* Tom 10-09: "only have the video extend out as far as the images are on the other pages": the video and its poster
     photo fill the right side only (from 45%), fading in from solid ink like the service-page hero photos. */
  .hx:not(.iv-hx) .hx__card picture, .hx:not(.iv-hx) .hx__video { inset: 0 0 0 45%; width: 55%; }
  .hx:not(.iv-hx) .hx__card picture img { inset: 0; width: 100%; }
  .hx:not(.iv-hx) .hx__card::after { background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 45%, rgb(18 19 17 / 0.7) 52%, 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%); }
}
.iv-hx .hx__card::after { display: none; }
.iv-hx__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.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__photo .hx__video { z-index: 0; } /* the blurred, 1.04-scaled video is clipped to the photo side */
.iv-hx__text .hx__sub { max-width: 36rem; }
@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; }
  .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%); }
}

/* Rollout (Tom 10-01 go): the older ink photo heroes (g2, bv, de, lv, np, pv, sv and the About g5 card) take the same full
   window width and square ends as the shared hero above. Each page sheet caps its card at 1440px and offsets its text
   from that cap, so this one block wins on specificity and puts every text column back on the logo/menu line. Reading
   pages (.hero--inner: guides, playbooks, contact, warranty, gaming) keep their own header. */
@media (min-width: 64rem) {
  body .hero:not(.hero--inner) { padding-inline: 0; }
  body .hero:not(.hero--inner) .hero__grid { max-width: none; border-radius: 0; }
  /* :where() (finish review A 10-07, request 7, family C): (0,1,1) instead of (0,3,2). Still beats the base radius above
     (same weight, later), and every full-bleed hero sheet already squares its own picture (.g2/.bv/.de/.np/.sv/.pv-hero),
     so a framed-photo hero can round its card with a plain page selector. */
  :where(body .hero:not(.hero--inner)) .hero__photo picture,
  :where(body .hero:not(.hero--inner)) .hero__photo::after { border-radius: 0; }
  body .hero:not(.hero--inner) .hero__text { padding-left: max(40px, (100vw - var(--container)) / 2); }
  body .g5-hero { padding-inline: 0; }
  body .g5-hero .g5-hero__card { border-radius: 0; }
  body .g5-hero .g5-hero__text { padding-left: max(var(--s16), (100vw - var(--container)) / 2); }
}
@media (max-width: 63.99rem) {
  body .g5-hero { padding-inline: 0; }
  body .g5-hero .g5-hero__card { border-radius: 0; }
}

/* Tom 10-01 ("yes on the home"): Home keeps the full-width card but the facility video plays behind the whole hero again,
   with the old left-to-right ink grade under the words. The card now spans the window, so the text column starts on the
   container line without subtracting --inset (same alignment as the iv-hx pages). */
@media (min-width: 64rem) {
  .hx:not(.iv-hx) .hx__text { padding-inline: max(var(--s10), (100vw - var(--container)) / 2); }
}

/* 10-06: endpoints + PSA/RMM are MSP questions; hide them when another partner type is chosen (every page loads site.css) */
form:has(input[name=partner_type]:checked:not([value=msp])) [data-ptype-only="msp"] { display: none !important; }

/* =====================================================================================================================
   FINISH REVIEW A, 2026-10-07: the sitewide requests collected from families B-E (handoffs/plans/design-run/A-review.md)
   ===================================================================================================================== */

/* Request 1 (C, E): every typed arrow still in a link (header "Shop", menu and drawer "Online store", footer, utility row,
   ~35 body text links) is the arrow icon. Survey (experiments/design-Arev-spans.py): every class-less aria-hidden span
   inside a link on the 45 live pages is an arrow glyph, so the direction comes from the target: off-site (http) turns to
   up-right, in-page (#) turns up, anything else points right. The glyph stays in the markup (copy-paste, old browsers) but
   is pushed out of its box. Zero specificity: any page rule that already draws its own arrow still wins. The Home router's
   "Visit our shop" line (.hx__more) is Tom's approved v37 and keeps its typed glyph. */
:where(a:not(.hx__more a)) > :where(span[aria-hidden="true"]:not([class])),
:where(a) :where(.mp__label, .menu__label) > :where(span[aria-hidden="true"]:not([class])) {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; overflow: hidden; white-space: nowrap;
  text-indent: 200%; background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
:where(a[href^="http"]:not(.hx__more a)) :where(span[aria-hidden="true"]:not([class])) {
  -webkit-mask-image: var(--ico-arrow-out); mask-image: var(--ico-arrow-out);
}
:where(a[href^="#"]:not(.hx__more a)) > :where(span[aria-hidden="true"]:not([class])) { transform: rotate(-90deg); }
/* in the flex-centred chrome links the box centres on the line box, which in Overpass sits below the x-height centre */
:where(.header__shop, .footer__col a, .drawer__row, .utility__list a, .mp__label, .menu__label) > :where(span[aria-hidden="true"]:not([class])) {
  translate: 0 -0.1em;
}
@media (hover: hover) {
  :where(a:not([href^="http"], [href^="#"], .hx__more a):hover) > :where(span[aria-hidden="true"]:not([class])) { transform: translateX(3px); }
}

/* Request 2 (B, C, D, E): the contact-card address is three lines of layout, no typed "·" (markup: three spans, applied by
   experiments/design-Arev-address.py on the 27 pages that carry the card). The footer and intent-line dots were already
   layout (hidden aria-hidden spans, 10-06). */
.panel__address > span, .g5-panel-addr > span { display: block; }

/* Requests 4 + 5 (C, D, E): One Lime Button Rule, sitewide. On a page whose hero carries its own filled primary, that
   primary (and the page's own section buttons below it) is the one lime button in view; the header button is the outline
   form at every width and scroll position (laptop: the "Get free ITAD pickup" pill; phone/tablet: the bar button, still
   hidden on phones while the hero's own button is on screen). Pages with no hero primary keep the filled header button
   as their one lime button. Replaces the per-page copies in 13 page sheets (listed in A-review.md). */
/* SUPERSEDED 2026-10-09 (Tom, file_692: "Get free ITAD pickup should be a green container"): the header button is the filled
   lime button on every page and at every width; the outline override that stood here is removed. */

/* Request 8 (E): guide and playbook H1s ran four lines in the 515/445 inner-hero split with a 142px gap at 1920. Articles
   only: text 3 parts to the photo's 2, 64px gap (the H1 sets in three lines; the square photo goes from 445 to 415px). */
@media (min-width: 64rem) {
  .g5-article .hero--inner:has(.hero__photo:not([hidden])) .hero__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s16);
  }
}

/* family A: the 6px fact dots (footer trust line, here; ITAD hero proof, pages-g2-itad.css) sat on the baseline because
   Overpass reserves descender space below the line centre; lifted to the x-height centre. Phones stack and top-align. */
@media (min-width: 48rem) { .footer__fact::before { position: relative; top: -0.15em; } }

/* ---------- PLAYBOOK BAND (.pb-band), 2026-10-07 (Tom GO on his MSP banner, then "create the rest... embedded into their
   respective landing pages"). Rounded ink panel (40px) inset in paper: cover line H2 at display size, one sub, a note
   naming the playbook, one lime button; the real PDF cover on a lime disc the panel crops, as on Tom's banner.
   Spacing: no top padding after a padded paper band, no bottom padding before the FAQ/closing (they carry their own),
   never flush against a tint or ink band (No Seam Rule). */
.pb-band { padding-block: var(--section-y); }
:is(.pg-sec, .section:not(.section--tint, .section--ink)) + .pb-band { padding-top: 0; }
.pb-band:has(+ :is(.faq, .closing)) { padding-bottom: 0; }
/* /healthcare/ "What we pick up" drops its bottom padding (pages-schools-v3.css), so the band brings its own top gap */
.section.hc-take + .pb-band { padding-top: var(--s16); }  /* 0,3,0: must beat the :is() rule above */
.pb-band__panel { position: relative; overflow: hidden; display: grid; gap: var(--s8); padding: var(--s10) var(--s6);
  border-radius: var(--r-card); background: var(--ink); color: var(--on-dark); }
.pb-band__text { position: relative; z-index: 1; display: grid; gap: var(--s4); justify-items: start; }
.pb-band .h2 { font-size: clamp(2.25rem, 0.9rem + 2.65vw, 3.5rem); line-height: 1.03; letter-spacing: -0.025em; max-width: 15ch; }
.pb-band__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-dark); max-width: 40rem; }
.pb-band__note { font-size: 1rem; line-height: 1.45; color: var(--on-ink-2); max-width: 40rem; }
.pb-band__btn { margin-top: var(--s4); }
.pb-band__cover { position: relative; order: -1; display: grid; place-items: center; margin: 0; padding-block: var(--s4); }
.pb-band__cover::before { content: ""; position: absolute; left: 50%; top: 50%; width: 280px; aspect-ratio: 1;
  border-radius: 50%; background: var(--lime); transform: translate(-50%, -50%); }
.pb-band__cover img { position: relative; display: block; width: 200px; height: auto; border-radius: 8px; }
@media (max-width: 47.99rem) { .pb-band__btn { justify-self: stretch; } }
@media (min-width: 48rem) {
  .pb-band__panel { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; column-gap: var(--s12); padding: var(--s16) var(--s12); }
  .pb-band__cover { order: 0; padding-block: 0; }
  .pb-band__cover::before { width: 340px; }  /* overhang 40px < the 48px tablet gap */
}
@media (min-width: 64rem) {
  .pb-band__panel { grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--s16); padding: var(--s16) var(--s24); }
  .pb-band__cover::before { width: 440px; }  /* overhang 50px < the 64px column gap: never under the text */
  .pb-band__cover img { width: 280px; }
}

/* 10-08 Tom: footer slogan, 'Renew.' in white */
.footer__slogan-mid { color: var(--on-dark, #fff); }

/* ---------- K-12 playbook band (.sc-pb), 10-09 Tom example file_603: full-bleed ink band like the heroes (no rounded inset),
   short lime rule over the H2, his existing words, the REAL cover shown as a standing book with page edges and a soft
   floor shadow over a dark green glow. Rolled out to every page with a playbook band 10-09 (Tom: 'mimic what we just did'); moved here from pages-schools-v3.css. ---------- */
.pb-band.sc-pb { margin-top: var(--section-y); background: var(--ink); position: relative; overflow: hidden; isolation: isolate; }
/* :not(#_) lifts specificity over the page-level "X + .pb-band { padding-top }" spacers (itad, healthcare): the full-bleed band pads inside its panel */
.pb-band.sc-pb:not(#_) { padding-block: 0; }
.sc-pb::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 85% at 80% 55%, rgb(142 198 63 / 0.24) 0%, rgb(142 198 63 / 0.07) 45%, rgb(142 198 63 / 0) 72%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.014) 0 2px, rgb(255 255 255 / 0) 2px 7px),
    radial-gradient(120% 130% at 0% 0%, #1e221c 0%, var(--ink) 60%); }
.sc-pb .pb-band__panel { border-radius: 0; background: none; padding: var(--s16) 0; overflow: visible; }
.sc-pb .h2::before { content: ""; display: block; width: 56px; height: 4px; margin-bottom: var(--s6); border-radius: 2px; background: var(--lime); }
.sc-pb .pb-band__cover { padding-block: var(--s4) var(--s8); perspective: 1600px; }
.sc-pb .pb-band__cover::before { display: none; }
.sc-pb .pb-band__cover picture { position: relative; display: block; width: 190px; transform: rotateY(-22deg) rotateX(3deg);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 2px 0 0 #f2f1ec, 4px 1px 0 #d6d5cd, 6px 2px 0 #eeede7, 8px 3px 0 #bdbcb4,
    20px 30px 40px rgb(0 0 0 / 0.55), 44px 64px 90px rgb(0 0 0 / 0.5); }
.sc-pb .pb-band__cover img { width: 100%; border-radius: 2px 6px 6px 2px; }
/* bound edge: a soft crease, then a faint sheen across the board */
.sc-pb .pb-band__cover picture::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.5) 0%, rgb(255 255 255 / 0.16) 2.5%, rgb(0 0 0 / 0.2) 5%, rgb(0 0 0 / 0) 10%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / 0.07) 100%); }
@media (min-width: 48rem) {
  .sc-pb .pb-band__panel { grid-template-columns: minmax(0, 1fr) 300px; padding: var(--s24) 0; }
  .sc-pb .pb-band__cover { padding-block: 0; }
  .sc-pb .pb-band__cover picture { width: 230px; }
}
@media (min-width: 64rem) {
  .sc-pb .pb-band__panel { grid-template-columns: minmax(0, 1fr) 420px; column-gap: var(--s16); min-height: clamp(480px, 38vw, 580px); }
  .sc-pb .pb-band__cover picture { width: 290px; }
}

/* ---------- INK TEXTURE everywhere, 10-09 (Tom on the textured "Our side" card: "do this across the entire site wherever this
   exists"). The playbook band recipe as background-IMAGE layers only: a lime glow from the lower right, the 115deg hairline
   stripe, a soft corner light. The base colour stays each element's own (ink or ink-2), so hover colour changes still show.
   :not(#_) lifts it over the page sheets, which load after site.css and set the flat colour with the background shorthand.
   Skipped on purpose: photo frames/heroes (the image covers them), icon discs, lines, buttons, table heads. ---------- */
:root {
  --ink-tex:
    radial-gradient(70% 70% at 88% 100%, rgb(142 198 63 / 0.15) 0%, rgb(142 198 63 / 0.05) 45%, rgb(142 198 63 / 0) 75%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.014) 0 2px, rgb(255 255 255 / 0) 2px 7px),
    radial-gradient(120% 130% at 0% 0%, rgb(255 255 255 / 0.045) 0%, rgb(255 255 255 / 0) 60%);
}
:is(.zd-dark, .zd-panel, .zd-card--ink, .section--ink, .card--ink, .stat, .panel, .door--lead, .equity__band, .footer, .mp__foot,
  .sv-path--ink, .sv-side--ink, .pv-way--ink, .pv-list--you, .pv-route--ink, .lv-route--ink, .lv-range--ink,
  .d-reach, .d-bridge--ink, .gc-paths__lead, .row--door, .lane:first-child, .de-desk--lead, .de-proof, .gm-sim__band,
  .g1-quote, .g2-fact, .g2-rate, .g4-choose, .g4-inkpanel, .g5-growth, .g5-close__panel, .g5-pullstat, .g5-ty__talk,
  .g8-mission__panel, .gb-ours__panel, .np-quote):not(#_) { background-image: var(--ink-tex); }
/* .zd-dark painted its ink with a gradient IMAGE and no colour, so it needs the base colour back under the texture */
.zd-dark:not(#_) { background-color: var(--ink); }

/* ---------- WHITE CONTAINERS, 10-09 (Tom approved the K-12 Retire/Buy sample v437: "this is good... use this for any of the white
   containers"). White to half-strength floor (#f6faf0), starting 45% in, from the top left. Cards only: not form fields,
   menus, checkboxes, document specimens (certificate, settlement report) or photo captions. Dark, lime and tint variants keep
   their own fill via the :not() list. ---------- */
:root { --paper-tex: linear-gradient(155deg, var(--paper) 45%, #f6faf0 100%); }
:is(.card, .door2, .sv-path, .sv-side, .pv-list, .pv-step, .pv-way, .pv-route, .pv-lime .pv-side, .pg-earn .pv-sides--3 .pv-side,
  .nn-svc__card, .iv-step, .iv-kind, .g5-nextcard, .g5-emailme, .gb-mail, .d-specs__card, .gc-claim__data, .dv-yours,
  .intent, .choice, .lv-range):not(.card--ink, .card--tint, .sv-path--ink, .sv-side--ink, .pv-list--you, .pv-way--ink, .pv-route--ink, .pv-step--you, .iv-step--you, .lv-range--ink):not(#_) {
  background-image: var(--paper-tex); }
/* ---------- SOLID LIME CONTAINERS, 10-09 (Tom: "solid green needs gradient and texture too now"). Same family as --ink-tex:
   a soft light from the top left, a deeper lime toward the bottom right, the 115deg hairline stripe (dark, very faint).
   Containers only: buttons, icon discs, dots, tags, pills and step numbers stay flat lime. ---------- */
:root {
  --lime-tex:
    radial-gradient(90% 90% at 0% 0%, rgb(255 255 255 / 0.22) 0%, rgb(255 255 255 / 0) 60%),
    radial-gradient(80% 80% at 100% 100%, rgb(96 150 30 / 0.32) 0%, rgb(96 150 30 / 0) 70%),
    repeating-linear-gradient(115deg, rgb(18 19 17 / 0.03) 0 2px, rgb(18 19 17 / 0) 2px 7px);
}
:is(.iv-step--you, .pv-step--you, .g1-stat, .g2-band .stat, .pv-lime, .hero__router .door--lead):not(#_) { background-image: var(--lime-tex); }
/* Tom 10-09 ("you missed a ton of white containers", screenshot = white cards on the lime referral band): a browser scan of
   every page found every white card already carrying --paper-tex, but on a green or tinted background the half-strength end
   colour disappears, so the cards read flat white. Inside green/tint surroundings the fade runs to the full --floor. */
:is(.pv-lime, .section--tint, .sv-how, .closing__grid) { --paper-tex: linear-gradient(155deg, var(--paper) 35%, var(--floor) 100%); }
/* partner "Your part" lists are floor-tinted on purpose (pages-partners-v3.css .pv-how--line): keep them flat green */
.pv-how--line .pv-list:not(.pv-list--you):not(#_):not(#_) { background-image: none; }
/* the line-style partner steps are unboxed text on the page, not cards: no fill texture at all */
.pv-how--line .pv-step:not(#_):not(#_) { background-image: none; }

/* Tom 10-09 ("lets just do an arrow on all seconday CTA pills"): every secondary pill (outline / ghost) carries the arrow
   icon; pills that leave the site (absolute http links: shop, Whatnot) turn it 45 degrees (the ↗). Pills that already draw
   their own arrow (an svg or an aria-hidden glyph) are skipped; header/menu buttons are navigation, not CTAs. Primary
   (filled) pills stay arrow-free. (experiments/arrows_1009.css) */
:is(a.btn--outline, a.btn--secondary, .hero__actions a.textlink--strong):not(:has(svg, [aria-hidden="true"])):not(.link-arrow):not(:is(.header, .drawer, .nav) *)::after {
  content: ""; display: inline-block; flex: none; width: 16px; height: 16px; margin-left: 8px; vertical-align: -2px;
  background: currentColor; -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
:is(a.btn--outline, a.btn--secondary, .hero__actions a.textlink--strong)[href^="http"]:not(:has(svg, [aria-hidden="true"])):not(.link-arrow):not(:is(.header, .drawer, .nav) *)::after { transform: rotate(-45deg); }
@media (hover: hover) {
  :is(a.btn--outline, a.btn--secondary, .hero__actions a.textlink--strong):not([href^="http"]):not(:has(svg, [aria-hidden="true"])):not(.link-arrow):not(:is(.header, .drawer, .nav) *):hover::after { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { :is(a.btn--outline, a.btn--secondary, .hero__actions a.textlink--strong)::after { transition: none; } }

/* Tom 10-09 (file_715/716): "the HOME page pill seems to have some design elements added which I think I prefer... the other
   CTA pills are flat: Update the other pills to match the home page design. Make sure the text in the Pills are perfectly
   alligned in the center all directions." One rule set for every CTA pill (experiments/pills_1009.css):
   - Home's corners (12px) on every button, via the token.
   - Home's primary finish on every filled pill: a 1px light inset along the top edge + a soft lime glow below (offset +
     blur, not a halo). Replaces the 10-07 rule that drew the landing heroes' primary flat. Header/menu buttons are
     navigation and stay flat.
   - Labels centred on the cap height (cap top to pill top = baseline to pill bottom, within 1px; measured with
     experiments/pill_center_1009.py). The face reserves descender space, so the top padding runs 4px over the bottom;
   set in place on .btn, .btn--lg, .hero__actions .textlink--strong and .hx__primary, not here, so the header's own
   button padding still wins. */
:root { --r-btn: 12px; }
.btn--primary:not(:is(.header, .drawer, .nav) *), .hx__primary, .iv-hx .hx__primary {
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 8px 20px -10px rgb(142 198 63 / 0.95);
}

/* Tom 10-09 (file_733, ITAD "Donate it" card): a white card beside a solid lime card read flat white; the subtle fade disappears
   next to the lime, as it does on green/tint backgrounds. Lists that hold a lime step card give their white cards the fuller fade. */
:is(ol, ul, div):has(> .iv-step--you, > .pv-step--you) { --paper-tex: linear-gradient(155deg, var(--paper) 35%, var(--floor) 100%); }
/* Tom 10-09 (file_734, ITAD "Who we work with" cards): the subtle fade read as flat white on these taller cards; fuller fade here. */
.iv-who__doors { --paper-tex: linear-gradient(155deg, var(--paper) 35%, var(--floor) 100%); }

/* Tom 10-09 (file_741, Education partner hero): two pills shrank to share a 576px column and both labels broke onto two lines.
   A pill keeps its label on one line; if two do not fit side by side, the second moves to its own row. */
.hero__actions { flex-wrap: wrap; }
.hero__actions > :is(a.btn, button.btn, a.textlink--strong) { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 47.99rem) { .hero__actions > :is(a.btn, button.btn, a.textlink--strong) { white-space: normal; } }
@media (max-width: 23.99rem) { .hero__actions > :is(a.btn, button.btn, a.textlink--strong) { font-size: 1rem; padding-inline: 16px; } }