/* Regadget Draft 4 · GROUP B page CSS: /itad/, /itad/data-destruction/, /partners/, /contact/, the two guides, /thanks/*.
   Loaded after site.css and built only from its tokens and primitives (hero card, zd-dark band, zd-panel, floor cards,
   FAQ, closing form, footer). Zendesk inner-page structure, Direction C colours. See handoffs/draft4/logs/B-LOG.md. */

/* ---------- shared bits ---------- */
.b-step, .b-proof { }                       /* Draft 3 spacing hooks: sections now carry their own rhythm */
.nowrap { white-space: nowrap; }
.b-solo > a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }

/* thank-you pages: no second request button right after an accepted one (kept in place so the bar does not shift) */
.page-thanks .header__cta { visibility: hidden !important; pointer-events: none; }
.page-thanks .header__menu { margin-left: auto; }

/* links inside a sentence stay inline; padding grows the hit area without opening the line spacing */
.row__go, .row__inline, .gh__door a, .gh__doors a, .gb__at a, .gb__go:not(.b-solo) a, .closing__sub .textlink,
.closing__consumer a, .intent__support a, .ty__read a, .ty__phone a, .msp__list a, .goes__foot li:not(.b-solo) a,
.cert__nist a, .gb__cite a {
  display: inline; padding-block: 10px;
}
/* their focus: a solid highlight on the words (a ring round the padded box would cross the line above) */
:is(.row__go, .row__inline, .gh__door a, .gh__doors a, .gb__at a, .gb__go:not(.b-solo) a, .closing__sub .textlink,
.closing__consumer a, .intent__support a, .ty__read a, .ty__phone a, .msp__list a, .goes__foot li:not(.b-solo) a,
.cert__nist a, .gb__cite a):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;
}
:where(.zd-panel, .zd-dark, .row--door) :is(.row__go, .row__inline, .goes__foot li a, .cert__nist a):focus-visible {
  background-color: var(--paper); color: var(--ink);
}

/* breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); font-size: var(--fs-small); color: var(--text-2); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/" / ""; margin-right: var(--s2); color: var(--steel); }
.crumbs a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--text-2); }

/* centred heading block used by several sections (same values as .zd-head) */
.sd__intro, .rows__head, .lanes__head, .cb__intro {
  display: grid; gap: var(--s4); justify-items: center; text-align: center; max-width: 46rem; margin-inline: auto;
}
:is(.sd__intro, .rows__head, .lanes__head, .cb__intro) .h2 { max-width: none; }

/* round number badge (steps, ladder) */
.sd__num, .ws__num, .ladder__n {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-weight: 700; font-size: 1.125rem; line-height: 1;
}

/* =========================================================================================================
   PAGE HEROES: site.css .hero.hero--inner (white, ink H1, photo card right). Group B adds only content styling and
   the SYSTEM-sanctioned smaller H1 for long inner-page H1s (.hero--b).
   ========================================================================================================= */
.hero--inner.hero--b .hero__h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.hero--inner .hero__photo img { object-position: 50% 62%; }

/* /itad/ hero content */
.hb__trigger { font-size: var(--fs-lead); line-height: 1.35; font-weight: 600; max-width: 32ch; }
.hb__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hb__chips li {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--floor); font-size: var(--fs-small); font-weight: 600; line-height: 1.2;
}
/* laptop QA batch 2b: all four chips on one row at 64rem+ (at 1280 "The closet" sat alone on a second row) */
@media (min-width: 64rem) {
  .hb__chips { flex-wrap: nowrap; gap: 4px; }
  .hb__chips li { flex: none; padding: 4px 10px; font-size: 0.8125rem; white-space: nowrap; }
}
.hb__h1 { margin-top: var(--s8); }
.hb__hook { margin-top: var(--s5); font-size: 1.25rem; line-height: 1.3; font-weight: 600; max-width: 30ch; }
.hero .hb__actions { margin-top: var(--s6); }
.hb__call { font-size: 1rem; }
.hb__call a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.hb__proof { margin-top: var(--s5); display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.hb__proof::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
@media (min-width: 48rem) {
  .hb__actions { gap: var(--s5); }
}

/* plain-hero content (/itad/data-destruction/, /partners/) */
.hd__body { margin-top: var(--s6); display: grid; gap: var(--s4); align-content: end; }
.hd__answer { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 30ch; }
.hd__line, .hd__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 34rem; }
.hd__actions { margin-top: var(--s2); }
.hd__voice {
  margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--hairline);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 44ch;
}
.hero__crumbs [aria-current="page"] { color: var(--text-2); }
@media (max-width: 47.99rem) { .hd__actions .btn { width: 100%; } }

