/* =Docs (BetterDocs)
-------------------------------------------------------------- */

/* Loaded only on docs views, after BetterDocs' own CSS (includes/functions/docs.php).
   Every BetterDocs override is scoped to body.svx-docs-view and marked !important, on
   purpose: BetterDocs prints its customizer CSS inline with selectors up to eight
   classes deep (.betterdocs-sidebar.betterdocs-sidebar-layout-1 .betterdocs-sidebar-content
   .betterdocs-single-category-wrapper ...), so out-ranking it rule by rule is fragile and
   breaks on the next plugin update. This file exists only to override that plugin, and
   the scope keeps the !important from reaching anything else. Rules for the theme's own
   docs-home markup (.svx-docs-home__*) need no !important.

   Colours, with contrast on the #f8fafc page / on white:
   ink #0f172a 16.2 / 17.85, body #334155 9.9 / 10.35, muted #475569 7.24 / 7.58,
   meta #64748b 4.55 / 4.76, brand #085df2 5.20 / 5.44, brand on tint #eaf1ff 4.80,
   control edge #8a919e 3.17 on white. */

body.svx-docs-view {
    --docs-ink: #0f172a;
    --docs-body: #334155;
    --docs-muted: #475569;
    --docs-meta: #64748b;
    --docs-line: #e2e8f0;
    --docs-edge: #8a919e;
    --docs-bg: #f8fafc;
    --docs-brand: #085df2;
    --docs-brand-press: #0647b8;
    --docs-tint: #eaf1ff;
    --docs-radius: 12px;
    --docs-ring: 0 0 0 3px rgba(8, 93, 242, 0.25);
}

/* ── Surfaces ───────────────────────────────────────────── */
body.svx-docs-view .betterdocs-wrapper.betterdocs-wrapper {
    background-color: var(--docs-bg) !important;
}

/* ── Search band + field (archive, single, docs home) ───── */
body.svx-docs-view .betterdocs-search-form-wrapper.betterdocs-search-form-wrap {
    background: #fff !important;
    border-bottom: 1px solid var(--docs-line) !important;
    padding: 28px 16px !important;
}

