/*
 * Omniconvert help centre.
 *
 * A documentation site for two products: Explore (experimentation) and Reveal
 * (customer data). Read by marketers mid-task who arrive with one question, so
 * search leads and long articles get a persistent contents rail.
 *
 * The visual system is omniconvert.com's, measured from its blog rather than
 * approximated: Inter, near-black text with slate greys, one electric blue kept
 * for actions and eyebrows, heavy display headings, and bordered 24px cards
 * with no shadows. Structure comes from type weight and whitespace, not boxes.
 */

/* The web fonts are declared in /css/fonts.css, which the page head links
   before this file, and served from /fonts/. Not imported here: an @import
   cannot start downloading until this file has been fetched and parsed, which
   puts the fonts three round trips behind the HTML. */

:root {
    --ink: #121212;
    --ink-strong: #0f172a;
    --ink-2: #4b5266;
    --ink-3: #6b7383;
    --paper: #fff;
    --page-bg: #f7f8fc; /* the blog's page background; --paper stays white for cards on top of it */
    --ground: #f5f7fa;
    --wash: #eef1ff;
    --line: #e1e4ea;
    --line-soft: #edf0f5;
    --accent: #335cff;
    --accent-ink: #3640f5;
    --accent-deep: #2646d6;
    --dark: #0f172a;
    --yes: #1f9d63;
    --no: #d8563f;

    --measure: 68ch;
    --container: 1224px;
    --rail: 260px;
    --rail-right: 215px;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* The article body's own type system, ported from the blog's production
       stylesheet (Omniconvert Blog Theme Prompt, 2026-09-23). The blog pairs
       this with a serif body face (Lora); here the whole article -- headings
       and body both -- reads in one face instead. Scoped to
       .kb-article__content; the app chrome (nav, buttons, admin) stays on
       Inter and the tokens above. */
    --font-article-heading: "Poppins", var(--font);
    --blog-blue: #335cff;
    --blog-blue-dk: #1f3fd4;
    --blog-blue-lt: #edf0ff;
    --blog-blue-mid: #c7d0ff;
    --blog-navy: #0d1b3e;
    --blog-ink: #1a1a2e;
    --blog-ink-mid: #3d3d5c;
    --blog-ink-light: #74748a;
    --blog-bg-warm: #f2f2f0;
    --blog-border: #e2e4f0;
    --blog-border-mid: #cacde0;
    /* Aliases so the rest of this file (and content already written against
       them) reads naturally. */
    --ink-article: var(--blog-ink-mid);
    --ink-article-heading: var(--blog-navy);

    --radius-lg: 24px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-input: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.625;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--dark); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
    text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ------------------------------------------------------------ vocabulary -- */
/* The small set of parts the whole site is built from. Sections open with an
   eyebrow and a heavy heading; actions are pills or two buttons; cards share
   one radius and one hairline. */

.eyebrow {
    display: block; margin: 0 0 8px;
    font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent-ink);
}

.section { margin: 56px 0 0; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 22px; }
.section__title { font-size: 26px; line-height: 1.17; letter-spacing: -.015em; font-weight: 800; margin: 0; color: var(--ink-strong); }
.section__note { color: var(--ink-2); font-size: 14px; margin: 0; white-space: nowrap; }

.pill {
    display: inline-block; padding: 5px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ink-2);
    background: var(--paper); border: 1px solid var(--line); text-decoration: none;
}
a.pill:hover { color: var(--accent-ink); border-color: var(--accent-ink); }

.btn {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 14px;
    padding: 10px 24px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

.arrow-link { font-size: 14px; font-weight: 600; color: var(--ink-strong); text-decoration: none; white-space: nowrap; }
.arrow-link::after { content: " \2192"; content: " \2192" / ""; }
.arrow-link:hover { color: var(--accent-ink); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------- header -- */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
/* Three cells -- logo, search, nav -- so the search box centers in the
   header on its own terms instead of drifting with how wide the logo or
   the nav links beside it happen to be. */
.site-header__inner { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; align-items: center; gap: 24px; height: 68px; }

.site-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-strong); justify-self: start; }
.site-logo__img { display: block; width: 166px; height: auto; }

.site-header__actions { display: flex; align-items: center; gap: 14px; min-width: 0; justify-self: end; }

/* On an article page, at the width where the rail sits beside the text, the
   header borrows the exact same column widths so the logo lines up above
   the "Explore Help" rail and the search box + CTAs share the article
   column's cell (search at its start, CTAs at its end) instead of floating
   independently of what's underneath them. Category and search pages have no
   rail of their own, but get the identical header treatment anyway so the
   header looks the same everywhere rather than only on articles. */
@media (min-width: 1100px) {
    body.page-article .site-header__inner, body.page-category .site-header__inner, body.page-search .site-header__inner, body.page-changelog .site-header__inner, body.page-home .site-header__inner { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 56px; }
    body.page-article .site-search, body.page-category .site-search, body.page-search .site-search, body.page-changelog .site-search, body.page-home .site-search { grid-column: 2; grid-row: 1; justify-self: center; width: 100%; max-width: 420px; }
    body.page-article .site-header__actions, body.page-category .site-header__actions, body.page-search .site-header__actions, body.page-changelog .site-header__actions, body.page-home .site-header__actions { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1340px) {
    /* The changelog has no right rail of its own, but the header still
       reserves the same third column purely so the search box centers at
       the same spot as it does everywhere else -- a header that looks
       different per page because the page under it happens to have one
       fewer column would be a stranger result than an unused column. */
    body.page-article .site-header__inner, body.page-category .site-header__inner, body.page-search .site-header__inner, body.page-changelog .site-header__inner, body.page-home .site-header__inner { grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail-right); }
    /* Once the right rail has its own column, the CTAs move into that same
       column (right-aligned, same as .site-header__actions always is) so
       their own right edge lands exactly on the rail's right edge, not the
       article column's. */
    body.page-article .site-header__actions, body.page-category .site-header__actions, body.page-search .site-header__actions, body.page-changelog .site-header__actions, body.page-home .site-header__actions { grid-column: 3; }
}

