/* Knowledge base + blog — public reading surfaces (/help, /blog).
   Design source: the KB handoff board (docs/design-briefs/08-knowledge-base.md).
   Every colour, radius and shadow is a token from /assets/tokens.css; the
   reading scale is the opt-in --kb-* set defined there. These pages are
   standalone public documents (marketing chrome, no app shell). */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--route-blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.kb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
}
.kb-skip:focus-visible { left: 12px; top: 12px; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.kb-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 900px) { .kb-wrap { padding-inline: 24px; } }

main.kb-wrap { padding-block: 32px 56px; }
@media (min-width: 768px) { main.kb-wrap { padding-block: 44px 72px; } }

/* Hub / category / search share one comfortable single column. The article
   body itself is capped by characters (--kb-reading-measure), never by this. */
.kb-page { max-width: 760px; }

/* ── Public chrome: nav ──────────────────────────────────────────────────── */

.kb-nav { border-bottom: 1px solid var(--rule); background: var(--paper); }
.kb-nav-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-block: 13px;
}
.kb-brand {
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  letter-spacing: -0.04em;
  text-decoration: none;
  margin-right: auto;
}
.kb-nav-links { display: flex; gap: 18px; }
.kb-nav-links a {
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  text-decoration: none;
}
.kb-nav-links a:hover, .kb-nav-links a[aria-current="true"] { color: var(--ink); }
.kb-nav-meta { display: flex; align-items: center; gap: 14px; }
.kb-lang {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  padding: 6px 8px;
}
.kb-signin {
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

/* ── Public chrome: footer ───────────────────────────────────────────────── */

.kb-foot { border-top: 1px solid var(--rule); margin-top: 24px; }
.kb-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  padding-block: 34px 8px;
}
@media (min-width: 900px) {
  .kb-foot-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
.kb-foot-brand .b { font-weight: var(--fw-bold); font-size: 1.125rem; letter-spacing: -0.04em; }
.kb-foot-brand p { color: var(--ink-3); font-size: 0.8125rem; line-height: 1.5; margin: 8px 0 0; max-width: 34ch; }
.kb-foot-col h4 {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kb-foot-col a {
  display: block;
  padding-block: 4px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  text-decoration: none;
}
.kb-foot-col a:hover { color: var(--ink); }
.kb-foot-bottom {
  padding-block: 18px 26px;
  color: var(--ink-3);
  font-size: 0.75rem;
}

/* ── Shared text pieces ──────────────────────────────────────────────────── */

.kb-eyebrow {
  margin: 0 0 10px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--route-blue-ink);
}
.kb-title {
  margin: 0 0 12px;
  font-size: clamp(2.25rem, 5.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: var(--fw-bold);
}
.kb-lead {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 52ch;
}
.kb-label {
  margin: 30px 0 10px;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Search box ──────────────────────────────────────────────────────────── */

.kb-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 6px 6px 6px 15px;
}
.kb-search svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-2); }
.kb-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 9px 0;
  font: inherit;
  font-size: var(--text-input);
  color: var(--ink);
  background: transparent;
}
.kb-search input::placeholder { color: var(--ink-3); }
.kb-search input:focus-visible { outline: none; }
.kb-search:focus-within { outline: 3px solid var(--route-blue); outline-offset: 2px; }
.kb-search .kb-btn { flex: 0 0 auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.kb-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
}
.kb-btn-dark { background: var(--ink); color: var(--paper); }
.kb-btn-blue { background: var(--route-blue); border-color: var(--route-blue); color: var(--paper); }

/* ── Soft-tinted TypeIcon ────────────────────────────────────────────────── */

