/* ==========================================================================
   Knowledge base (/help/), shared by every brand. Only tokens from base.css and
   the site theme are used, so each site's KB picks up its own colours, fonts and corners.

   Rules that keep it crisp:
   - full width (up to --kb-max) so the article column never squeezes;
   - whole-pixel type and an 8px spacing scale (fractional sizes render soft on 1x screens);
   - no transforms on hover (they re-rasterise text and blur it), colour/border changes only;
   - each column has a floor (clamp) and the layout drops a column before anything collides.
   ========================================================================== */

:root {
  --kb-max: 1760px;
  --kb-gutter: clamp(16px, 3vw, 48px);
  --kb-side-w: clamp(240px, 16vw, 288px);
  --kb-rail-w: clamp(280px, 18vw, 336px);
  --kb-gap: clamp(24px, 2.2vw, 40px);
  --kb-measure: 84ch;                       /* longest comfortable line of article text */
  --kb-line: color-mix(in srgb, var(--line) 55%, var(--line-2));
  --kb-card-bg: var(--surface);
  --kb-radius: var(--radius);
  --kb-radius-sm: min(var(--radius), 8px);
  --kb-step-n-bg: var(--accent);
  --kb-step-n-ink: var(--accent-ink);
  --kb-title-transform: none;              /* long article titles read badly in caps */
  --kb-hero-overlay: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 42%, color-mix(in srgb, var(--bg) 20%, transparent) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 45%);
  --kb-hero-sm-overlay: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 50%, color-mix(in srgb, var(--bg) 55%, transparent) 100%), linear-gradient(0deg, var(--bg-2) 0%, transparent 70%);
}

.kb-wrap { width: calc(100% - 2 * var(--kb-gutter)); max-width: var(--kb-max); margin-inline: auto; }
.kb main { padding-bottom: 72px; }

/* ---------- heroes ---------- */
/* the hero sits above the content after it (z-index), and only its artwork is clipped, so the instant-search
   dropdown can hang down over the page instead of being cut off or painted underneath it */
.kb-hero { position: relative; z-index: 5; isolation: isolate; border-bottom: 1px solid var(--kb-line); padding-block: 80px 64px; }
.kb-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.kb-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kb-hero-position, 70% 50%); }
.kb-hero-media::after { content: ""; position: absolute; inset: 0; background: var(--kb-hero-overlay); }
.kb-hero .eyebrow { margin-bottom: 16px; }
.kb-hero h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; max-width: 14ch; }
.kb-tagline { margin-top: 16px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; color: color-mix(in srgb, var(--text) 90%, var(--text-2)); }
.kb-hero-sm { padding-block: 32px 36px; background: var(--bg-2); }
.kb-hero-sm .kb-hero-media::after { background: var(--kb-hero-sm-overlay); }
.kb-hero-sm h1 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; max-width: 40ch; text-transform: var(--kb-title-transform); letter-spacing: -0.01em; }
.kb-hero-sm .lede { margin-top: 8px; max-width: 80ch; font-size: 16px; line-height: 1.55; }
.kb-crumbs { margin-bottom: 16px; flex-wrap: wrap; row-gap: 4px; font-size: 14px; }
.kb-crumbs a { color: var(--text-2); }
.kb-crumbs a:hover { color: var(--text); }
.kb-crumbs span { color: var(--text-3); }