/* The one search box for the whole site, living in the header instead of
   repeated at the top of every page: a compact command-palette-style pill
   rather than an input-plus-button pair, centered in its own grid cell and
   free to stretch wider than the old sidebar-hugging version. */
.site-search {
    position: relative; display: flex; align-items: center; gap: 6px;
    width: 100%; min-width: 90px; height: 38px; padding: 0 10px 0 2px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}
.site-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--wash); }
.site-search__icon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; border: none; background: none;
    color: var(--ink-3); cursor: pointer; padding: 0;
}
.site-search__icon:hover { background: var(--ground); color: var(--ink-strong); }
.site-search__icon svg { width: 16px; height: 16px; }
.site-search__input {
    flex: 1 1 auto; min-width: 0; border: none; background: none; padding: 0;
    font: inherit; font-size: 14px; color: var(--ink-strong);
}
.site-search__input::placeholder { color: var(--ink-3); }
.site-search__input:focus { outline: none; }

.site-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.site-nav__link {
    padding: 8px 14px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500;
    color: var(--ink-strong); text-decoration: none; white-space: nowrap;
}
.site-nav__link:hover { color: var(--ink-strong); background: var(--ground); }

/* ------------------------------------------------------------------ main -- */

.site-main { padding: 36px 0 72px; }
.page-home .site-main { padding-top: 0; }

.page-title {
    font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 800;
    margin: 0 0 22px; color: var(--ink-strong);
}
/* The article's own H1 joins the rest of its heading system (Poppins, the
   same navy as h2/h3/h4) rather than the site chrome's Inter -- otherwise the
   page reads in three unrelated typefaces before the body copy even starts. */
.kb-article .page-title { font-family: var(--font-article-heading); color: var(--ink-article-heading); font-weight: 700; }
.page-lede { color: var(--ink-2); font-size: 19px; margin: -8px 0 28px; max-width: var(--measure); }

/* The head of a listing page: breadcrumb first, then an eyebrow naming where
   the page sits, then the title. */
.page-head { margin: 0 0 26px; }
.page-head .page-title { margin-bottom: 8px; }
.page-head__note { color: var(--ink-2); font-size: 15px; margin: 0; }

/* ------------------------------------------------------------------ hero -- */

.hero { padding: 64px 0 40px; text-align: center; }
.hero__title {
    font-size: clamp(2.25rem, 4.6vw, 3.375rem); line-height: 1.05; letter-spacing: -.03em;
    font-weight: 800; margin: 0 0 16px; color: var(--ink-strong);
}
.hero__lede { color: var(--ink-2); font-size: 19px; line-height: 1.6; margin: 0 auto 28px; max-width: 58ch; }

/* The three figures under the lede say how much is here before anyone reads
   a word of it. */
.hero__stats { display: flex; justify-content: center; gap: 44px; margin: 0 0 32px; padding: 0; list-style: none; }
.hero__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero__stat-n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.hero__stat-label { font-size: 12px; color: var(--ink-2); }

/* -------------------------------------------------------------- products -- */
/* The two products are the brand site's "topic cards": a soft indigo wash,
   an eyebrow, a heavy title, and pills for the subjects inside. */

.chooser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; }
.chooser__item {
    display: flex; flex-direction: column; gap: 12px;
    padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--paper);
    color: inherit;
}
.chooser__item .eyebrow { margin-bottom: 0; }
.chooser__logo { display: block; height: 52px; width: auto; max-width: 100%; }
.chooser__name { font-size: 26px; line-height: 1.17; letter-spacing: -.015em; font-weight: 800; margin: 0; }
.chooser__name a { color: var(--ink-strong); text-decoration: none; }
.chooser__name a:hover { color: var(--accent-ink); }
.chooser__what { color: var(--ink-2); font-size: 15px; margin: 0; max-width: 52ch; }
.chooser__topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.chooser__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 18px; }
.chooser__count { color: var(--ink-2); font-size: 14px; }

/* A product whose help centre is not written yet: same size as the others so
   the row stays even, but flat and dashed so it does not read as a link. */
.chooser__item--soon { background: var(--paper); border-style: dashed; }
.chooser__item--soon .chooser__name { color: var(--ink-2); }
.pill--soon { cursor: default; }

/* ------------------------------------------------------------- most read -- */
/* A numbered list in one bordered card, the way the brand site lists its
   reader favourites. */

.favourites { padding: 6px 0; }
.favourites__list { list-style: none; margin: 0; padding: 0; counter-reset: fav; }
.favourites__item { counter-increment: fav; display: flex; align-items: center; gap: 22px; padding: 18px 26px; border-top: 1px solid var(--line-soft); }
.favourites__item:first-child { border-top: 0; }
.favourites__item::before {
    /* The list is an <ol>, which already tells assistive technology the rank;
       the numerals are decoration, so the second form hides them from it.
       Browsers that do not know the alternative-text syntax keep the first. */
    content: "0" counter(fav);
    content: "0" counter(fav) / "";
    flex: none; width: 36px;
    font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--line); font-variant-numeric: tabular-nums;
}
.favourites__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.favourites__title { font-size: 15.5px; font-weight: 600; line-height: 1.35; margin: 0; }
.favourites__title a { color: var(--ink-strong); text-decoration: none; }
.favourites__title a:hover { color: var(--accent-ink); }
.favourites__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); }

