/* How it works (/how-it-works/): the layout of the site.css components on this page only. Colours, type and spacing are site.css tokens; nothing here is a new component and no colour is written as a raw value. */

/* breadcrumb: the current item carries its own separator spacing ("Home / How it works", not "Home /How it works") */
.sb-breadcrumb li[aria-current="page"]::before { margin-right: 8px; }

/* ---- headings keep their words: site.css hyphenates h1 to h4, which broke "compari-son" in a narrow box ---- */
.hiw-hero h1, main h2, main h3 { hyphens: manual; }

/* ---- running-text links are inline: .sb-link is an inline block in site.css, which cannot wrap, so here a long link wraps with its sentence. The last word and the arrow stay together (.gx-nb), so the arrow never wraps alone. ---- */
.hiw-limit__p .sb-link, .hiw-hand .sb-link, .hiw-note .sb-link, .hiw-can td .sb-link, .sb-faq .sb-link { display: inline; margin-top: 0; padding-block: 0; }
.gx-nb { white-space: nowrap; }
main .sb-source time, main .sb-sources time { white-space: nowrap; }

/* ---- hero: the answer box reads at lede size, so give the first screen room for the H1 and the whole box ---- */
.hiw-hero .sb-answer { max-width: 36rem; }
.hiw-hero h1 { max-width: none; }
@media (max-width: 23.99em) { .hiw-hero h1 { font-size: 2.25rem; } }   /* 320 px: three lines, not four ('comparing' on its own line) */
@media (min-width: 64em) { .hiw-hero h1 { max-width: 16ch; } }
.hiw-hero .sb-hero__media img { object-position: 14% 18%; }

/* ---- the three steps: numeral, title, then the You / The website / You get rows aligned across the columns ---- */
.hiw-sec .sb-head { margin-bottom: var(--sp-7); }
.hiw-steps { max-width: none; }
.hiw-steps .sb-step-facts { margin: var(--sp-4) 0 0; }
.sb-step-facts > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.sb-step-facts dt { font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.sb-step-facts dd { margin: 4px 0 0; max-width: 34rem; }
/* "You get" is the result of the step: a sky soft row with a sky edge */
.sb-step-facts > div:last-child { margin-top: 2px; padding: 14px 16px 16px; background: var(--surface-2); border-top: 0; border-left: 4px solid var(--sky-text); }
@media (min-width: 64em) {
  .hiw-steps { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; }
  .hiw-steps > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: 1 / span 5; padding: var(--sp-5) var(--sp-6) var(--sp-6); border-bottom: 0; border-left: 1px solid var(--rule); align-content: start; }
  .hiw-steps > li:first-child { padding-left: 0; border-left: 0; }
  .hiw-steps > li:last-child { padding-right: 0; }
  .hiw-steps > li::before { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
  .hiw-steps h3 { grid-column: 1; grid-row: 2; margin-top: var(--sp-5); }
  .hiw-steps .sb-step-facts { grid-column: 1; grid-row: 3 / span 3; display: grid; grid-template-rows: subgrid; margin-top: var(--sp-5); }
  .hiw-steps .sb-step-facts > div { display: flex; flex-direction: column; justify-content: flex-start; }
}
.hiw-after { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--rule); display: grid; gap: var(--sp-3) var(--sp-7); align-items: center; }
.hiw-after > p, .hiw-after .sb-p-links { margin: 0; }
.hiw-after .sb-market-row { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); }
.hiw-after .sb-market-links__label { margin: 0; }
.hiw-req { margin-top: var(--sp-4); }
.hiw-next .sb-head { margin-bottom: var(--sp-5); }
@media (min-width: 64em) { .hiw-after { grid-template-columns: auto 1fr; } .hiw-after .sb-market-row { justify-content: flex-end; width: 100%; } }

/* ---- the four ZIP answers: a white sheet over the sky soft band ---- */
.hiw-zip .sb-sheet { margin-top: 0; }
.hiw-zip .sb-sheet .sb-table { margin-top: 0; }
.hiw-zip .sb-table caption { color: var(--text-soft); }
.hiw-zip .sb-split__b > .sb-sheet + p { margin-top: var(--sp-6); }

/* ---- what to have on hand: four ruled columns, each opening with its bold lead-in ---- */
.hiw-hand { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6) var(--sp-6); }
.hiw-hand > li { border-top: 2px solid var(--navy); padding-top: var(--sp-5); max-width: 36rem; }
.hiw-hand strong { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; color: var(--navy); }
.hiw-note { margin-top: var(--sp-4); max-width: 36rem; }
@media (min-width: 40em) { .hiw-hand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .hiw-hand { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- can and cannot: a full-width table; each answer opens with a drawn disc (full, half, empty) and the word ---- */
.hiw-can { margin-top: 0; }
.hiw-ans { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-weight: 600; color: var(--brand); }
.hiw-disc { width: 20px; height: 20px; flex: none; }
.hiw-disc .d-ring { fill: var(--paper); stroke: var(--navy); stroke-width: 1.8; }
.hiw-disc .d-fill { fill: var(--navy); stroke: none; }
@media (forced-colors: active) {
  /* system colours keep the three discs apart: full, half and empty */
  .hiw-disc .d-ring { fill: Canvas; stroke: CanvasText; }
  .hiw-disc .d-fill { fill: CanvasText; }
}
@media (min-width: 48em) {
  .hiw-can tbody th { width: 27%; padding-right: 28px; font-size: 1.0625rem; line-height: 1.35; }
  .hiw-can td:nth-child(2) { width: 31%; padding-right: 28px; }
  .hiw-can td, .hiw-can tbody th { padding-top: 18px; padding-bottom: 18px; }
}

/* ---- which installers a comparison covers: the one dark band, lede-size type ---- */
.hiw-limit h2 { max-width: none; }
@media (min-width: 64em) { .hiw-limit h2 { max-width: 12ch; } }
.hiw-limit__p { max-width: 32rem; font-size: var(--fs-lede); line-height: 1.6; color: var(--text); }
.hiw-limit__p + .hiw-limit__p { margin-top: var(--sp-5); color: var(--text-soft); }
.hiw-limit .sb-split__b > p { max-width: 32rem; }   /* 32rem: two wrapped links never share a line box, so a link's focus box holds only its own text */
.hiw-limit__p .sb-link { font-size: inherit; }
.hiw-limit__p .sb-link svg { vertical-align: -.1em; }

/* ---- sources: the numbered list, two columns on wide screens (the same list the other pages carry) ---- */
.hiw-sources .hiw-sources__lead { margin-top: var(--sp-3); color: var(--text-soft); max-width: 46rem; }
@media (min-width: 64em) {
  .hiw-sources ol.pb-sources { max-width: none; columns: 2; column-gap: var(--sp-8); }
  .hiw-sources ol.pb-sources li { break-inside: avoid; max-width: 31rem; }
}