/* My Solar Brokers stylesheet, mobile first (breakpoints in em: 40, 48, 64, 68.75). Sections: 1 tokens, 2 base and type, 3 layout, 4 utility bar and header, 5 buttons, 6 ZIP entry and forms, 7 heroes, 8 market ledger, 9 content components, 10 figures and charts, 11 contents and sources, 12 footer, 13 motion, forced colours, print. */


/* ============================================================ 1. TOKENS */
:root {
  /* Colour: navy, sky blue and gold. Solid hex values only; contrast ratios noted below are WCAG ratios. */
  --midnight: #0F1B33;     /* darkest band: utility bar, footer, ledger, data plates; the label on gold and sky fills */
  --navy: #1B2A4A;         /* text, headings, numerals, table heads, the action fill on light surfaces (14.2:1 on white) */
  --navy-soft: #3D4D6B;    /* secondary text, source lines (6.4:1 on sky soft) */
  --sky: #4FB3D9;          /* brand sky: fills, large shapes, icons, plate outlines on midnight. Never text on white (2.4:1) */
  --sky-bright: #6FC5E5;   /* text, links and rules on midnight or navy (8.8:1 and 7.3:1) */
  --sky-deep: #2F8FB5;     /* graphic strokes and large shapes on white; white text on it fails (3.7:1) */
  --sky-text: #1F6F94;     /* sky-coloured marks and icons on white, sky mist and sky soft (5.6, 5.1, 4.2:1) */
  --sky-soft: #C7E5F2;     /* answer boxes, bands, the lower end of the hero gradient (navy on it 10.8:1) */
  --sky-mist: #EEF6FB;     /* the page tint, alternate bands, the upper end of the hero gradient (navy on it 13.0:1) */
  --gold: #F5A623;         /* the action fill on dark surfaces; the sun marker on charts and plates. Never text on light */
  --gold-ink: #7E4E01;     /* the rare small warm text on light (7.1:1 on white) */
  --paper: #FFFFFF;
  --line: #C2D1E6;         /* hairlines on light */
  --line-strong: #7C95B4;  /* hairlines that must read as a boundary (3.1:1 on white) */
  --disabled-bg: #E2E6EB;  /* disabled controls are exempt from contrast; the ZIP submit is never disabled */
  --disabled-fg: #4B5563;
  --chart-b: #2F8FB5;      /* second chart series (sky deep): 3:1 against the page, told apart from the first by hue, weight and a direct label */
  --illus-bg: #0F1B33;     /* the cell illustration ground (midnight) */
  --edge-warm: #B87300;    /* 3:1 edge on the warm note tint (a border and a stroke, never text) */

  /* the accessibility token contract */
  --surface: #EEF6FB;      /* sky mist */
  --surface-2: #C7E5F2;    /* sky soft */
  --note-bg: #FFF5DE;
  --error-bg: #FDECEA;
  --positive-bg: #E1F0F8;
  --text: #1B2A4A;
  --text-soft: #3D4D6B;
  --brand: #1B2A4A;
  --link: #025798;
  --link-visited: #4B3590;
  --accent-ink: #7E4E01;   /* gold ink: the one warm text colour on light; rare and small */
  --error: #B3261E;
  --positive: #14577A;     /* success is a deep sky blue, always with a tick and a word */
  --field-border: #4F6486;
  --focus: #1B2A4A;
  --action-bg: #1B2A4A;
  --action-label: #FFFFFF;
  --surface-dark: #0F1B33;
  --surface-dark-2: #1B2A4A;
  --text-on-dark: #F3F8FD;
  --text-soft-on-dark: #C2D1E6;
  --link-on-dark: #6FC5E5;
  --link-visited-on-dark: #D3BFF5;
  --focus-on-dark: #F5A623;
  --action-bg-on-dark: #F5A623;
  --action-label-on-dark: #0F1B33;
  --rule-on-dark: #3B5078;
  --error-on-dark: #FFB4AB;

  /* semantic aliases the components read; .on-dark re-maps them together */
  --bg: var(--surface);
  --rule: var(--line);
  --rule-strong: var(--navy);
  --link-c: var(--link);
  --link-visited-c: var(--link-visited);
  --error-c: var(--error);
  --action-hover: #0F1B33;
  --action-pressed: #0A1428;
  --hero-sky: linear-gradient(180deg, #EEF6FB 0%, #C7E5F2 100%);   /* sky mist to sky soft: the bright hero ground; navy text sits on it at 10.8:1 or better */
  --w-display: 600;

  /* type: one family, Mona Sans (width 100). Body, UI and captions are fixed rem; display sizes are fluid. */
  --font: "Mona Sans", "Mona Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.75rem, 1.9rem + 2.9vw, 4.5rem);          /* 44 to 72 px */
  --fs-h1: clamp(2.25rem, 1.81rem + 1.88vw, 3.5rem);         /* 36 to 56 */
  --fs-stat: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);         /* 44 to 72 */
  --fs-h2: clamp(1.875rem, 1.48rem + 1.69vw, 3rem);          /* 30 to 48 */
  --fs-h3: clamp(1.5rem, 1.33rem + 0.74vw, 2rem);            /* 24 to 32 */
  --fs-h4: clamp(1.25rem, 1.21rem + 0.19vw, 1.375rem);       /* 20 to 22 */
  --fs-lede: clamp(1.25rem, 1.17rem + 0.37vw, 1.5rem);       /* 20 to 24 */
  --fs-body: 1.125rem;     /* 18 */
  --fs-ui: 1rem;           /* 16 */
  --fs-caption: .875rem;   /* 14, the floor */
  --trk-hero: -.034em; --trk-h1: -.03em; --trk-h2: -.024em; --trk-h3: -.014em;
  --lh-hero: 1.04; --lh-h1: 1.08; --lh-h2: 1.12; --lh-h3: 1.22; --lh-body: 1.6;
  --measure: 33em;

  /* space (4 px steps) and layout */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);           /* 56 to 104 */
  --container: 1240px;
  --gutter: 16px;
  --col-gap: 16px;

  /* shape, border, shadow, motion */
  --radius-ctl: 4px;       /* buttons, inputs, chips, plates */
  --shadow-menu: 0 10px 28px rgba(15, 27, 51, .18);   /* open menus only; nothing else casts a shadow */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-micro: 180ms;

  /* sizes */
  --h-utility: 44px;
  --h-header: 64px;
  --h-jump: 48px;
  --h-field: 56px;
  --h-btn-lg: 56px; --h-btn: 48px; --h-btn-sm: 44px;
  --sticky-top: 0px;       /* real height of what is pinned at the top; scroll-padding reads it (WCAG 2.4.11) */
}
@media (min-width: 48em) { :root { --gutter: 24px; --col-gap: 24px; } }
@media (min-width: 48em) and (min-height: 30em) { :root { --sticky-top: var(--h-header); } }

/* on-dark surfaces: flat midnight. Text, links, rules, the action colour and the focus ring change together. */
.on-dark {
  --bg: var(--surface-dark);
  --text: var(--text-on-dark);
  --text-soft: var(--text-soft-on-dark);
  --rule: var(--rule-on-dark);
  --rule-strong: var(--text-on-dark);
  --link-c: var(--link-on-dark);
  --link-visited-c: var(--link-visited-on-dark);
  --error-c: var(--error-on-dark);
  --action-bg: var(--action-bg-on-dark);
  --action-label: var(--action-label-on-dark);
  --action-hover: #FFB93B;
  --action-pressed: #E8981A;
  --focus: var(--focus-on-dark);
  --w-display: 570;
  background: var(--bg);
  color: var(--text);
}

/* metric-matched fallback so the swap to Mona Sans does not move the layout */
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial");
  size-adjust: 103.46%;
  ascent-override: 105.35%;
  descent-override: 30.93%;
  line-gap-override: 0%;
}

/* ============================================================ 2. BASE AND TYPE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-padding-top: calc(var(--sticky-top) + 16px); scroll-padding-bottom: 24px; }   /* bottom: a focused control is never left on the viewport edge */
html:has(.sb-jump) { --sticky-top: var(--h-jump); }
@media (min-width: 48em) and (min-height: 30em) { html:has(.sb-jump) { --sticky-top: calc(var(--h-header) + var(--h-jump)); } }
@media (max-height: 29.99em) { html:has(.sb-jump) { --sticky-top: 0px; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  font-variant-ligatures: no-common-ligatures; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
/* headings: only a very long word is hyphenated, so no short word is cut in two ("compari-son", "pan-els") and none can overflow at 200% text size. */
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-display); text-wrap: balance; color: var(--text); overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
sup { font-size: .7em; line-height: 0; }
main:focus { outline: none; }

h1, .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--trk-h1); }
h2, .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--trk-h2); }
h3, .t-h3 { font-size: var(--fs-h4); line-height: 1.28; letter-spacing: -.008em; }
.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--trk-hero); }
.t-lede, .sb-lede { font-size: var(--fs-lede); line-height: 1.45; max-width: 36rem; }
.t-small, .sb-caption { font-size: var(--fs-caption); line-height: 1.5; }
.t-soft, .sb-caption { color: var(--text-soft); }
/* the eyebrow: the only all-caps text, 14 px, four words or fewer */
.sb-eyebrow, .t-eyebrow { display: block; font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); text-wrap: initial; }