/* -------------------------------------------------------------- directory -- */
/* Subcategories as a grid of cards: title, count, the first few articles. */

.cat-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cat-card { display: flex; flex-direction: column; padding: 24px 24px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.cat-card__title { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 14px; }
.cat-card__title a { color: var(--accent); text-decoration: none; }
.cat-card__title a:hover { color: var(--blog-blue-dk, var(--accent-ink)); }
.cat-card__count { color: var(--ink-3); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cat-card__icon { flex: none; width: 18px; height: 18px; fill: var(--accent-ink); align-self: center; }
.cat-card__list { list-style: none; margin: 0; padding: 0; }
.cat-card__list li { margin: 0 0 8px; }
.cat-card__list a { color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.45; }
.cat-card__list a:hover { color: var(--accent-ink); text-decoration: underline; }
.cat-card__more { display: inline-block; margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-strong); text-decoration: none; }
.cat-card__more::after { content: " \2192"; content: " \2192" / ""; }
.cat-card__more:hover { color: var(--accent-ink); }

/* ------------------------------------------------------------ breadcrumb -- */

.kb-breadcrumb { margin: 0 0 18px; font-size: 13px; color: var(--ink-2); }
.kb-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.kb-breadcrumb__item + .kb-breadcrumb__item::before { content: "\203A"; color: var(--ink-3); margin-right: 8px; }
.kb-breadcrumb a { color: var(--ink-2); text-decoration: none; }
.kb-breadcrumb a:hover { color: var(--accent-ink); }
.kb-breadcrumb [aria-current] { color: var(--ink-strong); font-weight: 500; }

/* --------------------------------------------------------------- article -- */

/* Below the rail breakpoint the two stack in one column; the title and text
   come first and the rail (sections, CTA, topics) follows, same as before
   the rail sat beside them. The blog instead just drops its sidebar under
   860px -- not an option here, since the sections list is how a reader gets
   around a long troubleshooting article on a phone. */
.article-layout { display: grid; grid-template-columns: 1fr; gap: 0; }
.article-rail { min-width: 0; order: 2; }
.kb-article__body { min-width: 0; order: 1; }
/* The feedback box sits in its own right-hand rail on wide screens; on a
   phone it drops to the very end, same as when it lived under the text. */
.article-rail--right { order: 3; }

.page-article .page-title { font-size: clamp(1.85rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -.028em; margin: 0 0 12px; }

.kb-article__head { margin: 0 0 26px; }
.kb-article__head .page-title { margin: 0 0 22px; }

/* A quiet freshness cue at the foot of the article, not a banner: same
   muted gray as the page behind it, no accent bar. */
.art-meta {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    font-family: var(--font-article-heading); font-size: 12.2px; color: var(--blog-ink-light);
    margin-top: 32px; padding: 10px 24px; background: var(--page-bg, var(--paper)); border-radius: 5px;
}
.art-meta time { color: inherit; }
.meta-upd { color: var(--blog-ink-light); font-weight: 600; }

/* The rail's own card, matching the blog's .toc-widget: white, a 3px blue
   top accent standing in for the rounded-top corner, and sections numbered
   by a CSS counter rather than written into the markup. */
.kb-toc {
    margin: 0 0 20px; padding: 17px 19px; background: var(--page-bg, var(--paper));
    border: 1px solid var(--blog-border, var(--line));
    border-radius: var(--radius-sm); font-family: var(--font);
}
.kb-toc__title {
    font-size: 10.7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin: 0 0 12px; color: var(--blog-ink-light, var(--ink-2));
    display: flex; align-items: center; gap: 7px;
}
.kb-toc__title::before { content: ""; display: inline-block; width: 8px; height: 2px; background: var(--blog-blue, var(--accent)); border-radius: 1px; }
.kb-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: kb-toc; }
.kb-toc__item {
    counter-increment: kb-toc; display: flex; align-items: baseline; gap: 5px;
    margin: 0; padding: 3.5px 0; border-bottom: 1px solid var(--blog-border, var(--line));
}
.kb-toc__item:last-child { border-bottom: none; }
.kb-toc__item::before {
    content: counter(kb-toc); font-size: 10.5px; color: var(--blog-ink-light, var(--ink-2));
    font-weight: 700; min-width: 13px; flex-shrink: 0;
}
.kb-toc a { color: var(--blog-ink-mid, var(--ink-2)); text-decoration: none; font-size: 13px; line-height: 1.4; }
.kb-toc a:hover, .kb-toc a.active { color: var(--blog-blue, var(--accent-ink)); }
.kb-toc a.active { font-weight: 600; }

.kb-article { max-width: none; }
.kb-article__content { max-width: 80ch; font-size: 17px; line-height: 1.65; }
.page-content { max-width: var(--measure); font-size: 17px; line-height: 1.65; }
/* The two-rail layout needs more room than the site's usual page width
   before that 80ch actually has anywhere to go -- otherwise it is a ceiling
   the content never reaches. */
.page-article .site-main .container, .page-changelog .site-main .container { max-width: 1400px; }
/* Same width as the article layout below, so the header's columns actually
   line up with the rail and the article column rather than just approximating
   them against a differently-centered container. A category page's header
   matches it too, even though the page below stays the narrower default
   width, so the header itself looks identical on both page types. */
.page-article .site-header .container, .page-category .site-header .container, .page-search .site-header .container, .page-changelog .site-header .container, .page-home .site-header .container { max-width: 1400px; }
.page-content h2 { font-size: 1.5rem; letter-spacing: -.02em; font-weight: 800; margin: 2em 0 .6em; color: var(--ink-strong); }
.page-content p { margin-bottom: 1.15em; }

/* ---------------------------------------------------- article typography --
   Sizes, weights and colours ported from the blog's `.art-body` (Omniconvert
   Blog Theme Prompt, 2026-09-23); the font itself is not -- the blog pairs
   Poppins headings with Lora prose, but the whole article reads in Poppins
   here instead. Scoped to .kb-article__content only -- the app chrome (nav,
   buttons, admin) stays on Inter. */
.kb-article__content { font-family: var(--font-article-heading); font-size: 16.49px; line-height: 1.8; color: var(--blog-ink-mid); }
.kb-article__content > * { margin: 0; }
.kb-article__content p { margin-bottom: 19.55px; }
.kb-article__content ul, .kb-article__content ol { padding-left: 23.8px; margin-bottom: 19.55px; }
.kb-article__content li { margin-bottom: 7.65px; font-size: 15.98px; }
.kb-article__content strong { color: var(--blog-ink); font-weight: 600; }
.kb-article__content h2 {
    font-family: var(--font-article-heading); font-size: 24.65px; line-height: 1.25; letter-spacing: -.02em;
    font-weight: 600; color: var(--blog-navy);
    margin: 51px 0 16px; padding-top: 34px; border-top: 1px solid var(--blog-border);
}
.kb-article__content h3 { font-family: var(--font-article-heading); font-size: 17.51px; font-weight: 600; color: var(--blog-navy); margin: 29.75px 0 13px; }
.kb-article__content h4 { font-family: var(--font-article-heading); font-size: 15.3px; font-weight: 500; color: var(--blog-navy); margin: 25.5px 0 11px; }
.kb-article__content > h2:first-child, .kb-article__content > h3:first-child, .kb-article__content > h4:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.kb-article__content img { border-radius: var(--radius-sm); border: 1px solid var(--blog-border); display: block; margin-left: auto; margin-right: auto; }
.kb-article__content figure { margin: 0 0 19.55px; text-align: center; }
.kb-article__content figcaption { color: var(--blog-ink-light); font-size: .88rem; margin-top: 8px; }
.kb-article__content blockquote {
    margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--blog-blue);
    color: var(--blog-ink-light);
}