.kb-typeicon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 1.1875rem;
  font-weight: var(--fw-bold);
  flex: 0 0 auto;
}
.kb-typeicon-lg { width: 58px; height: 58px; font-size: 1.625rem; }
.kb-tone-blue   { background: var(--route-blue-soft);   color: var(--route-blue-ink); }
.kb-tone-green  { background: var(--route-green-soft);  color: var(--route-green-ink); }
.kb-tone-purple { background: var(--route-purple-soft); color: var(--route-purple-ink); }
.kb-tone-yellow { background: var(--route-yellow-soft); color: var(--route-yellow-ink); }

/* ── Hub: category cards (calm hairline, soft icon — never colour blocks) ── */

.kb-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kb-cat {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 14px;
  text-decoration: none;
}
.kb-cat:hover { border-color: var(--ink-4); }
.kb-cat b { display: block; font-size: 0.9375rem; }
.kb-cat small { display: block; color: var(--ink-3); margin-top: 4px; line-height: 1.35; font-size: 0.8125rem; }
.kb-arrow { color: var(--ink-4); font-weight: var(--fw-bold); }

/* ── Hairline lists (popular, related) ───────────────────────────────────── */

.kb-list { border-top: 1px solid var(--rule); }
.kb-item {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.kb-item b { display: block; font-size: 0.9375rem; line-height: 1.25; }
.kb-item:hover b { color: var(--route-blue-ink); }
.kb-item small { display: block; color: var(--ink-3); margin-top: 5px; font-size: 0.8125rem; }

/* ── Category listing rows ───────────────────────────────────────────────── */

.kb-rows { border-top: 1px solid var(--rule); margin-top: 24px; }
.kb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
@media (min-width: 768px) { .kb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); } }
.kb-row h3 { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.2; }
.kb-row:hover h3 { color: var(--route-blue-ink); }
.kb-row p { margin: 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.kb-kind {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--route-blue);
}
@media (min-width: 768px) { .kb-kind { text-align: right; } }

/* ── Article page ────────────────────────────────────────────────────────── */

.kb-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.kb-rail { display: none; }
/* The sticky ToC rail exists only ≥1100px (locked decision). 1100 is the KB
   design handoff's own threshold for the rail, not an app breakpoint. design-allow */
@media (min-width: 1100px) {
  .kb-article-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
  .kb-rail { display: block; }
  .kb-toc { display: none; }
}

.kb-crumbs {
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--route-blue);
  margin-bottom: 16px;
}
.kb-crumbs a { color: inherit; text-decoration: none; }
.kb-crumbs a:hover { text-decoration: underline; }