/* =========================================================================================================
   STEPS in the inset dark band (/itad/ how it works, /partners/ how a referral works)
   ========================================================================================================= */
.sd { margin-top: var(--section-y); }
.sd__answer { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-ink-2); }
.sd__list { margin-top: var(--s10); display: grid; gap: var(--s4); }
.sd__step {
  display: flex; flex-direction: column; gap: var(--s3);
  background: rgb(255 255 255 / 0.06); border: 1px solid var(--hairline-dark); border-radius: 24px; padding: var(--s6);
}
.sd__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.sd__lines { display: grid; gap: var(--s3); margin-top: var(--s2); }
.sd__line { display: grid; gap: 4px; padding: var(--s4); border-radius: 16px; border: 1px solid var(--hairline-dark); }
.sd__line dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.054em; text-transform: uppercase; color: var(--on-ink-2); }
.sd__line dd { margin: 0; line-height: 1.45; }
.sd__line--you { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sd__line--you dt { color: var(--text-2); }
.sd__one { color: var(--on-ink-2); line-height: 1.5; }
/* the reader's own step (partners step 1) is the one white card in the band */
.sd__step--yours { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sd__step--yours .sd__one { color: var(--text-2); }
.sd__timing {
  margin-top: var(--s4); display: grid; gap: var(--s2); padding: var(--s6);
  background: rgb(255 255 255 / 0.06); border: 1px solid var(--hairline-dark); border-radius: 24px;
}
.sd__timing-label { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.054em; text-transform: uppercase; color: var(--lime); }
.sd__timing-text { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.4; font-weight: 500; max-width: 48rem; }
.sd__cta { margin-top: var(--s10); display: flex; justify-content: center; }
@media (max-width: 47.99rem) { .sd__cta .btn { width: 100%; } }
@media (min-width: 64rem) {
  .sd__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s12); }
  .sd__step { border-radius: var(--r-card); padding: var(--s8); }
  .sd__timing { margin-top: var(--s6); grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; column-gap: var(--s8); padding: var(--s8) var(--s10); border-radius: var(--r-card); }
  .sd__cta { margin-top: var(--s12); }
}

/* /itad/ steps, laptop QA 2026-09-28 (Tom: "busy", "half empty"). The three steps share ONE panel surface, split by
   hairlines, so a short step reads as a shorter text column, not an empty card. Regadget / You are two labelled rows
   (small caps, hairline between), not white chat bubbles; "You" is marked by its lime label. On laptops the rows sit
   on a subgrid so every step's first row starts on the same line whatever the title length. /partners/ uses the same
   panel; its reader step ("You introduce us") is marked by a lime title, not a white card. */