/* ------------------------------------------------------------- callouts --
   `.mini-cap` is the blog's workhorse tinted box (one under nearly every
   H2); `.hl-box` is its caveat/warning cousin, same shape, bordered instead
   of tinted-left. Both ported verbatim. Our own `.callout` / `.callout--*`
   predate this system -- Intercom exports two colours with no semantic
   markup of their own (#fed9db80 Warning, #feedaf80 Note), and the merge
   workflow already maps them onto these classes -- so `.callout--note` is
   re-skinned onto `.mini-cap`'s look and `.callout--warning` keeps a red
   accent, since a knowledge-base warning is a hazard notice a blog callout
   was never designed to carry. Worth revisiting once real content shows
   whether that split earns its keep. */
.kb-article__content .mini-cap, .kb-article__content .callout {
    background: var(--blog-blue-lt); border-left: 3px solid var(--blog-blue);
    border-radius: 0 6px 6px 0; padding: 12.75px 17px; margin: 12.75px 0 18.7px;
    font-family: var(--font-article-heading); font-size: 14.28px; line-height: 1.65; color: var(--blog-ink-mid);
}
.kb-article__content .callout { padding: 17px 22px; }
.kb-article__content .callout p { margin-bottom: 0; font-weight: 500; color: var(--blog-navy); font-family: inherit; font-size: inherit; }
.kb-article__content .callout p + p { margin-top: .6em; }
.kb-article__content .callout__label {
    display: flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .07em; margin-bottom: 6px;
}
.kb-article__content .callout__label::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.kb-article__content .callout--note .callout__label { color: var(--blog-blue); }
.kb-article__content .callout--warning { background: #fef2f0; border-left-color: var(--no); }
.kb-article__content .callout--warning .callout__label { color: #a5341f; }

/* `.answer-capsule` -- one per article, the opening "short answer". `.hl-box`
   -- a general tinted note for a caveat or rule of thumb, outside the
   Note/Warning merge pipeline. `.takeaways` and `.def-box` round out the
   component set; add markup with these classes and the styling is ready. */
.kb-article__content .answer-capsule {
    background: var(--blog-blue-lt); border-left: 4px solid var(--blog-blue);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 17px 22.1px; margin: 0 0 25.5px;
    font-family: var(--font-article-heading); font-size: 14.96px; line-height: 1.7; color: var(--blog-ink);
}
.kb-article__content .ac-lbl {
    font-size: 10.54px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--blog-blue); margin-bottom: 5.95px; display: flex; align-items: center; gap: 5.1px;
}
.kb-article__content .ac-lbl::before { content: ""; width: 5px; height: 5px; background: var(--blog-blue); border-radius: 50%; display: inline-block; }
.kb-article__content .hl-box {
    background: var(--blog-blue-lt); border: 1px solid var(--blog-blue-mid); border-radius: var(--radius-sm);
    padding: 15.3px 19.55px; margin: 19.55px 0; font-family: var(--font-article-heading);
    font-size: 14.28px; color: var(--blog-ink-mid); line-height: 1.65;
}
.kb-article__content .hl-box strong { color: var(--blog-navy); }
.kb-article__content .takeaways {
    background: #fff; border: 1px solid var(--blog-border); border-top: 3px solid var(--blog-navy);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 18.7px 22.1px; margin: 0 0 29.75px;
    font-family: var(--font-article-heading);
}
.kb-article__content .box-lbl { font-size: 10.54px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blog-ink-light); margin-bottom: 11.05px; }
.kb-article__content .tk-list { list-style: none; display: flex; flex-direction: column; gap: 6.8px; padding: 0; margin: 0; }
.kb-article__content .tk-list li { padding-left: 22.1px; position: relative; font-size: 13.94px; color: var(--blog-ink-mid); line-height: 1.55; margin: 0; }
.kb-article__content .tk-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--blog-blue); font-weight: 700; font-size: 13.09px; top: 1px; }
.kb-article__content .def-box { background: var(--blog-navy); color: #fff; border-radius: var(--radius-sm); padding: 23.8px 28.9px; margin: 25.5px 0; font-family: var(--font-article-heading); }
.kb-article__content .def-box .def-label { font-size: 10.2px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 7.65px; display: flex; align-items: center; gap: 6.8px; }
.kb-article__content .def-box .def-label::before { content: ""; width: 12px; height: 2px; background: var(--blog-blue-mid); border-radius: 1px; }
.kb-article__content .def-box .def-term { font-size: 19.55px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 8.5px; letter-spacing: -.015em; }
.kb-article__content .def-box .def-body { font-size: 14.96px; color: rgba(255,255,255,.82); line-height: 1.7; margin: 0; }
.kb-article__content .def-box .def-body strong { color: #fff; }

/* Numbered procedure cards and the arrow-bullet scan list, both verbatim. */
.kb-article__content .steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12.75px; margin: 25.5px 0; padding: 0; }
.kb-article__content .steps li {
    counter-increment: s; display: block; position: relative; font-family: var(--font-article-heading);
    font-size: 14.96px; color: var(--blog-ink-mid); line-height: 1.6; padding: 11.05px 14.45px 11.05px 52.9px;
    background: #fff; border: 1px solid var(--blog-border); border-radius: var(--radius-sm); margin: 0;
}
.kb-article__content .steps li::before {
    content: counter(s); position: absolute; left: 14.45px; top: 11.05px; background: var(--blog-navy); color: #fff;
    font-weight: 700; font-size: 12.24px; min-width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kb-article__content .steps li strong { color: var(--blog-navy); }
.kb-article__content .steps li .step-title { font-size: 15.3px; font-weight: 700; color: var(--blog-navy); line-height: 1.35; margin-bottom: 4.25px; display: block; }
.kb-article__content .steps li .step-body { font-size: 14.62px; color: var(--blog-ink-mid); line-height: 1.65; }
.kb-article__content .quick-list { list-style: none; display: flex; flex-direction: column; gap: 8.5px; margin: 17px 0 25.5px; padding: 0; }
.kb-article__content .quick-list li { display: block; position: relative; padding-left: 23.8px; font-size: 14.96px; font-family: var(--font-article-heading); color: var(--blog-ink-mid); margin: 0; }
.kb-article__content .quick-list li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--blog-blue); font-weight: 700; }

