/* Inner pages of the marketing site: page heads, markdown, docs, changelog, compare, pricing matrix, roadmap, community, status. */

.pg-head { padding-block: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 48px); }
.pg-head .s-eyebrow { margin-bottom: 20px; }
.pg-title { margin-bottom: 22px; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 14px; color: var(--ink-3); flex-wrap: wrap; }
.crumbs a { text-decoration: none; } .crumbs .icon { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); text-decoration: underline; } }
.crumbs [aria-current] { color: var(--ink-2); }

/* Markdown output (docs, legal pages, feature bodies, changelog) */
.md { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; min-width: 0; }
.md > * + * { margin-top: 1em; }
.md h2 { margin-top: 2.2em; font: 400 clamp(28px, 3vw, 38px)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.md h3 { margin-top: 1.8em; font: 600 18px/1.3 var(--font-ui); color: var(--ink); }
.md h4 { margin-top: 1.4em; font: 600 15px/1.3 var(--font-ui); color: var(--ink); }
.md h2:first-child, .md h3:first-child { margin-top: 0; }
.md a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.md strong { color: var(--ink); font-weight: 600; }
.md ul, .md ol { padding-inline-start: 1.3em; display: grid; gap: .4em; }
.md li > ul, .md li > ol { margin-top: .4em; }
.md li::marker { color: var(--ink-3); }
.md code { font-family: var(--font-mono); font-size: .86em; padding: .12em .4em; border-radius: 5px; background: var(--surface-2); color: var(--ink); }
.md pre.md-code { margin-block: 1.2em; padding: 16px 18px; overflow-x: auto; border-radius: 12px; background: #1a1813; color: #f3efe6; font-size: 13.5px; line-height: 1.65; box-shadow: 0 0 0 1px var(--line-strong); tab-size: 2; }
.md pre.md-code code { padding: 0; background: none; color: inherit; font-size: inherit; }
.md blockquote { margin-inline: 0; padding: 12px 18px; border-inline-start: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; color: var(--ink); }
.md blockquote > * + * { margin-top: .6em; }
.md hr { border: 0; border-top: 1px solid var(--line-strong); margin-block: 2em; }
.md img { border-radius: 12px; box-shadow: var(--shadow-1); }
.md .md-table { position: relative; overflow-x: auto; margin-block: 1.2em; }
.md table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.md th, .md td { text-align: start; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
.md th { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.md td:first-child { color: var(--ink); }

/* Pager (previous / next) */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.pager a { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: none; transition: box-shadow 160ms var(--ease-out); }
.pager a span { font: 400 22px/1.15 var(--font-display); }
@media (hover: hover) and (pointer: fine) { .pager a:hover { box-shadow: inset 0 0 0 1px var(--accent); } }

/* Features */
.feat-list { display: grid; gap: 0; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-strong); text-decoration: none; color: inherit; }
.feat:last-child { border-bottom: 1px solid var(--line-strong); }
.feat:nth-child(even) .feat-text { order: 2; }
.feat-text { display: grid; gap: 12px; justify-items: start; }
.feat-text p:not(.eyebrow) { color: var(--ink-2); }
.feat-media { border-radius: var(--r-lg); overflow: clip; aspect-ratio: 16 / 10; background: var(--surface-3); outline: 1px solid var(--line-strong); outline-offset: -1px; }
.feat-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, top left); }
.feat-media.is-art { background: #f3efe6; } .feat-media.is-art img { object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .feat:hover .s-h3 { color: var(--accent); } .feat:hover .s-link .icon { transform: translateX(3px); } }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat:nth-child(even) .feat-text { order: 0; } }
.feat-hero { margin: 0; display: grid; gap: 10px; }
.feat-hero img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-2); outline: 1px solid oklch(0 0 0 / .08); outline-offset: -1px; }
.feat-hero.is-art img { max-height: 520px; object-fit: contain; background: #f3efe6; box-shadow: none; outline-color: var(--line-strong); }
.feat-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 96px); padding-block: clamp(40px, 6vw, 72px) 0; align-items: start; }
.feat-body .md { max-width: 68ch; }
.feat-points { position: sticky; top: calc(var(--head-h) + 24px); display: grid; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 860px) { .feat-body { grid-template-columns: 1fr; } .feat-points { position: static; } }