.kb-h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: var(--fw-bold);
  max-width: 26ch;
}
.kb-meta {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kb-intro {
  margin: 22px 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  max-width: var(--kb-reading-measure);
}
.kb-tagrow { margin-top: 14px; }

/* Collapsed "In this article" (phone/tablet) — native disclosure, no JS needed. */
.kb-toc {
  background: var(--route-blue-soft);
  border-radius: var(--radius);
  margin: 18px 0 0;
  max-width: var(--kb-reading-measure);
}
.kb-toc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.kb-toc summary::-webkit-details-marker { display: none; }
.kb-toc summary::after { content: "⌄"; color: var(--route-blue-ink); }
.kb-toc[open] summary::after { content: "⌃"; }
.kb-toc ol {
  margin: 0;
  padding: 0 18px 14px 32px;
  line-height: 1.9;
  font-size: 0.8125rem;
}
.kb-toc a { color: var(--route-blue-ink); text-decoration: none; }
.kb-toc a:hover { text-decoration: underline; }
.kb-toc li.kb-toc-sub { list-style: none; }

/* Sticky desktop rail. */
.kb-rail-in { position: sticky; top: 24px; }
.kb-rail-in .kb-label { margin-top: 6px; }
.kb-rail-in ol { margin: 0; padding: 0; list-style: none; }
.kb-rail-in li { margin: 0; }
.kb-rail-in li.kb-toc-sub a { padding-left: 14px; }
.kb-rail-in a {
  display: block;
  padding: 5px 0;
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
}
.kb-rail-in a:hover { color: var(--ink); }
.kb-rail-in a[aria-current="true"] { color: var(--route-blue-ink); font-weight: var(--fw-bold); }

/* ── The reading body (the whole point of the page) ──────────────────────── */

.kb-prose {
  max-width: var(--kb-reading-measure);
  font-size: var(--kb-body-size);
  line-height: var(--kb-body-leading);
  color: var(--ink);
}
/* 17px body at the 360px gating viewport (locked decision; the handoff's own
   threshold, not an app breakpoint). design-allow */
@media (max-width: 22.5rem) {
  .kb-prose { font-size: var(--kb-body-size-narrow); }
}

.kb-prose > * { margin: 0; }
.kb-prose > * + * { margin-top: var(--kb-block-space); }
.kb-prose h2 {
  margin-top: var(--kb-h2-space-before);
  font-size: var(--kb-h2-size);
  line-height: var(--kb-h2-leading);
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
  scroll-margin-top: 24px;
}
.kb-prose h2 + * { margin-top: 0.75rem; }
.kb-prose h3 {
  margin-top: var(--kb-h3-space-before);
  font-size: var(--kb-h3-size);
  line-height: var(--kb-h3-leading);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  scroll-margin-top: 24px;
}
.kb-prose h3 + * { margin-top: 0.625rem; }
.kb-prose > :first-child { margin-top: 0; }

.kb-prose a { color: var(--route-blue); text-decoration: underline; text-underline-offset: 2px; }
.kb-prose a:hover { color: var(--route-blue-ink); }
.kb-prose strong { font-weight: var(--fw-bold); }

.kb-prose ul, .kb-prose ol { padding-left: 1.4em; }
.kb-prose li + li { margin-top: 0.4rem; }
.kb-prose li > ul, .kb-prose li > ol { margin-top: 0.4rem; }

.kb-prose blockquote {
  padding-left: 20px;
  border-left: 4px solid var(--route-purple);
  color: var(--ink-2);
}
.kb-prose blockquote > * { margin: 0; }

.kb-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--paper-2);
  border-radius: var(--kb-inline-code-radius);
  padding: 2px 5px;
}
.kb-prose .kb-code {
  background: var(--ink);
  color: var(--paper-2);
  border-radius: var(--radius);
  padding: 16px;
  overflow-x: auto;
}
.kb-prose .kb-code code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: inherit;
}

.kb-table-wrap { overflow-x: auto; }
.kb-prose table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.kb-prose th, .kb-prose td { text-align: left; padding: 10px; border-bottom: 1px solid var(--rule); }
.kb-prose th { font-weight: var(--fw-semibold); }

.kb-prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

.kb-figure img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.kb-figure figcaption { color: var(--ink-3); font-size: 0.875rem; margin-top: 8px; }