/* long strings (addresses, URLs, document titles) wrap rather than overflow, even in a narrow column at 200% text size */
a, .sb-errors, .sb-source, .sb-field__error, .sb-footer__company { overflow-wrap: anywhere; }
/* links: underlined in running text, in every state, visited set explicitly */
a { color: var(--link-c); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:visited { color: var(--link-visited-c); }
a:hover { text-decoration-thickness: 2px; }
/* a link to a PDF says so: the cue is drawn by CSS after the link's words, so the page's own words are unchanged, and it is part of the link's accessible name. The no-break space and nowrap keep the cue on the line of the last word. Links that draw their own cue (.hx-u) are left out so it is not printed twice. */
a[href$=".pdf" i]:not(:has(> .hx-u))::after, a[href*="/media/2211/download"]:not(:has(> .hx-u))::after { content: "\00a0(PDF)"; font-weight: 400; white-space: nowrap; }   /* a second address pattern: a PDF whose address has no .pdf ending */
/* no-break helpers: the last word of a link with its arrow, a short hyphenated word in text. The 23em floor keeps a long last word from forcing sideways scroll on the smallest phones. */
@media (min-width: 23em) { .gx-nb { white-space: nowrap; } }
.gx-hy { white-space: nowrap; }

/* focus: 3 px, 3 px offset, one style everywhere; on dark the ring is the sun colour. Hover has a focus twin. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:where(input, select, textarea):focus { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.sb-link { display: inline-block; font-weight: 600; text-decoration: none; color: var(--link-c); }
.sb-link:visited { color: var(--link-c); }
.sb-link__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.sb-link:hover .sb-link__t, .sb-link:focus-visible .sb-link__t { text-decoration-thickness: 2px; }
.sb-link svg { display: inline-block; width: 1em; height: 1em; margin-left: .4em; vertical-align: -.14em; transition: transform var(--t-micro) var(--ease); }
.sb-link:hover svg, .sb-link:focus-visible svg { transform: translateX(3px); }
/* a link on its own line, or in a row of links, is a 44 px target; a link inside a sentence stays inline */
.sb-links .sb-link, .sb-p-links .sb-link, .sb-market__go .sb-link, .sb-questions__item > .sb-link { padding-block: 10px; }
:where(div, li, section) > a.sb-link { padding-block: 10px; }
.sb-links, .sb-p-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); margin-top: var(--sp-3); }

/* ============================================================ 3. LAYOUT */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .7); }
.band-mist { background: var(--surface); }
.band-soft { background: var(--surface-2); }
.band-paper { background: var(--paper); }
.stack > * + * { margin-top: var(--sp-5); }
.stack-s > * + * { margin-top: var(--sp-3); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* slots: print nothing and take no space until a setting is filled */
.sb-slot:empty, .sb-checked:empty, [data-slot]:empty { display: none; }
/* an empty wrapper takes no room even when the page printer has removed its data-slot attribute (the class is what is left): a covered-utilities line, a links row or a paragraph with nothing in it.
   :empty matches only an element with nothing inside, so a filled one is laid out as before; a paragraph that is a live region (role or aria-live) stays in the layout. */
.sb-covered:empty, .sb-links:empty, p:empty:not([role]):not([aria-live]) { display: none; }
.sb-checked { font-size: var(--fs-caption); color: var(--text-soft); }

/* skip link: first focusable element, 44 px, above the pinned header */
.sb-skip { position: absolute; left: var(--sp-4); top: -80px; z-index: 100; min-height: 44px; display: inline-flex; align-items: center; background: var(--paper); color: var(--navy); padding: 0 18px; border-radius: var(--radius-ctl); font-weight: 600; border: 2px solid var(--navy); }
.sb-skip:visited { color: var(--navy); }
.sb-skip:focus { top: var(--sp-3); }

/* source line and the one quiet note */
/* line height 1.75 x 14 px = 24.5 px: a source link is a 24 px target without padding, so every line of a source has the same height */
.sb-source { font-size: var(--fs-caption); line-height: 1.75; color: var(--text-soft); max-width: 33em; }
.sb-source > span:first-child, .sb-source .sb-source__k { font-weight: 600; color: var(--text); }
/* a link in a source line is one box (it moves to the next line whole rather than splitting), so its focus ring is one rectangle. */
.sb-source a, .sb-sources a { display: inline-block; max-width: 100%; padding-block: 0; }
.sb-source time, .sb-sources time { white-space: nowrap; }   /* a date never splits over two lines */
.sb-note { font-size: var(--fs-ui); line-height: 1.5; color: var(--text-soft); max-width: 33em; }
.sb-note--warm { background: var(--note-bg); border-left: 4px solid var(--edge-warm); padding: var(--sp-3) var(--sp-4); color: var(--navy); }

/* section head: one heading, one lede */
.sb-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.sb-head p { font-size: var(--fs-lede); line-height: 1.45; color: var(--text-soft); max-width: 36rem; }
@media (min-width: 64em) {
  /* heading and lede start on the same line, so a short heading beside a longer lede is not pushed down */
  .sb-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .sb-head h2 { grid-column: 1 / span 7; }
  .sb-head p { grid-column: 8 / span 5; }
}

/* plain lists and the prose column (guides, trust pages) */
.sb-plain-list { list-style: none; padding: 0; }
.sb-plain-list li { padding: 14px 0; border-top: 1px solid var(--rule); max-width: var(--measure); }
.sb-plain-list li:last-child { border-bottom: 1px solid var(--rule); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-h3); letter-spacing: var(--trk-h3); line-height: var(--lh-h3); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--sp-2); }

/* ============================================================ 4. UTILITY BAR AND HEADER */
.sb-utility { background: var(--surface-dark); color: var(--text-soft-on-dark); font-size: var(--fs-caption); box-shadow: inset 0 -3px 0 var(--gold); }   /* the gold rule under the top bar: an inset line, so the bar keeps its 44 px */
.sb-utility .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; min-height: var(--h-utility); gap: 0 var(--sp-5); }
.sb-utility p { margin: 0; padding-block: 6px; }
.sb-utility ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--sp-5); }
.sb-utility li:not(.sb-slot) { display: none; }
.sb-utility li { display: flex; }
/* the two links are a menu, not a caption: 16 px; the sentence on the left stays a 14 px caption. The row keeps its height: 16 px type fits the 44 px row. */
.sb-utility a { position: relative; color: var(--text-soft-on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--h-utility); font-size: var(--fs-ui); }
.sb-utility a::after { content: ""; position: absolute; inset: -4px -8px; }   /* a 44 px hit area inside a 36 px row */
.sb-utility a:hover { color: var(--paper); text-decoration: underline; }
.sb-utility :focus-visible { outline-color: var(--focus-on-dark); }
@media (min-width: 40em) { .sb-utility li:not(.sb-slot) { display: flex; } }

/* header: static on phones and short windows; pinned (64 px) only from 48em wide and 30em tall */
.sb-header { position: relative; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--text-soft-on-dark); }   /* same pale blue as --line; written as the soft light text colour so a pinned header edge over soft text on a dark band is not read as a different pixel */
@media (min-width: 48em) and (min-height: 30em) { html.js .sb-header, .sb-header { position: sticky; top: 0; } html:not(.js) .sb-header { position: relative; } }
.sb-header__in { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--h-header); }
.sb-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--navy); text-decoration: none; margin-right: auto; min-width: 0; }
.sb-brand:visited { color: var(--navy); }
.sb-logo { display: block; height: 40px; aspect-ratio: 168 / 152; flex: none; }
.sb-logo img { width: 100%; height: 100%; }
.sb-brand__name { font-weight: 600; font-size: 1.1875rem; letter-spacing: -.016em; line-height: 1.15; }

.sb-nav { display: none; }
.sb-nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.sb-nav a, .sb-pop > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; color: var(--navy);
  font-size: var(--fs-ui); font-weight: 500; text-decoration: none; cursor: pointer; list-style: none;
}
.sb-nav a:visited { color: var(--navy); }
.sb-nav a:hover, .sb-pop > summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.sb-nav a[aria-current], .sb-pop[data-current] > summary { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; text-decoration-color: var(--sky-text); }
.sb-pop > summary::-webkit-details-marker { display: none; }
.sb-pop { position: relative; }
.sb-pop > summary svg { width: 14px; height: 14px; transition: transform var(--t-micro) var(--ease); }
.sb-pop[open] > summary svg { transform: rotate(180deg); }
.sb-pop__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 400px; max-width: calc(100vw - 2 * var(--gutter)); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); box-shadow: var(--shadow-menu); padding: 8px; }
.sb-pop__panel a { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 12px; border-radius: 2px; font-weight: 600; }
.sb-pop__panel a small { display: block; font-size: var(--fs-ui); font-weight: 400; color: var(--navy-soft); line-height: 1.3; }
.sb-pop__panel a svg { width: 16px; height: 16px; color: var(--sky-text); flex: none; }
.sb-pop__panel a:hover { background: var(--sky-soft); text-decoration: none; }
.sb-pop__panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.sb-pop__panel .sb-pop__all { font-weight: 500; text-decoration: underline; color: var(--link); }

.sb-header .sb-header__cta { display: none; flex: none; }
html[data-zip-off] .sb-header__cta { background: var(--action-bg); border-color: var(--action-bg); color: var(--paper); }
html[data-zip-off] .sb-header__cta:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--paper); }
@media (min-width: 40em) { .sb-header .sb-header__cta { display: inline-flex; } }