/* Contact / enterprise form */
.ent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.ent-form { display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ent-done { display: flex; gap: 14px; padding: 24px; border-radius: var(--r-lg); background: var(--ok-soft); color: var(--ok); }
.ent-done .icon { width: 28px; height: 28px; flex: none; } .ent-done p { color: var(--ink-2); margin-top: 6px; }
.ent-done .s-h3 { color: var(--ink); }
.mine { display: grid; gap: 10px; margin-top: 12px; } .mine ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mine li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-strong); font-size: 14.5px; }
@media (max-width: 860px) { .ent { grid-template-columns: 1fr; } }

/* Feature-by-plan matrix */
.mx-wrap { position: relative; overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mx-wrap:focus-visible { outline-offset: 3px; }
.mx { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.mx thead th { position: sticky; top: var(--head-h); z-index: 2; background: var(--surface); text-align: center; padding: 16px 12px; font: 400 24px/1.1 var(--font-display); border-bottom: 1px solid var(--line-strong); }
.mx thead th small { display: block; margin-top: 4px; font: 500 12px var(--font-mono); color: var(--ink-3); }
.mx thead th:first-child { text-align: start; }
.mx th[scope='row'] { text-align: start; font-weight: 500; padding: 12px 16px; width: 34%; }
.mx th[scope='row'] small { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-3); font-size: 12.5px; max-width: 46ch; }
.mx td { text-align: center; padding: 12px; color: var(--ink-2); }
.mx tbody tr:not(.mx-group) > * { border-top: 1px solid var(--line); }
.mx-group th { text-align: start; padding: 22px 16px 8px; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
.mx-yes .icon { color: var(--ok); margin-inline: auto; } .mx-no { color: var(--ink-3); }
.mx-val { color: var(--ink); font-weight: 500; }

/* Compare */
.cmp-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.cmp-item { display: grid; gap: 10px; align-content: start; padding: 28px 0; border-top: 1px solid var(--line-strong); text-decoration: none; color: inherit; }
.cmp-item p { color: var(--ink-2); max-width: 46ch; }
.cmp-item-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
@media (hover: hover) and (pointer: fine) { .cmp-item:hover .s-h2 { color: var(--accent); } .cmp-item:hover .s-link .icon { transform: translateX(3px); } }
@media (max-width: 760px) { .cmp-index { grid-template-columns: 1fr; } }
.cmp-full { min-width: 820px; }
.cmp-full th[scope='row'] { width: 20%; }
.cmp-group th { padding: 28px 0 8px; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border-top: 1px solid var(--line-strong); }
.cmp-note { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.cmp-verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.sources { padding-block: 48px var(--y); display: grid; gap: 12px; max-width: 900px; }
.sources ol { margin: 0; padding-inline-start: 1.3em; display: grid; gap: 4px; font-size: 14px; }
.sources a { color: var(--ink-2); }
@media (max-width: 860px) { .cmp-verdict { grid-template-columns: 1fr; } }

/* Templates gallery */
.tpl-page { display: grid; gap: 56px; padding-bottom: 16px; }
.tpl-cat > .eyebrow { padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.tpl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 72px); }
.tpl-card { display: grid; gap: 14px; align-content: space-between; justify-items: start; padding: 22px 0; border-bottom: 1px solid var(--line-strong); }
.tpl-card p:not(.s-mono) { color: var(--ink-2); margin-top: 6px; }
.tpl-card .btn .icon { width: 14px; height: 14px; }
@media (max-width: 760px) { .tpl-cards { grid-template-columns: 1fr; } }

/* Changelog */
.log-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.log-art { border-radius: var(--r-xl); overflow: clip; background: #f3efe6; outline: 1px solid var(--line-strong); outline-offset: -1px; }
.log-art img { width: 100%; height: auto; }
@media (max-width: 860px) { .log-head { grid-template-columns: 1fr; } }
.log-list { display: grid; padding-top: 24px; }
.log-entry { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 64px); padding-block: 40px; border-top: 1px solid var(--line-strong); }
.log-date { display: grid; gap: 6px; align-content: start; font-size: 14px; color: var(--ink-2); position: sticky; top: calc(var(--head-h) + 20px); align-self: start; }
.log-main { max-width: 680px; display: grid; gap: 14px; }
.log-main h2 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .log-main h2 a:hover { text-decoration: underline; } }
.log-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.log-shot img { width: 100%; height: auto; border-radius: 12px; outline: 1px solid var(--line-strong); outline-offset: -1px; }
@media (max-width: 760px) { .log-entry { grid-template-columns: 1fr; } .log-date { position: static; flex-direction: row; display: flex; gap: 12px; align-items: baseline; } }

/* Docs */
.docs-hero .docs-search { max-width: 640px; }
.docs-search { position: relative; }
.docs-search > .icon { position: absolute; inset-inline-start: 14px; top: 22px; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.docs-search .input { padding-inline-start: 42px; padding-inline-end: 44px; min-height: 48px; border-radius: 12px; }
.docs-search-sm > .icon { top: 18px; } .docs-search-sm .input { min-height: 36px; padding-inline-start: 36px; border-radius: 8px; }
.docs-kbd { position: absolute; inset-inline-end: 12px; top: 12px; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-strong); font: 500 12px var(--font-mono); color: var(--ink-3); }
.docs-results { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + 6px); display: grid; padding: 6px; max-height: 420px; overflow-y: auto; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-3); }
.docs-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.docs-results a b { font-weight: 600; font-size: 14.5px; }
.docs-results a small { font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.docs-results a span { color: var(--ink-2); font-size: 13.5px; }
.docs-results a[aria-selected='true'] { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .docs-results a:hover { background: var(--surface-2); } }
.docs-none { padding: 12px; color: var(--ink-3); font-size: 14px; }
.docs-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.docs-cat { display: grid; gap: 10px; align-content: start; padding: 24px 0 28px; border-top: 1px solid var(--line-strong); }
.docs-cat p { color: var(--ink-2); font-size: 14.5px; }
.docs-cat ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.docs-cat li a { display: inline-block; padding-block: 4px; color: var(--ink-2); font-size: 14.5px; text-decoration: none; }
.docs-cat-h { display: flex; align-items: center; gap: 10px; font: 400 26px/1.1 var(--font-display); letter-spacing: -.01em; }
.docs-cat-h .icon { color: var(--accent); width: 20px; height: 20px; }
.docs-cat-h a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .docs-cat li a:hover { color: var(--accent); text-decoration: underline; } }
@media (max-width: 900px) { .docs-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .docs-cats { grid-template-columns: 1fr; } }