/* ---------- search ---------- */
.kb-search { position: relative; display: flex; align-items: center; gap: 12px; max-width: 880px; margin-top: 24px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--kb-radius); background: color-mix(in srgb, var(--surface) 92%, transparent); transition: border-color .15s, box-shadow .15s; }
.kb-hero-sm .kb-search { margin-top: 20px; }
.kb-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kb-search > .i { width: 20px; height: 20px; color: var(--text-2); }
.kb-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--text); font: 400 16px var(--font-body); outline: none; }
.kb-search input::placeholder { color: var(--text-3); }
.kb-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.kb-search kbd { flex: none; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-3); font: 600 13px/20px var(--font-body); }
.kb-search-lg input { height: 60px; font-size: 18px; }
.kb-results { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 30; max-height: min(480px, 60vh); overflow-y: auto; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--kb-radius); background: var(--surface); box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .85); }
.kb-results a { display: block; padding: 10px 12px; border-radius: var(--kb-radius-sm); text-decoration: none; }
.kb-results a:hover, .kb-results a[aria-selected="true"] { background: var(--surface-2); }
.kb-results strong { display: block; color: var(--text); font-weight: 650; font-size: 15px; }
.kb-results small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; line-height: 1.4; }
.kb-results mark { background: none; color: var(--accent); }
.kb-results .kb-none { padding: 12px; color: var(--text-3); }
.kb-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 16px; color: var(--text-2); font-size: 15px; }
.kb-popular > span:first-child { color: var(--text-3); }
.kb-popular a { color: var(--accent-2); }
.kb-popular a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- home ---------- */
.kb-main { padding-top: 48px; }
.kb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.kb-head h2 { font-size: clamp(22px, 2vw, 30px); }
.kb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 56px; }
.kb-cat { display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; align-items: center; gap: 20px; min-height: 104px; padding: 20px 20px 20px 24px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); background: var(--kb-card-bg); transition: border-color .15s, background-color .15s; }
.kb-cat:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--kb-line)); background: var(--surface-2); }
.kb-cat-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--kb-line)); border-radius: var(--kb-radius-sm); background: var(--accent-soft); color: var(--accent); }
.kb-cat-icon .i { width: 28px; height: 28px; stroke-width: 1.5; }
.kb-cat-text { display: grid; gap: 4px; min-width: 0; }
.kb-cat-text strong { font: 650 18px/1.3 var(--font-body); color: var(--text); }
.kb-cat-text span { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.kb-cat-text em { font-style: normal; color: var(--text-3); font-size: 13px; }
.kb-cat > .i { width: 20px; height: 20px; color: var(--text-3); transition: color .15s; }
.kb-cat:hover > .i { color: var(--accent); }
.kb-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 420px); gap: var(--kb-gap); align-items: start; }

/* ---------- article rows (popular, category, search, all) ---------- */
.kb-list { display: grid; border-top: 1px solid var(--kb-line); }
.kb-row { display: grid; grid-template-columns: 168px minmax(0, 1fr) 20px; gap: 24px; align-items: center; padding: 16px 8px 16px 0; border-bottom: 1px solid var(--kb-line); transition: background-color .15s; }
.kb-row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.kb-row > .i { width: 20px; height: 20px; color: var(--text-3); transition: color .15s; }
.kb-row:hover > .i { color: var(--accent); }
.kb-row-text { display: grid; gap: 4px; min-width: 0; }
.kb-row-text strong { color: var(--text); font-weight: 650; font-size: 17px; line-height: 1.35; }
.kb-row-text > span { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.kb-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; color: var(--text-3); font-size: 13px; }
.kb-row-meta span { display: inline-flex; align-items: center; gap: 6px; }
.kb-tag { padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 6px; color: var(--accent-2); font-size: 12px; line-height: 18px; }
.kb-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--kb-radius-sm); background: var(--surface-2); }
.kb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kb-thumb-badge { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--accent); backdrop-filter: blur(4px); }
.kb-thumb-badge .i { width: 16px; height: 16px; }
.kb-thumb-icon { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 70%), var(--surface-2); }
.kb-thumb-icon .i { width: 32px; height: 32px; color: var(--accent); stroke-width: 1.4; }
.kb-empty { padding: 24px 0; color: var(--text-3); }