/* the phone menu: a labelled "Menu" button and an in-flow panel that pushes content down (no overlay, so focus is never hidden) */
.sb-menu-btn { display: none; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; border: 2px solid var(--navy); border-radius: var(--radius-ctl); color: var(--navy); font-weight: 600; font-size: var(--fs-ui); cursor: pointer; }
.sb-menu-btn svg { width: 22px; height: 22px; }
.sb-menu-btn .i-close { display: none; }
.sb-menu-btn[aria-expanded="true"] .i-close { display: block; }
.sb-menu-btn[aria-expanded="true"] .i-open { display: none; }
html.js .sb-menu-btn { display: inline-flex; }
.sb-menu-panel { background: var(--paper); border-top: 1px solid var(--line); padding: 4px var(--gutter) 24px; }
.sb-menu-panel[hidden] { display: none; }
/* the panel is closed before the script runs, so it does not collapse and shift the layout when js/site.js sets [hidden]. Without :has() support the script alone hides the panel; with scripts off the html.js class is absent and the open list is the phone navigation. */
@supports selector(:has(*)) {
  @media (max-width: 68.74em) {
    html.js .sb-menu-panel { display: none; }
    html.js:has(.sb-menu-btn[aria-expanded="true"]) .sb-menu-panel { display: block; }
  }
}
.sb-menu-panel ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--container); }
.sb-menu-panel li { border-bottom: 1px solid var(--line); }
.sb-menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--navy); font-size: 1.1875rem; font-weight: 600; text-decoration: none; }
.sb-menu-panel a:visited { color: var(--navy); }
.sb-menu-panel .sb-menu__sub { border: 0; }
.sb-menu-panel .sb-menu__sub li { border: 0; }
.sb-menu-panel .sb-menu__sub a { min-height: 48px; font-size: 1rem; font-weight: 500; padding-left: 16px; color: var(--navy-soft); }
.sb-menu__label { display: block; padding-top: 14px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-soft); }
.sb-menu-panel a svg { width: 16px; height: 16px; color: var(--sky-text); }
/* a second way to the ZIP check on phones, where the header button is not drawn */
@media (min-width: 40em) { .sb-menu-panel .sb-menu__zip { display: none; } }
/* tablets: two columns, and from 48em the open panel is a dropdown under the pinned header. Only with scripts (html.js): with scripts off the panel is a plain list and stays in flow. Short windows (under 30em high) keep the in-flow panel. */
@media (min-width: 40em) { .sb-menu-panel > ul { column-count: 2; column-gap: var(--sp-7); } .sb-menu-panel li { break-inside: avoid; } }
@media (min-width: 48em) and (min-height: 30em) {
  html.js .sb-menu-panel { position: absolute; top: 100%; left: 0; right: 0; padding-top: var(--sp-2); max-height: calc(100vh - var(--h-header) - 8px); max-height: calc(100dvh - var(--h-header) - 8px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-menu); border-bottom: 1px solid var(--line-strong); }
  .sb-menu-panel a:focus-visible { outline-offset: -3px; }
}
@media (min-width: 68.75em) {
  .sb-nav { display: block; margin-left: var(--sp-6); margin-right: auto; }
  .sb-menu-btn, .sb-menu-panel, html.js .sb-menu-btn { display: none; }
  .sb-brand { margin-right: 0; }
  .sb-header__in { gap: var(--sp-5); }
}

/* phone call: prints only when the site phone setting is filled */
.sb-phone { white-space: nowrap; }
.sb-btn--call svg { width: 18px; height: 18px; }

/* ============================================================ 5. BUTTONS */
.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--h-btn); padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--radius-ctl); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.006em;
  line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.sb-btn, .sb-btn:visited { color: var(--action-label); }
.sb-btn--primary { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-label); }
.sb-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); text-decoration: none; }
.sb-btn--primary:active { background: var(--action-pressed); border-color: var(--action-pressed); }
.sb-btn--outline, .sb-btn--outline:visited { background: transparent; border-color: var(--rule-strong); color: var(--text); }
.sb-btn--outline:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); text-decoration: none; }
.on-dark .sb-btn--outline:hover { background: var(--text-on-dark); border-color: var(--text-on-dark); color: var(--midnight); }
.sb-btn--lg { min-height: var(--h-btn-lg); padding: 0 28px; font-size: 1.125rem; }
.sb-btn--sm { min-height: var(--h-btn-sm); padding: 0 16px; font-size: 1rem; }   /* buttons 16 px */
.sb-btn:disabled, .sb-btn[aria-disabled="true"] { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; }

/* ============================================================ 6. ZIP ENTRY, OUTCOMES AND FORMS */
.sb-zip { display: block; max-width: 34rem; }
.sb-zip label, .sb-field label, .sb-field legend { display: block; margin-bottom: 8px; font-size: var(--fs-ui); font-weight: 600; }
.sb-zip__row { display: flex; flex-direction: column; gap: var(--sp-3); }
.sb-zip input, .sb-field input[type="text"], .sb-field input[type="email"], .sb-field input[type="tel"], .sb-field select, .sb-field textarea {
  width: 100%; min-width: 0; min-height: var(--h-field); padding: 0 18px; background: var(--paper); color: var(--navy);
  border: 2px solid var(--field-border); border-radius: var(--radius-ctl);
  font-size: 1.125rem; font-weight: 500; font-variant-numeric: lining-nums;
}
.sb-zip input { font-size: 1.375rem; letter-spacing: .08em; }
.sb-field textarea { min-height: 9rem; padding: 14px 18px; line-height: 1.5; }
.sb-zip input:focus, .sb-field input:focus, .sb-field select:focus, .sb-field textarea:focus { border-color: var(--navy); }
.sb-zip input[aria-invalid="true"], .sb-field [aria-invalid="true"] { border-color: var(--error-c); }
.sb-zip .sb-btn { width: 100%; }
@media (min-width: 30em) {
  .sb-zip__row { flex-direction: row; gap: 0; }
  .sb-zip input { flex: 1 1 auto; border-right-width: 0; border-radius: var(--radius-ctl) 0 0 var(--radius-ctl); }
  .sb-zip input:focus { border-right-width: 2px; }
  .sb-zip .sb-btn { width: auto; flex: none; border-radius: 0 var(--radius-ctl) var(--radius-ctl) 0; }
}
.sb-zip__hint, .sb-zip__what { margin-top: 12px; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); }
.sb-zip__what { margin-top: 4px; }
/* scripts off: the ZIP lookup cannot run, so the form is not drawn; its note and the market links under it stay */
html:not(.js) form.sb-zip { display: none; }
html:not(.js) .sb-zip__what { margin-top: 12px; }
.sb-zip__error, .sb-field__error { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: var(--fs-ui); font-weight: 600; color: var(--error-c); }
.sb-zip__error[hidden], .sb-field__error[hidden] { display: none; }
.sb-zip__error svg, .sb-field__error svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.sb-zip__result { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--navy); font-size: 1rem; line-height: 1.5; border-radius: var(--radius-ctl); }
.sb-zip__result[hidden] { display: none; }   /* pages built before 9 Oct still carry the attribute; js/site.js removes it on load */
.sb-zip__result:empty { margin: 0; padding: 0; border: 0; }   /* the status region stays in the layout (WCAG 4.1.3); empty, it takes no space */
.sb-zip__result strong { display: block; font-size: 1.0625rem; }
.sb-zip__result--chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-top: 12px; }
.sb-zip__result--chip strong { display: inline; }
.sb-card { background: var(--paper); border: 1px solid var(--line-strong); padding: var(--sp-5); }   /* rare: a ruled panel, no shadow, no radius */
.sb-zip__result a { color: var(--link); font-weight: 600; display: inline-block; padding-block: 10px; }
.sb-zip__result ul { margin: 8px 0 0; padding-left: 18px; }
.sb-zip__result li { padding-block: 0; }
.on-dark .sb-zip__result { background: var(--navy); border-color: var(--rule-on-dark); color: var(--text-on-dark); }
.on-dark .sb-zip__result a { color: var(--link-on-dark); }
.on-dark .sb-zip input { border-color: var(--paper); }

.sb-market-row { margin-top: var(--sp-5); }
.sb-market-links__label { margin: 0; font-size: var(--fs-caption); color: var(--text-soft); }
.sb-market-links { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0 var(--sp-5); }
.sb-market-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.sb-market-links a:visited { color: var(--text); }
.sb-market-links svg { width: 16px; height: 16px; transition: transform var(--t-micro) var(--ease); }
.sb-market-links a:hover svg, .sb-market-links a:focus-visible svg { transform: translateX(3px); }
.sb-market-links a:hover { text-decoration-thickness: 2px; }
.sb-market-links .sb-link { padding-block: 0; }