/* The data table: navy header, zebra body, caption below. */
.kb-article__content .tbl-wrap { overflow-x: auto; margin: 19.55px 0; }
.kb-article__content .dtbl { width: 100%; border-collapse: collapse; font-family: var(--font-article-heading); font-size: 13.6px; }
.kb-article__content .dtbl caption { caption-side: bottom; text-align: left; font-size: 11.39px; color: var(--blog-ink-light); padding-top: 6.8px; font-style: italic; }
.kb-article__content .dtbl th { background: var(--blog-navy); color: #fff; text-align: left; padding: 9.35px 14.45px; font-weight: 600; font-size: 12.75px; letter-spacing: .03em; }
.kb-article__content .dtbl td { padding: 8.5px 14.45px; border-bottom: 1px solid var(--blog-border); color: var(--blog-ink-mid); vertical-align: top; line-height: 1.5; }
.kb-article__content .dtbl tr:nth-child(even) td { background: var(--blog-bg-warm); }
/* A flagged content gap left for an editor to fill in (usually a missing
   screenshot) -- deliberately loud so it never blends into real content and
   ships to readers unnoticed. */
.kb-article__content .editor-note {
    display: inline-block; background: #f3e8ff; border: 1px dashed #9333ea;
    color: #6b21a8; border-radius: var(--radius-sm); padding: 2px 8px;
    font-size: .88em; font-style: normal;
}
/* Inline code is often a long identifier or URL with nowhere to break; it may
   break anywhere rather than run past the column. Blocks keep their own
   white-space and are unaffected. */
.kb-article__content code { font-family: var(--mono); font-size: .88em; background: var(--ground); padding: .15em .38em; border-radius: 4px; overflow-wrap: anywhere; }
.kb-article__content pre {
    font-family: var(--mono); font-size: .86rem; line-height: 1.6;
    background: var(--dark); color: #e5eefb; padding: 16px 18px; border-radius: var(--radius);
    overflow-x: auto;
}
.kb-article__content pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* The renderer boxes every table so a wide one scrolls sideways instead of
   pushing the page wider on a phone. */
.kb-article__content .table-scroll { overflow-x: auto; margin-bottom: 1.15em; }
.kb-article__content .table-scroll table { margin-bottom: 0; }
.kb-article__content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.kb-article__content th, .kb-article__content td { text-align: left; padding: 9px 12px; border: 1px solid var(--line); }
.kb-article__content th { background: var(--ground); font-weight: 600; }
.kb-article__content .has-background { padding: 14px 18px; border-radius: var(--radius); }
.kb-article__content .has-pale-cyan-blue-background-color { background: var(--wash); }
/* WordPress's alignment classes, which the imported articles carry and the
   editor's "Centred text" format applies: the editor's way to centre a
   paragraph, since its Align menu is not offered (EditorConfig). */
.kb-article__content .has-text-align-center { text-align: center; }
.kb-article__content .has-text-align-left { text-align: left; }
.kb-article__content .has-text-align-right { text-align: right; }

/* Long articles get a persistent rail: up to 26 headings and 85 screenshots
   is common here, and scrolling to find a step is the main frustration. The
   rail is one element holding the article's sections and then the product's
   topics, so it sticks as a whole and the text starts level with its top --
   the same plain sticky sidebar the blog uses, with no clamp of its own. */
@media (min-width: 1100px) {
    .article-layout { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 56px; align-items: start; }
    .article-rail {
        position: sticky; top: 92px; order: 1;
        padding: 2px; /* room for the focus ring without clipping it */
    }
    .kb-article__body { order: 2; }
    /* .article-rail--right also matches .article-rail above (it carries both
       classes) and would otherwise inherit order: 1 from it; putting the
       right rail back at the end keeps it under the article at this width,
       where there still isn't room for a third column. */
    .article-rail--right { order: 3; }
}

/* The right-hand rail only earns its own column once there is room for
   three; below that it drops under the article like any other rail content
   (see the mobile order rule above). */
@media (min-width: 1340px) {
    .article-layout { grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail-right); }
    .article-rail--right { position: sticky; top: 92px; order: 3; padding: 2px; }
}