/* ---------- help card ---------- */
.kb-help { display: grid; justify-items: center; gap: 8px; padding: 32px 28px; text-align: center; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--kb-line)); border-radius: var(--kb-radius); background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%), var(--kb-card-bg); }
.kb-help-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 50%; color: var(--accent); }
.kb-help-icon .i { width: 28px; height: 28px; }
.kb-help h2 { font-size: 26px; line-height: 1.2; }
.kb-help-sub { color: var(--text); font-weight: 650; font-size: 16px; }
.kb-help p:not(.kb-help-sub) { max-width: 34ch; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.kb-help .btn { width: 100%; margin-top: 8px; white-space: normal; text-align: center; }
.kb-or { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; color: var(--text-3); font-size: 13px; }
.kb-or::before, .kb-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* ---------- three columns: sidebar | content | rail ---------- */
.kb-layout { display: grid; grid-template-columns: var(--kb-side-w) minmax(0, 1fr) var(--kb-rail-w); gap: var(--kb-gap); align-items: start; padding-top: 32px; }
.kb-side { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; scrollbar-width: none; }
.kb-side::-webkit-scrollbar { display: none; }
.kb-rail { display: grid; gap: 16px; min-width: 0; }
.kb-side-toggle { display: none; }
.kb-nav { padding: 8px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); background: var(--kb-card-bg); }
.kb-back { display: flex; align-items: center; gap: 8px; padding: 12px 12px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--kb-line); color: var(--accent-2); font-weight: 600; font-size: 15px; }
.kb-flip { transform: rotate(180deg); }
.kb-nav-group summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--kb-radius-sm); cursor: pointer; list-style: none; color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.3; }
.kb-nav-group summary::-webkit-details-marker { display: none; }
.kb-nav-group summary:hover { background: var(--surface-2); }
.kb-nav-group summary > .i:first-child { width: 20px; height: 20px; color: var(--accent); }
.kb-chev { width: 16px; height: 16px; color: var(--text-3); transition: transform .15s; }
.kb-nav-group[open] .kb-chev { transform: rotate(180deg); }
.kb-nav-group ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 22px; display: grid; gap: 2px; border-left: 1px solid var(--kb-line); margin-left: 21px; }
.kb-nav-group li a { display: block; padding: 8px 10px; border-radius: var(--kb-radius-sm); color: var(--text-2); font-size: 14px; line-height: 1.4; text-decoration: none; }
.kb-nav-group li a:hover { color: var(--text); background: var(--surface-2); }
.kb-nav-group li a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 650; }

/* ---------- article ---------- */
.kb-content { min-width: 0; }
.kb-article > .eyebrow { margin-bottom: 12px; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; color: var(--text-2); font-size: 14px; }
.kb-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.kb-bars { display: inline-flex; align-items: end; gap: 2px; height: 12px; }
.kb-bars i { width: 3px; border-radius: 1px; background: var(--line-2); }
.kb-bars i:nth-child(1) { height: 5px; } .kb-bars i:nth-child(2) { height: 8px; } .kb-bars i:nth-child(3) { height: 12px; }
.kb-bars[data-level="1"] i:nth-child(1), .kb-bars[data-level="2"] i:nth-child(-n+2), .kb-bars[data-level="3"] i { background: var(--accent); }