body.svx-docs-view .betterdocs-live-search {
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-searchform {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    border: 1px solid var(--docs-edge) !important;
    border-radius: var(--docs-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-searchform:hover {
    border-color: var(--docs-muted) !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-searchform:focus-within {
    border-color: var(--docs-brand) !important;
    box-shadow: var(--docs-ring) !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-searchform svg {
    color: var(--docs-meta) !important;
    fill: currentColor !important;
    flex: 0 0 auto !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-search-field {
    color: var(--docs-ink) !important;
    font-size: 16px !important;
    min-height: 44px !important;
    outline: none !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-search-field::placeholder {
    color: var(--docs-meta) !important;
    opacity: 1 !important;
}

/* Phones: a compact field in a slimmer band, so the article starts higher. */
@media (max-width: 768px) {
    body.svx-docs-view .betterdocs-search-form-wrapper.betterdocs-search-form-wrap {
        padding: 12px 16px !important;
    }

    body.svx-docs-view .betterdocs-live-search .betterdocs-searchform {
        min-height: 48px !important;
        padding: 0 14px !important;
    }

    body.svx-docs-view .betterdocs-live-search .betterdocs-searchform svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Live results: full field width, title over category, no 80px screenshot thumbnails
   (too small to read, and they pushed titles out of line). */
body.svx-docs-view .betterdocs-live-search {
    position: relative !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-search-result-wrap {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-top: 8px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: var(--docs-radius) !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
    z-index: 30 !important;
}

body.svx-docs-view .betterdocs-live-search .betterdocs-search-result-wrap::before {
    display: none !important;
}

/* BetterDocs positions the list absolutely at its content width (it came out half the
   field's width); static lets the wrap above be the dropdown box. */
body.svx-docs-view .betterdocs-live-search .docs-search-result {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: min(60vh, 440px) !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow-y: auto !important;
    list-style: none !important;
    border: 0 !important;
    background: #fff !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result li img,
body.svx-docs-view .betterdocs-live-search .docs-search-result li a br {
    display: none !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result li a:hover,
body.svx-docs-view .betterdocs-live-search .docs-search-result li a:focus-visible {
    background: var(--docs-tint) !important;
    outline: none !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result li a:focus-visible {
    box-shadow: inset 0 0 0 2px var(--docs-brand) !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result .betterdocs-search-title,
body.svx-docs-view .betterdocs-live-search .docs-search-result .betterdocs-search-category {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result .betterdocs-search-title {
    display: block !important;
    color: var(--docs-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

body.svx-docs-view .betterdocs-live-search .docs-search-result .betterdocs-search-category {
    display: block !important;
    margin-top: 2px !important;
    color: var(--docs-meta) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* ── Layout: sidebar + article ──────────────────────────── */
body.svx-docs-view .betterdocs-content-wrapper.betterdocs-content-wrapper {
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 24px 72px !important;
    gap: 40px !important;
}

body.svx-docs-view .betterdocs-single-wrapper .betterdocs-content-wrapper .betterdocs-sidebar,
body.svx-docs-view .betterdocs-taxonomy-wrapper .betterdocs-content-wrapper .betterdocs-sidebar {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    width: 280px !important;
}

/* The sticky TOC is position:fixed at BetterDocs' 320px; it must match the narrower
   sidebar or it covers the start of every article line. */
body.svx-docs-view .sticky-toc-container {
    width: 280px !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-content-wrapper .betterdocs-sidebar,
    body.svx-docs-view .betterdocs-taxonomy-wrapper .betterdocs-content-wrapper .betterdocs-sidebar {
        flex-basis: 240px !important;
        max-width: 240px !important;
        width: 240px !important;
    }
    body.svx-docs-view .betterdocs-content-wrapper.betterdocs-content-wrapper {
        gap: 24px !important;
    }
    body.svx-docs-view .sticky-toc-container {
        width: 240px !important;
    }
}

@media (max-width: 768px) {
    body.svx-docs-view .betterdocs-content-wrapper.betterdocs-content-wrapper {
        padding: 8px 16px 56px !important;
    }
}

/* The article column must be allowed to shrink below its widest child (a long URL in
   `code`, a wide screenshot). Without min-width:0 it grew to 1509px on a 1440 screen. */
body.svx-docs-view .betterdocs-content-area {
    min-width: 0 !important;
    padding: 0 !important;
}

/* One comfortable measure for everything in the article column: the shared reading
   measure (react-app/src/styles/global.css), about 70 characters a line. */
body.svx-docs-view .betterdocs-single-wrapper .betterdocs-content-area > * {
    max-width: var(--read-measure, 700px) !important;
}

/* Article pages read on plain white: the two navigation columns and the article sit on
   one surface, separated by space rather than boxes. (Docs home and archives keep the
   tinted page with white cards.) */
body.svx-docs-view .betterdocs-wrapper.betterdocs-single-wrapper {
    background-color: #fff !important;
}

/* ── Sidebar: category navigation ───────────────────────────
   Same visual language as the contents rail on the right, so the article sits between
   two quiet columns instead of a boxed card on one side and a bare list on the other:
   no card, no count bubbles, no per-link file icons. A category is a small icon + name
   row with a chevron; its guides hang off a thin guide line, and the open guide is a
   soft brand pill. */
body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-category-grid-wrapper,
body.svx-docs-view .betterdocs-sidebar .betterdocs-category-grid-inner-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper {
    margin: 0 0 4px !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-inner {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header {
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header:hover {
    background: #f1f5f9 !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper.active .betterdocs-single-category-inner .betterdocs-category-header {
    background: transparent !important;
    border: 0 !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-category-header-inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Chevron: points right when closed, down when open. */
body.svx-docs-view .betterdocs-sidebar .betterdocs-category-header-inner::after {
    content: "" !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: auto !important;
    background-color: #64748b !important; /* 4.76:1, a state icon needs 3:1 */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    transform: rotate(-90deg) !important;
    transition: transform 0.2s ease !important;
}

/* Open = its guide list is showing. BetterDocs collapses the current category with an
   inline display:none and leaves .active on it, so .active alone is not enough. */
body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper.active:not(:has(.betterdocs-body[style*="display: none"])) .betterdocs-category-header-inner::after {
    transform: none !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-category-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-icon .betterdocs-category-icon-img,
body.svx-docs-view .betterdocs-sidebar .betterdocs-category-icon img {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    object-fit: contain !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title,
body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title a,
body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-title:not(a) {
    margin: 0 !important;
    color: var(--docs-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
}

/* Counts: the open list already shows how many guides there are. */
body.svx-docs-view .betterdocs-sidebar .betterdocs-category-items-counts {
    display: none !important;
}

/* The open category (marked active in the server HTML) is open from the first paint;
   BetterDocs' script only sets the same display:block later, which used to push the
   categories below it down after the page had painted. Deliberately not !important:
   collapsing ends in an inline display:none, which has to win. */
body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-single-category-wrapper.active .betterdocs-single-category-inner .betterdocs-body {
    display: block;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content .betterdocs-body {
    margin: 2px 0 10px 20px !important;
    padding: 0 !important;
    background: transparent !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-articles-list {
    margin: 0 !important;
    padding: 0 0 0 0 !important;
    border-left: 1px solid var(--docs-line) !important;
    list-style: none !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-articles-list li > svg {
    display: none !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li a {
    display: block !important;
    margin: 1px 0 1px -1px !important;
    padding: 6px 10px 6px 14px !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 8px 8px 0 !important;
    color: var(--docs-meta) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li a:hover {
    color: var(--docs-ink) !important;
    background: #f8fafc !important;
    border-left-color: #cbd5e1 !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li a.active {
    color: var(--docs-brand) !important;
    background: var(--docs-tint) !important;
    border-left-color: var(--docs-brand) !important;
    font-weight: 500 !important;
}

body.svx-docs-view .betterdocs-sidebar .betterdocs-articles-list li a:focus-visible {
    outline: 2px solid var(--docs-brand) !important;
    outline-offset: -2px !important;
}

/* Touch: 44px rows, text centred in the row, pill still full width. */
@media (pointer: coarse) {
    body.svx-docs-view .betterdocs-sidebar .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }
}

/* Phones: the sidebar becomes BetterDocs' slide-in drawer, which needs its own inset. */
@media (max-width: 768px) {
    body.svx-docs-view .betterdocs-sidebar .betterdocs-sidebar-content {
        padding: 20px 12px 32px !important;
    }
}

/* Count badges elsewhere (docs home, archive): white on #528ffe was 3.13:1. */
body.svx-docs-view .betterdocs-category-items-counts.betterdocs-category-items-counts,
body.svx-docs-view .betterdocs-category-items-counts span {
    background-color: var(--docs-tint) !important;
    color: var(--docs-brand) !important;
    font-weight: 600 !important;
}

/* ── Mobile "View categories" bar ───────────────────────── */
body.svx-docs-view .betterdocs-mobile-nav .betterdocs-sidebar-icon {
    min-height: 44px !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    padding-right: 12px !important;
    transition: background-color 0.2s ease !important;
}

body.svx-docs-view .betterdocs-mobile-nav .betterdocs-sidebar-icon:hover {
    background-color: var(--docs-line) !important;
}

body.svx-docs-view .betterdocs-mobile-nav .betterdocs-sidebar-icon span {
    color: var(--docs-muted) !important;
    font-weight: 500 !important;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item,
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item a,
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item span {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item a.bread-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    color: var(--docs-muted) !important;
    border-radius: 6px !important;
    transition: color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item a.bread-link:hover,
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item a.bread-link:focus-visible {
    color: var(--docs-brand) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

body.svx-docs-view .betterdocs-breadcrumb .breadcrumb-delimiter,
body.svx-docs-view .betterdocs-breadcrumb .breadcrumb-delimiter svg {
    color: #94a3b8 !important;
    fill: currentColor !important;
}

/* The current page is not a link, so it must not look like one: ink, not light blue
   (#528fff on #f2f4f7 was 2.83:1). */
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item.current,
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item.current span {
    color: var(--docs-ink) !important;
    font-weight: 500 !important;
}

/* The breadcrumb is for climbing up: "Docs / Category". The site-home crumb and the
   current page's own title (repeated in full right above the H1) are dropped. */
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item.item-home,
body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item.item-home + .breadcrumb-delimiter,
body.svx-docs-view .betterdocs-single-wrapper .betterdocs-breadcrumb .betterdocs-breadcrumb-item.current,
body.svx-docs-view .betterdocs-single-wrapper .betterdocs-breadcrumb .breadcrumb-delimiter:has(+ .betterdocs-breadcrumb-item.current) {
    display: none !important;
}

/* Print: a small ghost button on the first row of the article column (the breadcrumb on
   wide screens, the "View categories" bar on phones), instead of floating into the first
   paragraph or taking a row of its own. */
body.svx-docs-view .betterdocs-single-wrapper .betterdocs-content-area {
    position: relative !important;
}

body.svx-docs-view .betterdocs-single-wrapper .betterdocs-entry-content .betterdocs-print-pdf {
    position: absolute !important;
    top: -4px !important;
    /* Right edge of the text measure, not of the column (they differ when the column is
       wider than the measure). */
    right: calc(100% - min(100%, var(--read-measure, 700px))) !important;
    float: none !important;
    margin: 0 !important;
    z-index: 2 !important;
}

body.svx-docs-view .betterdocs-single-wrapper .betterdocs-breadcrumb {
    padding-right: 56px !important;
}

@media (min-width: 769px) {
    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-print-pdf .betterdocs-print-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Phones: centred on the 70px "View categories" bar (44px button, 13px either side). The
   bar's top margin moves to the wrapper padding, so the bar always starts exactly at the
   top of the article column (its margin collapsed through the column at some widths and
   not at others). */
@media (max-width: 768px) {
    /* The side padding centres the reading measure on tablets (it was 16px left, 52px
       right at 768) and stays 16px on phones. */
    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-content-wrapper.betterdocs-content-wrapper {
        padding-top: 8px !important;
        padding-left: max(16px, calc((100% - var(--read-measure, 700px)) / 2)) !important;
        padding-right: max(16px, calc((100% - var(--read-measure, 700px)) / 2)) !important;
    }

    /* The search band above already ends in a rule; one line, not two. */
    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-mobile-nav {
        margin-top: 0 !important;
        border-top: 0 !important;
    }

    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-entry-content .betterdocs-print-pdf {
        top: 12px !important;
        right: calc(100% - min(100%, var(--read-measure, 700px)) + 12px) !important;
    }

    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-breadcrumb {
        padding-right: 0 !important;
    }
}

/* ── Article title ──────────────────────────────────────── */
body.svx-docs-view .betterdocs-single-wrapper .docs-single-title .betterdocs-entry-title {
    margin: 12px 0 28px !important;
    padding: 0 !important;
    color: var(--docs-ink) !important;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    text-wrap: balance !important;
}

/* Print: a 44px target with states. */
body.svx-docs-view .betterdocs-print-pdf .betterdocs-print-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

body.svx-docs-view .betterdocs-print-pdf .betterdocs-print-btn:hover {
    border-color: var(--docs-edge) !important;
    background: var(--docs-bg) !important;
}

/* ── Table of contents (in the article) ─────────────────── */
body.svx-docs-view .betterdocs-entry-content .betterdocs-toc {
    padding: 20px 24px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: var(--docs-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.svx-docs-view .betterdocs-toc .toc-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    color: var(--docs-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body.svx-docs-view .betterdocs-toc .toc-list li {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

body.svx-docs-view .betterdocs-toc .toc-list li a {
    display: inline-block !important;
    padding: 5px 0 !important;
    color: var(--docs-muted) !important;
    transition: color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-toc .toc-list li a:hover,
body.svx-docs-view .betterdocs-toc .toc-list li a:focus-visible,
body.svx-docs-view .betterdocs-toc .toc-list li a.active {
    color: var(--docs-brand) !important;
}

/* Collapsible on phones (docs.js adds the button and the class). */
body.svx-docs-view .svx-toc-toggle {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--docs-edge) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--docs-ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

body.svx-docs-view .svx-toc-toggle:hover {
    border-color: var(--docs-ink) !important;
    background: var(--docs-bg) !important;
}

body.svx-docs-view .svx-toc-toggle:active {
    background: var(--docs-line) !important;
}

body.svx-docs-view .svx-toc-toggle[hidden] {
    display: none !important;
}

/* BetterDocs sets pointer-events:none on .toc-title, which the button inherited, so a
   tap fell through to the box and the contents never opened on touch. */
body.svx-docs-view .betterdocs-toc .toc-title .svx-toc-toggle {
    pointer-events: auto !important;
}

/* Safety net for BetterDocs' sticky copy of the TOC: it must never be collapsed or
   carry the phone toggle. */
body.svx-docs-view .sticky-toc-container .svx-toc-toggle {
    display: none !important;
}

body.svx-docs-view .sticky-toc-container .betterdocs-toc.svx-toc-collapsed .toc-list {
    display: block !important;
}

body.svx-docs-view .betterdocs-toc.svx-toc-collapsed .toc-list {
    display: none !important;
}

/* ── Table of contents rail (wide screens; docs.js moves the TOC in) ────────
   Three balanced columns from 1280px: categories 260 | article | contents 232. The
   rail sticks below the navbar, scrolls on its own when long, and marks the section
   on screen with a brand line (svx-current). BetterDocs' left-side sticky copy is
   hidden while the rail is there, so the contents never show twice. */
body.svx-docs-view .svx-toc-rail {
    display: none !important;
}

/* The three-column layout is keyed on "this article has a contents block" (:has), not on
   the class docs.js sets, so it is final at first paint: the page never shifts when the
   script later moves the contents into the rail, and #section links land where they
   should. Until then the in-article copy is hidden at this width and the rail column is
   empty space. */
@media (min-width: 1280px) {
    body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc) .betterdocs-single-wrapper .betterdocs-content-wrapper.betterdocs-content-wrapper {
        max-width: 1320px !important;
        gap: 48px !important;
    }

    body.svx-docs-view .betterdocs-single-wrapper .betterdocs-entry-content .betterdocs-toc {
        display: none !important;
    }

    /* Hold the rail's column (232px + 48px gap) open until the rail exists, so the
       article already has its final width. */
    body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc):not(:has(.svx-toc-rail)) .betterdocs-single-wrapper .betterdocs-content-wrapper.betterdocs-content-wrapper {
        padding-right: calc(24px + 232px + 48px) !important;
    }

    /* The category list sticks too, so neither side of the article goes blank while
       reading; a long list scrolls inside its own column. */
    body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc) .betterdocs-single-wrapper .betterdocs-content-wrapper .betterdocs-sidebar {
        position: sticky !important;
        top: 104px !important;
        align-self: flex-start !important;
        flex: 0 0 248px !important;
        max-width: 248px !important;
        width: 248px !important;
        max-height: calc(100vh - 128px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
    }

    body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc) .sticky-toc-container {
        display: none !important;
    }

    body.svx-docs-view .svx-toc-rail {
        display: block !important;
        position: sticky !important;
        top: 104px !important;
        flex: 0 0 232px !important;
        align-self: flex-start !important;
        width: 232px !important;
        max-height: calc(100vh - 128px) !important;
        padding: 8px 4px 24px 2px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
    }

    /* When the navbar slides away on the way down, both side columns rise with it
       (same timing and curve as the bar) instead of leaving a 104px gap above them. */
    body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc) .betterdocs-single-wrapper .betterdocs-content-wrapper .betterdocs-sidebar,
    body.svx-docs-view .svx-toc-rail {
        transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    html[data-svx-nav-hidden="true"] body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc) .betterdocs-single-wrapper .betterdocs-content-wrapper .betterdocs-sidebar,
    html[data-svx-nav-hidden="true"] body.svx-docs-view .svx-toc-rail {
        top: 32px !important;
        max-height: calc(100vh - 56px) !important;
    }
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
    body.svx-docs-view:has(.betterdocs-single-wrapper .betterdocs-toc) .betterdocs-single-wrapper .betterdocs-content-wrapper .betterdocs-sidebar,
    body.svx-docs-view .svx-toc-rail {
        transition: none !important;
    }
}

@media (min-width: 1280px) {

    body.svx-docs-view .svx-toc-rail .betterdocs-toc {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-title {
        display: block !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        color: var(--docs-ink) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: -0.005em !important;
    }

    /* The open entry: the same soft brand pill as the open guide in the left column. */
    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a {
        border-radius: 0 8px 8px 0 !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-left: 1px solid var(--docs-line) !important;
        list-style: none !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list ul {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li > a {
        width: auto !important;
        max-width: none !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a {
        display: block !important;
        margin: 0 0 0 -1px !important;
        padding: 6px 0 6px 14px !important;
        border-left: 2px solid transparent !important;
        border-radius: 0 !important;
        color: var(--docs-meta) !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        transition: color 0.15s ease, border-color 0.15s ease !important;
    }

    /* Numbers repeat what "Step 1", "Step 2" already say; the rail stays quiet. */
    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a::before {
        display: none !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list ul li a {
        padding-left: 26px !important;
        font-size: 13px !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a:hover {
        color: var(--docs-ink) !important;
        background: #f8fafc !important;
        border-left-color: #cbd5e1 !important;
    }

    /* BetterDocs leaves "active" on the last clicked entry; only the tracked section
       is highlighted, so two entries never light up at once. */
    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a.active:not(.svx-current) {
        color: var(--docs-meta) !important;
        border-left-color: transparent !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a.svx-current {
        color: var(--docs-brand) !important;
        background: var(--docs-tint) !important;
        border-left-color: var(--docs-brand) !important;
        font-weight: 500 !important;
    }

    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a:focus-visible {
        outline: 2px solid var(--docs-brand) !important;
        outline-offset: -2px !important;
        border-radius: 4px !important;
    }
}

body.svx-docs-view .betterdocs-toc.svx-toc-collapsed .toc-title {
    margin-bottom: 0 !important;
}

/* ── Article body ───────────────────────────────────────────
   The shared reading tokens (react-app/src/styles/global.css), same as blog articles. */
body.svx-docs-view .betterdocs-content {
    color: var(--read-text, #334155) !important;
    font-size: var(--read-size, 1.0625rem) !important;
    line-height: var(--read-leading, 1.75) !important;
    letter-spacing: 0 !important;
    font-feature-settings: var(--read-features, normal) !important;
    overflow-wrap: break-word !important;
}

@media (min-width: 768px) {
    body.svx-docs-view .betterdocs-content {
        font-size: var(--read-size-lg, 1.125rem) !important;
    }
}

body.svx-docs-view .betterdocs-content > * + * {
    margin-top: var(--read-flow, 1.25em) !important;
}

body.svx-docs-view .betterdocs-content p {
    margin-bottom: 0 !important;
    text-wrap: pretty !important;
}

body.svx-docs-view .betterdocs-content h2,
body.svx-docs-view .betterdocs-content h3,
body.svx-docs-view .betterdocs-content h4,
body.svx-docs-view .betterdocs-content h5 {
    margin-top: var(--read-h-before, 2.5rem) !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    border: 0 !important;
    color: var(--read-heading, #0f172a) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    text-wrap: balance !important;
    scroll-margin-top: 110px !important;
}

/* A heading belongs to what follows it: the gap after it is small. */
body.svx-docs-view .betterdocs-content :is(h2, h3, h4, h5) + * {
    margin-top: var(--read-h-after, 0.75rem) !important;
}

body.svx-docs-view .betterdocs-content :is(h2, h3, h4, h5) + :is(h3, h4, h5) {
    margin-top: 1.25rem !important;
}

/* Headings written as <h3><strong>...</strong></h3> keep the heading weight. */
body.svx-docs-view .betterdocs-content :is(h2, h3, h4, h5) strong {
    font-weight: inherit !important;
}

body.svx-docs-view .betterdocs-content h2 { font-size: var(--read-h2, 1.5rem) !important; }
body.svx-docs-view .betterdocs-content h3 { font-size: var(--read-h3, 1.25rem) !important; letter-spacing: -0.015em !important; }
body.svx-docs-view .betterdocs-content h4 { font-size: var(--read-h4, 1.0625rem) !important; letter-spacing: -0.01em !important; }
body.svx-docs-view .betterdocs-content h5 { font-size: 1rem !important; letter-spacing: 0 !important; }

@media (min-width: 768px) {
    body.svx-docs-view .betterdocs-content h2 { font-size: var(--read-h2-lg, 1.75rem) !important; margin-top: var(--read-h-before-lg, 3rem) !important; }
    body.svx-docs-view .betterdocs-content h3 { font-size: var(--read-h3-lg, 1.375rem) !important; }
    body.svx-docs-view .betterdocs-content h4 { font-size: var(--read-h4-lg, 1.125rem) !important; }
}

/* BetterDocs appends a "#" anchor to headings; keep it quiet until hovered. */
body.svx-docs-view .betterdocs-content .batterdocs-anchor {
    color: var(--docs-meta) !important;
    text-decoration: none !important;
}

body.svx-docs-view .betterdocs-content a:not(.wp-block-button__link):not(.batterdocs-anchor) {
    color: var(--docs-brand) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: rgba(8, 93, 242, 0.4) !important;
    text-underline-offset: 3px !important;
    transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-content a:not(.wp-block-button__link):not(.batterdocs-anchor):hover {
    color: var(--docs-ink) !important;
    text-decoration-color: currentColor !important;
}

body.svx-docs-view .betterdocs-content a:focus-visible {
    outline: 2px solid var(--docs-brand) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

body.svx-docs-view .betterdocs-content a:not(.wp-block-button__link):active {
    color: var(--docs-brand-press) !important;
}

/* Lists read like the paragraphs around them: same size, leading and colour, with a
   half-line between items so each step stands on its own. margin-top is left to the
   block rhythm above. */
body.svx-docs-view .betterdocs-content ul,
body.svx-docs-view .betterdocs-content ol {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 1.375rem !important;
}

body.svx-docs-view .betterdocs-content ul { list-style: disc !important; }
body.svx-docs-view .betterdocs-content ol { list-style: decimal !important; }

body.svx-docs-view .betterdocs-content li {
    margin: 0 !important;
    padding-left: 0.375rem !important;
    color: inherit !important;
    line-height: inherit !important;
}

body.svx-docs-view .betterdocs-content li + li,
body.svx-docs-view .betterdocs-content li > ul,
body.svx-docs-view .betterdocs-content li > ol {
    margin-top: 0.5em !important;
}

body.svx-docs-view .betterdocs-content ul > li::marker {
    color: var(--read-marker, #94a3b8) !important;
}

body.svx-docs-view .betterdocs-content ol > li::marker {
    color: var(--read-heading, #0f172a) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

body.svx-docs-view .betterdocs-content strong,
body.svx-docs-view .betterdocs-content b {
    color: var(--read-heading, #0f172a) !important;
    font-weight: 650 !important;
}

/* Inline code: a quiet chip that may break anywhere, so a long redirect URI wraps
   instead of pushing the page sideways. */
body.svx-docs-view .betterdocs-content code {
    padding: 0.1em 0.4em !important;
    border-radius: 6px !important;
    background: #eef2f6 !important;
    color: var(--docs-ink) !important;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important;
    font-size: 0.875em !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

body.svx-docs-view .betterdocs-content pre,
body.svx-docs-view .betterdocs-content .wp-block-code {
    max-width: 100% !important;
    padding: 16px 20px !important;
    overflow-x: auto !important;
    border-radius: var(--docs-radius) !important;
    background: #0f172a !important;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    white-space: pre !important;
}

body.svx-docs-view .betterdocs-content pre code,
body.svx-docs-view .betterdocs-content .wp-block-code code {
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: inherit !important;
}

body.svx-docs-view .betterdocs-content pre:focus-visible {
    outline: 2px solid var(--docs-brand) !important;
    outline-offset: 2px !important;
}

body.svx-docs-view .betterdocs-content blockquote,
body.svx-docs-view .betterdocs-content .wp-block-quote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 14px 18px 14px 20px !important;
    border-left: 3px solid var(--docs-brand) !important;
    border-radius: 0 var(--docs-radius) var(--docs-radius) 0 !important;
    background: #fff !important;
    color: var(--docs-body) !important;
    font-style: normal !important;
}

body.svx-docs-view .betterdocs-content blockquote p + p {
    margin-top: 0.75em !important;
}

/* margin/transform/shadow also undo the legacy Additional CSS on production (30px image
   margins and a hover zoom), which out-sizes the reading rhythm. */
body.svx-docs-view .betterdocs-content img {
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

body.svx-docs-view .betterdocs-content img:hover {
    transform: none !important;
}

body.svx-docs-view .betterdocs-content img.aligncenter,
body.svx-docs-view .betterdocs-content .aligncenter img {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.svx-docs-view .betterdocs-content .wp-block-table {
    overflow-x: auto !important;
}

body.svx-docs-view .betterdocs-content table td,
body.svx-docs-view .betterdocs-content table th {
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.svx-docs-view .betterdocs-content iframe {
    max-width: 100% !important;
}

/* ── Media frames (same design as blog articles, see single-blog.css) ─────────────
   Media sits straight on the page: soft corners, a hairline just inside the edge,
   nothing around it. The resets also undo the legacy Additional CSS on production
   (borders, shadows, a hover zoom on every image). */
body.svx-docs-view .betterdocs-content .wp-block-image,
body.svx-docs-view .betterdocs-content .wp-block-embed,
body.svx-docs-view .betterdocs-content .wp-block-video,
body.svx-docs-view .betterdocs-content .wp-block-gallery {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
}

body.svx-docs-view .betterdocs-content .wp-block-image {
    text-align: center !important;
}

body.svx-docs-view .betterdocs-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* Image blocks and plain or classic captioned figures only: icons inside tables or
   media-text stay bare. */
body.svx-docs-view .betterdocs-content :is(.wp-caption, figure:not([class*="wp-block-"])) img,
body.svx-docs-view .betterdocs-content .wp-block-image img {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: var(--media-radius-sm, 12px) !important;
    outline: 1px solid var(--media-edge, rgba(15, 23, 42, 0.08)) !important;
    outline-offset: -1px !important;
}

body.svx-docs-view .betterdocs-content .wp-block-image.alignleft img,
body.svx-docs-view .betterdocs-content .wp-block-image .alignleft img { margin-left: 0 !important; }
body.svx-docs-view .betterdocs-content .wp-block-image.alignright img,
body.svx-docs-view .betterdocs-content .wp-block-image .alignright img { margin-right: 0 !important; }

/* Zoomable screenshots: the edge firms up and the picture dims a touch. */
body.svx-docs-view .betterdocs-content img.svx-zoomable {
    cursor: zoom-in !important;
    transition: outline-color 0.2s ease, opacity 0.2s ease !important;
}

body.svx-docs-view .betterdocs-content img.svx-zoomable:hover {
    outline-color: var(--media-edge-hover, rgba(15, 23, 42, 0.22)) !important;
    opacity: 0.94 !important;
}

body.svx-docs-view .betterdocs-content img.svx-zoomable:active {
    opacity: 0.88 !important;
}

body.svx-docs-view .betterdocs-content img.svx-zoomable:focus-visible {
    outline: 2px solid #085df2 !important;
    outline-offset: 3px !important;
}

/* Videos and embeds: the player itself is the frame. A dark tile behind it keeps the
   corners clean while it loads. The theme does not opt into core's responsive embeds,
   so iframes kept their 500x281 attributes; aspect-ratio sizes them from the column
   width instead. */
body.svx-docs-view .betterdocs-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
body.svx-docs-view .betterdocs-content .wp-block-video video {
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: var(--media-radius-sm, 12px) !important;
    background: #0b0d12 !important;
}

body.svx-docs-view .betterdocs-content .wp-block-embed__wrapper::before {
    display: none !important;
}

body.svx-docs-view .betterdocs-content .wp-block-embed iframe {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border: 0 !important;
}

body.svx-docs-view .betterdocs-content .wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3 !important; }
body.svx-docs-view .betterdocs-content .wp-embed-aspect-1-1 iframe { aspect-ratio: 1 / 1 !important; }
body.svx-docs-view .betterdocs-content .wp-embed-aspect-21-9 iframe { aspect-ratio: 21 / 9 !important; }
body.svx-docs-view .betterdocs-content .wp-embed-aspect-9-16 .wp-block-embed__wrapper { max-width: 360px !important; margin: 0 auto !important; }
body.svx-docs-view .betterdocs-content .wp-embed-aspect-9-16 iframe { aspect-ratio: 9 / 16 !important; }

/* Rich embeds that are not players (a tweet, a card) keep their own height and look. */
body.svx-docs-view .betterdocs-content .wp-block-embed:not(.is-type-video):not(.wp-has-aspect-ratio) iframe {
    aspect-ratio: auto !important;
}

body.svx-docs-view .betterdocs-content .wp-block-video video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

body.svx-docs-view .betterdocs-content iframe {
    max-width: 100% !important;
}

@media (min-width: 768px) {
    body.svx-docs-view .betterdocs-content :is(.wp-caption, figure:not([class*="wp-block-"])) img,
    body.svx-docs-view .betterdocs-content .wp-block-image img,
    body.svx-docs-view .betterdocs-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
    body.svx-docs-view .betterdocs-content .wp-block-video video {
        border-radius: var(--media-radius, 16px) !important;
    }
}

/* Galleries are already a grid of tiles: smaller corners, same hairline. */
body.svx-docs-view .betterdocs-content .wp-block-gallery img {
    border-radius: 10px !important;
}

body.svx-docs-view .betterdocs-content figcaption,
body.svx-docs-view .betterdocs-content .wp-element-caption {
    max-width: 36rem !important;
    margin: 0.75rem auto 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--read-muted, #64748b) !important;
    text-align: center !important;
    text-wrap: balance !important;
}

/* A file that failed to load: a quiet tile, not a broken-image box. */
body.svx-docs-view .betterdocs-content .svx-media-missing img {
    display: none !important;
}

body.svx-docs-view .betterdocs-content .svx-media-missing::before {
    content: attr(data-missing-label) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 160px !important;
    padding: 24px !important;
    border-radius: var(--media-radius, 16px) !important;
    outline: 1px solid var(--media-edge, rgba(15, 23, 42, 0.08)) !important;
    outline-offset: -1px !important;
    background: var(--media-tile, #f8fafc) !important;
    color: #475569 !important; /* 7.2:1 on the tile */
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.svx-docs-view .betterdocs-content img.svx-zoomable {
        transition: none !important;
    }
}

/* ── Tables on phones: one card per row (same design as blog articles) ──────
   Labelled by stack-tables.js; see single-blog.css. */
@media (max-width: 640px) {
    body.svx-docs-view .betterdocs-content :is(.wp-block-table, .svx-table-scroll):has(> table.svx-table-stack) {
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack,
    body.svx-docs-view .betterdocs-content table.svx-table-stack :is(thead, tbody, tfoot, tr, th, td) {
        display: block !important;
        width: auto !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack .svx-table-head {
        display: none !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack tr {
        margin: 0 0 0.75rem !important;
        padding: 0.125rem 1rem !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #fff !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack tr:last-child {
        margin-bottom: 0 !important;
    }

    /* A card has no columns. */
    body.svx-docs-view .betterdocs-content table.svx-table-stack :is(td, th) {
        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
        gap: 0.75rem !important;
        min-width: 0 !important;
        padding: 0.625rem 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: none !important;
        color: #334155 !important;
        font-size: 0.9375rem !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        overflow-wrap: break-word !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack :is(td, th)::before {
        content: attr(data-label) !important;
        color: #64748b !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
    }

    /* The first cell names the row: the card's title, with no label. */
    body.svx-docs-view .betterdocs-content table.svx-table-stack :is(td, th):first-child {
        display: block !important;
        padding: 0.875rem 0 0.625rem !important;
        color: #0f172a !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack :is(td, th):first-child::before {
        content: none !important;
    }

    body.svx-docs-view .betterdocs-content table.svx-table-stack :is(td, th):last-child {
        border-bottom: 0 !important;
    }

    /* An empty cell says nothing; no bare label row. */
    body.svx-docs-view .betterdocs-content table.svx-table-stack td:empty {
        display: none !important;
    }
}

/* ── Article footer: tags ───────────────────────────────── */
body.svx-docs-view .betterdocs-entry-footer {
    margin-top: 40px !important;
}

/* BetterDocs prints the tags with comma text nodes between them; font-size:0 hides the
   commas and the links reset their own size. */
body.svx-docs-view .betterdocs-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 0 !important;
}

body.svx-docs-view .betterdocs-tags a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--docs-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
}

body.svx-docs-view .betterdocs-tags a:hover,
body.svx-docs-view .betterdocs-tags a:focus-visible {
    border-color: var(--docs-brand) !important;
    color: var(--docs-brand) !important;
}

body.svx-docs-view .betterdocs-tags a:focus-visible,
body.svx-docs-view .betterdocs-entry-footer a:focus-visible,
body.svx-docs-view .docs-navigation a:focus-visible {
    outline: 2px solid var(--docs-brand) !important;
    outline-offset: 2px !important;
}

/* ── Reactions: text buttons, never faces ───────────────── */
body.svx-docs-view .betterdocs-article-reactions.betterdocs-article-reactions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 20px !important;
    margin-top: 24px !important;
    padding: 16px 20px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: var(--docs-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.svx-docs-view .betterdocs-article-reactions .betterdocs-reactions-title-tag {
    margin: 0 !important;
    color: var(--docs-ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

body.svx-docs-view .betterdocs-article-reaction-links.betterdocs-article-reaction-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.svx-docs-view .betterdocs-article-reaction-links li {
    margin: 0 !important;
}

/* The stock icons are drawn faces. Hidden unconditionally, so no face paints even
   before docs.js swaps in the translated labels. */
body.svx-docs-view .betterdocs-feelings svg,
body.svx-docs-view .betterdocs-feelings img,
body.svx-docs-view .betterdocs-emoji svg,
body.svx-docs-view .betterdocs-emoji img {
    display: none !important;
}

body.svx-docs-view .betterdocs-article-reaction-links .betterdocs-feelings {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 64px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    box-shadow: none !important;
    border: 1px solid var(--docs-edge) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--docs-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

/* English fallback until docs.js replaces it with the translated label. */
body.svx-docs-view .betterdocs-feelings:not(.svx-labelled)[data-feelings="happy"]::before,
body.svx-docs-view .betterdocs-emoji:not(.svx-labelled)[data-feelings="happy"]::before { content: "Yes"; }
body.svx-docs-view .betterdocs-feelings:not(.svx-labelled)[data-feelings="normal"]::before,
body.svx-docs-view .betterdocs-emoji:not(.svx-labelled)[data-feelings="normal"]::before { content: "Somewhat"; }
body.svx-docs-view .betterdocs-feelings:not(.svx-labelled)[data-feelings="sad"]::before,
body.svx-docs-view .betterdocs-emoji:not(.svx-labelled)[data-feelings="sad"]::before { content: "No"; }

body.svx-docs-view .betterdocs-article-reaction-links .betterdocs-feelings:hover,
body.svx-docs-view .betterdocs-article-reaction-links .betterdocs-feelings:focus-visible {
    border-color: var(--docs-brand) !important;
    background: var(--docs-tint) !important;
    color: var(--docs-brand) !important;
}

body.svx-docs-view .betterdocs-article-reaction-links .betterdocs-feelings:focus-visible {
    outline: 2px solid var(--docs-brand) !important;
    outline-offset: 2px !important;
}

body.svx-docs-view .betterdocs-article-reaction-links .betterdocs-feelings:active {
    background: #d6e4ff !important;
}

body.svx-docs-view .betterdocs-article-reactions .feedback-message {
    margin: 0 !important;
    color: var(--docs-ink) !important;
    font-weight: 600 !important;
}

/* ── Share ──────────────────────────────────────────────── */
body.svx-docs-view .betterdocs-social-share.betterdocs-social-share {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 16px !important;
    margin-top: 24px !important;
}

body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-title-tag {
    margin: 0 !important;
    color: var(--docs-muted) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links li {
    margin: 0 !important;
    padding: 0 !important;
}

body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}

body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links a:hover,
body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links a:focus-visible {
    border-color: var(--docs-ink) !important;
    transform: translateY(-1px) !important;
}

body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links a img {
    width: 20px !important;
    height: 20px !important;
}

/* ── Help link + last updated ───────────────────────────── */
body.svx-docs-view .feedback-update-form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 16px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--docs-line) !important;
}

body.svx-docs-view .feedback-form .feedback-form-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    color: var(--docs-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}

body.svx-docs-view .feedback-form .feedback-form-link:hover,
body.svx-docs-view .feedback-form .feedback-form-link:focus-visible {
    color: var(--docs-brand) !important;
}

body.svx-docs-view .feedback-form .feedback-form-link svg {
    color: currentColor !important;
    fill: currentColor !important;
}

body.svx-docs-view .feedback-update-form .update-date {
    color: var(--docs-meta) !important;
    font-size: 14px !important;
    font-style: normal !important;
}

/* ── Previous / next ────────────────────────────────────── */
body.svx-docs-view .docs-navigation.docs-navigation {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 32px !important;
}

@media (min-width: 640px) {
    body.svx-docs-view .docs-navigation.docs-navigation {
        grid-template-columns: 1fr 1fr !important;
    }
}

body.svx-docs-view .docs-navigation a {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 16px 20px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: var(--docs-radius) !important;
    background: #fff !important;
    color: var(--docs-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease !important;
}

body.svx-docs-view .docs-navigation a:hover {
    border-color: var(--docs-brand) !important;
    color: var(--docs-brand) !important;
}

body.svx-docs-view .docs-navigation a:active {
    background: var(--docs-bg) !important;
}

@media (min-width: 640px) {
    body.svx-docs-view .docs-navigation a[rel="next"],
    body.svx-docs-view .docs-navigation a.next-post,
    body.svx-docs-view .docs-navigation a:last-child:not(:first-child) {
        text-align: right !important;
        align-items: flex-end !important;
    }
}

body.svx-docs-view .docs-navigation a svg {
    display: none !important;
}

/* Comment form consent: the same 18px checkbox and spacing as blog posts. */
body.svx-docs-view .comment-form-cookies-consent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
    color: #475569 !important;
    font-size: 15px !important;
}

body.svx-docs-view .comment-form-cookies-consent input {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 3px 0 0 !important;
    accent-color: #085df2 !important;
}

body.svx-docs-view .docs-navigation .svx-docs-nav-label {
    display: block !important;
    width: 100% !important;
    color: var(--docs-meta) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: inherit !important;
}

/* Plugin credit under every article. */
body.svx-docs-view .betterdocs-credit {
    display: none !important;
}

/* ── Category archive + tag archive ─────────────────────── */
body.svx-docs-view .betterdocs-taxonomy-wrapper .betterdocs-content-inner-area {
    padding: 24px !important;
    border: 1px solid var(--docs-line) !important;
    border-radius: var(--docs-radius) !important;
    background: #fff !important;
}

@media (max-width: 768px) {
    body.svx-docs-view .betterdocs-taxonomy-wrapper .betterdocs-content-inner-area {
        padding: 16px !important;
    }
}

body.svx-docs-view .betterdocs-entry-title .betterdocs-entry-heading {
    margin: 12px 0 8px !important;
    color: var(--docs-ink) !important;
    font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

body.svx-docs-view .betterdocs-entry-title p {
    color: var(--docs-muted) !important;
    font-size: 15px !important;
}

body.svx-docs-view .betterdocs-entry-title p:empty {
    display: none !important;
}

body.svx-docs-view .betterdocs-entry-body ul {
    margin: 16px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.svx-docs-view .betterdocs-entry-body ul li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--docs-line) !important;
}

body.svx-docs-view .betterdocs-entry-body ul li:first-child {
    border-top: 0 !important;
}

body.svx-docs-view .betterdocs-entry-body ul li svg {
    flex: 0 0 auto !important;
    margin-top: 14px !important;
    color: var(--docs-meta) !important;
    fill: currentColor !important;
}

body.svx-docs-view .betterdocs-entry-body ul li a {
    flex: 1 1 auto !important;
    padding: 11px 0 !important;
    color: var(--docs-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    transition: color 0.15s ease !important;
}

body.svx-docs-view .betterdocs-entry-body ul li a:hover,
body.svx-docs-view .betterdocs-entry-body ul li a:focus-visible {
    color: var(--docs-brand) !important;
}

/* ── Docs home (/docs/, page-docs.php) ──────────────────── */
.svx-docs-home {
    background: var(--docs-bg, #f8fafc);
}

.svx-docs-home__header {
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.svx-docs-home__inner {
    max-width: 800px;
    padding-top: 56px;
    padding-bottom: 40px;
    text-align: center;
}

.svx-docs-home__title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.svx-docs-home__intro {
    margin: 12px auto 0;
    max-width: 36rem;
    color: #475569;
    font-size: 18px;
    line-height: 1.6;
}

.svx-docs-home__search {
    margin-top: 28px;
    text-align: left;
}

/* The shortcode brings its own band padding; the header already provides it. */
body.svx-docs-view .svx-docs-home__search .betterdocs-search-form-wrapper,
body.svx-docs-view .svx-docs-home__search .betterdocs-search-form-wrap {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.svx-docs-home__body {
    padding-top: 40px;
    padding-bottom: 80px;
}

@media (max-width: 767px) {
    .svx-docs-home__inner {
        padding-top: 40px;
        padding-bottom: 28px;
    }
    .svx-docs-home__intro {
        font-size: 16px;
    }
    .svx-docs-home__body {
        padding-top: 24px;
        padding-bottom: 56px;
    }
}

/* ── Category grid: docs home + BetterDocs archive ──────────
   Minimal cards on a plain CSS grid. BetterDocs lays these out with masonry.js
   (absolute positions written inline, ragged columns); the grid and the !important
   position reset replace that. No blue rule under titles, no folder or page icons:
   a product icon, the name, a quiet count, then the guides as plain rows. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-wrapper {
    padding: 0 !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 20px !important;
    height: auto !important;
    margin: 0 !important;
}

@media (min-width: 640px) {
    body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper > .betterdocs-single-category-wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-inner {
    height: auto !important;
    padding: 24px 24px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-inner:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

/* Header: icon, name, count on one line. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-category-header {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-header .betterdocs-category-header-inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-category-icon {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-category-icon img {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    object-fit: contain !important;
    border-radius: 9px !important;
}

/* BetterDocs' generic folder drawing: dropped where no product icon replaced it, so a
   card never shows a stock illustration. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-icon:has(img:is([src*="betterdocs-cat-icon"], [data-src*="betterdocs-cat-icon"], [data-lazy-src*="betterdocs-cat-icon"])) {
    display: none !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-category-title,
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-title:not(a),
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-title a {
    flex: 1 1 auto !important;
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

/* The count is information, not a call to action: neutral, small. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-items-counts {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    width: auto !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    box-shadow: none !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-category-items-counts span {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Guides: plain rows with a tinted hover and an arrow that slides in. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-body {
    margin: 0 !important;
    padding: 14px 0 0 !important;
    background: transparent !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list {
    margin: 0 -12px !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li,
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-body .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li > svg {
    display: none !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a,
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-body .betterdocs-articles-list li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a::after {
    content: "" !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a:hover,
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a:focus-visible {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a:hover::after,
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a:focus-visible::after {
    color: #085df2 !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a:focus-visible {
    outline: 2px solid #085df2 !important;
    outline-offset: 0 !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a:active {
    background: #e2e8f0 !important;
}

/* No hover on touch screens, so the arrow would only reserve width. */
@media (hover: none) {
    body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a::after {
        display: none !important;
    }
}

/* "Explore more" when a category has more guides than the card shows. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-footer {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-footer :is(a, button) {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #085df2 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-footer :is(a, button):hover {
    color: #0f172a !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

/* Touch screens: dense link lists get 44px rows. Mouse users keep the tighter lists. */
@media (pointer: coarse) {
    body.svx-docs-view .betterdocs-toc .toc-list li a,
    body.svx-docs-view .betterdocs-breadcrumb .betterdocs-breadcrumb-item a.bread-link {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }

    /* Full-width rows (card guide rows, the contents rail): the row and its pill span
       the column, with the text centred in it. (The category sidebar has its own rule.) */
    body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li a,
    body.svx-docs-view .svx-toc-rail .betterdocs-toc .toc-list li a {
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.svx-docs-view *,
    body.svx-docs-view *::before {
        transition: none !important;
    }
    body.svx-docs-view .docs-navigation a:hover,
    body.svx-docs-view .betterdocs-social-share .betterdocs-social-share-links a:hover {
        transform: none !important;
    }
}

/* ── Guide icon ──────────────────────────────────────────────
   One page icon (Lucide file-text) in a soft chip before every guide row on the docs
   home cards and the category archive list. It takes the product's colour: from the
   card's product icon on /docs/ (src or a lazy-load data attribute), from the term body
   class on an archive. Anything else stays slate. The stroke colour is baked into each
   data URI because a background image cannot read currentColor. Icon on chip, measured:
   slate 7.2:1, DriveHub 4.7:1, ZooMeet 5.4:1, MeetingHub 5.8:1; white on the filled
   hover chip 5.4:1 or better. */
body.svx-docs-view {
    --svx-guide-bg: #f1f5f9;
    --svx-guide-fg: #475569;
    --svx-guide-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
    --svx-guide-icon-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

body.svx-docs-view .betterdocs-single-category-wrapper:has(.svx-docs-product-icon:is([src*="drivehub"], [data-src*="drivehub"], [data-lazy-src*="drivehub"])),
body.svx-docs-view[class*="term-drivehub"] {
    --svx-guide-bg: #e6f4ee;
    --svx-guide-fg: #007a56;
    --svx-guide-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a56' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

body.svx-docs-view .betterdocs-single-category-wrapper:has(.svx-docs-product-icon:is([src*="zoomeet"], [data-src*="zoomeet"], [data-lazy-src*="zoomeet"])),
body.svx-docs-view[class*="term-zoomeet"] {
    --svx-guide-bg: #e8efff;
    --svx-guide-fg: #1a56db;
    --svx-guide-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a56db' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

body.svx-docs-view .betterdocs-single-category-wrapper:has(.svx-docs-product-icon:is([src*="meetinghub"], [data-src*="meetinghub"], [data-lazy-src*="meetinghub"])),
body.svx-docs-view[class*="term-meetinghub"] {
    --svx-guide-bg: #efebff;
    --svx-guide-fg: #5b3fd6;
    --svx-guide-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3fd6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

/* Card rows keep their flex display; the chip is the row's first item and a two-line
   title keeps it beside its first line. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a {
    align-items: flex-start !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a > span {
    flex: 1 1 auto !important;
    padding-top: 3px !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a::after {
    align-self: center !important;
}

body.svx-docs-view .betterdocs-entry-body.betterdocs-taxonomy-doc-category > ul > li:not(.betterdocs-nested-category-wrapper) > :is(svg, img) {
    display: none !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a::before,
body.svx-docs-view .betterdocs-entry-body.betterdocs-taxonomy-doc-category > ul > li:not(.betterdocs-nested-category-wrapper)::before {
    content: "" !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    background: var(--svx-guide-bg) var(--svx-guide-icon) center / 16px 16px no-repeat !important;
    transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.svx-docs-view .betterdocs-entry-body.betterdocs-taxonomy-doc-category > ul > li:not(.betterdocs-nested-category-wrapper)::before {
    margin-top: 9px !important;
}

/* Hover and keyboard focus: the chip fills with the product colour and tips over. */
body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a:is(:hover, :focus-visible)::before,
body.svx-docs-view .betterdocs-entry-body.betterdocs-taxonomy-doc-category > ul > li:not(.betterdocs-nested-category-wrapper):has(> a:is(:hover, :focus-visible))::before {
    background-color: var(--svx-guide-fg) !important;
    background-image: var(--svx-guide-icon-on) !important;
    transform: translateY(-1px) rotate(-8deg) !important;
}

body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a:active::before,
body.svx-docs-view .betterdocs-entry-body.betterdocs-taxonomy-doc-category > ul > li:not(.betterdocs-nested-category-wrapper):has(> a:active)::before {
    transform: scale(0.92) !important;
}

/* Same specificity as the hover rules above, and later, so it wins in every state. */
@media (prefers-reduced-motion: reduce) {
    body.svx-docs-view :is(.svx-docs-home, .betterdocs-docs-archive-wrapper) .betterdocs-category-grid-inner-wrapper .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) > a:is(*, :hover, :focus-visible, :active)::before,
    body.svx-docs-view .betterdocs-entry-body.betterdocs-taxonomy-doc-category > ul > li:not(.betterdocs-nested-category-wrapper):is(*, :has(> a:is(:hover, :focus-visible, :active)))::before {
        transform: none !important;
        transition: none !important;
    }
}