/* --------------------------------------------------------------- helpful --
   Lives in the rail now, not under the article text, so it uses the same
   card and title treatment as .kb-toc/.topics rather than the wide banner
   it was before. A face is picked with an ordinary radio input; the comment
   box beneath it is revealed by :has() alone, so it works with no
   JavaScript at all. */

/* A plain bordered card like the others in the rail, but with no blue
   accent bar and a muted submit button, so it stays the quietest of the
   four rather than competing with the sections/CTA/topics cards above it. */
.helpful {
    margin: 0 0 20px; padding: 17px 19px; background: var(--page-bg, var(--paper));
    border: 1px solid var(--blog-border, var(--line));
    border-radius: var(--radius-sm); font-family: var(--font);
}
.helpful__title {
    font-size: 10.7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin: 0 0 12px; color: var(--blog-ink-light, var(--ink-2)); text-align: center;
}
.helpful__answer { color: var(--blog-ink-mid, var(--ink-2)); font-weight: 500; margin: 0 0 12px; font-size: 13px; text-align: center; }
.helpful__form { margin: 0; }

.helpful__faces { display: flex; justify-content: center; gap: 10px; margin: 0 0 0; }
.helpful__radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.helpful__face {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border: 1px solid var(--line); border-radius: 50%; color: var(--ink-3); cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.helpful__face svg { width: 20px; height: 20px; }
.helpful__face:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.helpful__radio:checked + .helpful__face { border-color: var(--accent); background: var(--wash); color: var(--accent-ink); }
.helpful__radio:focus-visible + .helpful__face { outline: 2px solid var(--accent); outline-offset: 2px; }
.helpful__radio:disabled + .helpful__face { cursor: default; opacity: .5; }

.helpful__comment { display: none; margin-top: 14px; }
.helpful__form:has(.helpful__radio:checked) .helpful__comment { display: block; }
.helpful__comment-input {
    display: block; width: 100%; resize: vertical; font: inherit; font-size: 13px; color: var(--ink-strong);
    padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.helpful__comment-input::placeholder { color: var(--ink-3); }
.helpful__comment-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--wash); }
.helpful__submit {
    display: block; width: 100%; margin: 10px 0 0; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer;
    padding: 8px 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-input);
}
.helpful__submit:hover { background: var(--ground); border-color: var(--blog-border-mid, var(--line)); color: var(--ink-strong); }
.helpful__submit:disabled { cursor: default; opacity: .6; }

/* --------------------------------------------------------------- related -- */

.related { margin: 40px 0 0; }
.related__title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
.related__list { list-style: none; margin: 0; padding: 4px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.related__list li { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line-soft); }
.related__list li:first-child { border-top: 0; }
.related__list a { color: var(--ink-strong); font-weight: 500; font-size: 15px; text-decoration: none; }
.related__list a:hover { color: var(--accent-ink); }

/* ------------------------------------------------------------- changelog --
   The same rail-beside-content shape as an article: a sticky jump list of
   every update on the left (.cat-nav, reused as-is), the feed on the right.
   Below the rail's own breakpoint it just drops above the feed, same as an
   article's rail does. */
