/* ==========================================================================
   sp-a — help center, KB articles, support page and the related-help cards
   ========================================================================== */

/* ---------- 1. Related help: [data-kb-related] (renders on any page) ---------- */
.kb-rel { container-type: inline-size; }
.kb-rel__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kb-rel__li { display: flex; min-width: 0; margin: 0; }
.kb-rel__item { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
.kb-rel__item:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-rel__icon { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kb-rel__icon svg { width: 18px; height: 18px; }
.kb-rel__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-rel__cat { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb-rel__title { font-size: 0.95rem; font-weight: 560; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.kb-rel__sum, .kb-rel__meta { display: none; }
.kb-rel__go { width: 16px; height: 16px; flex: none; color: var(--faint); transition: transform 0.3s var(--ease), color 0.2s; }
.kb-rel__item:hover .kb-rel__go { color: var(--accent); transform: translateX(3px); }
@container (min-width: 520px) {
  .kb-rel__item { align-items: flex-start; gap: 16px; padding: 18px 20px; }
  .kb-rel__sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
  .kb-rel__meta { display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
  .kb-rel__go { align-self: center; }
}
@container (min-width: 820px) {
  .kb-rel__list { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .kb-rel__item { flex-direction: column; gap: 18px; padding: 24px; border-radius: var(--radius-lg); }
  .kb-rel__icon { width: 42px; height: 42px; border-radius: 12px; }
  .kb-rel__icon svg { width: 20px; height: 20px; }
  .kb-rel__title { font-size: 1.08rem; letter-spacing: -0.025em; }
  .kb-rel__meta { margin-top: auto; padding-top: 16px; }
  .kb-rel__body { align-self: stretch; }
  .kb-rel__go { position: absolute; top: 28px; right: 24px; }
}

/* ---------- 2. KB article: header ---------- */
.kb-page { counter-reset: none; }
.kb-hero { position: relative; isolation: isolate; overflow: hidden; padding: 48px 0 56px; border-bottom: 1px solid var(--line); }
.kb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(60% 100% at 20% 0%, #000 20%, transparent 75%); mask: radial-gradient(60% 100% at 20% 0%, #000 20%, transparent 75%); opacity: 0.7; }
.kb-hero .breadcrumbs { flex-wrap: wrap; }
.kb-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: end; margin-top: 30px; }
.kb-cat { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); box-shadow: var(--shadow-sm); transition: border-color 0.2s; }
.kb-cat:hover { border-color: var(--line-2); }
.kb-cat svg { width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.kb-hero h1 { max-width: 860px; margin: 20px 0 16px; font-size: clamp(2.1rem, 4.3vw, 3.5rem); font-weight: 550; line-height: 1.04; letter-spacing: -0.048em; }
.kb-lede { max-width: 680px; font-size: 1.13rem; line-height: 1.6; color: var(--muted); }
.kb-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.kb-meta li { display: inline-flex; align-items: center; gap: 7px; }
.kb-meta svg { width: 15px; height: 15px; color: var(--faint); }
.kb-meta b { font-weight: 500; color: var(--ink-2); }

.kb-applies { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.kb-applies__title { margin-bottom: 12px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kb-applies ul { display: grid; gap: 6px; }
.kb-applies a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; font-size: 0.92rem; font-weight: 520; color: var(--ink); background: var(--bg); border: 1px solid transparent; transition: border-color 0.2s, background 0.2s; }
.kb-applies a:hover { border-color: var(--line-2); background: var(--card); }
.kb-applies a > svg:first-child { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--accent); flex: none; }
.kb-applies a small { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--faint); white-space: nowrap; }
.kb-applies__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.kb-applies__foot svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* ---------- 3. KB article: layout + sidebar ---------- */
.kb-body { padding: 56px 0 40px; }
.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 72px; align-items: start; }
.kb-main { grid-column: 1; grid-row: 1; min-width: 0; max-width: 800px; }
.kb-side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--anchor-offset) + 8px); display: grid; gap: 14px; max-height: calc(100vh - var(--anchor-offset) - 24px); overflow-y: auto; scrollbar-width: thin; }
.kb-toc { border: 0; }
.kb-toc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); cursor: default; }
.kb-toc > summary::-webkit-details-marker { display: none; }
.kb-toc > summary svg { display: none; width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.kb-toc .toc { position: static; font-size: 0.88rem; }
.kb-toc .toc::before { display: none; }
.kb-tools { display: flex; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.kb-tool { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 0.8rem; font-weight: 520; color: var(--ink-2); transition: border-color 0.2s, color 0.2s; }
.kb-tool:hover { border-color: var(--line-2); color: var(--ink); }
.kb-tool svg { width: 14px; height: 14px; }
.kb-sidecard { padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.kb-sidecard strong { display: block; font-size: 0.95rem; letter-spacing: -0.015em; }
.kb-sidecard p { margin: 6px 0 12px; font-size: 0.84rem; line-height: 1.5; color: var(--muted); }
.kb-sidecard a { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 0.86rem; font-weight: 540; color: var(--ink); border-top: 1px solid var(--line); }
.kb-sidecard a:hover { color: var(--accent); }
.kb-sidecard a svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---------- 4. KB article: body content ---------- */
.kb-prose { max-width: none; }
.kb-prose h2 { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
.kb-prose > h2:first-child, .kb-prose > .kb-before + h2 { margin-top: 1.6em; }
.kb-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.kb-prose h3 { font-size: 1.14rem; }
.kb-prose strong { font-weight: 600; }
.kb-prose var, .kb-page pre.code var { font-style: normal; }
.kb-prose var { padding: 1px 6px; border-radius: 6px; font-family: var(--mono); font-size: 0.86em; color: var(--accent); background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.kb-ui var { padding: 0 3px; font-size: 1em; border: 0; border-radius: 4px; }
.kb-ui__row var, .kb-ui__crumb var, .kb-ui__kv var, .kb-ui__input var, .kb-ui__mailhead var { padding: 0; background: none; border-radius: 0; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.kb-prose :not(pre) > code var, .kb-table .kb-mono var, .kb-path var { padding: 0; border: 0; border-radius: 0; background: none; font-size: 1em; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.kb-page pre.code var { padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; color: #f2c46d; border-bottom: 1px dashed rgba(242, 196, 109, 0.55); }
.kb-page pre.code .c { color: #6c7290; }
.kb-page pre.code .p { color: #8fa0ff; user-select: none; }
.kb-prose pre.code { margin: 1.1em 0; }
.kb-prose .callout { margin: 1.4em 0; }
.kb-prose .callout p + p { margin-top: 0.5em; }
.kb-prose .callout a { font-weight: 560; }
.kb-prose .callout p > strong:first-child { display: block; margin-bottom: 2px; }
.kb-prose kbd { vertical-align: 1px; }
/* headings break into even lines; paragraphs never end on a lone word */
.kb-prose :is(h2, h3), .kb-fix > summary { text-wrap: balance; }
.kb-prose :is(p, li) { text-wrap: pretty; }

.kb-before { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; padding: 22px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.kb-before__title { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kb-before__title svg { width: 16px; height: 16px; color: var(--accent); }
.kb-before ul.check-list { padding: 0; list-style: none; gap: 9px; }
.kb-before ul.check-list li { margin: 0; font-size: 0.94rem; line-height: 1.5; }
.kb-before__facts { display: grid; gap: 10px; align-content: start; min-width: 170px; padding-left: 24px; border-left: 1px solid var(--line); }
/* a value starts right under its label even when the fact beside it runs to two lines */
.kb-before__facts div { display: grid; gap: 1px; align-content: start; }
.kb-before__facts small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb-before__facts b { font-size: 0.95rem; font-weight: 560; color: var(--ink); line-height: 1.3; }

.kb-steps { margin: 1.4em 0 0; padding: 0 !important; list-style: none !important; counter-reset: kbstep; }
.kb-steps > li { position: relative; margin: 0 !important; padding: 0 0 30px 56px; counter-increment: kbstep; }
.kb-steps > li::before { content: counter(kbstep); position: absolute; left: 0; top: -3px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.kb-steps > li::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 6px; width: 1px; background: linear-gradient(var(--line-2), var(--line)); }
.kb-steps > li:last-child { padding-bottom: 4px; }
.kb-steps > li:last-child::after { display: none; }
.kb-steps > li > h3 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.kb-steps > li > * + * { margin-top: 0.65em; }
.kb-steps > li > pre.code, .kb-steps > li > .kb-ui, .kb-steps > li > .callout { margin-top: 1em; }

.kb-path { display: inline; padding: 2px 7px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.88em; font-weight: 540; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kb-path > span { display: inline-block; max-width: 100%; white-space: nowrap; }
/* the separator ends the segment before it, so a line break never starts a line with "›" */
.kb-path > span:not(:last-child)::after { content: "›"; margin: 0 5px 0 6px; color: var(--faint); font-weight: 400; }
/* a short path (up to three steps) reads as one unit: it moves to the next line whole instead of splitting */
@media (min-width: 641px) {
  .kb-path:not(:has(> span:nth-child(4))) { white-space: nowrap; }
}
/* ...except in the half-width .kb-cols boxes just above the phone layout, where a path can be wider than the box */
@media (min-width: 641px) and (max-width: 760px) {
  .kb-cols .kb-path { white-space: normal; }
}

.kb-table { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
/* scroll shadows: a soft edge appears on the side that has more columns to scroll to */
.kb-table { background:
  linear-gradient(90deg, var(--card) 30%, transparent) left / 32px 100% no-repeat local,
  linear-gradient(270deg, var(--card) 30%, transparent) right / 32px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) left / 12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 14%, transparent), transparent) right / 12px 100% no-repeat scroll,
  var(--card); }
/* tables are reference material: a tighter leading than body copy keeps rows compact */
.kb-table table { min-width: 560px; margin: 0; line-height: 1.5; }
.kb-table th, .kb-table td { padding: 12px 16px; }
.kb-table .kb-nw { white-space: nowrap; }
.kb-table tbody tr:last-child td { border-bottom: 0; }
.kb-table td code, .kb-table td var { white-space: nowrap; }
.kb-table .kb-mono { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); }
.kb-table thead th:first-child { border-top-left-radius: 13px; }
.kb-table thead th:last-child { border-top-right-radius: 13px; }
.kb-table tbody th { background: none; font-weight: 560; color: var(--ink); }
.kb-table tbody th.kb-mono { font-weight: 500; }
.kb-table tbody tr:last-child th { border-bottom: 0; }
/* the first line of every cell shares one baseline, so mono values sit level with the text beside them
   (no effect in the "rows" and "cards" layouts below, where cells are grid items or blocks) */
.kb-table tbody :is(th, td) { vertical-align: baseline; }
/* a row name that has to wrap breaks into even lines */
.kb-table tbody th { text-wrap: balance; }

/* Fitted layouts. sp-a-kb.js measures every table at the current width and sets data-fit:
   "table" when every cell stays short; "rows" when a column would be crushed: each row header
   gets a line of its own and the cells sit side by side under the column names (the columns
   size to their content through subgrid); "cards" when even that is too narrow: every cell
   gets the full width with its column name above it (data-label, copied by main.js). */
.kb-table[data-fit="rows"], .kb-table[data-fit="cards"] { overflow: hidden; }
.kb-table[data-fit="rows"] table { display: grid; grid-template-columns: repeat(var(--kb-cols, 2), auto); min-width: 0; }
.kb-table[data-fit="rows"] :is(thead, tbody) { display: contents; }
.kb-table[data-fit="rows"] tr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.kb-table[data-fit="rows"] thead th:first-child { display: none; }
.kb-table[data-fit="rows"] thead th:nth-child(2) { border-top-left-radius: 13px; }
.kb-table[data-fit="rows"] :is(th, td) { border-bottom: 0; }
.kb-table[data-fit="rows"] tbody tr { border-top: 1px solid var(--line); }
.kb-table[data-fit="rows"] tbody th { grid-column: 1 / -1; padding: 14px 16px 0; }
.kb-table[data-fit="rows"] tbody td { padding: 4px 16px 14px; overflow-wrap: anywhere; }
.kb-table[data-fit="rows"] td[colspan] { grid-column: 1 / -1; }
.kb-table[data-fit="rows"] td :is(code, var) { white-space: normal; overflow-wrap: anywhere; }

.kb-table[data-fit="cards"] :is(table, tbody, tr) { display: block; min-width: 0; }
.kb-table[data-fit="cards"] thead { display: none; }
.kb-table[data-fit="cards"] tr { padding: 14px 16px 15px; }
.kb-table[data-fit="cards"] tr + tr { border-top: 1px solid var(--line); }
.kb-table[data-fit="cards"] :is(th, td) { display: block; padding: 0; border: 0; white-space: normal; }
.kb-table[data-fit="cards"] tbody th { margin-bottom: 4px; }
.kb-table[data-fit="cards"] td { margin-top: 8px; overflow-wrap: anywhere; }
.kb-table[data-fit="cards"] tr > td:first-child { margin-top: 0; }
.kb-table[data-fit="cards"] td :is(code, var) { white-space: normal; overflow-wrap: anywhere; }
.kb-table[data-fit="cards"] td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: 1px; font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
/* multi-line commands keep their lines and scroll sideways instead of wrapping mid-command */
.kb-table[data-fit="cards"]:has(td.kb-mono br) td.kb-mono { white-space: nowrap; overflow-x: auto; overflow-wrap: normal; scrollbar-width: thin; }
.kb-table[data-fit="cards"]:has(td.kb-mono br) td.kb-mono :is(code, var) { white-space: nowrap; overflow-wrap: normal; }
/* DNS-style cards, and tables without row headers (records: type, name, value, TTL): short values,
   so the label sits to the left of its value instead of above it */
:is(.kb-table--cards, .kb-table:not(:has(tbody th)))[data-fit="cards"] td[data-label]:not([data-label=""]) { position: relative; margin-top: 6px; padding-left: var(--kb-label-w, 96px); }
:is(.kb-table--cards, .kb-table:not(:has(tbody th)))[data-fit="cards"] td[data-label]:not([data-label=""])::before { position: absolute; left: 0; top: 0.3em; margin: 0; }
:is(.kb-table--cards, .kb-table:not(:has(tbody th)))[data-fit="cards"] tr > td:first-child { margin-top: 0; }

.kb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kb-cols > div { min-width: 0; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.kb-cols h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; font-size: 1.02rem; }
.kb-cols h3 svg { width: 18px; height: 18px; color: var(--accent); }
.kb-cols p, .kb-cols li { font-size: 0.92rem; line-height: 1.55; }
.kb-cols ul { margin-top: 8px; }

/* tabs inside an article (global [data-tabs] kit) */
.kb-tabs { margin-top: 1.2em; }
.kb-tabs .tabs__list { margin-bottom: 4px; }
.kb-tabs .tab { height: 34px; padding: 0 16px; font-size: 0.88rem; }
.kb-tabs .tabs__panel { margin-top: 10px; padding: 20px 22px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.kb-tabs .tabs__panel > * + * { margin-top: 0.8em; }
.kb-tabs .tabs__panel > .kb-steps { margin-top: 0.8em; }
.kb-tabs .tabs__panel pre.code { margin: 0.9em 0 0; }
.kb-tabs .tabs__panel > :first-child, .kb-tabs .tabs__panel > pre.code:first-child { margin-top: 0; }
.kb-tabs .tabs__panel:has(> pre.code:only-child) { padding: 0; border: 0; background: none; }

/* troubleshooting accordions */
/* minmax(0, 1fr): a <pre> or long line inside an open item scrolls inside it instead of widening the list */
.kb-fixes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kb-fix { min-width: 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: border-color 0.2s; }
.kb-fix[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
/* a two-line question keeps its icon and chevron level with the first line (0.7em = half the 1.4 line) */
.kb-fix > summary { list-style: none; display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; cursor: pointer; font-weight: 560; color: var(--ink); letter-spacing: -0.01em; line-height: 1.4; }
.kb-fix > summary::-webkit-details-marker { display: none; }
.kb-fix > summary > svg:first-child { width: 18px; height: 18px; flex: none; margin-top: calc(0.7em - 9px); color: var(--amber); }
.kb-fix > summary::after { content: ""; flex: none; margin-left: auto; margin-top: calc(0.7em - 4px); width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease); }
.kb-fix[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.kb-fix__body { padding: 0 18px 18px 48px; font-size: 0.96rem; }
.kb-fix__body > * + * { margin-top: 0.7em; }
.kb-fix__body pre.code { margin: 0.8em 0 0; }

/* mock UI panels */
.kb-ui { margin: 1.4em 0; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 0.88rem; line-height: 1.45; }
.kb-ui__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.kb-ui__dots { display: inline-flex; gap: 5px; }
.kb-ui__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.kb-ui__crumb { display: flex; gap: 0 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.kb-ui__crumb > :last-child { overflow: hidden; text-overflow: ellipsis; }
.kb-ui__crumb b { font-weight: 500; color: var(--ink-2); }
.kb-ui__body { display: grid; gap: 14px; padding: 18px; }
.kb-ui__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kb-ui__head strong { font-size: 1rem; letter-spacing: -0.02em; }
.kb-ui__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-ui__field { display: grid; gap: 5px; min-width: 0; }
.kb-ui__field > span { font-size: 0.76rem; font-weight: 540; color: var(--ink-2); }
.kb-ui__input { display: flex; align-items: center; gap: 0; min-height: 36px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 0.8rem; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kb-ui__input.is-focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
/* no flex gap: a literal prefix such as "ns1." must sit flush against its <var> placeholder */
.kb-ui__input small { margin-left: auto; padding-left: 8px; font-family: var(--font); color: var(--faint); }
.kb-ui__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-ui__opt { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); font-size: 0.8rem; font-weight: 520; color: var(--ink-2); }
.kb-ui__opt::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--card); }
.kb-ui__opt.is-on { border-color: var(--accent); color: var(--ink); background: var(--card); }
.kb-ui__opt.is-on::before { border: 4px solid var(--accent); }
.kb-ui__opt--box::before { border-radius: 4px; }
.kb-ui__opt--box.is-on::before { border: 0; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
.kb-ui__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-ui__btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 0.8rem; font-weight: 560; white-space: nowrap; }
.kb-ui__btn--ghost { background: var(--card); color: var(--ink-2); border: 1px solid var(--line-2); }
.kb-ui__btn svg { width: 14px; height: 14px; }
.kb-ui__note { font-size: 0.78rem; color: var(--muted); }
.kb-ui__rows { display: grid; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.kb-ui__row { display: grid; grid-template-columns: var(--cols, 1.2fr 0.7fr 1.6fr 0.6fr); gap: 12px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.76rem; color: var(--ink-2); min-width: 0; }
.kb-ui__row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ui__row:first-child { border-top: 0; }
.kb-ui__row--head { background: var(--bg); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb-ui__row.is-new { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.kb-ui__row b { font-weight: 500; color: var(--ink); }
.kb-ui__pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.04em; }
.kb-ui__pill--ok { background: var(--green-soft); color: var(--green); }
.kb-ui__kv { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.kb-ui__kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 0.8rem; }
.kb-ui__kv > div:first-child { border-top: 0; }
.kb-ui__kv span { color: var(--muted); white-space: nowrap; }
.kb-ui__kv b { min-width: 0; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ui__kv .is-hl { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.kb-ui__kv .is-hl b { color: var(--accent); }
.kb-ui > figcaption { padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg); font-size: 0.8rem; color: var(--muted); }
.kb-ui__mail { display: grid; gap: 10px; }
.kb-ui__mailhead { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.kb-ui__mailhead b { color: var(--ink); font-weight: 560; }

/* feedback, related, contact */
.kb-feedback { margin-top: 64px; padding: 22px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.kb-feedback__row { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.kb-feedback__q { font-size: 1.08rem; font-weight: 580; letter-spacing: -0.02em; line-height: 1.3; }
.kb-feedback__q small { display: block; margin-top: 3px; font-size: 0.84rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.kb-feedback__btns { display: flex; gap: 8px; }
.kb-vote { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 0.92rem; font-weight: 540; color: var(--ink); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.kb-vote svg { width: 16px; height: 16px; }
.kb-vote:hover { border-color: var(--ink); }
.kb-vote:active { transform: scale(0.97); }
.kb-vote[aria-pressed="true"] { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.kb-feedback__thanks { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 0.92rem; color: var(--green); }
.kb-feedback__thanks svg { width: 17px; height: 17px; flex: none; }
.kb-feedback__thanks.is-no { color: var(--ink-2); }
.kb-feedback__thanks.is-no svg { color: var(--accent); }
.kb-feedback__thanks[hidden], .kb-feedback__form[hidden] { display: none; }
.kb-feedback__form { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.kb-feedback__form .field { margin-bottom: 12px; }
.kb-feedback__form textarea { min-height: 110px; }
.kb-feedback__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.kb-feedback__foot p { max-width: 460px; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.kb-feedback__foot a { color: var(--accent); font-weight: 540; }

.kb-next { margin-top: 56px; }
.kb-next__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.kb-next__head h2 { font-size: 1.45rem; letter-spacing: -0.035em; }
.kb-next__head a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; white-space: nowrap; }
.kb-next__head a svg { width: 15px; height: 15px; }
.kb-next:has([data-kb-related]:empty) { display: none; }

.kb-help { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; margin-top: 40px; padding: 30px 32px; border-radius: 24px; color: rgba(255, 255, 255, 0.72); background: radial-gradient(120% 140% at 100% 120%, #1b2d6b 0%, #0a1230 45%, var(--space) 80%); }
.kb-help::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px); background-size: 120px 120px; -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); opacity: 0.35; }
.kb-help h2 { color: #fff; font-size: 1.5rem; letter-spacing: -0.035em; line-height: 1.15; }
.kb-help h2 em { color: #9fb0ff; }
/* "Question? <span>Ask an engineer.</span>": the answer moves to its own line as a whole */
.kb-help h2 > span { display: inline-block; }
.kb-help p { margin-top: 6px; font-size: 0.94rem; max-width: 470px; }
.kb-help__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-help .btn--ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.kb-help .btn--ghost:hover { border-color: #fff; }
.kb-help .btn--white:hover { color: #fff; }
/* the article's own "ask an engineer" box replaces the footer help band */
body:has(main .kb-help) .helpband { display: none; }

/* ---------- 5. KB article: responsive ---------- */
@media (max-width: 1100px) {
  .kb-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 48px; }
}
/* beside the sidebar the article column is too narrow for text and both buttons in one row */
@media (min-width: 981px) and (max-width: 1180px) {
  .kb-help { grid-template-columns: minmax(0, 1fr); }
  .kb-help p { max-width: 540px; }
}
@media (max-width: 980px) {
  .kb-hero__grid { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  /* the products wrap like chips and every row grows to the full width, so a last row of one
     never leaves a hole beside it */
  .kb-applies ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .kb-applies li { flex: 1 1 auto; display: flex; }
  .kb-applies a { flex: 1; padding-right: 12px; }
  .kb-applies a small { padding-left: 14px; }
  .kb-layout { grid-template-columns: 1fr; gap: 28px; }
  .kb-side { grid-column: 1; grid-row: auto; position: static; max-height: none; overflow: visible; }
  .kb-main { grid-row: auto; }
  .kb-toc { border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
  .kb-toc > summary { margin: 0; padding: 14px 18px; cursor: pointer; color: var(--ink-2); }
  .kb-toc > summary svg { display: block; }
  .kb-toc[open] > summary svg { transform: rotate(180deg); }
  .kb-toc .toc { padding: 0 18px 14px; }
  .kb-tools, .kb-sidecard { display: none; }
  .kb-prose { max-width: none; }
}
@media (max-width: 640px) {
  .kb-hero { padding: 32px 0 40px; }
  .kb-hero__grid { margin-top: 22px; }
  .kb-applies ul { display: grid; }
  .kb-applies a { padding-right: 10px; }
  .kb-lede { font-size: 1.04rem; }
  .kb-meta { gap: 8px 16px; font-size: 0.74rem; }
  .kb-body { padding-top: 32px; }
  .kb-before { grid-template-columns: 1fr; padding: 18px; }
  .kb-before__facts { grid-template-columns: 1fr 1fr; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .kb-steps > li { padding-left: 46px; }
  .kb-steps > li::before { width: 30px; height: 30px; font-size: 0.76rem; }
  .kb-steps > li::after { left: 15px; top: 34px; }
  .kb-cols { grid-template-columns: minmax(0, 1fr); }
  /* on a phone a long path wraps word by word; "slice" keeps the line-end padding from poking into the gutter */
  .kb-path { -webkit-box-decoration-break: slice; box-decoration-break: slice; }
  .kb-path > span { display: inline; white-space: normal; overflow-wrap: anywhere; }
  .kb-table th, .kb-table td { padding: 10px 12px; }
  .kb-table .kb-mono { font-size: 0.78rem; }
  .kb-table td :is(code, var) { white-space: normal; }
  /* without the fitting script a table shrinks to its content and scrolls inside its frame */
  .kb-table table { min-width: 0; }
  .kb-table[data-fit="rows"] tbody th { padding: 12px 12px 0; }
  .kb-table[data-fit="rows"] tbody td { padding: 4px 12px 12px; }
  .kb-table[data-fit="cards"] tr { padding: 13px 14px 14px; }
  .kb-ui__grid { grid-template-columns: minmax(0, 1fr); }
  .kb-ui__body { padding: 14px; }
  .kb-ui__kv > div { flex-direction: column; gap: 1px; }
  .kb-ui__kv b { text-align: left; white-space: normal; overflow-wrap: anywhere; }
  /* mock-UI rows keep the author's columns (--cols, or a phone layout in --cols-sm) and wrap instead of truncating;
     .kb-ui__wide puts a cell on its own line, .kb-ui__sm-hide drops a minor one.
     Only rows with no --cols at all fall back to 3 columns. */
  .kb-ui__row { grid-template-columns: var(--cols-sm, var(--cols, 1fr 0.6fr 1.2fr)); gap: 4px 10px; align-items: start; }
  .kb-ui__row > * { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
  .kb-ui__row > .kb-ui__wide { grid-column: 1 / -1; }
  .kb-ui__row > .kb-ui__sm-hide { display: none; }
  .kb-ui__rows:not([style*="--cols"]) .kb-ui__row > :nth-child(4) { display: none; }
  .kb-ui__row .kb-ui__pill { height: auto; min-height: 20px; padding: 2px 8px; line-height: 1.35; }
  /* every tab stays visible: the pills wrap onto a second line instead of scrolling out of sight */
  .kb-tabs .tabs__list { display: flex; flex-wrap: wrap; border-radius: 18px; }
  .kb-tabs .tab { padding: 0 13px; }
  .kb-fix__body { padding: 0 16px 16px; }
  .kb-tabs .tabs__panel { padding: 16px 14px 18px; border-radius: 16px; }
  .kb-feedback { padding: 18px; }
  .kb-feedback__btns { width: 100%; }
  .kb-vote { flex: 1; justify-content: center; }
  .kb-help { grid-template-columns: 1fr; padding: 26px 22px; }
  .kb-help__btns .btn { flex: 1; }
  .kb-next__head { flex-direction: column; gap: 6px; }
}
@media print {
  .kb-side, .kb-feedback, .kb-next, .kb-help, .kb-hero::before { display: none !important; }
  .kb-layout, .kb-hero__grid { display: block; }
  .kb-main { max-width: none; }
  .kb-applies { margin-top: 16px; box-shadow: none; }
  .kb-fix { break-inside: avoid; }
  .kb-ui, .kb-steps > li { break-inside: avoid; box-shadow: none; }
}

/* ---------- 6. Pages with their own support sections: the footer help band would only repeat them ---------- */
main.kb-hc ~ .footer .helpband, main.kb-sup ~ .footer .helpband, main.kb-page ~ .footer .helpband { display: none; }

/* ---------- 7. Help center (help.html) ---------- */
/* .page-hero hides overflow; let the search suggestions hang below the hero (clip sideways only)
   and lift the hero above the next section so the list isn't painted over */
.kb-hh { z-index: 5; padding-bottom: 72px; overflow: visible; overflow-x: clip; }
.kb-hh h1 { margin-bottom: 18px; }
.kb-hh .lead { max-width: 640px; }
.kb-search { position: relative; z-index: 20; max-width: 720px; margin: 36px auto 0; text-align: left; }
.kb-search__box { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 8px 0 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); transition: border-color 0.2s, box-shadow 0.3s; }
.kb-search__box:focus-within { border-color: var(--accent); box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.kb-search__box > .ic { width: 20px; height: 20px; color: var(--faint); }
.kb-search__box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 1.06rem; color: var(--ink); letter-spacing: -0.01em; }
.kb-search__box input::placeholder { color: var(--faint); }
.kb-search__box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kb-search__box .btn { height: 50px; border-radius: 14px; }
.kb-search__clear { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--faint); transition: background 0.2s, color 0.2s; }
.kb-search__clear:hover { background: var(--bg-2); color: var(--ink); }
.kb-search__clear svg { width: 14px; height: 14px; }
.kb-search__clear[hidden] { display: none; }
.kb-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: min(440px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); }
.kb-suggest[hidden] { display: none; }
.kb-sug { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 11px 12px; border-radius: 12px; color: var(--ink-2); cursor: pointer; }
.kb-sug.is-active, .kb-sug:hover { background: var(--bg); }
.kb-sug.is-active { box-shadow: inset 0 0 0 1px var(--line-2); }
.kb-sug__icon { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kb-sug__icon svg { width: 17px; height: 17px; }
.kb-sug__title { font-size: 0.96rem; font-weight: 560; color: var(--ink); line-height: 1.35; letter-spacing: -0.012em; }
.kb-sug__cat { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; padding-top: 3px; }
.kb-sug__snip { grid-column: 2 / -1; font-size: 0.84rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-sug mark, .kb-row mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--amber) 28%, transparent); color: inherit; }
.kb-suggest__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 10px 12px 6px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.kb-suggest__foot button { color: var(--accent); font-weight: 560; }
.kb-suggest__keys { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--faint); }
.kb-suggest__keys kbd { min-width: 20px; height: 20px; font-size: 0.68rem; }
.kb-suggest__empty { padding: 16px 14px; font-size: 0.9rem; color: var(--muted); }
.kb-suggest__empty a { color: var(--accent); font-weight: 560; }
.kb-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; }
.kb-chips__label { margin-right: 4px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb-chips a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 0.88rem; font-weight: 520; color: var(--ink-2); transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease); }
.kb-chips a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.kb-hh__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 40px; font-size: 0.88rem; color: var(--muted); }
.kb-hh__facts li { display: inline-flex; align-items: center; gap: 8px; }
.kb-hh__facts svg { width: 16px; height: 16px; color: var(--accent); }

.kb-sechead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px 64px; align-items: end; margin-bottom: 40px; }
/* section headings split into even lines instead of leaving one word ("add", "shift lead.") alone */
:is(.kb-sechead, .kb-sev-intro, .kb-good__text, .kb-sup-rel__grid, .kb-contact__intro, .kb-path-card, .kb-listbar__title, .kb-next__head) h2,
.kb-hero h1 { text-wrap: balance; }
.kb-sechead h2 { margin-top: 16px; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.045em; line-height: 1.04; }
.kb-sechead p { color: var(--muted); max-width: 470px; }

.kb-topics-sec { padding-top: 24px; }
.kb-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* rows: name, description (takes any spare height), count, so the counts line up across a row of cards */
.kb-topic { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 4px 16px; align-items: start; padding: 20px 20px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); text-align: left; transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s, background 0.25s; }
.kb-topic:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-topic[hidden] { display: none; }
.kb-topic__icon { grid-row: span 3; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); transition: background 0.25s, color 0.25s; }
.kb-topic__icon svg { width: 21px; height: 21px; }
.kb-topic__name { font-size: 1.04rem; font-weight: 580; letter-spacing: -0.02em; color: var(--ink); line-height: 1.3; }
.kb-topic__desc { font-size: 0.87rem; line-height: 1.5; color: var(--muted); }
.kb-topic__count { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }
.kb-topic__count b { font-weight: 500; color: var(--ink-2); }
.kb-topic__count svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }
.kb-topic:hover .kb-topic__count svg { transform: translateX(3px); }
.kb-topic[aria-pressed="true"] { background: var(--inv-bg); border-color: var(--inv-bg); box-shadow: var(--shadow); }
.kb-topic[aria-pressed="true"] .kb-topic__name, .kb-topic[aria-pressed="true"] .kb-topic__count b { color: var(--inv-ink); }
.kb-topic[aria-pressed="true"] .kb-topic__desc, .kb-topic[aria-pressed="true"] .kb-topic__count { color: var(--inv-muted); }
.kb-topic[aria-pressed="true"] .kb-topic__icon { background: var(--accent); color: #fff; }

.kb-articles-sec { padding-top: 32px; }
.kb-listbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.kb-listbar__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kb-listbar__title h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.04em; }
.kb-listbar__count { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); }
.kb-listbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-listbar__filters[hidden] { display: none; }
.kb-filter { display: inline-flex; align-items: center; gap: 8px; height: 34px; max-width: 100%; padding: 0 6px 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); font-size: 0.86rem; font-weight: 520; color: var(--ink); transition: border-color 0.2s; }
.kb-filter:hover { border-color: var(--ink); }
.kb-filter > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-filter small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.kb-filter svg { width: 22px; height: 22px; padding: 6px; border-radius: 50%; background: var(--bg-2); color: var(--muted); }
.kb-list { margin: 0; padding: 0; list-style: none; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.kb-list[hidden] { display: none; }
.kb-row + .kb-row { border-top: 1px solid var(--line); }
.kb-row[hidden] { display: none; }
.kb-row__link { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 200px 20px; gap: 18px; align-items: center; padding: 20px 24px; color: var(--ink-2); transition: background 0.2s; }
.kb-row__link:hover { background: color-mix(in srgb, var(--bg) 70%, var(--card)); }
.kb-row__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--accent); }
.kb-row__icon svg { width: 19px; height: 19px; }
.kb-row__main { display: grid; gap: 3px; min-width: 0; }
.kb-row__title { font-size: 1.04rem; font-weight: 580; letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); transition: color 0.2s; }
.kb-row__sum { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.kb-row__meta { display: grid; justify-items: start; gap: 6px; font-family: var(--mono); font-size: 0.74rem; color: var(--faint); }
.kb-row__cat { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.kb-row__go { width: 18px; height: 18px; color: var(--faint); transition: transform 0.3s var(--ease), color 0.2s; }
.kb-row__link:hover .kb-row__go { color: var(--accent); transform: translateX(3px); }
.kb-row__link:hover .kb-row__title { color: var(--accent); }
.kb-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 24px; border-radius: 22px; background: var(--card); border: 1px dashed var(--line-2); text-align: center; }
.kb-empty[hidden] { display: none; }
.kb-empty__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.kb-empty__icon svg { width: 22px; height: 22px; }
.kb-empty h3 { font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.25; overflow-wrap: anywhere; }
.kb-empty p { max-width: 520px; color: var(--muted); }
.kb-empty__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

.kb-start { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 20px; align-items: stretch; }
.kb-path-card { position: relative; isolation: isolate; overflow: hidden; padding: 40px; border-radius: 28px; color: rgba(255, 255, 255, 0.7); background: radial-gradient(120% 120% at 0% 0%, #1b2d6b 0%, #0a1230 45%, var(--space) 85%); }
.kb-path-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px); background-size: 110px 110px; -webkit-mask: linear-gradient(200deg, #000, transparent 60%); mask: linear-gradient(200deg, #000, transparent 60%); opacity: 0.35; }
.kb-path-card .eyebrow { color: rgba(255, 255, 255, 0.55); }
.kb-path-card h2 { margin: 16px 0 12px; color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; }
.kb-path-card h2 em { color: #9fb0ff; }
.kb-path-card__lead { max-width: 480px; font-size: 0.98rem; }
.kb-path-card__lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.kb-route { position: relative; display: grid; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.kb-route a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.2s, border-color 0.2s, transform 0.3s var(--ease); }
.kb-route a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); transform: translateX(4px); }
.kb-route__n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.82rem; color: #fff; background: rgba(123, 140, 255, 0.22); border: 1px solid rgba(159, 176, 255, 0.4); }
.kb-route__body { display: grid; gap: 1px; min-width: 0; }
.kb-route__body strong { color: #fff; font-size: 1rem; font-weight: 560; letter-spacing: -0.015em; }
.kb-route__body small { font-family: var(--mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); }
.kb-route__go { width: 17px; height: 17px; color: rgba(255, 255, 255, 0.5); }
.kb-top { display: flex; flex-direction: column; padding: 32px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.kb-top__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.kb-top__head .link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.kb-top__head .link svg { width: 15px; height: 15px; }
.kb-top__list { display: grid; margin: 0; padding: 0; list-style: none; }
.kb-top__list li + li { border-top: 1px solid var(--line); }
.kb-top__list a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 15px 0; }
.kb-top__list a:hover strong { color: var(--accent); }
.kb-top__n { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--faint); }
/* beside the taller dark card the list fills the card: the rows share the spare height, each item centred in its row */
@media (min-width: 981px) {
  .kb-top__list { flex: 1; }
  .kb-top__list li { display: grid; align-items: center; }
}
.kb-top__list strong { display: block; font-size: 0.98rem; font-weight: 560; line-height: 1.35; letter-spacing: -0.015em; transition: color 0.2s; }
.kb-top__list small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }

.kb-prod__tabs { display: flex; justify-content: center; margin-bottom: 18px; }
.kb-prod__panel { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 0.95fr); gap: 12px; }
.kb-prod__panel:not([hidden]) { display: grid; }
.kb-prod__card, .kb-prod__col { padding: 28px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.kb-prod__card { display: flex; flex-direction: column; background: var(--bg-2); }
.kb-prod__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--accent); box-shadow: var(--shadow-sm); }
.kb-prod__icon svg { width: 22px; height: 22px; }
.kb-prod__card h3 { margin: 18px 0 8px; font-size: 1.4rem; letter-spacing: -0.035em; }
.kb-prod__card > p { font-size: 0.92rem; color: var(--muted); }
.kb-prod__card > .kb-prod__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 22px 0 18px; color: var(--ink); }
.kb-prod__price small { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb-prod__price strong { font-size: 2rem; font-weight: 540; letter-spacing: -0.05em; line-height: 1; }
.kb-prod__price strong.kb-prod__mail { font-size: 1.35rem; letter-spacing: -0.03em; }
.kb-prod__price span { font-size: 0.86rem; color: var(--muted); }
.kb-prod__links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: auto; }
.kb-prod__links .link { font-size: 0.9rem; }
.kb-prod__label { margin-bottom: 10px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kb-prod__guides, .kb-prod__tools { display: grid; margin: 0; padding: 0; list-style: none; }
.kb-prod__guides li + li, .kb-prod__tools li + li { border-top: 1px solid var(--line); }
.kb-prod__guides a { display: grid; gap: 3px; padding: 14px 0; }
.kb-prod__guides strong { font-size: 0.97rem; font-weight: 560; line-height: 1.38; letter-spacing: -0.015em; transition: color 0.2s; }
.kb-prod__guides small, .kb-prod__tools small { font-size: 0.8rem; color: var(--muted); }
.kb-prod__guides a:hover strong, .kb-prod__tools a:hover strong { color: var(--accent); }
.kb-prod__tools a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 13px 0; }
.kb-prod__tools a > svg { width: 36px; height: 36px; padding: 9px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); color: var(--accent); }
.kb-prod__tools span { display: grid; gap: 1px; min-width: 0; }
.kb-prod__tools strong { font-size: 0.94rem; font-weight: 560; transition: color 0.2s; }

.kb-contact { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.kb-contact__intro { position: sticky; top: calc(var(--anchor-offset) + 20px); }
.kb-contact__intro h2 { margin: 16px 0 14px; font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.04; }
.kb-contact__intro > p { color: var(--muted); max-width: 420px; }
.kb-contact__status { margin-top: 24px; }
.kb-contact__intro > .kb-contact__hint { margin-top: 10px; font-size: 0.86rem; }
.kb-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kb-ch { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
a.kb-ch:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-ch--main { grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 26px 28px; background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-muted); }
.kb-ch__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 8px; background: var(--accent-soft); color: var(--accent); }
.kb-ch__icon svg { width: 20px; height: 20px; }
.kb-ch__name { font-size: 1.08rem; font-weight: 580; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.kb-ch__desc { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.kb-ch__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 0.9rem; font-weight: 560; color: var(--accent); }
.kb-ch__cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
a.kb-ch:hover .kb-ch__cta svg { transform: translateX(3px); }
.kb-ch--main .kb-ch__icon { grid-row: span 3; width: 48px; height: 48px; margin: 0; align-self: start; background: var(--accent); color: var(--accent-ink); }
.kb-ch--main .kb-ch__name { color: var(--inv-ink); font-size: 1.25rem; }
.kb-ch--main .kb-ch__desc { color: var(--inv-muted); max-width: 440px; }
.kb-ch--main .kb-ch__cta { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0 20px; height: 44px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); white-space: nowrap; }
.kb-ch__targets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kb-ch__targets span { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--inv-ink) 16%, transparent); font-family: var(--mono); font-size: 0.72rem; color: var(--inv-muted); }
.kb-ch__targets b { font-weight: 500; color: var(--inv-ink); }
.kb-ch__mails { display: grid; margin-top: 4px; }
.kb-ch__mails li { display: grid; padding: 8px 0; border-top: 1px solid var(--line); }
.kb-ch__mails li:first-child { border-top: 0; padding-top: 2px; }
.kb-ch__mails a { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); overflow-wrap: anywhere; }
.kb-ch__mails a:hover { color: var(--accent); }
.kb-ch__mails small { font-size: 0.78rem; color: var(--muted); }
.kb-ch--mails { grid-row: span 2; }
.kb-ch__note { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

/* a narrow right-hand column: the ticket button moves under the text so the target pills stay on one row */
@media (min-width: 981px) and (max-width: 1180px) {
  .kb-ch--main { grid-template-columns: 48px minmax(0, 1fr); }
  .kb-ch--main .kb-ch__cta { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 12px; }
}
@media (max-width: 980px) {
  .kb-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kb-sechead { grid-template-columns: 1fr; }
  .kb-row__link { grid-template-columns: 42px minmax(0, 1fr) 20px; row-gap: 10px; }
  .kb-row__meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .kb-row__go { grid-column: 3; grid-row: 1 / span 2; }
  .kb-start { grid-template-columns: 1fr; }
  .kb-prod__panel { grid-template-columns: 1fr 1fr; }
  .kb-prod__card { grid-column: 1 / -1; }
  .kb-contact { grid-template-columns: 1fr; gap: 32px; }
  .kb-contact__intro { position: static; }
}
@media (max-width: 640px) {
  .kb-hh { padding-bottom: 48px; }
  .kb-search { margin-top: 28px; }
  .kb-search__box { height: 58px; padding-left: 16px; gap: 8px; border-radius: 16px; }
  .kb-search__box input { font-size: 1rem; }
  .kb-search__box .btn { height: 44px; width: 44px; padding: 0; border-radius: 12px; }
  .kb-search__box .btn span { display: none; }
  .kb-search__box .btn:hover svg { transform: none; }
  .kb-suggest__keys { display: none; }
  .kb-sug { grid-template-columns: 30px minmax(0, 1fr); }
  .kb-sug__icon { width: 30px; height: 30px; grid-row: span 3; }
  .kb-sug__cat { grid-column: 2; grid-row: 2; padding: 0; }
  .kb-sug__snip { grid-column: 2; }
  .kb-chips { justify-content: flex-start; }
  .kb-chips__label { width: 100%; text-align: left; }
  .kb-hh__facts { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; text-align: left; }
  .kb-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kb-topic { grid-template-columns: 1fr; gap: 10px; padding: 14px; border-radius: 16px; }
  .kb-topic__icon { grid-row: auto; width: 36px; height: 36px; border-radius: 10px; }
  .kb-topic__icon svg { width: 18px; height: 18px; }
  .kb-topic__name { font-size: 0.95rem; }
  .kb-topic__desc { display: none; }
  .kb-topic__count { margin-top: 2px; }
  .kb-topic:last-child:nth-child(odd) { grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; align-items: center; }
  .kb-topic:last-child:nth-child(odd) .kb-topic__icon { grid-row: span 2; }
  .kb-list { border-radius: 18px; }
  .kb-row__link { grid-template-columns: minmax(0, 1fr) 18px; gap: 10px 12px; padding: 18px 16px; }
  .kb-row__icon { display: none; }
  .kb-row__main, .kb-row__meta { grid-column: 1; }
  .kb-row__meta { grid-row: auto; }
  .kb-row__go { grid-column: 2; grid-row: 1 / span 2; }
  .kb-row__sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kb-path-card, .kb-top { padding: 24px 20px; border-radius: 22px; }
  .kb-route a { grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 12px; padding: 12px; }
  .kb-route__n { width: 32px; height: 32px; }
  .kb-prod__tabs { justify-content: flex-start; }
  .kb-prod .tabs__list { display: flex; flex-wrap: wrap; border-radius: 18px; }
  .kb-prod .tab { padding: 0 14px; }
  .kb-prod__panel { grid-template-columns: 1fr; }
  .kb-prod__card, .kb-prod__col { padding: 22px 20px; border-radius: 20px; }
  .kb-contact__grid { grid-template-columns: 1fr; }
  .kb-ch--mails { grid-row: auto; }
  .kb-ch--main { grid-template-columns: 44px minmax(0, 1fr); padding: 22px 20px; }
  .kb-ch--main .kb-ch__icon { width: 44px; height: 44px; grid-row: auto; }
  .kb-ch--main .kb-ch__name, .kb-ch--main .kb-ch__desc, .kb-ch--main .kb-ch__targets { grid-column: 1 / -1; }
  .kb-ch--main .kb-ch__cta { grid-column: 1 / -1; grid-row: auto; justify-content: center; margin-top: 10px; }
  .kb-ch { padding: 20px; }
}

/* ---------- 8. Support page (support.html) ---------- */
.kb-sev { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--sev, var(--muted)); background: color-mix(in srgb, var(--sev, var(--muted)) 13%, transparent); }
.kb-sev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kb-sev--crit { --sev: var(--red); }
.kb-sev--high { --sev: var(--amber); }
.kb-sev--norm { --sev: var(--accent); }
.kb-sev--low { --sev: var(--muted); }

.kb-sup-hero .page-hero__grid { align-items: center; }
.kb-sup-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; max-width: 600px; }
.kb-sup-action { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
.kb-sup-action:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-sup-action > svg { width: 36px; height: 36px; padding: 9px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.kb-sup-action span { display: grid; gap: 1px; }
.kb-sup-action strong { font-size: 0.98rem; letter-spacing: -0.015em; }
.kb-sup-action small { font-size: 0.8rem; color: var(--muted); }
.kb-sup-action--main { background: var(--inv-bg); border-color: var(--inv-bg); }
.kb-sup-action--main strong { color: var(--inv-ink); }
.kb-sup-action--main small { color: var(--inv-muted); }
.kb-sup-action--main > svg { background: var(--accent); color: var(--accent-ink); }

.kb-sup-visual { position: relative; padding: 24px 0 36px; }
.kb-tix .hero-browser__body { gap: 0; padding: 0; }
.kb-tix__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; }
.kb-tix__head strong { display: block; font-size: 1.02rem; letter-spacing: -0.02em; }
.kb-tix__head small { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }
.kb-tix__new { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; background: var(--inv-bg); color: var(--inv-ink); font-size: 0.78rem; font-weight: 560; white-space: nowrap; }
.kb-tix__new svg { width: 13px; height: 13px; }
.kb-tix__list { border-top: 1px solid var(--line); }
.kb-tix__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.kb-tix__row:first-child { background: color-mix(in srgb, var(--red) 4%, transparent); }
.kb-tix__subj { display: grid; gap: 2px; min-width: 0; }
.kb-tix__subj b { font-size: 0.86rem; font-weight: 560; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-tix__subj small { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-tix__st { font-size: 0.74rem; font-weight: 540; white-space: nowrap; color: var(--muted); }
.kb-tix__st::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.kb-tix__st--prog { color: var(--accent); }
.kb-tix__st--wait { color: var(--amber); }
.kb-tix__st--done { color: var(--green); }
.kb-tix__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; background: var(--bg); font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.kb-tix__foot b { font-weight: 500; color: var(--ink); }
.kb-sup-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 0.84rem; font-weight: 540; color: var(--ink); white-space: nowrap; }
.kb-sup-float svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.kb-sup-float span { display: grid; gap: 0; line-height: 1.3; }
.kb-sup-float small { font-family: var(--mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kb-sup-float--a { left: -28px; bottom: 0; }
.kb-sup-float--b { right: -22px; top: -12px; }

.kb-chan { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.kb-chan__card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
a.kb-chan__card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-chan__card--main { grid-row: span 2; padding: 30px; background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-muted); }
.kb-chan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kb-chan__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kb-chan__icon svg { width: 20px; height: 20px; }
.kb-chan__when { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); }
.kb-chan__name { font-size: 1.12rem; font-weight: 580; letter-spacing: -0.02em; color: var(--ink); }
.kb-chan__desc { font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.kb-chan__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 0.9rem; font-weight: 560; color: var(--accent); }
.kb-chan__cta svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
a.kb-chan__card:hover .kb-chan__cta svg { transform: translateX(3px); }
.kb-chan__card--main .kb-chan__icon { width: 52px; height: 52px; border-radius: 15px; background: var(--accent); color: var(--accent-ink); }
.kb-chan__card--main .kb-chan__icon svg { width: 24px; height: 24px; }
.kb-chan__card--main .kb-chan__when { border-color: color-mix(in srgb, var(--inv-ink) 18%, transparent); color: var(--inv-ink); }
.kb-chan__card--main .kb-chan__name { margin-top: 18px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.04em; color: var(--inv-ink); }
.kb-chan__card--main .kb-chan__desc { max-width: 380px; font-size: 0.96rem; color: var(--inv-muted); }
.kb-chan__targets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 8px; }
.kb-chan__targets span { display: grid; gap: 2px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--inv-ink) 14%, transparent); background: color-mix(in srgb, var(--inv-ink) 5%, transparent); }
.kb-chan__targets b { font-size: 2rem; font-weight: 520; letter-spacing: -0.05em; line-height: 1; color: var(--inv-ink); }
.kb-chan__targets small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inv-muted); }
.kb-chan__card--main .kb-chan__cta { align-self: flex-start; height: 46px; margin-top: auto; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.kb-chan__flow { display: grid; margin: 14px 0 22px; border-top: 1px solid color-mix(in srgb, var(--inv-ink) 12%, transparent); }
.kb-chan__flow > span { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-ink) 12%, transparent); font-size: 0.88rem; color: var(--inv-muted); }
.kb-chan__flow b { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--inv-ink) 25%, transparent); font-family: var(--mono); font-size: 0.7rem; font-weight: 500; color: var(--inv-ink); }
.kb-chan__mails { display: grid; margin-top: 6px; }
.kb-chan__mails li { display: grid; padding: 9px 0; border-top: 1px solid var(--line); }
.kb-chan__mails a { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); overflow-wrap: anywhere; }
.kb-chan__mails a:hover { color: var(--accent); }
.kb-chan__mails small { font-size: 0.76rem; color: var(--faint); }
.kb-chan__strip { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 18px 22px; border-radius: 18px; border: 1px dashed var(--line-2); background: color-mix(in srgb, var(--card) 60%, transparent); }
.kb-chan__strip-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); }
.kb-chan__strip-icon svg { width: 18px; height: 18px; }
.kb-chan__strip p { font-size: 0.9rem; color: var(--muted); }
.kb-chan__strip a { color: var(--accent); font-weight: 540; }