.sd__list {
  gap: 0; padding: var(--s2) var(--s6);
  background: rgb(255 255 255 / 0.05); border: 1px solid var(--hairline-dark); border-radius: 24px;
}
.sd__list .sd__step {
  background: none; border: 0; border-radius: 0; padding: var(--s6) 0; gap: var(--s3);
}
.sd__list .sd__step + .sd__step { border-top: 1px solid var(--hairline-dark); }
.sd__list .sd__lines { gap: 0; margin-top: var(--s2); align-content: start; }
.sd__list .sd__line {
  gap: 6px; align-content: start; padding: var(--s4) 0 0; border: 0; border-radius: 0; background: none; color: var(--on-dark);
}
.sd__list .sd__line + .sd__line { margin-top: var(--s4); border-top: 1px solid var(--hairline-dark); }
.sd__list .sd__line:first-child { border-top: 1px solid var(--hairline-dark); }
.sd__list .sd__line dt { color: var(--on-ink-2); }
.sd__list .sd__line--you dt { color: var(--lime); }
.sd__list .sd__line dd { color: var(--on-dark); }
.sd__list .sd__step--yours { color: var(--on-dark); }
.sd__list .sd__step--yours .sd__title { color: var(--lime); }
.sd__list .sd__step--yours .sd__one { color: var(--on-ink-2); }
.sd__list .sd__title { text-wrap: balance; }
@media (min-width: 64rem) {
  /* titles size naturally (batch 2b): lining rows up across steps left ~90px under the one-line titles, because
     step 3's title always takes three lines at this column width */
  .sd__list { column-gap: 0; padding: var(--s10) 0; border-radius: var(--r-card); }
  .sd__list .sd__step { display: flex; flex-direction: column; gap: var(--s4); padding: 0 var(--s8); }
  .sd__list .sd__step + .sd__step { border-top: 0; border-left: 1px solid var(--hairline-dark); }
  .sd__list .sd__num { justify-self: start; }
  .sd__list .sd__title { align-self: start; }
  .sd__list .sd__lines { margin-top: 0; }
}

/* ---------- /itad/ §3 who else: centred head, floor cards (the schools door is the ink card) ---------- */
.rows { padding-top: var(--section-y); }
.rows__grid { display: grid; gap: var(--s10); }
.rows__answer { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.rows__list { display: grid; gap: var(--s4); }
.row {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  background: var(--floor); border-radius: 24px; padding: var(--s6);
}
.row__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.row__text { color: var(--text-2); }
.row__go { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.row__go:hover, .row__inline:hover { text-decoration-color: currentColor; }
.row__inline { color: var(--ink); text-decoration-color: var(--steel); }
.row--door { background: var(--ink); color: var(--on-dark); transition: background-color var(--dur) var(--ease); }
.row--door:hover { background: var(--ink-2); }
.row--door .row__text { color: var(--on-ink-2); }
.row__link { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.row__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.row__link:focus-visible { box-shadow: none; outline: none; }
.row--door:has(.row__link:focus-visible) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.rows__quiet { padding-top: var(--s4); text-align: center; font-weight: 600; font-size: 1.125rem; }
@media (min-width: 48rem) {
  .rows__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s6); }
  .row { grid-column: span 3; border-radius: var(--r-card); padding: var(--s10); }
  .rows__quiet { grid-column: 1 / -1; padding-top: var(--s6); }
  .rows__quiet ~ .row { grid-column: span 2; padding: var(--s8); }
}

/* ---------- /itad/ §4 security: home's split + spec card (site.css) ---------- */

/* ---------- /itad/ §5 how free works: floor panel, question left, answer right ---------- */
.free { padding-top: var(--section-y); }
.free__grid { display: grid; gap: var(--s5); }
.free__answer { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 30ch; }
.free__foot { margin-top: var(--s5); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s3); }
.free__foot::before { content: ""; width: 28px; height: 2px; background: var(--ink); }
@media (min-width: 64rem) {
  .free__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}

/* ---------- /itad/ §6 where the working computers go: ink panel (as home's equity panel) ---------- */
.goes { padding-top: var(--section-y); }
.goes__band { display: grid; justify-items: start; }
.goes__band .h2 { max-width: 24ch; }
.goes__answer { margin-top: var(--s4); color: var(--on-ink-2); max-width: 40rem; }
.goes__voice {
  margin-top: var(--s8); font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); line-height: 1.1; font-weight: 500;
  letter-spacing: -0.018em; max-width: 20ch; color: var(--lime);
}
.goes__second { margin-top: var(--s5); font-size: var(--fs-lead); max-width: 40rem; }
.goes__link { margin-top: var(--s4); }
.goes__foot { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--hairline-dark); display: grid; gap: var(--s1); width: 100%; color: var(--on-ink-2); }
.goes__foot a { color: var(--on-dark); }

/* =========================================================================================================
   /itad/data-destruction/
   ========================================================================================================= */