.changelog-layout { display: grid; grid-template-columns: 1fr; gap: 0; }
.changelog-rail { min-width: 0; margin: 0 0 28px; }
.changelog-main { min-width: 0; }

@media (min-width: 1100px) {
    .changelog-layout { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 56px; align-items: start; }
    .changelog-rail { position: sticky; top: 92px; margin: 0; padding: 2px; }
}

/* Each release is its own long white box: a date, a title and a couple of
   lines of excerpt by default, the whole thing opening in place to the full
   release -- a <details> element, not JavaScript, so it works with none.
   The excerpt is redundant once open (it's the same text the body starts
   with), so :has() hides it then, the same trick the "was this helpful"
   comment box already uses on the article page. */
.changelog { display: flex; flex-direction: column; gap: 20px; max-width: 780px; margin: 32px 0 0; }
.changelog-card { padding: 30px 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); scroll-margin-top: 92px; }
.changelog-card__details { margin: 0; }
.changelog-card__summary { display: block; cursor: pointer; list-style: none; }
.changelog-card__summary::-webkit-details-marker { display: none; }
.changelog-card__date { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 14px; }
.changelog-card__title { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; margin: 0 0 10px; }
.changelog-card__summary:hover .changelog-card__title { color: var(--accent-ink); }
.changelog-card__excerpt { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; }
.changelog-card__details[open] .changelog-card__excerpt { display: none; }
.changelog-card__full { margin-top: 6px; font-size: 15.5px; }
.changelog-card__full > h3:first-child { margin-top: 0; }

/* Tags and the vote strip share one row at the foot of the card: tags at
   the start, the vote pushed to the end by its own margin so it still lands
   on the right even on a card with no tags at all. */
.changelog-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.changelog-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.changelog-card__tags .pill { background: var(--wash); border-color: var(--blog-blue-mid, var(--wash)); color: var(--accent-ink); }
.changelog-vote { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.changelog-vote__prompt, .changelog-vote__answer { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.changelog-vote__form { display: flex; gap: 8px; }
.changelog-vote__btn {
    display: flex; align-items: center; gap: 6px; padding: 7px 13px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
    color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.changelog-vote__btn svg { width: 15px; height: 15px; }
.changelog-vote__btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.changelog-vote__btn--up.is-active { border-color: var(--yes); color: var(--yes); background: color-mix(in srgb, var(--yes) 10%, var(--paper)); }
.changelog-vote__btn--down.is-active { border-color: var(--no); color: var(--no); background: color-mix(in srgb, var(--no) 10%, var(--paper)); }
.changelog-vote__btn:disabled { cursor: default; opacity: .6; }

@media (max-width: 640px) {
    .changelog-card { padding: 24px 22px; }
    .changelog-vote__form { margin-left: 0; }
}

/* ---------------------------------------------------------------- search -- */

.search-results { list-style: none; margin: 0; padding: 4px 0; max-width: 760px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
.search-result { padding: 18px 26px; border-top: 1px solid var(--line-soft); }
.search-result:first-child { border-top: 0; }
.search-result__title { font-size: 16.5px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.search-result__title a { color: var(--ink-strong); text-decoration: none; }
.search-result__title a:hover { color: var(--accent-ink); }
.search-result__excerpt { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.search-count { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }
.empty-notice { color: var(--ink-2); max-width: var(--measure); }

.pagination__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; list-style: none; padding: 0; }
.pagination__list a, .pagination__list span {
    display: inline-block; min-width: 38px; text-align: center; padding: 8px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none;
    font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.pagination__list a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* Qualified by the list, or the shared `a, span` colour above outranks it and
   the current page renders grey on navy. */
.pagination__list .pagination__current { background: var(--dark); border-color: var(--dark); color: #fff; }

/* The flat list of articles filed directly on a category. */
.kb-list { list-style: none; margin: 28px 0 0; padding: 4px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--page-bg, var(--paper)); columns: 3; column-gap: 0; }
/* On a category/subcategory page this is the only box on the page, not one
   of many in a long archive, so it keeps the ordinary white card treatment
   instead of blending into the background. The product root is the
   exception: its own flat list sits below a full grid of white subcategory
   cards (.cat-card), so it reverts to the muted background to read as the
   catch-all it is rather than competing with those cards for attention. */
.page-category .kb-list { background: var(--paper); }
.page-category--root .kb-list { background: var(--page-bg, var(--paper)); }
.kb-list__item { break-inside: avoid; margin: 0; padding: 5px 16px; }
.kb-list__item a { color: var(--ink-strong); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.kb-list__item a:hover { color: var(--accent-ink); text-decoration: underline; }

/* The archive groups every product tree under one heading. */
.kb-group { margin: 0 0 44px; }
.kb-group__title { font-size: 26px; line-height: 1.17; letter-spacing: -.015em; font-weight: 800; margin: 0 0 16px; color: var(--ink-strong); }
.kb-group__title a { color: inherit; text-decoration: none; }
.kb-group__title a:hover { color: var(--accent-ink); }

/* The full category/article tree sits under the contents rail on wide
   screens, and above the body on narrow ones, where a long tree before the
   article would be in the way. Same card and title treatment as .kb-toc, so
   the two boxes read as one family. Each level nests by giving every
   .cat-nav__body its own left padding, so indentation follows from the
   markup's own nesting rather than a depth number passed around in Twig. */
.cat-nav { margin: 0 0 20px; padding: 17px 19px; background: var(--page-bg, var(--paper)); border: 1px solid var(--blog-border, var(--line)); border-radius: var(--radius-sm); font-family: var(--font); }
.cat-nav__title {
    font-size: 10.7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin: 0 0 12px; color: var(--blog-ink-light, var(--ink-2));
    display: flex; align-items: center; gap: 7px;
}
.cat-nav__title::before { content: ""; display: inline-block; width: 8px; height: 2px; background: var(--blog-blue, var(--accent)); border-radius: 1px; }
.cat-nav__title a { color: inherit; text-decoration: none; }
.cat-nav__title a:hover { color: var(--blog-blue, var(--accent-ink)); }

.cat-nav__list { list-style: none; margin: 0 0 2px; padding: 0; }
.cat-nav__link {
    display: block; padding: 5px 0; color: var(--blog-ink-mid, var(--ink-2)); text-decoration: none;
    font-size: 12.5px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;
}
.cat-nav__link:hover { color: var(--blog-blue, var(--accent-ink)); }
.cat-nav__link.is-active { color: var(--blog-blue, var(--accent-ink)); font-weight: 600; }

.cat-nav__group { margin: 0 0 2px; }
.cat-nav__summary {
    display: flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--blog-ink, var(--ink-strong));
    list-style: none; /* Firefox's own marker; Chromium needs the rule below */
}
.cat-nav__summary::-webkit-details-marker { display: none; }
.cat-nav__chevron { flex: none; width: 12px; height: 12px; color: var(--blog-ink-light, var(--ink-3)); transition: transform .15s; }
.cat-nav__group[open] > .cat-nav__summary .cat-nav__chevron { transform: rotate(90deg); }
.cat-nav__body { padding-left: 15px; margin: 0 0 4px 5px; }

/* Suggestions under the search box. Absent without JavaScript, and the box
   behaves as an ordinary search field either way. */
.suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    list-style: none; margin: 0; padding: 6px 0; max-height: 60vh; overflow-y: auto;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .1);
}
.suggest li { margin: 0; }
.suggest a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 9px 16px; color: var(--ink-strong); text-decoration: none; font-size: 14.5px;
}
.suggest a:hover, .suggest a:focus { background: var(--wash); color: var(--accent-deep); }

/* ---------------------------------------------------------------- footer -- */
/* One rounded panel, as on the brand site: the brand and what it is on the
   left, the ways to reach it and the articles worth pinning on the right. */

.site-footer { padding: 0 24px; margin: 80px 0 24px; }
.site-footer__panel {
    max-width: var(--container); margin: 0 auto; padding: 52px 48px 32px;
    background: var(--ground); border-radius: 32px;
}
.site-footer__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand img { display: block; width: 150px; height: auto; margin: 0 0 18px; }
.site-footer__about { color: var(--ink-2); font-size: 14px; margin: 0 0 20px; max-width: 40ch; }
.site-footer__about p { margin: 0; }
.site-footer__heading { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin: 0 0 9px; }
.site-footer__list a { color: var(--ink-strong); font-size: 14px; font-weight: 500; text-decoration: none; }
.site-footer__list a:hover { color: var(--accent-ink); }
.site-social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--accent);
}
.site-social a:hover { background: var(--accent); color: #fff; }
.site-social__icon { width: 18px; height: 18px; fill: currentColor; }
.site-footer__bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
    color: var(--ink-2); font-size: 13px;
}
.site-footer__bottom p { margin: 0; }
.site-footer__browse a { color: var(--ink-2); text-decoration: underline; }
.site-footer__browse a:hover { color: var(--accent-ink); }

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 1000px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
    .chooser { grid-template-columns: 1fr; }
    .kb-list { columns: 1; }
    .section__head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .section__note { white-space: normal; }
}