/* generic fields (Contact, the request step, the ambiguous-ZIP choice): visible label, text error beside the field, 44 px choices */
.sb-field { margin-top: var(--sp-5); max-width: 34rem; border: 0; padding: 0; min-width: 0; }
.sb-field__hint { margin-top: 6px; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); }
.sb-field .sb-choice, .sb-choice { display: flex; font-weight: 500; margin-bottom: 0; font-size: var(--fs-ui); align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; margin-top: 8px; background: var(--paper); border: 2px solid var(--field-border); border-radius: var(--radius-ctl); cursor: pointer; }
.sb-choice input { width: 22px; height: 22px; flex: none; accent-color: var(--navy); margin: 0; }
.sb-choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); font-weight: 600; }
.sb-errors { border: 2px solid var(--error); background: var(--error-bg); color: var(--navy); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); border-radius: var(--radius-ctl); }
.sb-errors:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.sb-errors h2 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.sb-errors ul { margin: 0; padding-left: 1.25em; }
.sb-errors a { color: var(--link); font-weight: 600; display: inline-block; padding-block: 10px; }
/* ZIP outcome page: a plain statement of coverage, no hero */
.sb-outcome { max-width: 44rem; padding-block: var(--sp-8); }
.sb-outcome h1 { font-size: var(--fs-h1); }
.sb-outcome > * + * { margin-top: var(--sp-5); }
.sb-outcome .sb-lede { max-width: none; }

/* ============================================================ 7. HEROES, PHOTOGRAPH FIGURE, DATA PLATE */
.sb-hero { position: relative; background: var(--hero-sky); display: flex; flex-direction: column; }
.sb-hero__media { position: relative; margin: 0; order: -1; aspect-ratio: 16 / 9; background: var(--midnight); overflow: hidden; }
.sb-hero__media picture, .sb-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-hero__media img { object-fit: cover; object-position: 30% 55%; }
.sb-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--midnight); opacity: 0; pointer-events: none; }
/* caption: a solid strip below the picture, never over it. The figure becomes a column with the strip at its foot and the picture takes the height the strip leaves. Only a figure whose caption is a direct child is touched (:has); .sb-cap on its own keeps the corner-panel form. */
.sb-cap { position: absolute; right: 0; bottom: 0; z-index: 2; background: var(--midnight); color: var(--text-soft-on-dark); font-size: var(--fs-caption); line-height: 1.2; padding: 8px 12px; }
:is(.sb-hero__media, .sb-survey, .sb-cells__pic):has(> .sb-cap) { --cap-h: 44px; display: flex; flex-direction: column; justify-content: flex-end; }
:is(.sb-hero__media, .sb-survey, .sb-cells__pic):has(> .sb-cap) > picture { bottom: var(--cap-h); height: auto; }   /* height:auto lets top and bottom size the picture; with height:100% the bottom offset is ignored and the strip would sit on the picture */
:is(.sb-hero__media, .sb-survey, .sb-cells__pic) > .sb-cap { position: static; flex: none; display: flex; align-items: center; min-height: var(--cap-h); padding: 6px var(--gutter); }
.sb-hero__copy { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: var(--sp-5) var(--sp-7); }
.sb-hero h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--trk-hero); }
.sb-hero h1 .sb-h1__t { display: block; max-width: 11ch; }
.sb-hero h1 .sb-eyebrow { color: var(--navy); margin-bottom: var(--sp-4); max-width: none; font-weight: 600; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: .08em; }
.sb-hero .sb-lede { margin-top: var(--sp-5); font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); line-height: 1.45; color: var(--navy); max-width: 33rem; }
.sb-hero .sb-zip { margin-top: var(--sp-6); }
.sb-hero .sb-slot { margin-top: var(--sp-4); max-width: 34rem; font-size: var(--fs-caption); color: var(--text-soft); }
@media (min-width: 64em) {
  .sb-hero {
    display: grid; min-height: 640px;
    grid-template-columns: max(var(--gutter), calc((100% - var(--container)) / 2)) minmax(0, min(580px, 46%)) clamp(32px, 3.4vw, 48px) minmax(0, 1fr);
  }
  .sb-hero__copy { grid-column: 2; grid-row: 1; width: auto; margin: 0; padding-block: 56px 56px; align-self: center; }
  .sb-hero__media { grid-column: 4; grid-row: 1; order: 0; aspect-ratio: auto; }
  .sb-hero__media img { object-position: 28% 55%; }
}

/* hub hero: deep panel + graded photograph + a solid data strip beside the photograph (not on it) */
.sb-hero--hub { background: var(--hero-sky); }
.sb-hero--hub .sb-hero__copy { padding-block: var(--sp-3) var(--sp-7); }
.sb-hero--hub h1 { max-width: 15ch; font-size: var(--fs-hero); color: var(--text); }
.sb-hero--hub .sb-lede { color: var(--text); margin-top: var(--sp-4); font-size: clamp(1.125rem, 1.08rem + .25vw, 1.3125rem); max-width: 38rem; }
.sb-hero--hub .sb-zip { margin-top: var(--sp-5); }
.sb-hero--hub .sb-what { margin-top: 4px; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); }
.sb-what small { font-size: inherit; }
.sb-hero--hub .sb-hero__media img { object-position: 50% 40%; }
.sb-hero--hub.sb-hero--tx .sb-hero__media img { object-position: 78% 55%; }
.sb-hero--hub.sb-hero--nj .sb-hero__media img { object-position: 55% 50%; }
.sb-hero--hub .sb-breadcrumb { margin-top: var(--sp-5); }
.sb-hero__side { display: flex; flex-direction: column; min-width: 0; }
.sb-hero__side .sb-hero__media { order: 0; flex: 1 1 auto; }
.sb-hero__side .sb-plate { order: 1; }
@media (min-width: 64em) {
  .sb-hero--hub { min-height: 620px; grid-template-columns: max(var(--gutter), calc((100% - var(--container)) / 2)) minmax(0, min(640px, 52%)) clamp(24px, 3vw, 48px) minmax(0, 1fr); }
  .sb-hero--hub .sb-hero__copy { padding-block: 24px 56px; align-self: start; }
  .sb-hero--hub .sb-hero__side { grid-column: 4; grid-row: 1; }
  .sb-hero--hub .sb-hero__side .sb-hero__media { grid-column: auto; }
}

/* page hero (Solar, Roofing, How it works): sky mist split with an illustration or photograph */
.sb-hero--page { background: var(--hero-sky); }
.sb-hero--page .sb-hero__copy { padding-block: var(--sp-3) var(--sp-7); }
.sb-hero--page h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--trk-h1); max-width: 12ch; }
.sb-hero--page .sb-breadcrumb { margin-top: var(--sp-3); }
.sb-hero--page .sb-answer { margin-top: var(--sp-6); max-width: 38rem; }
.sb-hero--page .sb-hero__media { background: var(--illus-bg); }
@media (min-width: 64em) { .sb-hero--page { min-height: 600px; } .sb-hero--page .sb-hero__copy { padding-block: 24px 64px; align-self: start; } }

/* compact hero (FAQ, Contact, legal): a deep band with type, no picture */
.sb-hero--compact { background: var(--surface-dark); }
.sb-hero--compact .sb-hero__copy { padding-block: var(--sp-3) var(--sp-8); }
.sb-hero--compact h1 { max-width: 20ch; font-size: var(--fs-h1); color: var(--text); }
.sb-hero--compact .sb-lede { margin-top: var(--sp-4); color: var(--text); }
@media (min-width: 64em) { .sb-hero--compact { display: block; min-height: 0; } .sb-hero--compact .sb-hero__copy { padding-block: 24px 72px; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } }

/* type-led hero (guides, About): light, the answer box under the H1 */
.sb-hero--type { background: var(--hero-sky); }
.sb-hero--type .sb-hero__copy { padding-block: var(--sp-3) var(--sp-7); }
.sb-hero--type h1 { font-size: var(--fs-h1); max-width: 18ch; line-height: var(--lh-h1); letter-spacing: var(--trk-h1); }
.sb-hero--type .sb-answer { margin-top: var(--sp-6); max-width: 46rem; }
@media (min-width: 64em) { .sb-hero--type { display: block; min-height: 0; } .sb-hero--type .sb-hero__copy { padding-block: 24px 64px; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } }

/* breadcrumb: one per page, a labelled nav; every link a 44 px target */
.sb-breadcrumb { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-ui); color: var(--text-soft); }
.sb-breadcrumb li { display: inline-flex; align-items: center; }
/* the slash follows each earlier item, so a wrapped trail never starts a line with one, and the current page keeps the same gap after the slash as every other crumb */
.sb-breadcrumb li:not(:last-child)::after { content: "/"; margin: 0; color: var(--text-soft); }
.sb-breadcrumb li:nth-last-child(2)::after { margin-right: 8px; }
.sb-breadcrumb a { color: var(--text-soft); text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.sb-breadcrumb a:visited { color: var(--text-soft); }
.sb-breadcrumb [aria-current] { color: var(--text); font-weight: 600; padding-inline: 0; }
.sb-breadcrumb li:first-child a { margin-left: -8px; }

/* data plate: a solid strip under the photograph, the sun heights for the anchor city and the one-line source */
.sb-plate { --focus: var(--focus-on-dark); --link-c: var(--link-on-dark); --link-visited-c: var(--link-visited-on-dark); --text: var(--text-on-dark); --text-soft: var(--text-soft-on-dark); --rule: var(--rule-on-dark); position: relative; z-index: 2; background: var(--midnight); color: var(--text-on-dark); border-block: 0; padding: 14px var(--gutter) 14px; display: grid; grid-template-columns: 72px 1fr; gap: 2px 16px; align-items: center; }
.sb-plate svg { width: 72px; height: 72px; grid-row: span 3; }
.sb-plate svg path.o { fill: rgba(79, 179, 217, .18); stroke: var(--sky); stroke-width: 2; stroke-linejoin: round; }
.sb-plate svg circle { fill: var(--gold); stroke: var(--midnight); stroke-width: 1.5; }
.sb-plate .sb-plate__meta, .sb-plate .sb-plate__source { margin: 0; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-soft-on-dark); }
.sb-plate b { color: var(--text-on-dark); font-weight: 600; }
.sb-plate .sb-plate__source { grid-column: 1 / -1; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--rule-on-dark); }
@media (min-width: 64em) { .sb-plate { padding-inline: 20px; } }