/* §2 the steps: head left, floor step cards right */
.ws { padding-top: var(--section-y); }
.ws__grid { display: grid; gap: var(--s8); }
.ws__answer { margin-top: var(--s4); font-size: var(--fs-lead); color: var(--text-2); }
.ws__list { display: grid; gap: var(--s4); }
.ws__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s4); align-items: center; background: var(--floor); border-radius: 24px; padding: var(--s6); }
.ws__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
/* "You" is a labelled row under a hairline, not a white chat bubble (same fix as /itad/ steps, laptop QA 2026-09-28) */
.ws__you { grid-column: 1 / -1; margin-top: var(--s4); display: grid; gap: 4px; padding: var(--s4) 0 0; border-top: 1px solid var(--hairline); }
.ws__you dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.054em; text-transform: uppercase; color: var(--text-2); }
.ws__you dd { margin: 0; }
@media (min-width: 48rem) {
  .ws__step { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s5); padding: var(--s8) var(--s10); border-radius: var(--r-card); }
  .ws__num { width: 48px; height: 48px; font-size: 1.25rem; }
}
@media (min-width: 64rem) {
  .ws__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
  .ws__head { position: sticky; top: calc(var(--header-h) + var(--s8)); }
}

/* §3 where it happens: floor panel, question left, answer right */
.where { padding-top: var(--section-y); }
.where__text { background: var(--floor); border-radius: var(--r-card); padding: var(--s8) var(--s6); }
.where__answer { margin-top: var(--s4); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 26ch; }
.where__link { margin-top: var(--s4); }
@media (min-width: 48rem) { .where__text { padding: var(--s16) var(--s24); } }
@media (min-width: 64rem) {
  .where__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
  .where__text .h2 { grid-row: 1 / span 2; }
  .where__answer { grid-column: 2; margin-top: 0; }
  .where__link { grid-column: 2; }
}

/* §4 the certificate: inset dark band, the document shown as a white sheet */
.cb { margin-top: var(--section-y); }
.cb__answer { font-size: var(--fs-lead); color: var(--on-ink-2); }
.cert { margin-top: var(--s10); display: grid; gap: var(--s8); }
.cert__h { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; max-width: 26ch; }
.cert__nist { margin-top: var(--s4); font-size: var(--fs-small); color: var(--on-ink-2); max-width: 34rem; }
.cert__nist a { color: var(--on-dark); }
.cert__cta { margin-top: var(--s6); }
.cert__sheet { max-width: 40rem; }
.cert__doc {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 14rem; padding: var(--s10) var(--s8) var(--s8); background: var(--paper); color: var(--ink);
  border-radius: 24px; box-shadow: inset 0 10px 0 var(--lime);
}
.cert__doc::before { content: ""; position: absolute; inset: 22px 12px 12px; border: 1px solid var(--steel); border-radius: 14px; pointer-events: none; }
.cert__title { font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.015em; }
.cert__batch { margin-top: var(--s3); }
.cert__sign { display: block; margin-top: auto; align-self: flex-end; width: 45%; border-bottom: 2px solid var(--ink); }
.cert__cap { margin-top: var(--s3); font-size: var(--fs-small); color: var(--on-ink-2); }
@media (max-width: 63.99rem) {
  /* the document before the button, so the proof sits above the ask */
  .cert { gap: 0; }
  .cert__text { display: contents; }
  .cert__h { order: 1; }
  .cert__nist { order: 2; }
  .cert__sheet { order: 3; margin-top: var(--s6); }
  .cert__cta { order: 4; margin-top: var(--s6); }
}
@media (max-width: 47.99rem) { .cert__cta .btn { width: 100%; } }
@media (min-width: 64rem) {
  .cert { margin-top: var(--s12); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: center; }
  .cert__doc { min-height: 16rem; padding: var(--s12) var(--s10) var(--s10); }
  .cert__batch { font-size: var(--fs-lead); margin-top: var(--s4); }
  .cert__cta { margin-top: var(--s8); }
}

/* =========================================================================================================
   /partners/
   ========================================================================================================= */