@media (max-width: 620px) {
    /* On a phone the pill collapses to just its icon button, so it doesn't
       compete with the switch-product link for room; tapping it (see
       suggest.js) expands it back into a real input. */
    /* The grid that centers the search box on wider screens has no room to
       spare here, so this reverts to a plain flex row -- logo, collapsed
       search icon, nav -- exactly the order they already appear in. */
    .site-header__inner { display: flex; justify-content: space-between; height: 60px; gap: 10px; }
    .site-logo__img { width: 120px; }
    .site-header__actions { gap: 8px; }
    .site-search { flex: 0 0 auto; justify-self: unset; width: 38px; min-width: 38px; padding: 0; justify-content: center; overflow: hidden; transition: width .18s ease; }
    .site-search.is-expanded { flex: 1 1 auto; width: auto; min-width: 44px; padding: 0 10px 0 2px; }
    .site-search__input { width: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
    .site-search.is-expanded .site-search__input { width: auto; flex: 1 1 auto; opacity: 1; pointer-events: auto; }
    .site-nav__link { padding: 7px 10px; font-size: 13.5px; }
    .hero { padding: 40px 0 28px; }
    .hero__stats { gap: 24px; margin-bottom: 26px; }
    .hero__stat-n { font-size: 19px; }
    .chooser__item { padding: 24px 22px; }
    .cat-grid { grid-template-columns: 1fr; }
    .favourites__item { gap: 14px; padding: 16px 18px; }
    .favourites__item::before { width: 30px; font-size: 20px; }
    .site-footer { padding: 0 16px; margin-top: 56px; }
    .site-footer__panel { padding: 32px 22px 24px; border-radius: var(--radius-lg); }
    .site-footer__cols { grid-template-columns: 1fr; gap: 26px; }
    .kb-list__item { padding: 10px 18px; }
    .search-result { padding: 16px 18px; }
}