/* photograph figure: a rectangular picture with a captioned corner; grade classes are baked into the files */
.sb-photo { position: relative; margin: 0; background: var(--midnight); overflow: hidden; }
.sb-photo picture, .sb-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================ 8. MARKET LEDGER: "Where we work" */
.sb-ledger { padding-block: var(--section); }
.sb-ledger .sb-head p { color: var(--text-soft-on-dark); }
.sb-markets { display: grid; grid-template-columns: 1fr; border-top: 3px solid var(--gold); }
.sb-market { display: flex; flex-direction: column; padding: var(--sp-6) 0 var(--sp-7); border-bottom: 1px solid var(--rule); min-width: 0; }
.sb-market:last-child { border-bottom: 0; }
.sb-market__plate { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: var(--sp-4); }
.sb-market__outline { width: 92px; height: 92px; flex: none; }
.sb-market__outline path.o { fill: rgba(79, 179, 217, .16); stroke: var(--sky); stroke-width: 2; stroke-linejoin: round; }
.sb-market__outline circle { fill: var(--gold); stroke: var(--midnight); stroke-width: 2; }
.sb-arcs { max-width: 100%; width: 196px; height: auto; flex: none; overflow: visible; }
.sb-arcs .hz { stroke: var(--rule-on-dark); stroke-width: 1; }
.sb-arcs path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.sb-arcs path.j { stroke: var(--sky-bright); }
.sb-arcs path.d { stroke: var(--sky); }
.sb-arcs circle { fill: var(--gold); stroke: var(--bg); stroke-width: 1.5; }
.sb-arcs text { font-family: var(--font); font-size: 16px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.sb-market p.sb-market__meta { margin-bottom: var(--sp-6); font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft-on-dark); }
.sb-market__meta b { display: block; color: var(--text-on-dark); font-weight: 600; font-size: 1rem; }
.sb-market h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--trk-h3); margin-bottom: var(--sp-4); }
.sb-market p { color: var(--text-on-dark); font-size: var(--fs-body); line-height: 1.6; max-width: 34rem; }
.sb-market p.sb-source { margin-top: var(--sp-4); font-size: var(--fs-caption); line-height: 1.75; color: var(--text-soft); max-width: 33em; }
.sb-market .sb-source a, .sb-ledger__foot .sb-source a { color: var(--link-on-dark); }
.sb-market__go { margin-top: auto; padding-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.sb-ledger__foot { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--rule); display: grid; gap: var(--sp-3); }
@media (min-width: 64em) {
  .sb-markets { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); }
  .sb-markets .sb-market { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; row-gap: 0; padding: var(--sp-7) var(--sp-6) var(--sp-8); border-bottom: 0; border-left: 1px solid var(--rule); }
  .sb-market:first-child { padding-left: 0; border-left: 0; }
  .sb-market:last-child { padding-right: 0; }
  .sb-market .sb-market__go { align-self: end; }
  .sb-ledger__foot { grid-template-columns: 1fr auto; align-items: center; }
}

/* ============================================================ 9. CONTENT COMPONENTS */
/* steps: ruled, big numerals; --plain is the compact text version */
.sb-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.sb-steps > li { counter-increment: step; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--sp-4); padding: var(--sp-5) 0 var(--sp-6); border-bottom: 1px solid var(--rule); }
.sb-steps > li::before { content: counter(step); grid-row: span 2; font-size: var(--fs-stat); font-weight: 600; line-height: .95; letter-spacing: -.04em; color: var(--sky-text); }
.sb-steps { max-width: 38rem; }
.sb-steps h3, .sb-steps h4 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: var(--trk-h3); }
.sb-steps p { margin-top: var(--sp-2); max-width: 36rem; color: var(--text-soft); }
@media (min-width: 48em) { .sb-steps > li { grid-template-columns: 6rem minmax(0, 1fr); } }
.sb-steps--plain { border-top: 0; }
.sb-steps--plain > li { display: block; position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--rule); border-bottom: 0; }
.sb-steps--plain > li:last-child { border-bottom: 1px solid var(--rule); }
.sb-steps--plain > li::before { position: absolute; left: 0; top: 14px; font-size: 1.25rem; line-height: 1.6; letter-spacing: 0; width: 32px; }

/* ruled steps in columns: numeral on top, one column each, hairlines between */
@media (min-width: 64em) {
  .sb-steps--cols { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-steps--cols > li { display: block; padding: var(--sp-5) var(--sp-6) var(--sp-6) var(--sp-6); border-bottom: 0; border-left: 1px solid var(--rule); }
  .sb-steps--cols > li:first-child { padding-left: 0; border-left: 0; }
  .sb-steps--cols > li::before { display: block; margin-bottom: var(--sp-4); }
}

/* two-column section: a sticky head on the left (4 columns) and the body on the right (7); --57 is 5 and 6 */
.sb-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 64em) {
  .sb-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .sb-split__a { grid-column: 1 / span 4; }
  .sb-split__b { grid-column: 6 / span 7; }
  .sb-split--57 .sb-split__a { grid-column: 1 / span 5; }
  .sb-split--57 .sb-split__b { grid-column: 7 / span 6; }
}
@media (min-width: 64em) and (min-height: 30em) { .sb-split__a--sticky { position: sticky; top: calc(var(--sticky-top) + var(--sp-6)); align-self: start; } }
.sb-split__a > p { margin-top: var(--sp-4); color: var(--text-soft); font-size: var(--fs-lede); line-height: 1.45; }
.sb-split__a .sb-links { margin-top: var(--sp-5); }
.sb-split__a .sb-yearstrip { margin-top: var(--sp-7); }
.sb-split__a > p.sb-lede-l { margin-top: var(--sp-5); font-size: var(--fs-lede); line-height: 1.45; color: var(--navy); max-width: 30rem; }
.sb-split__b > * + * { margin-top: var(--sp-4); }
.sb-split__b > p { max-width: var(--measure); }
.sb-split__b > .sb-source { margin-top: var(--sp-3); }
.sb-split__b > .sb-source + p { margin-top: var(--sp-5); }
.sb-split__b > table, .sb-split__b > .sb-table-wrap, .sb-split__b > .sb-chart, .sb-split__b > .sb-worked, .sb-split__b > .sb-definition, .sb-split__b > .sb-plain-list, .sb-split__b > .sb-faq, .sb-split__b > .sb-sheet, 
.sb-split__b table + p, .sb-split__b .sb-table-wrap + p, .sb-split__b .sb-definition + p { margin-top: var(--sp-5); }
.sb-split__b .sb-table + .sb-source { margin-top: var(--sp-3); }
.sb-split__b li > strong:first-child { color: var(--navy); }