/* §3 lanes: centred head, three cards, each one link (MSPs lead, in ink) */
.lanes { padding-top: var(--section-y); }
.lanes__grid { display: grid; gap: var(--s10); }
.lanes__answer { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.lanes__list { display: grid; gap: var(--s4); }
.lane {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  background: var(--floor); border-radius: 24px; padding: var(--s6); transition: background-color var(--dur) var(--ease);
}
.lane:hover { background: var(--floor-2); }
.lane__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.lane__link { text-decoration: none; }
.lane__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lane__link:focus-visible { box-shadow: none; outline: none; }
.lane:has(.lane__link:focus-visible) { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.lane__desc { color: var(--text-2); }
.lane__cue { margin-top: auto; padding-top: var(--s3); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.lane:first-child { background: var(--ink); color: var(--on-dark); }
.lane:first-child:hover { background: var(--ink-2); }
.lane:first-child .lane__desc { color: var(--on-ink-2); }
.lane:first-child .lane__cue { color: var(--lime); text-decoration: none; }
@media (min-width: 48rem) {
  .lanes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
  .lane { border-radius: var(--r-card); padding: var(--s8); min-height: 17rem; }
}

/* §4 what clients get: head left, floor card right */
.msp { padding-top: var(--section-y); }
.msp__grid { display: grid; gap: var(--s8); }
.msp__answer { margin-top: var(--s4); color: var(--text-2); }
.msp__body { background: var(--floor); border-radius: var(--r-card); padding: var(--s4) var(--s6) var(--s6); }
.msp__list li { padding: var(--s5) 0; border-bottom: 1px solid var(--hairline); line-height: 1.5; }
.msp__list strong { display: block; font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 4px; }
.msp__list li:first-child strong { margin-bottom: 0; }
.msp__terms { margin-top: var(--s5); font-size: var(--fs-small); color: var(--text-2); max-width: 36rem; }
.msp__refer { margin-top: var(--s2); }
@media (min-width: 48rem) { .msp__body { padding: var(--s6) var(--s10) var(--s8); } }
@media (min-width: 64rem) {
  .msp__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s16); align-items: start; }
}

/* =========================================================================================================
   GUIDES: white inner hero (no photo), the short answer in a floor card; one reading column, question left / answer right
   ========================================================================================================= */
.gh__by { margin-top: var(--s4); font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.gh__answer { width: 100%; margin-top: var(--s6); padding: var(--s6); background: var(--floor); border-radius: 24px; font-size: var(--fs-lead); line-height: 1.5; }
.gh__lead { display: block; margin-bottom: var(--s2); font-weight: 500; font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; }
.gh__door, .gh__doors { margin-top: var(--s5); }
.gh__sep { margin-inline: var(--s2); color: var(--text-2); }
.gh__print { margin-top: var(--s2); }
.gh__printbtn { font-size: var(--fs-small); }
@media (min-width: 64rem) { .gh__answer { padding: var(--s8) var(--s10); } }

.gb { padding-top: var(--section-y); }
.gb__col > * { max-width: 46rem; }
.gb__sec + .gb__sec { margin-top: var(--s10); }
.gb__h2 { max-width: none; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.2; margin-bottom: var(--s3); }
.gb__sec > p + p, .gb__sec > p + ul, .gb__sec > ul + p { margin-top: var(--s3); }
.gb__sec p, .gb__sec li { line-height: 1.6; }
.gb__cite { padding: var(--s3) var(--s4); background: var(--floor); border-radius: 16px; font-size: var(--fs-small); color: var(--text-2); }
.gb__cite a { color: var(--ink); }
.gb__at { margin-top: var(--s4); font-weight: 600; }
.gb__at a { margin-left: var(--s1); }
.gb__list { list-style: disc; padding-left: var(--s5); }
.gb__list li + li { margin-top: var(--s1); }
.gb__list li::marker { color: var(--green-text); }
.gb__go { margin-top: var(--s3); }
.gb__more { margin-top: var(--s10); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
@media (min-width: 64rem) {
  .gb__sec + .gb__sec { margin-top: var(--s12); padding-top: var(--s12); border-top: 1px solid var(--hairline); }
  .gb:not(.gb--check) .gb__col > * { max-width: none; }
  .gb:not(.gb--check) .gb__sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s16); }
  .gb:not(.gb--check) .gb__sec > * { grid-column: 2; max-width: 44rem; }
  .gb:not(.gb--check) .gb__sec > .gb__h2 { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
}

/* the reuse-first ladder: three stacked rounded rungs */
.ladder { margin-top: var(--s4); display: grid; gap: var(--s3); }
.ladder__rung { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); background: var(--floor); border-radius: 20px; }
.ladder__rung--last { background: var(--paper); border: 1px solid var(--hairline); }
.ladder__rung strong { font-weight: 600; font-size: 1.125rem; }
@media (min-width: 48rem) { .ladder__rung { grid-template-columns: 48px minmax(0, 1fr); padding: var(--s5) var(--s6); border-radius: 24px; } .ladder__n { width: 48px; height: 48px; font-size: 1.25rem; } }

/* the checklist: each step's number sits in a rounded box the reader can tick on paper */
.check__h2 { display: flex; align-items: flex-start; gap: var(--s4); }
.check__n {
  flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -4px;
  border: 2px solid var(--ink); border-radius: 12px; font-size: 1.125rem; font-weight: 700; line-height: 1;
}
.check > p, .check > ul { padding-left: calc(2.75rem + var(--s4)); }
.check__list { display: grid; gap: var(--s2); margin-top: var(--s3); }
.check__list li { position: relative; padding-left: var(--s6); }
.check__list li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; }
.check__early { font-weight: 700; }
.check--key { background: var(--floor); border-radius: 24px; padding: var(--s6) var(--s5); }
.check--go .check__n { background: var(--lime); border-color: var(--lime); }
.check__start { margin-top: var(--s1); }
@media (max-width: 47.99rem) {
  .check > p, .check > ul { padding-left: 0; }
  .check__n { width: 2.5rem; height: 2.5rem; }
  .gb--check .gb__sec + .gb__sec { margin-top: var(--s8); }
}
@media (min-width: 64rem) {
  .gb--check .gb__col > * { max-width: none; }
  /* batch 2c: ~170px of white between "Print this checklist" and step 1 */
  .gb.gb--check { padding-top: var(--s6); }
  .gb--check .check { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s16); }
  .gb--check .check > * { grid-column: 2; max-width: 44rem; }
  .gb--check .check > p, .gb--check .check > ul { padding-left: 0; }
  .gb--check .check > .check__h2 { grid-column: 1; grid-row: 1 / span 12; align-self: start; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); }
  .gb--check .check--key { padding: var(--s10); border-top: 0 !important; border-radius: var(--r-card); }
  /* the key step bleeds 40px past the text edge only when the page has 40px to give: below ~1250 it pushed the page
     16px past the window (sideways scroll at 1024-1152; laptop QA 2026-09-28) */
  /* batch 2d: no bleed at all; the box now lines up with the content edge like the panels around it */
  .gb--check .check--key + .check { border-top: 0; }
  .gb--check .gb__more { margin-left: calc((100% - 4rem) / 3 + 4rem); }
}
.guide .faq .h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); }
.faq__more { margin-top: var(--s4); }
@media (min-width: 64rem) { .faq__more { grid-column: 2; margin-top: 0; } }
.qa__p2 { margin-top: var(--s2); }