.docs-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: clamp(24px, 4vw, 56px); padding-block: 32px var(--y); align-items: start; }
.docs-nav { position: sticky; top: calc(var(--head-h) + 20px); max-height: calc(100dvh - var(--head-h) - 40px); overflow-y: auto; display: grid; gap: 16px; padding-inline-end: 8px; scrollbar-width: thin; }
.docs-nav nav { display: grid; gap: 2px; }
.docs-nav details summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer; list-style: none; font: 600 13.5px var(--font-ui); }
.docs-nav details summary::-webkit-details-marker { display: none; }
.docs-nav summary .icon { width: 14px; height: 14px; color: var(--ink-3); transition: transform 180ms var(--ease-out); }
.docs-nav details[open] summary .icon { transform: rotate(180deg); }
.docs-nav ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 10px; border-inline-start: 1px solid var(--line-strong); display: grid; }
.docs-nav ul a { display: block; padding: 6px 10px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-radius: 6px; }
.docs-nav ul a[aria-current='page'] { color: var(--ink); font-weight: 600; background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
@media (hover: hover) and (pointer: fine) { .docs-nav ul a:hover { color: var(--ink); background: var(--surface-2); } }
.docs-main { min-width: 0; max-width: 760px; }
.doc-title { font-size: clamp(38px, 5vw, 60px); margin-bottom: 14px; }
.docs-main .s-lede { margin-bottom: 28px; }
.doc-body { padding-top: 28px; border-top: 1px solid var(--line-strong); }
.doc-body h2 { margin-top: 1.8em; }
.doc-updated { margin-top: 40px; }
.toc { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 10px; font-size: 13.5px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; border-inline-start: 1px solid var(--line-strong); }
.toc a { display: block; padding: 5px 12px; color: var(--ink-3); text-decoration: none; margin-inline-start: -1px; border-inline-start: 2px solid transparent; }
.toc .l3 a { padding-inline-start: 24px; }
.toc a[aria-current='true'] { color: var(--ink); border-inline-start-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
@media (max-width: 1100px) { .docs-shell { grid-template-columns: 230px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 820px) { .docs-shell { grid-template-columns: 1fr; } .docs-nav { position: static; max-height: none; } .docs-nav nav { display: none; } .docs-search-sm .input { min-height: 44px; } }
.doc-layout-page { display: grid; grid-template-columns: minmax(0, 720px) 220px; gap: clamp(32px, 6vw, 96px); justify-content: space-between; padding-bottom: 24px; align-items: start; }
@media (max-width: 900px) { .doc-layout-page { grid-template-columns: 1fr; } .doc-layout-page .toc { display: none; } }

/* Community */
.com-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.com-art { border-radius: var(--r-xl); overflow: clip; background: #f3efe6; outline: 1px solid var(--line-strong); outline-offset: -1px; }
.com-art img { width: 100%; height: auto; }
@media (max-width: 860px) { .com-head { grid-template-columns: 1fr; } .com-art { max-width: 420px; } }
.com-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.com-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: none; transition: box-shadow 160ms var(--ease-out); }
.com-card > .icon:first-child { width: 26px; height: 26px; color: var(--accent); flex: none; }
.com-card > .icon:last-child { margin-inline-start: auto; color: var(--ink-3); flex: none; }
.com-card h3 { font: 600 17px var(--font-ui); } .com-card p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .com-card:hover { box-shadow: inset 0 0 0 1px var(--accent); } }
@media (max-width: 700px) { .com-cards { grid-template-columns: 1fr; } }
.com-empty { display: flex; gap: 14px; padding: 20px 22px; border-radius: var(--r-lg); background: var(--info-soft); }
.com-empty .icon { margin-top: 3px; flex: none; } .com-empty a { text-decoration: underline; }
.com-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .com-two { grid-template-columns: 1fr; } }
.events { list-style: none; margin: 0; padding: 0; display: grid; }
.events li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-block: 20px; border-top: 1px solid var(--line-strong); }
.ev-date { display: grid; justify-items: center; align-content: center; height: 64px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ev-date b { font: 400 26px/1 var(--font-display); } .ev-date span { font: 500 11px var(--font-mono); text-transform: uppercase; color: var(--accent); }
.events h3 { font: 600 17px var(--font-ui); } .events p { color: var(--ink-2); font-size: 14.5px; margin: 4px 0 6px; }

/* Roadmap */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: start; padding-bottom: var(--y); }
.board-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line-strong); font: 400 28px/1 var(--font-display); }
.board-h .s-mono { margin-inline-start: auto; }
.board-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
[data-status='building'] .board-dot { background: var(--accent); } [data-status='shipped'] .board-dot { background: var(--ok); } [data-status='planned'] .board-dot { background: var(--warn); }
.board-empty { color: var(--ink-3); font-size: 14.5px; padding: 8px 0; }
.req { display: grid; gap: 8px; padding: 16px 18px; margin-bottom: 10px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.req h3 { font: 600 15.5px/1.3 var(--font-ui); } .req p { color: var(--ink-2); font-size: 14px; }
.req-note { display: flex; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px !important; } .req-note .icon { margin-top: 2px; flex: none; }
.req-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 2px; }
.vote { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 500 13px var(--font-ui); text-decoration: none; transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 140ms var(--ease-out); }
.vote:active { transform: scale(.96); }
.vote .icon { width: 14px; height: 14px; }
.vote[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.vote[disabled] { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .vote:hover { border-color: var(--ink-3); color: var(--ink); } }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }

/* Status */
.status { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.status li { display: grid; grid-template-columns: 14px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.status li > div { display: grid; gap: 2px; } .status li span:not(.badge):not(.status-dot) { color: var(--ink-2); font-size: 14.5px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.is-bad .status-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

@media print { .s-head, .s-foot, .s-banner, .s-cta { display: none !important; } [data-rv] { opacity: 1 !important; transform: none !important; } }

/* Status badges on the public site: ink text on the tinted pill keeps AA contrast in both themes; the dot carries the colour. */
.site .badge-accent, .site .badge-ok, .site .badge-warn { color: var(--ink); }
.site .badge-accent::before { background: var(--accent); } .site .badge-ok::before { background: var(--ok); } .site .badge-warn::before { background: var(--warn); }