/* tables: real tables, caption on top, units in the heads, hairlines only */
.sb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.5; }
.sb-table caption { caption-side: top; text-align: left; font-size: var(--fs-caption); line-height: 1.5; color: var(--text-soft); padding-bottom: 12px; max-width: 52rem; }
.sb-table th, .sb-table td { padding: 14px 20px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.sb-table thead th { font-size: var(--fs-ui); font-weight: 600; color: var(--text); border-bottom: 2px solid var(--navy); padding-top: 0; padding-bottom: 10px; }
.sb-table tbody th { font-weight: 600; color: var(--text); }
.sb-table tbody tr:last-child > * { border-bottom-color: var(--navy); }
.sb-table td:last-child, .sb-table th:last-child { padding-right: 0; }
.sb-table .num { text-align: right; font-variant-numeric: lining-nums; }
.sb-table time { white-space: nowrap; }
/* a link that is the whole cell is a 44 px target that borrows the cell padding, so rows keep their height */
.sb-table a.sb-cell-link { display: inline-block; padding-block: 10px; margin-block: -10px; }
/* a table that is wider than the screen sits in a labelled scroll region the keyboard can reach */
.sb-table-wrap { overflow-x: auto; background:
  linear-gradient(to right, var(--surface) 30%, rgba(238,246,251,0)) left center / 28px 100% no-repeat local,
  linear-gradient(to left, var(--surface) 30%, rgba(238,246,251,0)) right center / 28px 100% no-repeat local,
  linear-gradient(to right, rgba(27,42,74,.22), rgba(27,42,74,0)) left center / 10px 100% no-repeat scroll,
  linear-gradient(to left, rgba(27,42,74,.22), rgba(27,42,74,0)) right center / 10px 100% no-repeat scroll; }
.sb-table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (max-width: 47.99em) { .sb-table-wrap .sb-table { min-width: 30rem; } .sb-table-wrap .sb-table--numbers th, .sb-table-wrap .sb-table--numbers td { padding-right: 14px; } }
/* phone: rows become a stacked list; the build puts table roles back on the elements so the table stays a table to assistive technology */
@media (max-width: 47.99em) {
  /* the column heads leave the screen but stay in the accessibility tree: display:none would remove them and a clip reads as cut-off text, so they are moved off the page. Each cell shows its column name in ::before; the roles keep the table a table. */
  .sb-table--stack thead { display: block; position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; }
  .sb-table--stack, .sb-table--stack tbody, .sb-table--stack tr, .sb-table--stack th, .sb-table--stack td { display: block; width: 100%; }
  .sb-table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .sb-table--stack tbody tr:last-child { border-bottom-color: var(--navy); }
  .sb-table--stack th, .sb-table--stack td { padding: 3px 0; border: 0; }
  .sb-table--stack tbody th { font-size: 1.0625rem; padding-bottom: 6px; }
  .sb-table--stack td[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--text-soft); }
  .sb-table--stack td:empty { display: none; }
  .sb-table--stack .num { text-align: left; }
  .sb-table--stack caption { display: block; }
  /* the quote sheet stays a form: each blank column becomes a labelled blank line */
  .sb-table--sheet.sb-table--stack td.sb-blank { display: flex; align-items: flex-end; gap: 10px; min-height: 44px; padding-top: 10px; }
  .sb-table--sheet.sb-table--stack td.sb-blank::before { flex: none; margin-bottom: 2px; }
  .sb-table--sheet.sb-table--stack td.sb-blank::after { content: ""; flex: 1 1 auto; border-bottom: 1px solid var(--navy-soft); height: 1.25em; }
  .sb-table--sheet.sb-table--stack td.sb-blank:empty { display: flex; }
}
/* the quote sheet: the one table that is a form (print it, fill it) */
.sb-sheet { background: var(--paper); border: 1px solid var(--navy); }
.sb-sheet--pad { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
@media (min-width: 64em) { .sb-sheet--pad { padding: var(--sp-6) var(--sp-6) var(--sp-3); } }
.sb-table--sheet { font-size: var(--fs-ui); }
.sb-table--sheet caption { padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.sb-table--sheet thead th { background: var(--navy); color: var(--paper); border: 0; padding: 14px 20px; font-size: var(--fs-ui); }
@media (min-width: 48em) {
  .sb-table--sheet tbody th, .sb-table--sheet tbody td { padding: 16px 20px; border-bottom: 1px solid var(--rule); }
  .sb-table--sheet tbody td + td { border-left: 1px solid var(--rule); }
  .sb-table--sheet tbody td:nth-child(n+3) { min-width: 120px; }
  .sb-table--sheet tbody tr:last-child > * { border-bottom: 0; }
  .sb-table--sheet thead th:nth-child(n+3) { border-left: 1px solid rgba(255, 255, 255, .45); }
}
@media (max-width: 47.99em) { .sb-table--sheet caption { padding: 14px 16px; } .sb-table--sheet tbody tr { padding: 16px; } }
.sb-table--worked tbody td:last-child { font-weight: 600; color: var(--brand); }
@media (min-width: 48em) { .sb-table--worked thead th:last-child, .sb-table--worked tbody td:last-child { width: 36%; white-space: nowrap; } .sb-table--worked thead th:first-child { width: 26%; } }
.sb-table--changing tbody tr > :first-child { white-space: nowrap; }

/* stat figure and the year strip (the federal credit module) */
.sb-stat { font-size: var(--fs-stat); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--brand); padding-top: var(--sp-4); border-top: 2px solid var(--navy); }
.sb-stat__label { margin-top: var(--sp-3); color: var(--text-soft); font-size: var(--fs-body); line-height: 1.45; max-width: 22rem; }
.sb-yearstrip { border-top: 2px solid var(--navy); padding-top: var(--sp-3); }
.sb-years__cap { margin: 0 0 var(--sp-3); font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.sb-years { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 6px; }
.sb-years li { display: flex; flex-direction: column; justify-content: center; min-height: 84px; padding: 10px 6px; text-align: center; font-size: clamp(1.125rem, 1rem + .6vw, 1.625rem); font-weight: 600; letter-spacing: -.01em; background: var(--navy); color: var(--paper); border: 2px solid var(--navy); }
.sb-years li small { display: block; margin-top: 2px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0; color: var(--text-soft-on-dark); }
.sb-years li.sb-years__end { background: transparent; color: var(--text); border: 2px dashed var(--navy); text-align: left; padding-inline: 12px; font-size: 1rem; line-height: 1.3; }
.sb-years li.sb-years__end small { color: var(--text-soft); }
.sb-years li { overflow-wrap: normal; hyphens: none; }   /* a year is never broken ("202" / "3") */
/* in a column under about 460 px (the strip in 5 of 12 columns, 64em to 75em wide) five tiles are 55 px each and split "2023": four tiles, and the note on its own row */
@media (min-width: 64em) and (max-width: 74.99em) { .sb-years { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sb-years li.sb-years__end { grid-column: 1 / -1; min-height: 0; } }
@media (max-width: 29.99em) { .sb-years { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sb-years li.sb-years__end { grid-column: 1 / -1; } }

/* glance and chips */
.sb-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-ctl); background: var(--paper); color: var(--link); font-size: var(--fs-caption); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.sb-chip:visited { color: var(--link-visited); }
.sb-chip:hover { border-color: var(--link); }
.on-dark .sb-chip { background: var(--navy); color: var(--link-on-dark); border-color: var(--rule-on-dark); }
.sb-glance { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); max-width: 40rem; }
.sb-glance li { display: grid; gap: 10px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.sb-glance li > span:first-child { max-width: 40rem; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
@media (min-width: 48em) {
  .sb-glance li { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }
  .sb-chips { justify-content: flex-end; }
}

/* questions and answers: Home's three questions, the FAQ list, guide rows */
.sb-questions { display: grid; gap: var(--sp-7) var(--sp-6); }
.sb-questions__item { border-top: 2px solid var(--navy); padding-top: var(--sp-5); display: flex; flex-direction: column; }
.sb-questions__item h3 { font-size: var(--fs-h4); line-height: 1.25; margin-bottom: var(--sp-3); }
.sb-questions__item > p:not(.sb-source) { max-width: 36rem; }
.sb-questions__item .sb-source { margin-top: var(--sp-3); }
.sb-questions__item .sb-link, .sb-questions__item .sb-p-links { margin-top: auto; }
@media (min-width: 64em) { .sb-questions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-faq__item { border-top: 1px solid var(--rule); padding: var(--sp-5) 0; }
.sb-faq__item:last-child { border-bottom: 1px solid var(--rule); }
.sb-faq__item h3 { font-size: var(--fs-h4); line-height: 1.28; margin-bottom: var(--sp-2); }
.sb-faq__item .sb-source { margin-top: var(--sp-3); }
.sb-faq__item p + p { margin-top: var(--sp-3); }
.sb-faq__item p { max-width: var(--measure); }
/* tertiary detail only: a native disclosure with a 44 px summary */
.sb-more > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.sb-more[open] > summary { margin-bottom: var(--sp-2); }

/* guide list: ruled rows, the question is the link */
.sb-guide-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--navy); }
.sb-guide-list li { border-bottom: 1px solid var(--rule); }
.sb-guide-list a.sb-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 20px 0; text-decoration: none; color: var(--text); align-items: center; }
.sb-guide-list a.sb-guide:visited { color: var(--text); }
.sb-guide__q { font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--line-strong); }
.sb-guide__d { grid-column: 1; color: var(--text-soft); font-size: var(--fs-ui); line-height: 1.5; }
.sb-guide svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--sky-text); transition: transform var(--t-micro) var(--ease); }
.sb-guide:hover .sb-guide__q, .sb-guide:focus-visible .sb-guide__q { text-decoration-color: var(--navy); text-decoration-thickness: 2px; }
.sb-guide:hover svg, .sb-guide:focus-visible svg { transform: translateX(4px); }
@media (min-width: 64em) { .sb-guide-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); } }

/* what we are and are not; definition list */
.sb-isnot { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 2px solid var(--navy); }
.sb-isnot li { padding: 16px 0; border-bottom: 1px solid var(--rule); max-width: 40rem; }
.sb-definition { margin: 0; border-top: 2px solid var(--navy); }
.sb-definition dt { padding: 16px 0 2px; font-weight: 600; color: var(--text); }
.sb-definition dd { margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--rule); max-width: 42rem; }
@media (min-width: 48em) {
  .sb-definition { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
  .sb-definition dt { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--rule); }
  .sb-definition dd { padding: 16px 0; }
}
.sb-defs { margin: 0; border-top: 2px solid var(--navy); }
.sb-defs > div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.sb-defs dt { font-weight: 600; }
.sb-defs dd { margin: 4px 0 0; max-width: 42rem; }

/* the "every rule has a source" strip */
.sb-strip { background: var(--surface-2); padding-block: var(--sp-7); }
.sb-strip__in { display: grid; gap: var(--sp-4); }
.sb-strip h2 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: var(--trk-h3); }
.sb-strip p { max-width: 40rem; }
@media (min-width: 64em) { .sb-strip__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; } .sb-strip h2 { grid-column: 1 / span 5; } .sb-strip__txt { grid-column: 7 / span 6; } }

/* answer box */
.sb-answer { background: var(--surface-2); padding: var(--sp-5); border-radius: 0; color: var(--navy); border-left: 4px solid var(--gold); }
.sb-answer > p:first-child { font-size: var(--fs-lede); line-height: 1.45; font-weight: 500; color: var(--navy); }
.sb-answer > p + p:not(.sb-source) { margin-top: var(--sp-3); }
.sb-answer .sb-source { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line-strong); color: var(--navy-soft); }
@media (min-width: 48em) { .sb-answer { padding: var(--sp-6); } }