.kb-callout {
  border-left: 4px solid var(--route-blue);
  background: var(--route-blue-soft);
  border-radius: 0 var(--kb-callout-radius) var(--kb-callout-radius) 0;
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.kb-callout > * { margin: 0; }
.kb-callout > * + * { margin-top: 0.375rem; }
.kb-callout-label { font-weight: var(--fw-bold); }
.kb-callout-warning { background: var(--route-yellow-soft); border-left-color: var(--route-yellow-ink); }

/* ── Helpful pair ────────────────────────────────────────────────────────── */

.kb-helpful {
  max-width: var(--kb-reading-measure);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 32px 0 0;
  padding: 18px 0;
  text-align: center;
}
.kb-helpful-q { margin: 0 0 10px; font-size: 0.875rem; font-weight: var(--fw-bold); }
.kb-helpful-btns { display: flex; justify-content: center; gap: 8px; }
.kb-helpful-done { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
/* An author `display` beats the UA's `[hidden] { display: none }`, so the two
   halves of the helpful pair need this to actually swap — without it the
   buttons stayed on screen beside the thank-you. */
.kb-helpful [hidden] { display: none; }

/* ── Footer CTA back into the product ────────────────────────────────────── */

.kb-cta {
  max-width: var(--kb-reading-measure);
  margin-top: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kb-cta p { margin: 0; font-size: 0.9375rem; font-weight: var(--fw-semibold); }

/* ── Search results ──────────────────────────────────────────────────────── */

.kb-page-search { max-width: 900px; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.kb-chip {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.kb-chip:hover { border-color: var(--ink-4); }
.kb-chip-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.kb-results-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 10px; }
@media (min-width: 1024px) { .kb-results-layout { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); } }
.kb-filters { display: none; }
@media (min-width: 1024px) {
  .kb-filters {
    display: block;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 18px;
    height: max-content;
    position: sticky;
    top: 24px;
  }
}
.kb-filters b { font-size: 0.8125rem; display: block; margin-bottom: 6px; }
.kb-filters a {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
  padding: 6px 0;
  text-decoration: none;
}
.kb-filters a:hover { color: var(--ink); }
.kb-filters a[aria-current="true"] { color: var(--ink); font-weight: var(--fw-bold); }

.kb-result { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.kb-result small {
  display: block;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--route-blue);
}
.kb-result-blog small { color: var(--route-purple); }
.kb-result h3 { margin: 6px 0; font-size: 1.1875rem; line-height: 1.2; }
.kb-result h3 a { text-decoration: none; }
.kb-result h3 a:hover { color: var(--route-blue-ink); }
.kb-result p { margin: 0; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }
mark.kb-match { background: var(--route-yellow-soft); color: inherit; border-radius: var(--radius-xs); padding: 0 2px; }

.kb-search-foot { margin-top: 26px; max-width: var(--kb-reading-measure); }
.kb-search-foot .kb-btn { width: 100%; margin-top: 12px; }
@media (min-width: 768px) { .kb-search-foot .kb-btn { width: auto; } }

/* ── Empty / failure states ──────────────────────────────────────────────── */

.kb-state { max-width: 560px; padding-block: 24px; }
/* Scoped through `.kb-state` deliberately: the status code is a <p>, so the
   `.kb-state p` body rule below out-specifies a bare class and the 404 rendered
   at body size instead of the board's big blue numeral. */
.kb-state .kb-state-code {
  margin: 0;
  font-size: 3.625rem;
  font-weight: var(--fw-bold);
  color: var(--route-blue);
  letter-spacing: -0.06em;
  line-height: 1;
}
.kb-state h1, .kb-state .kb-state-title {
  margin: 10px 0 8px;
  font-size: 1.5625rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
}
/* The state's descriptive sentence — and ONLY that. The status code and the
   TypeIcon glyph are also <p>s, so a bare `.kb-state p` out-specified their
   own classes and rendered both at body size. */
.kb-state p:not([class]) { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.kb-state .kb-search { margin-top: 8px; }

/* ══ The approved Blog + Help Centre design ══════════════════════════════════
   Source of truth: the Blog + Help Centre implementation handoff (2026-08-19),
   `reference/fragments/{blog,help-centre}-fragment.html`. Every measurement
   below — scale, weight, tracking, radius, min-height, grid span, breakpoint —
   is transcribed from that fragment and must not be "tidied".

   THREE recorded deviations, each a product-owner decision taken before
   implementation (see docs + the PR body), not an approximation:
     1. COLOUR is memore's, not the reference's. The reference names an absolute
        warm palette (#f7f6f2 ground, #171713 ink, #1767d0 blue); the product
        owner chose to reuse the existing tokens so these pages stay in one
        visual language with the rest of the site. Geometry and typography are
        unchanged — only the hues resolve through tokens.css.
     2. LIGHT ONLY. The reference is built on `light-dark()`; memore has no dark
        appearance anywhere, so shipping one here would make /help and /blog the
        only two dark-capable pages. Deferred to a site-wide dark mode.
     3. The CHROME keeps its language selector and its full footer (Privacy,
        Terms and the Cookie-settings consent withdrawal the published policies
        promise "in the footer of every page"). The reference's minimal nav and
        three-item footer would drop both; their STYLING is adopted instead.

   The nav and footer are shared by every KB page (article, category, search,
   tag, 404), so restyling them here restyles those too — deliberately, so a
   click from a topic row into an article does not cross a visual seam. */

/* ── Chrome: the approved nav ────────────────────────────────────────────── */

.kb-nav-in.kb-wrap {
  /* Full-bleed with fluid gutters — NOT the 1220px content measure. */
  max-width: none;
  height: 72px;
  padding-inline: clamp(22px, 4vw, 64px);
  padding-block: 0;
  flex-wrap: nowrap;
  gap: 25px;
}
.kb-nav .kb-brand { font-size: 20px; font-weight: 820; letter-spacing: -0.06em; }
.kb-nav-links { gap: 25px; font-size: 14px; font-weight: 680; }
.kb-nav-links a { color: var(--ink); }
.kb-nav-meta { gap: 16px; }
.kb-signin {
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 680;
}
@media (max-width: 560px) {
  .kb-nav-in.kb-wrap { height: 62px; }
  .kb-nav-links { display: none; }
}

/* ── Chrome: the approved footer ─────────────────────────────────────────── */

.kb-foot {
  margin-top: 0;
  border-top: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}
.kb-foot .kb-wrap {
  max-width: none;
  padding-inline: clamp(22px, 4vw, 64px);
}
.kb-foot-top { padding-block: 36px 28px; }
.kb-foot-brand .b { color: var(--paper); }
.kb-foot-brand p { color: color-mix(in srgb, var(--paper) 70%, transparent); font-size: 12px; }
.kb-foot-col h4 { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.kb-foot-col a { color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 12px; }
.kb-foot-col a:hover { color: var(--paper); }
.kb-foot-bottom {
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

/* ── Shared: the two redesigned pages own their own vertical rhythm ──────── */

body[data-page='kb-help'],
body[data-page='kb-blog'] { letter-spacing: -0.018em; }
body[data-page='kb-blog'] { letter-spacing: -0.015em; }

/* `main` goes full width on these two pages so the blue support panel can be
   measured against the VIEWPORT, exactly as the reference has it. The content
   column's 1220px measure moves onto the sections themselves. */
body[data-page='kb-help'] main.kb-wrap,
body[data-page='kb-blog'] main.kb-wrap {
  max-width: none;
  width: 100%;
  padding-inline: 0;
  padding-block: 0;
}

.kb-measure { width: min(1220px, calc(100% - 44px)); margin-inline: auto; }
@media (max-width: 580px) {
  body[data-page='kb-blog'] .kb-measure { width: min(100% - 28px, 1220px); }
}
@media (max-width: 560px) {
  body[data-page='kb-help'] .kb-measure { width: min(100% - 28px, 1220px); }
}

/* The kicker and section label: one small uppercase blue mark. */
.kb-kicker {
  margin: 0 0 17px;
  color: var(--route-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Blog: hero ──────────────────────────────────────────────────────────── */

.kb-editorial { padding: clamp(72px, 10vw, 132px) 0 96px; }
@media (max-width: 580px) { .kb-editorial { padding-top: 58px; } }

.kb-ed-title {
  max-width: 980px;
  margin: 0;
  font-size: clamp(62px, 10.2vw, 146px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.075em;
}
.kb-ed-title span { color: var(--route-blue); }
@media (max-width: 580px) { .kb-ed-title { font-size: clamp(55px, 18vw, 82px); } }

.kb-ed-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 48px;
  align-items: end;
  margin-top: 42px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--ink-4);
}
.kb-ed-intro {
  max-width: 600px;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.35;
  letter-spacing: -0.035em;
}
@media (max-width: 880px) {
  .kb-ed-bottom { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ── Blog: category filters ──────────────────────────────────────────────── */

/* Its own class, NOT `.kb-filters` — the search page already owns that name
   for a sticky bordered sidebar, and inheriting it wrapped this row in a card. */
.kb-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 880px) { .kb-filter-row { justify-content: flex-start; } }

.kb-filter {
  appearance: none;
  border: 1px solid var(--ink-4);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.kb-filter[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* ── Blog: the editorial grid — typography-led, never a thumbnail ─────────── */

.kb-grid { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 18px; }

.kb-story {
  position: relative;
  grid-column: span 4;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 24px 26px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.kb-story:nth-child(3n) { border-right: 0; }
/* The featured item spans 8 of 12, so items 2 and 3 sit on their own row edge:
   item 2 closes the first row, item 3 opens the second. */
.kb-story:nth-child(2) { border-right: 0; }
.kb-story:nth-child(3) { border-right: 1px solid var(--rule); }
.kb-story[hidden] { display: none; }

.kb-story:hover { background: var(--route-blue); color: var(--paper); }
.kb-story:hover .kb-story-meta,
.kb-story:hover .kb-story-summary { color: inherit; }

.kb-story-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.kb-story-meta {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kb-story-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.kb-story-title {
  margin: auto 0 22px;
  font-size: clamp(34px, 3.35vw, 54px);
  font-weight: 790;
  line-height: 0.96;
  letter-spacing: -0.06em;
  text-wrap: balance;
}
.kb-story-summary {
  max-width: 36ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.kb-story-featured {
  grid-column: span 8;
  min-height: 520px;
  background: var(--paper-2);
}
.kb-story-featured .kb-story-title {
  max-width: 10ch;
  font-size: clamp(52px, 7vw, 94px);
  line-height: 0.89;
}

/* The single-message empty state — one restrained line, never a decorated card. */
.kb-grid-empty { grid-column: 1 / -1; padding: 46px 0; font-size: 24px; font-weight: 700; }

@media (max-width: 880px) {
  .kb-story,
  .kb-story-featured { grid-column: span 6; min-height: 390px; }
  .kb-story:nth-child(n) { border-right: 1px solid var(--rule); }
  .kb-story:nth-child(even) { border-right: 0; }
  .kb-story-featured .kb-story-title { font-size: clamp(44px, 7.5vw, 68px); }
}
@media (max-width: 580px) {
  .kb-story,
  .kb-story-featured {
    grid-column: 1 / -1;
    min-height: 380px;
    border-right: 0;
    padding-left: 4px;
    padding-right: 4px;
  }
  .kb-story:nth-child(n) { border-right: 0; }
  .kb-story-title,
  .kb-story-featured .kb-story-title { font-size: clamp(42px, 13vw, 58px); }
}

.kb-ed-footline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  font-size: 12px;
  color: var(--ink-3);
}
@media (max-width: 580px) { .kb-ed-footline { flex-direction: column; } }

/* ── Help: hero ──────────────────────────────────────────────────────────── */

.kb-hub-hero { padding: clamp(72px, 9vw, 124px) 0 68px; border-bottom: 1px solid var(--ink-4); }
.kb-hub-hero .kb-kicker,
.kb-section-label { margin: 0 0 18px; font-weight: 820; letter-spacing: 0.17em; }
.kb-section-label {
  color: var(--route-blue);
  font-size: 12px;
  text-transform: uppercase;
}

.kb-hub-title {
  max-width: 1060px;
  margin: 0;
  font-size: clamp(66px, 11vw, 148px);
  font-weight: 820;
  line-height: 0.84;
  letter-spacing: -0.08em;
}
.kb-hub-title span { color: var(--route-blue); }
@media (max-width: 560px) { .kb-hub-title { font-size: clamp(58px, 19vw, 78px); } }

.kb-hub-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: 42px;
  align-items: end;
  margin-top: 52px;
}
@media (max-width: 800px) { .kb-hub-tools { grid-template-columns: minmax(0, 1fr); } }

/* The hero search keeps the shared `.kb-search` hooks (a real GET form, so
   Enter still reaches the linkable /help/search page) and overrides its
   compact geometry with the approved 72px field. */
.kb-search-hero.kb-search {
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.kb-search-hero::before {
  content: '↳';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-55%);
  font-size: 28px;
  pointer-events: none;
}
.kb-search-hero input {
  width: 100%;
  height: 72px;
  padding: 0 20px 0 58px;
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: clamp(18px, 2.2vw, 29px);
  font-weight: 650;
  letter-spacing: -0.035em;
}
.kb-search-hero input::placeholder { color: var(--ink-3); }
.kb-search-hero:focus-within { outline: none; }
.kb-search-hero input:focus-visible { outline: 3px solid var(--route-blue); outline-offset: 2px; }

.kb-hub-note { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.45; }

/* ── Help: divider-led topic rows (never card tiles) ─────────────────────── */

.kb-topics { padding: 74px 0 96px; }
.kb-topic-list { border-top: 1px solid var(--ink-4); }

.kb-topic {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(200px, 0.55fr) 44px;
  gap: 24px;
  align-items: center;
  min-height: 142px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ink-4);
  text-decoration: none;
  transition: color 160ms ease, padding 160ms ease;
}
.kb-topic:hover { color: var(--route-blue); padding-left: 10px; }
.kb-topic[hidden] { display: none; }

.kb-topic-index {
  align-self: start;
  padding-top: 11px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.1em;
}
.kb-topic-title {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 61px);
  font-weight: 790;
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.kb-topic-copy { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.kb-topic-arrow { font-size: 30px; text-align: right; }

.kb-noresults {
  display: none;
  padding: 46px 0;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid var(--ink-4);
}
.kb-noresults[data-visible='true'] { display: block; }

@media (max-width: 800px) {
  .kb-topic { grid-template-columns: 44px minmax(0, 1fr) 32px; }
  .kb-topic-copy { display: none; }
}
@media (max-width: 560px) {
  .kb-topic { grid-template-columns: 30px minmax(0, 1fr) 28px; gap: 10px; min-height: 112px; }
  .kb-topic-title { font-size: clamp(31px, 10vw, 43px); }
  .kb-topic-index { padding-top: 7px; }
}

/* ── Help: popular ───────────────────────────────────────────────────────── */

.kb-popular { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 50px; padding: 0 0 104px; }
@media (max-width: 800px) { .kb-popular { grid-template-columns: minmax(0, 1fr); } }

.kb-popular-title {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.kb-popular-links { border-top: 1px solid var(--ink-4); }
.kb-popular-links a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
}
.kb-popular-links a:hover { color: var(--route-blue); }

/* ── Help: the blue support panel ────────────────────────────────────────── */

/* A contained, centered, rounded panel — never an edge-to-edge band. It is a
   sibling of `main.kb-wrap`'s content column and owns its own measure, so the
   fill stops short of the viewport on every screen. */
.kb-support {
  width: min(1220px, calc(100% - 44px));
  margin: 0 auto 80px;
  padding: clamp(70px, 8vw, 112px) 0;
  border-radius: 20px;
  background: var(--route-blue);
  color: var(--paper);
}
.kb-support-inner { width: min(1080px, calc(100% - 64px)); margin: 0 auto; }
.kb-support-heading {
  max-width: 900px;
  margin: 0 0 66px;
  font-size: clamp(58px, 9vw, 126px);
  font-weight: 820;
  line-height: 0.84;
  letter-spacing: -0.075em;
}
.kb-support-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}
@media (max-width: 800px) { .kb-support-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .kb-support { width: min(100% - 28px, 1220px); border-radius: 16px; }
  .kb-support-inner { width: min(100% - 36px, 1080px); }
  .kb-support-heading { font-size: clamp(56px, 18vw, 76px); }
}

.kb-contact-copy {
  max-width: 35ch;
  margin: 0 0 36px;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  font-size: 17px;
  line-height: 1.5;
}

/* The two direct-contact routes: rounded bordered surfaces, values wrap. */
.kb-route {
  display: block;
  margin-top: 10px;
  padding: 17px 18px 19px;
  border: 1px solid color-mix(in srgb, var(--paper) 48%, transparent);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}
.kb-route:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); }
.kb-route small {
  display: block;
  margin-bottom: 7px;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kb-route strong {
  display: block;
  font-size: clamp(20px, 2.5vw, 32px);
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

/* ── Help: the ticket form ───────────────────────────────────────────────── */

.kb-form {
  padding: clamp(26px, 4vw, 50px);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}
.kb-form-title { margin: 0 0 34px; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -0.055em; }

.kb-field { display: block; margin-top: 22px; }
.kb-field > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kb-field input,
.kb-field select,
.kb-field textarea {
  width: 100%;
  border: 1px solid var(--ink-4);
  border-radius: 12px;
  padding: 13px 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  /* 16px exactly — anything smaller makes iOS Safari zoom the page on focus. */
  font-size: var(--text-input);
}
.kb-field textarea { min-height: 118px; resize: vertical; }
.kb-field input[aria-invalid='true'],
.kb-field select[aria-invalid='true'],
.kb-field textarea[aria-invalid='true'] { border-color: var(--danger); }

.kb-field-err { margin: 8px 0 0; color: var(--danger); font-size: 13px; line-height: 1.4; }

.kb-form-error {
  margin: 28px 0 0;
  color: var(--danger);
  font-size: 14px;
  line-height: 1.45;
}
.kb-form-error a { color: inherit; }

.kb-form-submit {
  width: 100%;
  margin-top: 28px;
  padding: 16px 20px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: 760;
  cursor: pointer;
}
.kb-form-submit[disabled] { cursor: default; opacity: 0.72; }

/* Success replaces the FIELDS inside the same rounded surface — the panel, the
   form's own background and its padding are untouched. */
.kb-success { display: none; min-height: 440px; align-content: center; }
.kb-form[data-sent='true'] .kb-form-fields { display: none; }
.kb-form[data-sent='true'] .kb-success { display: grid; }
.kb-success strong {
  display: block;
  max-width: 8ch;
  font-size: clamp(48px, 7vw, 82px);
  line-height: 0.9;
  letter-spacing: -0.065em;
}
.kb-success p { max-width: 35ch; font-size: 16px; line-height: 1.5; }
.kb-success:focus-visible { outline: 3px solid var(--route-blue); outline-offset: 6px; }

/* The approved UI animates only colour and padding; honour a reduced-motion
   preference for anything the design system does not already cover. */
@media (prefers-reduced-motion: reduce) {
  .kb-story,
  .kb-topic { transition: none; }
}

/* Visually hidden, still announced — the search field's own label. */
.kb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The no-JavaScript round trip lands back on /help?ticket=failed; the same
   message the enhanced path reveals is server-rendered visible there. */
.kb-form[data-failed='true'] .kb-form-error { display: block; }
.kb-form[data-failed='true'] .kb-form-error[hidden] { display: block; }

/* ── Long-locale safety on the display headings ──────────────────────────── */

/* The approved sizes were drawn against ENGLISH, which is the short locale:
   ru/de/fr run 20–40% longer and their single WORDS get longer with them. At
   360px "получилось?" at 18vw is wider than the phone, and because the app
   clips the x-axis (§5.5) an over-wide headline is amputated, not scrollable —
   the Russian support panel really did lose its "?" off the right edge.
   `break-word` only ever acts when a word cannot fit its line on its own, so
   every English rendering is byte-identical to the reference. */
.kb-hub-title,
.kb-ed-title,
.kb-support-heading,
.kb-popular-title,
.kb-topic-title,
.kb-story-title,
.kb-form-title,
.kb-success strong { overflow-wrap: break-word; }