.kb-article { color: var(--text-2); font-size: 16px; line-height: 1.7; overflow-wrap: break-word; }
.kb-article a { overflow-wrap: anywhere; }   /* long policy and package names in links */
.kb-article :is(p, li, h2, h3) { max-width: var(--kb-measure); }
.kb-article p + p, .kb-article p + ul, .kb-article p + ol, .kb-article ul + p, .kb-article ol + p { margin-top: 12px; }
.kb-article strong { color: var(--text); font-weight: 650; }
.kb-article a:not(.btn):not(.kb-prev):not(.kb-next):not([data-zoom]) { color: var(--accent-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.kb-article h2 { margin-bottom: 12px; color: var(--text); font: 700 21px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; }
.kb-article h3 { margin: 24px 0 8px; color: var(--text); font: 650 17px/1.35 var(--font-body); text-transform: none; letter-spacing: 0; }
.kb-article ul, .kb-article ol { display: grid; gap: 8px; margin: 12px 0; padding-left: 24px; }
.kb-article li { min-width: 0; padding-left: 4px; }   /* grid items: let wide code blocks scroll instead of stretching the list */
.kb-article li::marker { color: var(--accent); font-weight: 700; }
.kb-article li > p + p, .kb-article li > ul, .kb-article li > ol, .kb-article li > .table-wrap, .kb-article li > pre, .kb-article li > .kb-shot { margin-top: 12px; }
.kb-article code { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface-2); color: var(--text); font: 14px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kb-article pre { margin: 16px 0; padding: 16px 20px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--kb-radius-sm); background: color-mix(in srgb, var(--bg) 70%, #000); line-height: 1.6; }
.kb-article pre code { padding: 0; border: 0; background: none; font-size: 14px; white-space: pre; overflow-wrap: normal; }
.kb-intro { margin-bottom: 24px; font-size: 17px; }
.kb-intro > p:first-child { color: color-mix(in srgb, var(--text) 88%, var(--text-2)); }
.kb-section, .kb-step { scroll-margin-top: calc(var(--header-h) + 24px); margin-top: 16px; padding: 28px 32px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); background: var(--kb-card-bg); }
.kb-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; }
.kb-step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kb-step-n-bg); color: var(--kb-step-n-ink); font: 700 17px/1 var(--font-body); }
.kb-step-body { min-width: 0; }
.kb-step-body > h2 { min-height: 40px; display: flex; align-items: center; margin-top: 0; }
.kb-article h3[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.table-wrap { margin: 16px 0; overflow-x: auto; border: 1px solid var(--kb-line); border-radius: var(--kb-radius-sm); }
.kb-article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.kb-article th, .kb-article td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--kb-line); }
.kb-article th { background: var(--surface-2); color: var(--text); font-weight: 650; }
.kb-article td:first-child { min-width: 9em; }
.kb-article tr:last-child td { border-bottom: 0; }
.kb-article td code { white-space: nowrap; overflow-wrap: normal; }

.callout { margin: 16px 0; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, var(--kb-line)); border-left: 4px solid var(--c, var(--accent)); border-radius: var(--kb-radius-sm); background: color-mix(in srgb, var(--c, var(--accent)) 8%, var(--surface)); color: var(--text); max-width: calc(var(--kb-measure) + 48px); }
.callout p, .callout li { color: inherit; }
.callout-info { --c: #3ba4ff; } .callout-success { --c: #34d399; } .callout-warning { --c: #f5b53d; } .callout-danger { --c: #ff5d73; }

.kb-shot { margin: 16px 0; max-width: 1100px; }
.kb-shot a { display: block; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--kb-radius-sm); background: var(--bg); cursor: zoom-in; transition: border-color .15s; }
.kb-shot a:hover { border-color: var(--accent); }
.kb-shot img { width: 100%; }
.kb-shot figcaption { margin-top: 8px; color: var(--text-3); font-size: 13px; line-height: 1.45; }

.kb-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.kb-prev, .kb-next { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); background: var(--kb-card-bg); transition: border-color .15s; }
.kb-prev:hover, .kb-next:hover { border-color: var(--accent); }
.kb-next { grid-column: 2; text-align: right; }
.kb-prev small, .kb-next small { color: var(--text-3); font-size: 13px; }
.kb-prev strong, .kb-next strong { color: var(--text); font-weight: 650; font-size: 15px; line-height: 1.4; }