/* =========================================================================================================
   CLOSING additions, /contact/, the address row
   ========================================================================================================= */
.gadget--door { margin-top: var(--s5); max-width: 28rem; }
.gadget--door img { width: 88px; }
.closing__switch .linkbutton { text-align: left; }
.closing__consumer { font-size: var(--fs-small); color: var(--text-2); }
.closing__consumer a { color: var(--ink); }
@media (min-width: 64rem) { .gadget--door img { width: 104px; } .closing__consumer { grid-column: 1; grid-row: 3; } }

/* /contact/: white inner hero (H1 + intro), then the form panel directly under it (it has no head of its own) */
.closing--contact { padding-top: var(--s4); padding-bottom: var(--s6); }
.intent__support { margin-top: var(--s3); font-size: var(--fs-small); }
@media (min-width: 64rem) {
  .closing--contact { padding-top: 0; }
  .closing--contact .form, .closing--contact .panel { grid-row: 1; }
}

.addr { padding-bottom: var(--section-y); }
.addr__grid { display: grid; gap: var(--s3); }
.addr__h2 { font-size: var(--fs-h3); line-height: 1.25; max-width: none; }
.addr__block { font-size: var(--fs-lead); }
/* the address as one bordered card under the form panel */
.addr .addr__grid {
  width: auto; margin-inline: var(--gutter); padding: var(--s6);
  border: 1px solid var(--hairline); border-radius: 32px;
}
@media (min-width: 48rem) { .addr .addr__grid { padding: var(--s8) var(--s16); } }
@media (min-width: 64rem) {
  .addr .addr__grid {
    margin-inline: max(var(--gutter), (100% - var(--wide)) / 2); max-width: none; border-radius: var(--r-card);
    padding: var(--s8) var(--s16);
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s12); align-items: baseline;
  }
}

