element, so an `article h1` rule would never have matched. Measured 2026-08-22. */ .hs-knowledge-listing-page h1, .hs-knowledge-listing-page h2, .hs-kb-content h1, .hs-kb-content h2, .hs-kb-content h3 { letter-spacing: -0.03em; } /* 1b. Article heading weight. Measured on PRODUCTION 2026-09-07: article h2 computes to `font-weight: 100` — hairline, and visibly broken against body text at 400. No KB property exposes heading weight for the article body. Also lifts the h2 off 20px, which is barely larger than the 16px prose around it. NOTE: an

element DOES now exist on production (704px wide) — the 2026-08-22 note claiming it does not is stale. */ .hs-kb-content h1, .hs-kb-content h2, .hs-kb-content h3, .hs-kb-content h4 { font-weight: 700; color: var(--bz-ink); } .hs-kb-content h2 { font-size: 1.75rem; line-height: 1.25; margin-top: 2.5rem; } .hs-kb-content h3 { font-size: 1.25rem; line-height: 1.3; margin-top: 2rem; } /* 2. Article prose measure. Help text with no max-width runs the full 1248px container, far past a comfortable reading line. `.hs-kb-content` is the article body wrapper on the production article template. */ .hs-kb-content .article-wrapper, .hs-kb-content article { max-width: 76ch; } /* Prose rhythm. Measured 16px/24px (1.5) on production — tight for long help text. `article` is included because production now renders one. */ .hs-kb-content .article-wrapper p, .hs-kb-content article p, .hs-kb-content .article-wrapper li, .hs-kb-content article li { line-height: 1.7; } /* 3. Focus visibility. The KB's default focus ring is the old teal accent. Keyboard focus must stay clearly visible — do not remove the outline. */ a:focus-visible, button:focus-visible, .hs-search-field__input:focus-visible { outline: 2px solid var(--bz-violet-700); outline-offset: 2px; } /* 4. Search input. The wrapper has a background property but the input itself does not, so it keeps a default border and radius that clash with the 12px/soft-rect language. NOTE: no `width: 100%` here — a global border-box reset is NOT assumed (bizup-theme has none either), so width + padding would overflow. */ .hs-search-field__input { font-family: var(--bz-font); border: 1px solid var(--bz-border); border-radius: var(--bz-radius-btn); color: var(--bz-body); /* Measured 2026-08-22 on the sandbox listing: the input rendered 40.4px tall with padding-left 10px — HubSpot's stock form-control metrics, which read as a generic search box rather than the theme's field. `box-sizing` is set EXPLICITLY: there is no global border-box reset here (nor in bizup-theme), so height + padding would otherwise add up past the intended box. No `width` is set — the KB sizes the bar, and setting width here overflowed. */ box-sizing: border-box; height: 56px; padding: 0 1rem; font-size: 1rem; } /* 4a. Seam with the submit button. Measured 2026-09-07 on the sandbox listing: the input computed `border-radius: 12px` on ALL FOUR corners while the button next to it is `0 12px 12px 0`. The two sit flush in a flex row, so the input's rounded RIGHT corners curved away behind the button's square LEFT edge — a visible notch at the join. Square off the trailing corners so the pair reads as one control. :dir()-free on purpose: the KB emits no RTL variant here. */ .hs-search-field__form .hs-search-field__input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } /* Keep the button's own trailing corners matched to the input's leading ones. */ .hs-search-field__form .hs-search-field__button { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bz-radius-btn); border-bottom-right-radius: var(--bz-radius-btn); } .hs-search-field__input::placeholder { color: var(--bz-muted); } /* 5. Suggestion dropdown — rendered by KB JS, no themeable properties. Measured 2026-09-07: radius 16px, border #e6e4ed, NO shadow — it read as a flat box floating over the page with nothing lifting it off the band. `overflow: hidden` is what actually makes the radius visible: without it a hovered first/last row paints its square corner over the rounded parent. */ /* ⚠ The

, not a link — keep it muted so it does not read as a clickable suggestion. Scoped with :not(.show-for-sr) so the screen-reader-only row keeps its own off-screen positioning and never takes layout padding. */ .hs-search-field__suggestions .results-for:not(.show-for-sr) { padding: 10px 16px; color: var(--bz-muted); font-size: 0.9375rem; } /* 5b. Header dropdown menus. Measured 2026-09-07: the submenu

at all, its only heading is the category