/* ---------- right rail ---------- */
.kb-card { padding: 20px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); background: var(--kb-card-bg); }
.kb-card h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--text); font: 700 16px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; }
.kb-card h2 .i { width: 20px; height: 20px; color: var(--accent); }
.kb-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; margin: 0; font-size: 14px; }
.kb-card dt { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); white-space: nowrap; }
.kb-card dd { margin: 0; color: var(--text); }
.kb-card dd a { color: var(--accent-2); }
.kb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kb-toc a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px 8px; border-radius: 6px; color: var(--text-2); font-size: 14px; line-height: 20px; text-decoration: none; }
.kb-toc a:hover, .kb-toc a.is-active { color: var(--text); background: var(--surface-2); }
.kb-toc-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 11px/1 var(--font-body); }
.kb-toc-n.is-dot { background: none; }
.kb-toc-n.is-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.kb-toc a.is-active .kb-toc-n.is-dot::before { background: var(--accent); }
.kb-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kb-related a { display: grid; grid-template-columns: 72px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 6px; border-radius: var(--kb-radius-sm); color: var(--text-2); font-size: 14px; line-height: 1.35; text-decoration: none; }
.kb-related a:hover { background: var(--surface-2); color: var(--text); }
.kb-related .kb-thumb-badge { display: none; }
.kb-related a > .i { width: 16px; height: 16px; color: var(--text-3); }
.kb-rail .kb-help { padding: 28px 20px; }
.kb-rail .kb-help h2 { font-size: 20px; }

/* all-articles page */
.kb-all-cat + .kb-all-cat { margin-top: 40px; }
.kb-all-cat h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 22px; }
.kb-all-cat h2 .i { color: var(--accent); }

/* ---------- screenshot zoom ---------- */
.kb-zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .88); cursor: zoom-out; }
.kb-zoom img { max-width: min(1600px, 100%); max-height: 100%; border: 1px solid var(--line-2); border-radius: var(--kb-radius-sm); box-shadow: 0 32px 80px rgba(0, 0, 0, .7); }

/* ---------- responsive: drop a column before anything collides ---------- */
@media (max-width: 1440px) {
  .kb-layout { grid-template-columns: var(--kb-side-w) minmax(0, 1fr); }
  .kb-rail { grid-column: 2; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .kb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .kb-layout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .kb-rail { grid-column: auto; }
  .kb-side { position: static; max-height: none; overflow: visible; }
  .kb-side-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--kb-radius); background: var(--kb-card-bg); color: var(--text); font: 600 15px var(--font-body); cursor: pointer; }
  .kb-side .kb-nav { display: none; margin-top: 8px; }
  .kb-side.is-open .kb-nav { display: block; }
  .kb-home-grid { grid-template-columns: minmax(0, 1fr); }
  .kb-home-grid .kb-help { max-width: 560px; }
}
@media (max-width: 700px) {
  .kb-hero { padding-block: 56px 40px; }
  .kb-cats { grid-template-columns: minmax(0, 1fr); }
  .kb-cat { grid-template-columns: 48px minmax(0, 1fr) 16px; gap: 16px; min-height: 0; padding: 16px; }
  .kb-cat-icon { width: 48px; height: 48px; }
  .kb-row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-right: 0; }
  .kb-row > .i, .kb-thumb-badge { display: none; }
  .kb-row-text strong { font-size: 16px; }
  .kb-section, .kb-step { padding: 20px 16px; }
  .kb-step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kb-step-body > h2 { min-height: 0; }
  .kb-article { font-size: 16px; }
  .kb-article ul, .kb-article ol { padding-left: 20px; }
  .kb-article table { min-width: 640px; }   /* scroll the table sideways rather than crush its columns */
  .kb-article td:first-child { min-width: 10em; }
  .kb-search kbd { display: none; }
  .kb-pager { grid-template-columns: minmax(0, 1fr); }
  .kb-next { grid-column: auto; }
}

/* the site header and footer line up with the full-width KB instead of the site's narrower --wrap */
.kb .site-header .wrap, .kb .site-footer .wrap { width: calc(100% - 2 * var(--kb-gutter)); max-width: var(--kb-max); }