/* =========================================================================================================
   /thanks/* : the white inner hero (section.ty.hero--inner), Gadget beside the confirmation
   ========================================================================================================= */
.ty { padding-bottom: var(--section-y); }
.ty__grid { display: grid; gap: var(--s5); }
.gadget--ty { max-width: 26rem; }
.gadget--ty img { width: 80px; }
.ty__h1 { font-size: clamp(2.125rem, 1.6rem + 2vw, 3.25rem); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; max-width: 18ch; }
.ty__next { margin-top: var(--s4); font-size: var(--fs-lead); font-weight: 600; max-width: 34rem; }
.ty__read { margin-top: var(--s5); max-width: 38rem; }
.ty__phone { margin-top: var(--s2); }
.ty__phone a { font-weight: 700; }
.ty__more { margin-top: var(--s6); padding: var(--s3) var(--s5); background: var(--floor); border-radius: 20px; max-width: 40rem; }
.ty__h2 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.ty__toggle { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-weight: 600; text-align: left; }
.ty__toggle[aria-expanded="true"] .details__sign { background: var(--lime); border-color: var(--lime); }
.ty__toggle[aria-expanded="true"] .details__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.ty__form { margin-top: var(--s3); padding-bottom: var(--s3); display: grid; gap: var(--s4); justify-items: start; }
.ty__form .field { width: 100%; }
@media (min-width: 64rem) {
  .ty { padding-bottom: 88px; }
  /* centred as a block (laptop QA batch 2c: it sat left with ~220px empty on the right) */
  .ty__grid { grid-template-columns: 12rem minmax(0, 44rem); column-gap: var(--s12); align-items: start; justify-content: center; }
  .gadget--ty { flex-direction: column; align-items: flex-start; }
  .gadget--ty img { width: 120px; }
}

/* ---------- phone tightening ---------- */
@media (max-width: 47.99rem) {
  .sd__intro, .rows__head, .lanes__head, .cb__intro { gap: var(--s3); }
  .sd__list { margin-top: var(--s8); }
  .sd__step { padding: var(--s5); }
  .row__title, .lane__title { font-size: 1.25rem; }
  .goes__voice { margin-top: var(--s6); }
  .hb__h1 { margin-top: var(--s6); }
}

@media (forced-colors: active) {
  .sd__num, .ws__num, .ladder__n { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .sd__step, .sd__line, .sd__timing, .row, .lane, .ws__step, .ws__you, .where__text, .msp__body, .gh__answer,
  .ladder__rung, .check--key, .cert__doc, .ty__more, .hb__chips li { border: 1px solid CanvasText; }
}

@media print {
  .closing, .faq, .gh__print, .gb__more, .crumbs { display: none !important; }
  .sd, .cb, .goes__band, .row--door, .lane:first-child { background: none; color: var(--ink); }
  .gh__answer, .check--key, .ladder__rung { background: none; }
  .check { break-inside: avoid; }
}