/* closing ZIP band: the warm "your home" photograph beside the last ZIP entry (no overlay, no grid) */
.sb-closing { position: relative; background: var(--hero-sky); display: flex; flex-direction: column; }
.sb-closing__copy { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: var(--sp-8); }
.sb-closing h2 { font-size: var(--fs-h2); max-width: 14ch; margin-bottom: var(--sp-5); }
.sb-closing .sb-zip { margin-top: 0; }
.sb-closing .sb-slot { margin-top: var(--sp-4); font-size: var(--fs-caption); color: var(--text-soft); max-width: 34rem; }
.sb-closing .sb-note { margin-top: var(--sp-4); }
.sb-survey { position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--midnight); overflow: hidden; order: -1; }
.sb-survey picture, .sb-survey img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-survey img { object-position: 50% 30%; }
@media (min-width: 64em) {
  .sb-closing { display: grid; min-height: 500px; grid-template-columns: max(var(--gutter), calc((100% - var(--container)) / 2)) minmax(0, 560px) clamp(32px, 4vw, 64px) minmax(0, 1fr); }
  .sb-closing__copy { grid-column: 2; grid-row: 1; width: auto; margin: 0; padding: 88px 0; align-self: center; }
  .sb-survey { grid-column: 4; grid-row: 1; aspect-ratio: auto; order: 0; }
}

/* worked example (made-up numbers), checklist, callout, related guides, byline */
.sb-worked { background: var(--paper); border: 1px solid var(--navy); padding: var(--sp-5); }
.sb-worked__lab { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.sb-worked__eq { margin-top: var(--sp-3); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; color: var(--brand); }
.sb-worked__eq span { color: var(--navy-soft); font-weight: 500; }
.sb-worked p { margin-top: var(--sp-3); max-width: var(--measure); }
.sb-checklist { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.sb-checklist li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--rule); max-width: var(--measure); }
.sb-checklist li::before { content: ""; position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border: 2px solid var(--navy); border-radius: 3px; background: var(--paper); }
.sb-callout { border: 1px solid var(--navy); background: var(--paper); padding: var(--sp-5); max-width: 42rem; }
.sb-callout h3, .sb-callout h2 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.sb-callout p + p { margin-top: var(--sp-2); }
.sb-related { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.sb-related li { border-bottom: 1px solid var(--rule); }
.sb-related a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding-block: 8px; font-weight: 600; font-size: var(--fs-body); }
.sb-related a svg { width: 20px; height: 20px; flex: none; color: var(--sky-text); transition: transform var(--t-micro) var(--ease); }
.sb-related a:hover svg, .sb-related a:focus-visible svg { transform: translateX(4px); }
.sb-outcome .sb-related { margin-top: var(--sp-5); }
.sb-byline { display: flex; flex-wrap: wrap; gap: 4px var(--sp-5); font-size: var(--fs-caption); color: var(--text-soft); margin-top: var(--sp-3); }
.sb-byline time { color: var(--text); font-weight: 600; }

/* ============================================================ 10. FIGURES AND CHARTS */
.sb-figure { margin: 0; }
.sb-figure figcaption { font-size: var(--fs-caption); color: var(--text-soft); margin-bottom: var(--sp-4); max-width: 46rem; }
.sb-schematic { display: none; width: 100%; height: auto; margin-bottom: var(--sp-6); }
.sb-schematic text { font-family: var(--font); font-size: 20px; fill: var(--navy); font-weight: 500; }
.sb-schematic .st { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-schematic .st-soft { fill: none; stroke: var(--field-border); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 6; }
.sb-schematic .sunray { fill: none; stroke: var(--edge-warm); stroke-width: 2; stroke-linecap: round; }
.sb-schematic .arrow { fill: var(--navy); stroke: none; }
.sb-schematic .tint { fill: var(--sky-soft); }
@media (min-width: 62em) { .sb-schematic { display: block; } }
.sb-flow { counter-reset: flow; list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--navy); max-width: 36rem; }
.sb-flow li { counter-increment: flow; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; }
.sb-flow li::before { content: counter(flow); font-weight: 600; font-size: 1.25rem; color: var(--brand); line-height: 1.3; }
.sb-flow h3 { font-size: var(--fs-h4); line-height: 1.25; }
.sb-flow p { color: var(--text-soft); font-size: var(--fs-body); line-height: 1.5; margin-top: 4px; grid-column: 2; }
@media (min-width: 56.25em) {
  .sb-flow { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .sb-flow li { display: block; border-bottom: 0; padding-right: var(--sp-2); }
  .sb-flow li::before { display: block; margin-bottom: 6px; }
}
/* the sun path chart: computed, drawn in SVG; the table beside it carries the same numbers */
.sb-chart { margin: 0; }
.sb-chart__svg { width: 100%; height: auto; background: var(--midnight); border-radius: var(--radius-ctl); --bg: var(--surface-dark); }   /* sun-path plate: sky and gold on midnight */
.sb-chart__svg .gl { stroke: var(--rule-on-dark); stroke-width: 1; }
.sb-chart__svg .ax { stroke: var(--text-soft-on-dark); stroke-width: 1.5; }
.sb-chart__svg text { font-family: var(--font); fill: var(--text-soft-on-dark); paint-order: stroke; stroke: var(--surface-dark); stroke-width: 5px; stroke-linejoin: round; }
.sb-chart__svg .lab { fill: var(--text-on-dark); font-weight: 600; }
.sb-chart__svg .crv { fill: none; stroke: var(--sky-bright); stroke-linecap: round; stroke-linejoin: round; }
.sb-chart__svg .crv--b { stroke: var(--gold); }
.sb-chart__svg .pk { fill: var(--paper); stroke: var(--midnight); stroke-width: 2.5; }
.sb-chart--narrow { display: block; }
.sb-chart--wide { display: none; }
@media (min-width: 45em) { .sb-chart--narrow { display: none; } .sb-chart--wide { display: block; } }
.sb-chart__cap { margin-bottom: var(--sp-3); font-weight: 600; color: var(--text); }
.sb-chart__caption { margin: var(--sp-3) 0 var(--sp-6); font-size: var(--fs-caption); color: var(--text-soft); max-width: 44rem; }
.sb-chart > p:not(.sb-chart__caption) { margin-top: var(--sp-5); max-width: var(--measure); }
.sb-chart > .sb-source { margin-top: var(--sp-3); }
.sb-cell { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-cell__sky { position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(70% 80% at 78% 6%, rgba(79, 179, 217, .55), transparent 66%); }
.sb-cell__vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 40% 45%, transparent 45%, rgba(15, 27, 51, .65) 100%); }
.sb-asks { display: grid; gap: var(--sp-7); }
.sb-asks h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); margin-bottom: var(--sp-4); }
@media (min-width: 64em) { .sb-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } }

/* ============================================================ 11. CONTENTS, JUMP BAR, DOCUMENT LAYOUT, SOURCES BLOCK */
.sb-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-7) var(--section); }
.sb-toc { font-size: var(--fs-ui); }
.sb-toc__title { margin: 0 0 var(--sp-3); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.sb-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sb-toc li { border-bottom: 1px solid var(--rule); }
.sb-toc a { display: flex; align-items: center; min-height: 44px; color: var(--navy); text-decoration: none; padding-right: 8px; }
.sb-toc a:visited { color: var(--navy); }
.sb-toc a:hover { text-decoration: underline; }
.sb-toc a[aria-current="true"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--sky-text); padding-left: 12px; }
.sb-toc details > summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule); list-style: none; }
.sb-toc details > summary::-webkit-details-marker { display: none; }
.sb-toc details > summary svg { margin-left: auto; width: 16px; height: 16px; }
.sb-toc details[open] > summary svg { transform: rotate(180deg); }
.sb-toc__desktop { display: none; }
@media (min-width: 64em) {
  .sb-doc { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: var(--sp-8); }
  .sb-toc { grid-column: 1 / span 3; align-self: start; }
  .sb-toc__desktop { display: block; }
  .sb-toc__mobile { display: none; }
  .sb-doc__main { grid-column: 4 / span 9; max-width: 54rem; }
}
@media (min-width: 64em) and (min-height: 30em) { .sb-toc { position: sticky; top: calc(var(--sticky-top) + var(--sp-6)); } }
.sb-doc__main { min-width: 0; }
.sb-doc__main > section { scroll-margin-top: calc(var(--sticky-top) + 16px); }
.sb-doc__main > section + section { margin-top: var(--sp-9); }
.sb-doc__main section > h2 { margin-bottom: var(--sp-5); }
.sb-doc__main section > h3 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--trk-h3); }
.sb-doc__main p { max-width: var(--measure); }
.sb-doc__main p + p { margin-top: var(--sp-4); }
.sb-doc__main .sb-table-wrap, .sb-doc__main .sb-table { max-width: none; }
.sb-doc__main .sb-table, .sb-doc__main .sb-table-wrap { margin-top: var(--sp-5); }
.sb-doc__main .sb-table + p, .sb-doc__main .sb-table-wrap + p { margin-top: var(--sp-5); }
.sb-doc__main .sb-source { margin-top: var(--sp-3); }
.sb-doc__main .sb-steps { margin-top: var(--sp-4); }
.sb-doc__main .sb-steps > li { grid-template-columns: 3.5rem minmax(0, 1fr); padding: var(--sp-4) 0 var(--sp-5); }
.sb-doc__main .sb-steps > li::before { font-size: 2.5rem; }
.sb-doc__main .sb-steps h3, .sb-doc__main .sb-steps h4 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.01em; }
@media (min-width: 48em) { .sb-doc__main .sb-steps > li { grid-template-columns: 4.5rem minmax(0, 1fr); } }