.kb-plans-sec { background: linear-gradient(180deg, transparent, var(--bg-2) 30%, var(--bg-2) 70%, transparent); }
.kb-tiers .plan__price .amt { font-size: 2.9rem; }
.kb-tiers .plan__desc { text-wrap: pretty; }
/* side by side, the three plans share their rows (name, description, price, note, button, list),
   so prices and buttons line up even when one description runs a line longer */
@media (min-width: 821px) {
  .kb-tiers { grid-template-rows: repeat(5, auto) 1fr; }
  .kb-tiers .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .kb-tiers .plan__name { align-self: center; }
  /* the list keeps its own spacing instead of stretching to the longest list */
  .kb-tiers .plan .check-list { align-self: start; }
}
.kb-tiers .plan__strike { font-family: var(--mono); font-size: 0.74rem; }
.kb-tiers .plan .badge:not(.plan__ribbon) { font-size: 0.7rem; }

.kb-cmp .compare { min-width: 820px; }
.kb-cmp .compare thead th { vertical-align: bottom; padding-top: 22px; }
.kb-cmp .compare thead th small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--faint); }
.kb-cmp .compare thead th.is-hl small { color: var(--accent); }
.kb-cmp .compare tbody th[scope="row"] { font-weight: 500; color: var(--ink-2); width: 30%; }
.kb-cmp .compare td { font-size: 0.9rem; }
.kb-cmp__price th, .kb-cmp__price td { background: var(--bg); }
.kb-cmp__price b { font-size: 1.2rem; font-weight: 560; letter-spacing: -0.03em; color: var(--ink); }
.kb-cmp .compare tbody tr:last-child th, .kb-cmp .compare tbody tr:last-child td { border-bottom: 0; }
.kb-cmp__hint { display: none; }

.kb-sev-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.kb-sev-intro { position: sticky; top: calc(var(--anchor-offset) + 60px); }
.kb-sev-intro h2 { margin: 16px 0 16px; font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -0.045em; line-height: 1.02; }
.kb-sev-intro > p { max-width: 440px; color: var(--muted); }
.kb-sev-notes { display: grid; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.kb-sev-notes li { display: flex; gap: 12px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.kb-sev-notes svg { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--accent); }
.kb-sevlist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kb-sevlist__item { position: relative; padding: 24px 26px 22px 30px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.kb-sevlist__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sev); }
.kb-sevlist__item--crit { --sev: var(--red); }
.kb-sevlist__item--high { --sev: var(--amber); }
.kb-sevlist__item--norm { --sev: var(--accent); }
.kb-sevlist__item--low { --sev: var(--line-2); }
.kb-sevlist__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kb-sevlist__target { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
.kb-sevlist__target b { font-family: var(--font); font-size: 1.5rem; font-weight: 540; letter-spacing: -0.04em; color: var(--ink); }
.kb-sevlist__item h3 { font-size: 1.18rem; letter-spacing: -0.025em; line-height: 1.25; }
.kb-sevlist__item > p { margin-top: 6px; font-size: 0.92rem; color: var(--muted); }
.kb-sevlist__item > p.kb-sevlist__eg { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 0.86rem; color: var(--ink-2); }
.kb-sevlist__eg span { display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

.kb-scope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.kb-scope__col { display: flex; flex-direction: column; padding: 30px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.kb-scope__col h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 1.2rem; letter-spacing: -0.025em; }
.kb-scope__col h3 svg { width: 22px; height: 22px; }
.kb-scope__col--in h3 svg { color: var(--green); }
.kb-scope__col--out { background: var(--bg-2); }
.kb-scope__col--out h3 svg { color: var(--faint); }
.kb-scope__col--out .check-list li.is-off { color: var(--muted); }
.kb-scope__note { display: flex; gap: 12px; margin-top: auto; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.kb-scope__col--out .check-list { margin-bottom: 24px; }
.kb-scope__col .check-list li { text-wrap: pretty; }
.kb-scope__note svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }
.kb-scope__note p { font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.kb-scope__note strong { display: block; margin-bottom: 2px; }

.kb-good { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.kb-good__text h2 { margin: 16px 0 24px; font-size: clamp(2.1rem, 4vw, 3.2rem); letter-spacing: -0.045em; line-height: 1.02; }
.kb-good__steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: good; }
.kb-good__steps li { position: relative; padding: 14px 0 14px 50px; border-top: 1px solid var(--line); counter-increment: good; font-size: 0.95rem; color: var(--muted); }
.kb-good__steps li::before { content: counter(good, decimal-leading-zero); position: absolute; left: 0; top: 13px; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1; color: var(--accent); }
.kb-good__steps b { display: block; color: var(--ink); font-weight: 580; }
.kb-good__inc { margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.kb-good__label { margin-bottom: 10px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kb-good__inc ul { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-good__inc li { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-2); }
.kb-good .callout a { color: var(--accent); font-weight: 560; }
.kb-good .callout p > strong:first-child { display: inline; }
.kb-good__ui { position: sticky; top: calc(var(--anchor-offset) + 40px); margin: 0; }
.kb-good__ui .kb-ui__input .kb-sev { height: 20px; }
.kb-good__msg { display: block; min-height: 120px; white-space: normal; font-family: var(--font); font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }
.kb-good__files { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font-size: 0.8rem; color: var(--muted); }
.kb-good__files span { display: inline-flex; align-items: center; gap: 7px; }
.kb-good__files svg { width: 15px; height: 15px; }
.kb-good__files > span:first-child { padding: 5px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-family: var(--mono); font-size: 0.74rem; color: var(--ink-2); }
.kb-good__check { color: var(--green); font-weight: 540; }

.kb-esc { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kb-esc__step { position: relative; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.kb-esc__n { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: var(--inv-bg); color: var(--inv-ink); font-family: var(--mono); font-size: 0.9rem; box-shadow: 0 0 0 6px var(--card); }
.kb-esc__n svg { width: 18px; height: 18px; }
.kb-esc__step h3 { font-size: 1.1rem; letter-spacing: -0.02em; }
.kb-esc__step p { margin-top: 6px; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }
.kb-esc__step a { color: var(--accent); font-weight: 540; }
.kb-esc__step--formal { background: var(--bg-2); }
.kb-esc__step--formal .kb-esc__n { background: var(--card); color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: 0 0 0 6px var(--bg-2); }
.kb-esc__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.kb-esc__facts > div { display: flex; gap: 14px; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); }
.kb-esc__facts svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }
.kb-esc__facts p { font-size: 0.88rem; line-height: 1.55; color: var(--muted); }
.kb-esc__facts strong { display: block; margin-bottom: 2px; font-size: 0.98rem; letter-spacing: -0.015em; }
.kb-esc__facts a { color: var(--accent); font-weight: 540; }

/* "Site down at 2 AM? / An engineer is on shift." rather than a lone "on shift." on the last line */
.kb-sup-cta .cta h2 { text-wrap: balance; }
.kb-hc .section-head p, .kb-sup .section-head p { text-wrap: pretty; }
.kb-sup .faq__q { text-wrap: pretty; }

.kb-sup-rel__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.kb-sup-rel__grid h2 { margin: 16px 0 14px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; }
.kb-sup-rel__grid p { color: var(--muted); max-width: 400px; }
.kb-sup-rel__grid .link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; }
.kb-sup-rel__grid .link svg { width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .kb-sup-float--a { left: -8px; }
  .kb-sup-float--b { right: -4px; }
}
/* the global .pricing grid drops to 2 columns here, which would leave Managed alone on a second row */
@media (min-width: 821px) and (max-width: 1100px) {
  .kb-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kb-tiers .plan { padding: 26px 20px; }
  .kb-tiers .plan__price .amt { font-size: 2.4rem; }
}
@media (max-width: 980px) {
  .kb-chan { grid-template-columns: 1fr 1fr; }
  .kb-chan__card--main { grid-column: 1 / -1; grid-row: auto; }
  .kb-sev-wrap, .kb-good, .kb-sup-rel__grid { grid-template-columns: 1fr; gap: 36px; }
  .kb-sev-intro, .kb-good__ui { position: static; }
  .kb-esc { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .kb-esc__facts { grid-template-columns: 1fr; }
  .kb-sup-visual { max-width: 560px; }
  .kb-cmp .compare { min-width: 660px; }
  .kb-cmp .compare thead th:first-child, .kb-cmp .compare tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 180px; min-width: 180px; background: var(--card); box-shadow: 1px 0 0 var(--line); }
  .kb-cmp__price th[scope="row"] { background: var(--bg) !important; }
  .kb-cmp .compare th, .kb-cmp .compare td { padding: 13px 14px; font-size: 0.86rem; line-height: 1.45; }
  .kb-cmp__hint { align-items: center; gap: 8px; margin-top: 12px; font-size: 0.82rem; color: var(--muted); }
  .kb-cmp__hint svg { width: 14px; height: 14px; color: var(--faint); }
}
/* the hint only where the 660px table is wider than the page and actually scrolls */
@media (max-width: 707px) {
  .kb-cmp__hint { display: flex; }
}
@media (max-width: 640px) {
  .kb-sup-actions { grid-template-columns: 1fr; gap: 8px; }
  .kb-sup-action { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
  /* the ticket mock is decorative (the channel card below repeats its targets): keep the phone hero short */
  .kb-sup-visual { display: none; }
  .kb-cmp .compare { min-width: 620px; }
  .kb-cmp .compare thead th:first-child, .kb-cmp .compare tbody th[scope="row"] { width: 142px; min-width: 142px; }
  .kb-cmp .compare th, .kb-cmp .compare td { padding: 12px; font-size: 0.82rem; }
  .kb-chan { grid-template-columns: 1fr; }
  .kb-chan__card, .kb-chan__card--main { padding: 22px 20px; }
  .kb-chan__targets b { font-size: 1.6rem; }
  .kb-chan__strip { flex-direction: column; align-items: flex-start; padding: 18px; }
  .kb-sevlist__item { padding: 20px 18px 18px 22px; }
  .kb-sevlist__head { flex-wrap: wrap; }
  .kb-scope { grid-template-columns: 1fr; }
  .kb-scope__col { padding: 22px 20px; }
  .kb-good__steps li { padding-left: 42px; }
  .kb-sup-cta .cta__btns { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
  .kb-sup-cta .cta__btns > .btn { flex: none; }
  .kb-esc { grid-template-columns: 1fr; }
  .kb-esc__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding: 20px; }
  .kb-esc__n { grid-row: span 2; margin: 0; }
}

/* the feedback prompt is a paragraph (not a section heading) but keeps the heading look */
.kb-feedback__q { margin: 0; color: var(--ink); font-family: var(--font); }