/* the jump bar on long pillars: pinned under the header (header and bar together are 112 px), scrolls sideways on phones */
.sb-jump { background: var(--paper); border-bottom: 1px solid var(--line); }
@media (min-height: 30em) { .sb-jump { position: sticky; top: 0; z-index: 40; } }
@media (min-width: 48em) and (min-height: 30em) { .sb-jump { top: var(--h-header); } }
.sb-jump ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.sb-jump a { position: relative; display: flex; align-items: center; min-height: calc(var(--h-jump) - 1px); padding: 0 14px; color: var(--navy); font-size: var(--fs-ui); font-weight: 500; white-space: nowrap; text-decoration: none; }
.sb-jump a:visited { color: var(--navy); }
.sb-jump li:first-child a { padding-left: 0; }
.sb-jump a:hover { text-decoration: underline; text-underline-offset: .35em; }
.sb-jump a:focus-visible { outline-offset: -4px; }   /* inset: the scroll container would clip an outer ring */
.sb-jump ul { padding-inline: 2px; }
.sb-jump a[aria-current="true"] { font-weight: 600; box-shadow: inset 0 -3px 0 var(--sky-text); }

/* sources block (numbered; the target row is tinted) */
.sb-sources ol { margin: var(--sp-5) 0 0; padding: 0; list-style: none; counter-reset: src; border-top: 2px solid var(--navy); max-width: 33rem; }
.sb-sources li { counter-increment: src; position: relative; padding: 12px 0 12px 40px; border-bottom: 1px solid var(--rule); font-size: .9375rem; line-height: 1.65; }   /* 15 px x 1.65 = 24.75 px: a link in an entry is a 24 px target without padding */
.sb-sources li::before { content: counter(src); position: absolute; left: 0; top: 12px; font-weight: 600; color: var(--brand); width: 28px; }
.sb-sources li:target { background: var(--surface-2); box-shadow: -12px 0 0 var(--surface-2), 12px 0 0 var(--surface-2); }
.sb-sources p { max-width: 33em; color: var(--text-soft); margin-top: var(--sp-2); }

/* ============================================================ 12. FOOTER AND COMPANY BLOCK */
.sb-footer { padding-top: var(--sp-8); font-size: var(--fs-ui); border-top: 3px solid var(--gold); }
.sb-footer a { color: var(--text-on-dark); text-decoration: none; }
.sb-footer a:visited { color: var(--text-on-dark); }
.sb-footer a:hover { text-decoration: underline; }
.sb-footer__top { display: grid; gap: var(--sp-7); padding-bottom: var(--sp-8); }
.sb-footer__brand { display: grid; gap: var(--sp-4); align-content: start; max-width: 28rem; }
.sb-footer__brand .sb-brand { color: var(--text-on-dark); margin-right: 0; }
.sb-footer__brand p { color: var(--text-soft-on-dark); font-size: var(--fs-ui); line-height: 1.55; }
.sb-footer__cols { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.sb-footer__title { margin: 0 0 var(--sp-2); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft-on-dark); }
.sb-footer ul { list-style: none; margin: 0; padding: 0; }
.sb-footer li a { display: flex; align-items: center; min-height: 44px; line-height: 1.3; padding-block: 4px; }
@media (min-width: 48em) { .sb-footer__cols li a { min-height: 52px; } }   /* four columns in a row: one row height whether the label takes one line or two. On a phone the columns stack and 44 px rows stay. */
.sb-utility a[aria-current], .sb-footer li a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }   /* the page you are on is marked by more than colour */
.sb-footer__company { margin: 0; font-style: normal; color: var(--text-soft-on-dark); display: grid; gap: 2px; overflow-wrap: anywhere; }
.sb-footer__company:empty { display: none; }
.sb-footer__company a { text-decoration: underline; color: var(--text-on-dark); }
.sb-footer__bar { border-top: 1px solid var(--rule-on-dark); padding-block: var(--sp-5) var(--sp-7); display: grid; gap: var(--sp-4); color: var(--text-soft-on-dark); font-size: var(--fs-caption); }
.sb-footer__bar p { margin: 0; }
.sb-footer__fine { display: grid; gap: var(--sp-2); max-width: 46rem; }
.sb-footer__bar nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.sb-footer__bar a { color: var(--text-soft-on-dark); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--fs-ui); }
.sb-footer__bar a:visited { color: var(--text-soft-on-dark); }
.sb-footer__bar a:hover { color: var(--paper); }
.sb-footer .sb-slot, .sb-footer .sb-checked { color: var(--text-soft-on-dark); font-size: var(--fs-caption); }
@media (min-width: 48em) { .sb-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .sb-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col-gap); }
  .sb-footer__bar { grid-template-columns: 1fr auto; align-items: end; }
}

/* ============================================================ 13. MOTION, FORCED COLOURS, PRINT, ZOOM */
/* one load sequence per page, 1.9 s at most, no loops; reduced motion shows the final frame. Text is never hidden: the copy only moves. */
@media (prefers-reduced-motion: no-preference) {
  .sb-hero__copy > *, .sb-hero--hub .sb-breadcrumb { animation: sb-rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .sb-hero__media::after { animation: sb-dawn 1.6s var(--ease) .1s both; }
  @keyframes sb-rise { from { transform: translateY(12px); } to { transform: none; } }
  @keyframes sb-dawn { from { opacity: .5; } to { opacity: 0; } }
  /* the sun-path chart draws in as it scrolls into view; the drawn chart is the base state */
  @supports (animation-timeline: view()) {
    .sb-chart__svg .crv { animation: sb-draw linear forwards; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .sb-chart__svg .pk { animation: sb-pop linear forwards; animation-timeline: view(); animation-range: cover 30% cover 48%; transform-box: fill-box; transform-origin: center; }
    @keyframes sb-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
    @keyframes sb-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* forced colours: borders keep the shape of buttons and fields; icons follow the text colour */
@media (forced-colors: active) {
  .sb-btn, .sb-menu-btn, .sb-zip input, .sb-chip, .sb-choice { border: 2px solid ButtonText; }
  .sb-btn--primary { border-color: Highlight; }
  .sb-years li { border: 2px solid CanvasText; }
  .sb-hero__media::after { display: none; }
  svg { forced-color-adjust: auto; }
}

/* print: the quote sheet, the checklist and the worked example print clean */
@media print {
  .sb-utility, .sb-header, .sb-footer, .sb-closing, .sb-hero__media, .sb-jump, .sb-toc, .sb-zip, .sb-market-row { display: none !important; }
  body { background: var(--paper); color: #000; font-size: 12pt; }
  a { color: #000; }
  .sb-table--sheet thead th { background: var(--paper); color: #000; border-bottom: 2px solid #000; }
  .sb-sheet { border-color: #000; }
  /* the sheet prints as a table whatever the paper width (Letter with ordinary margins is about 720 px, under the 48em that switches .sb-table--stack to the phone layout). Only a stacked sheet is touched. */
  table.sb-table--sheet.sb-table--stack { display: table; width: 100%; }
  .sb-table--sheet.sb-table--stack thead { display: table-header-group; position: static; width: auto; height: auto; }   /* the phone layout moves the heads off the page; on paper they are the column heads of the sheet */
  .sb-table--sheet.sb-table--stack tbody { display: table-row-group; }
  .sb-table--sheet.sb-table--stack tr { display: table-row; padding: 0; border: 0; break-inside: avoid; }
  .sb-table--sheet.sb-table--stack th, .sb-table--sheet.sb-table--stack td { display: table-cell; width: auto; border: 0; border-bottom: 1px solid #000; padding: 7pt 8pt; }
  .sb-table--sheet.sb-table--stack thead th { border-bottom: 2px solid #000; }
  .sb-table--sheet.sb-table--stack td + td { border-left: 1px solid #000; }
  .sb-table--sheet.sb-table--stack td[data-label]::before, .sb-table--sheet.sb-table--stack td.sb-blank::after { content: none; display: none; }
  .sb-table--sheet.sb-table--stack td:empty, .sb-table--sheet.sb-table--stack td.sb-blank, .sb-table--sheet.sb-table--stack td.sb-blank:empty { display: table-cell; min-height: 0; padding-top: 7pt; }   /* the :empty form matches the phone rule's specificity; a flex cell in a table row is wrapped with its neighbours into one anonymous cell */
  .sb-table--sheet.sb-table--stack caption { display: table-caption; }
  .sb-table--sheet.sb-table--stack thead th:nth-child(1) { width: 34%; }   /* the sheet is two label columns and three blank quote columns: the blanks share what the labels leave and are tall enough to write in */
  .sb-table--sheet.sb-table--stack thead th:nth-child(2) { width: 22%; }
  .sb-table--sheet.sb-table--stack thead th:nth-child(n+3) { width: 14.67%; }
  .sb-table--sheet.sb-table--stack td.sb-blank { height: .5in; }
}

/* two-market layout */
/* A market ledger that holds two markets: two equal columns from the same breakpoint, the rule between them, no empty third column. The page sheets that set their own columns follow below. */
@media (min-width: 64em) {
  .sb-markets:has(> .sb-market:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}