/* =============================================================
   Kimezu Website — extras (multi-page, docs, API reference)
   Loads AFTER website-style.css.
   ============================================================= */

/* ────── Unified photography filter ────── */
.unified-photo {
    filter: saturate(0.92) contrast(1.04);
}

/* ────── Page hero (smaller than cover) ────── */
.phero {
    position: relative;
    padding: 96px 0 72px;
    border-bottom: 1px solid var(--k-line);
    overflow: hidden;
    isolation: isolate;
}
.phero::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(48rem 30rem at 14% 28%, color-mix(in srgb, var(--k-accent) 16%, transparent) 0%, transparent 60%),
        radial-gradient(42rem 26rem at 86% 12%, color-mix(in srgb, var(--k-warn) 10%, transparent) 0%, transparent 60%);
}
.phero-grid {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 56px;
    align-items: end;
}
.phero .rn {
    font-family: var(--k-font-sans);
    font-weight: 300;
    font-size: 56px;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--k-ink-4);
}
.phero .left { display: flex; flex-direction: column; gap: 8px; }
.phero .kicker { color: var(--k-accent); }
.phero h1 {
    font-family: var(--k-font-sans);
    font-weight: 300;
    font-size: clamp(36px, 4.6vw, 62px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--k-ink);
    margin: 14px 0 0;
    text-wrap: balance;
    max-width: 16ch;
}
.phero h1 em { font-style: italic; font-weight: 300; color: var(--k-accent); }
.phero .right { display: flex; flex-direction: column; gap: 16px; }
.phero .right p {
    font: 400 17px/1.6 var(--k-font-sans);
    color: var(--k-ink-3);
    margin: 0;
    max-width: 52ch;
}
.phero .right .meta {
    display: flex; gap: 28px;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--k-line);
}
.phero .right .meta .item .lab {
    font: 500 10.5px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.phero .right .meta .item .v {
    font: 400 17px/1.2 var(--k-font-sans);
    color: var(--k-ink);
    letter-spacing: -0.01em;
}

/* Slim page hero variant — no Roman numeral */
.phero-slim {
    padding: 80px 0 60px;
}
.phero-slim .phero-grid { grid-template-columns: 1fr 1fr; }

/* ────── Multi-page nav active class ────── */
.nav-a.is-page { color: var(--k-ink); }
.nav-a.is-page::after {
    content: "";
    display: inline-block;
    margin-left: 8px;
    width: 4px; height: 4px; border-radius: 999px;
    background: var(--k-accent);
    vertical-align: middle;
}

/* ────── BREADCRUMB ────── */
.breadcrumb {
    padding: 18px 0;
    border-bottom: 1px solid var(--k-line);
    font: 500 12px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.05em;
}
.breadcrumb a { color: var(--k-ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--k-ink); }
.breadcrumb .sep { margin: 0 10px; color: var(--k-ink-4); }
.breadcrumb .here { color: var(--k-ink); }

/* ────── PROSE (long-form) ────── */
.prose {
    max-width: 68ch;
}
.prose h2 {
    font-family: var(--k-font-sans);
    font-weight: 300;
    font-size: 36px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--k-ink);
    margin: 64px 0 18px;
    text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-family: var(--k-font-sans);
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -0.012em;
    color: var(--k-ink);
    margin: 48px 0 14px;
}
.prose h4 {
    font-family: var(--k-font-sans);
    font-weight: 500;
    font-size: 16px;
    color: var(--k-ink);
    margin: 28px 0 10px;
}
.prose p {
    font: 400 16px/1.7 var(--k-font-sans);
    color: var(--k-ink-2);
    margin: 0 0 16px;
}
.prose p.lede { font-size: 18.5px; color: var(--k-ink-3); margin-bottom: 24px; }
.prose ul, .prose ol {
    margin: 0 0 18px;
    padding-left: 22px;
    font: 400 16px/1.7 var(--k-font-sans);
    color: var(--k-ink-2);
}
.prose ul li, .prose ol li { margin: 6px 0; }
.prose ul li::marker { color: var(--k-accent); }
.prose ol li::marker { color: var(--k-ink-4); font-family: var(--k-font-mono); font-size: 14px; }
.prose a {
    color: var(--k-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--k-line-2);
    transition: text-decoration-color var(--k-dur-base) var(--k-ease);
}
.prose a:hover { text-decoration-color: var(--k-accent); }
.prose strong { font-weight: 500; color: var(--k-ink); }
.prose code, .mono-inline {
    font-family: var(--k-font-mono);
    font-size: 13.5px;
    background: var(--k-accent-2-soft);
    border: 1px solid color-mix(in srgb, var(--k-accent-2) 22%, var(--k-line));
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--k-accent-2-ink);
}
[data-theme="dark"] .prose code,
[data-theme="dark"] .mono-inline { color: var(--k-accent-2); }

/* ────── CALLOUT (info / warn / note) ────── */
.callout {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid var(--k-line);
    border-left: 3px solid var(--k-accent);
    background: var(--k-surface-sunk);
    border-radius: var(--k-r-sm);
    margin: 26px 0;
}
.callout .ic {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--k-accent-soft);
    color: var(--k-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--k-font-mono);
}
.callout .body { font: 400 15px/1.6 var(--k-font-sans); color: var(--k-ink-2); }
.callout .body strong { font-weight: 500; color: var(--k-ink); }
.callout.warn { border-left-color: var(--k-warn); }
.callout.warn .ic { background: var(--k-warn-soft); color: var(--k-warn); }
.callout.note { border-left-color: var(--k-trust); }
.callout.note .ic { background: var(--k-trust-soft); color: var(--k-trust); }

/* ────── CODE BLOCK ────── */
.code-block {
    background: #14110D;
    border: 1px solid #2A241E;
    border-radius: var(--k-r-sm);
    overflow: hidden;
    margin: 22px 0;
    box-shadow: var(--k-sh-2);
}
.code-block .head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: #1A1611;
    border-bottom: 1px solid #2A241E;
    font: 500 11.5px/1 var(--k-font-mono);
    color: #8A8278;
    letter-spacing: 0.04em;
}
.code-block .head .tag { color: var(--k-accent); }
.code-block .head .copy {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #3A342B;
    border-radius: 999px;
    color: #B5AC9A;
    cursor: pointer;
    font: 500 10.5px/1 var(--k-font-mono);
    letter-spacing: 0.04em;
    transition: all var(--k-dur-base) var(--k-ease);
}
.code-block .head .copy:hover { color: #fff; border-color: #5A524A; }
.code-block pre {
    margin: 0;
    padding: 18px 20px;
    font: 400 13px/1.65 var(--k-font-mono);
    color: #E5DECE;
    overflow-x: auto;
    white-space: pre;
}
.code-block .ln { color: #4D463C; user-select: none; padding-right: 18px; }
.code-block .kw { color: #C97A2B; }
.code-block .st { color: #5DD4C8; }
.code-block .nm { color: #8B9BD0; }
.code-block .cm { color: #6E6557; font-style: italic; }
.code-block .pn { color: #B5AC9A; }

/* Light variant code block — used inside cards / inline */
.code-light {
    background: var(--k-surface-sunk);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-sm);
    overflow: hidden;
    margin: 18px 0;
}
.code-light pre {
    margin: 0;
    padding: 18px 20px;
    font: 400 13px/1.65 var(--k-font-mono);
    color: var(--k-ink-2);
    overflow-x: auto;
}
.code-light .kw { color: var(--k-warn); }
.code-light .st { color: var(--k-accent); }
.code-light .nm { color: var(--k-trust); }
.code-light .cm { color: var(--k-ink-4); font-style: italic; }

/* ────── API ENDPOINT BLOCK ────── */
.endpoint {
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-md);
    overflow: hidden;
    margin: 32px 0;
}
.endpoint-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: var(--k-bg-alt);
    border-bottom: 1px solid var(--k-line);
}
.endpoint-bar .method {
    padding: 5px 10px;
    border-radius: var(--k-r-xs);
    font: 600 11px/1 var(--k-font-mono);
    letter-spacing: 0.08em;
    color: #fff;
}
.method.get    { background: var(--k-http-get); }
.method.post   { background: var(--k-http-post); }
.method.put    { background: var(--k-http-put); }
.method.del    { background: var(--k-http-delete); }
.method.patch  { background: #9333EA; }
.endpoint-bar .path {
    font: 500 14px/1 var(--k-font-mono);
    color: var(--k-ink);
    letter-spacing: 0;
}
.endpoint-bar .path .param { color: var(--k-accent); }
.endpoint-bar .note {
    margin-left: auto;
    font: 400 12px/1 var(--k-font-sans);
    color: var(--k-ink-3);
}
.endpoint-body { padding: 22px 22px 6px; }
.endpoint-body p { font: 400 15px/1.6 var(--k-font-sans); color: var(--k-ink-2); margin: 0 0 16px; }
.endpoint-body h5 {
    font: 600 11px/1 var(--k-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--k-ink-4);
    margin: 22px 0 12px;
}
.endpoint-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.endpoint-body table th,
.endpoint-body table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--k-line);
    font: 400 13.5px/1.5 var(--k-font-sans);
    color: var(--k-ink-2);
    vertical-align: top;
}
.endpoint-body table th {
    font: 600 11px/1 var(--k-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--k-ink-4);
    background: var(--k-bg-alt);
}
.endpoint-body table td:first-child {
    font-family: var(--k-font-mono);
    font-size: 13px;
    color: var(--k-ink);
    width: 22%;
}
.endpoint-body table td:nth-child(2) {
    font-family: var(--k-font-mono);
    font-size: 12px;
    color: var(--k-ink-4);
    width: 14%;
}
.endpoint-body table td.req::after {
    content: "required";
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--k-danger-soft);
    color: var(--k-danger);
    border-radius: 999px;
    font: 500 10px/1.4 var(--k-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ────── DOCS LAYOUT (sidebar + content) ────── */
.docs-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
    padding: 56px 0 96px;
}
.docs-shell.with-toc {
    grid-template-columns: 260px 1fr 220px;
}
.docs-side {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 16px;
}
.docs-side .group { margin-bottom: 28px; }
.docs-side h5 {
    font: 600 11px/1 var(--k-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--k-ink);
    margin: 0 0 10px;
}
.docs-side a {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0 7px 12px;
    border-left: 1px solid var(--k-line);
    font: 400 14px/1.45 var(--k-font-sans);
    color: var(--k-ink-3);
    text-decoration: none;
    transition: color var(--k-dur-base) var(--k-ease), border-color var(--k-dur-base) var(--k-ease);
}
.docs-side a:hover { color: var(--k-ink); }
.docs-side a.is-active {
    color: var(--k-ink);
    border-left-color: var(--k-accent);
    font-weight: 500;
}
.docs-side a .n { font: 500 11px/1 var(--k-font-mono); color: var(--k-ink-4); flex-shrink: 0; }

.docs-toc {
    position: sticky;
    top: 88px;
    align-self: start;
    padding-left: 16px;
    border-left: 1px solid var(--k-line);
}
.docs-toc .lab {
    font: 600 10.5px/1 var(--k-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--k-ink-4);
    margin-bottom: 14px;
}
.docs-toc a {
    display: block;
    padding: 5px 0;
    font: 400 13px/1.45 var(--k-font-sans);
    color: var(--k-ink-3);
    text-decoration: none;
}
.docs-toc a:hover { color: var(--k-ink); }
.docs-toc a.depth-3 { padding-left: 12px; font-size: 12.5px; color: var(--k-ink-4); }

.docs-main h1 {
    font-family: var(--k-font-sans);
    font-weight: 300;
    font-size: clamp(38px, 4.6vw, 56px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--k-ink);
    margin: 0 0 14px;
    text-wrap: balance;
}
.docs-main .lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--k-ink-3);
    margin: 0 0 38px;
    max-width: 58ch;
}
.docs-main .lab-row {
    display: flex; gap: 18px; align-items: center;
    margin-bottom: 18px;
    font: 500 11px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.docs-main .lab-row .rule { flex: 1; height: 1px; background: var(--k-line); max-width: 120px; }

/* docs index — card grid for the hub */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 8px;
}
.doc-card {
    display: block;
    padding: 28px 26px;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--k-dur-base) var(--k-ease);
}
.doc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--k-sh-3);
    border-color: color-mix(in srgb, var(--k-accent) 38%, var(--k-line));
}
.doc-card .ic {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--k-accent-soft);
    color: var(--k-accent);
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 13px/1 var(--k-font-mono);
    margin-bottom: 14px;
}
.doc-card h3 {
    font-family: var(--k-font-sans);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--k-ink);
    margin: 0 0 8px;
}
.doc-card p {
    font: 400 14px/1.55 var(--k-font-sans);
    color: var(--k-ink-3);
    margin: 0 0 12px;
}
.doc-card .arrow {
    font: 500 12px/1 var(--k-font-mono);
    color: var(--k-accent);
}
.doc-card .arrow::after { content: " →"; }

/* ────── BIG STAT ROWS (for security/about) ────── */
.stat-rows {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--k-line);
    margin-top: 24px;
}
.stat-rows .r {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--k-line);
    align-items: baseline;
}
.stat-rows .r .n { font: 500 11.5px/1 var(--k-font-mono); color: var(--k-ink-4); letter-spacing: 0.06em; }
.stat-rows .r .l {
    font-family: var(--k-font-sans);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.015em;
    color: var(--k-ink);
}
.stat-rows .r .l small { display: block; font-weight: 400; font-size: 14px; color: var(--k-ink-3); margin-top: 6px; max-width: 60ch; line-height: 1.55; }
.stat-rows .r .v {
    font: 500 13px/1 var(--k-font-mono);
    color: var(--k-accent);
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--k-accent) 30%, var(--k-line));
    border-radius: 999px;
    background: var(--k-accent-soft);
    white-space: nowrap;
}

/* ────── PAGE-NEXT / Previous–Next pager ────── */
.pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--k-line);
}
.pager a {
    display: flex; flex-direction: column; gap: 4px;
    padding: 20px 22px;
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-md);
    text-decoration: none;
    transition: all var(--k-dur-base) var(--k-ease);
    background: var(--k-surface);
}
.pager a:hover { border-color: var(--k-ink-3); transform: translateY(-2px); }
.pager a .lab { font: 500 11px/1 var(--k-font-mono); color: var(--k-ink-4); letter-spacing: 0.08em; text-transform: uppercase; }
.pager a .t { font: 500 16px/1.3 var(--k-font-sans); color: var(--k-ink); letter-spacing: -0.005em; }
.pager a.next { text-align: right; }

/* ────── PAGE TOC LINKS (used inside about/security pages) ────── */
.toc-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--k-line);
    border-bottom: 1px solid var(--k-line);
}
.toc-list a {
    display: flex; flex-direction: column; gap: 6px;
    padding: 24px 28px 24px 0;
    border-right: 1px solid var(--k-line);
    text-decoration: none;
    color: inherit;
    transition: background var(--k-dur-base) var(--k-ease);
}
.toc-list a:last-child { border-right: 0; }
.toc-list a:hover { background: var(--k-bg-alt); }
.toc-list a .n { font: 500 11.5px/1 var(--k-font-mono); color: var(--k-ink-4); letter-spacing: 0.08em; }
.toc-list a .t { font: 400 16px/1.4 var(--k-font-sans); color: var(--k-ink); letter-spacing: -0.005em; }
.toc-list a .d { font: 400 12.5px/1.4 var(--k-font-sans); color: var(--k-ink-3); margin-top: 4px; }

/* ────── KV pair list (used on About) ────── */
.kv {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--k-line);
}
.kv .k { font: 500 11.5px/1 var(--k-font-mono); color: var(--k-ink-4); letter-spacing: 0.06em; padding-top: 4px; text-transform: uppercase; }
.kv .v { font: 400 15.5px/1.55 var(--k-font-sans); color: var(--k-ink-2); }
.kv .v strong { font-weight: 500; color: var(--k-ink); }

/* ────── Tenant detail board (Tenants page-style) ────── */
.tenant-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.tenant-detail .panel {
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
    padding: 24px;
}
.tenant-detail .panel h4 {
    font: 500 11px/1 var(--k-font-sans);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--k-ink-4);
    margin: 0 0 14px;
}

/* ────── Mobile ────── */
@media (max-width: 1080px) {
    .docs-shell, .docs-shell.with-toc {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .docs-side, .docs-toc {
        position: static;
        max-height: none;
        border-left: 0;
        padding-left: 0;
    }
    .docs-side {
        border-bottom: 1px solid var(--k-line);
        padding-bottom: 24px;
    }
    .phero-grid { grid-template-columns: 1fr; gap: 28px; }
    .toc-list { grid-template-columns: 1fr; }
    .toc-list a { border-right: 0; border-bottom: 1px solid var(--k-line); }
    .doc-grid, .tenant-detail { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .stat-rows .r { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
    .pager { grid-template-columns: 1fr; }
    .endpoint-bar { flex-wrap: wrap; }
    .kv { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   COVER v2 — typographic + spec column + panoramic photo strip
   Replaces the magazine-style left/right split cover.
   ============================================================ */
.cover2 {
    position: relative;
    border-bottom: 1px solid var(--k-line);
    overflow: hidden;
    isolation: isolate;
}
.cover2::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60rem 38rem at 18% 18%, color-mix(in srgb, var(--k-accent) 15%, transparent) 0%, transparent 60%),
        radial-gradient(50rem 32rem at 90% 8%, color-mix(in srgb, var(--k-warn) 9%, transparent) 0%, transparent 60%);
}
.cover2-top {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 0 16px;
    border-bottom: 1px solid var(--k-line);
    margin-bottom: 80px;
}
.cover2-top .who {
    font: 500 11.5px/1 var(--k-font-mono);
    color: var(--k-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
}
.cover2-top .who::before {
    content: "";
    width: 8px; height: 8px;
    background: var(--k-accent);
}
.cover2-top .rule { flex: 1; height: 1px; background: var(--k-line); }
.cover2-top .spec {
    font: 400 11.5px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.04em;
}
.cover2-stage {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 64px;
    align-items: start;
    padding-bottom: 56px;
}
.cover2-head {
    font-family: var(--k-font-sans);
    font-weight: 200;
    font-size: clamp(56px, 8.2vw, 124px);
    line-height: 0.92;
    letter-spacing: -0.052em;
    color: var(--k-ink);
    margin: 0;
    text-wrap: balance;
    max-width: 14ch;
}
.cover2-head .ital {
    font-style: italic;
    font-weight: 300;
    color: var(--k-accent);
}
.cover2-head .quiet { color: var(--k-ink-4); font-weight: 200; }
.cover2-spec {
    border-left: 1px solid var(--k-line);
    padding-left: 24px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-self: stretch;
}
.cover2-spec .row { display: flex; flex-direction: column; gap: 5px; }
.cover2-spec .row .lab {
    font: 500 10px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.cover2-spec .row .v {
    font: 400 14px/1.3 var(--k-font-mono);
    color: var(--k-ink-2);
    letter-spacing: 0.02em;
}
.cover2-spec .pulse {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--k-line);
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 11px/1 var(--k-font-mono);
    color: var(--k-ink-3);
    letter-spacing: 0.04em;
}
.cover2-spec .pulse::before {
    content: "";
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--k-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-success) 22%, transparent);
}
.cover2-lower {
    display: grid;
    grid-template-columns: minmax(0, 560px) 1fr;
    gap: 64px;
    align-items: end;
    padding-bottom: 56px;
}
.cover2-lede {
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--k-ink-3);
}
.cover2-lede em {
    font-style: normal;
    color: var(--k-ink);
    font-weight: 500;
    background: linear-gradient(to top, color-mix(in srgb, var(--k-accent) 22%, transparent) 0 32%, transparent 32%);
    padding: 0 1px;
}
.cover2-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.cover2-cta .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cover2-cta .note {
    font: 400 12.5px/1.4 var(--k-font-sans);
    color: var(--k-ink-4);
    text-align: right;
    max-width: 30ch;
}
.cover2-strip {
    position: relative;
    height: 240px;
    border-top: 1px solid var(--k-line);
    overflow: hidden;
    background: var(--k-bg-alt);
}
.cover2-strip .img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
}
.cover2-strip::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(31,27,22,0.36) 0%, rgba(31,27,22,0.06) 50%, rgba(31,27,22,0.42) 100%);
}
.cover2-strip .caption {
    position: absolute;
    left: 40px; bottom: 18px;
    color: rgba(255,255,255,0.9);
    font: 500 11px/1.5 var(--k-font-mono);
    letter-spacing: 0.04em;
    z-index: 2;
    max-width: 60%;
}
.cover2-strip .meter {
    position: absolute;
    right: 40px; top: 18px;
    display: flex; gap: 10px;
    z-index: 2;
}
.cover2-strip .meter span {
    padding: 6px 12px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    color: #fff;
    font: 500 10.5px/1 var(--k-font-mono);
    letter-spacing: 0.06em;
}
@media (max-width: 980px) {
    .cover2-stage { grid-template-columns: 1fr; gap: 28px; }
    .cover2-spec { border-left: 0; border-top: 1px solid var(--k-line); padding-left: 0; padding-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 20px 32px; }
    .cover2-spec .pulse { flex-basis: 100%; margin-top: 0; padding-top: 18px; }
    .cover2-lower { grid-template-columns: 1fr; gap: 24px; }
    .cover2-cta { align-items: flex-start; }
    .cover2-cta .row { justify-content: flex-start; }
    .cover2-cta .note { text-align: left; }
    .cover2-strip { height: 180px; }
}

/* ────── INDUSTRY NOTE — prose footer, not stat row ────── */
.industry-note {
    display: flex;
    gap: 22px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--k-line);
    align-items: baseline;
}
.industry-note .figure {
    flex-shrink: 0;
    font-family: var(--k-font-sans);
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--k-ink);
    width: 96px;
}
.industry-note .figure small {
    display: block;
    font: 500 10.5px/1.3 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 6px;
}
.industry-note .prose {
    flex: 1;
    font: 400 14.5px/1.6 var(--k-font-sans);
    color: var(--k-ink-3);
    margin: 0;
    max-width: 48ch;
}
.industry-note .prose b { font-weight: 500; color: var(--k-ink-2); }

@media (max-width: 720px) {
    .industry-note { flex-direction: column; gap: 12px; }
    .industry-note .figure { width: auto; }
}

/* =============================================================
   .section-head — plain section heading (no Roman numeral column).
   Drop-in replacement for .chap on every page that isn't the homepage,
   and on homepage sections between I and VIII.
   ============================================================= */
.section-head {
    margin-bottom: 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--k-line);
    max-width: 60ch;
}
.section-head .eyebrow {
    display: inline-block;
    margin-bottom: 14px;
}
.section-head h2 {
    font-family: var(--k-font-sans);
    font-weight: 300;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--k-ink);
    margin: 0;
    text-wrap: balance;
    max-width: 26ch;
}
.section-head h2 em { font-style: italic; font-weight: 300; color: var(--k-accent); }
.section-head .sub {
    margin-top: 14px;
    font: 400 16.5px/1.6 var(--k-font-sans);
    color: var(--k-ink-3);
    max-width: 60ch;
}

/* =============================================================
   SECTION ARCHETYPES — three layouts to break the chap+grid loop.
   Use each one deliberately; never two of the same archetype back to back.
   ============================================================= */

/* 1. .section-prose — asymmetric reading column.
   Body prose left (~60ch), optional pull-quote / marginalia right.
   For "why this exists" and other patient prose moments. */
.section-prose {
    display: grid;
    grid-template-columns: minmax(0, 60ch) 1fr;
    gap: 64px;
    padding: 56px 0;
    align-items: start;
}
.section-prose__body {
    font: 400 17px/1.7 var(--k-font-sans);
    color: var(--k-ink-2);
}
.section-prose__body > * + * { margin-top: 18px; }
.section-prose__body h2 {
    font: 300 32px/1.18 var(--k-font-sans);
    letter-spacing: -0.01em;
    color: var(--k-ink);
    margin: 0 0 18px;
    max-width: 26ch;
}
.section-prose__body p { margin: 0; }
.section-prose__body p b { font-weight: 500; color: var(--k-ink); }
.section-prose__aside {
    position: sticky;
    top: 96px;
    align-self: start;
    padding-left: 24px;
    border-left: 2px solid var(--k-accent-2);
    font: 400 italic 20px/1.45 var(--k-font-sans);
    color: var(--k-ink-2);
    max-width: 28ch;
}
.section-prose__aside cite {
    display: block;
    margin-top: 10px;
    font: 500 11px/1.4 var(--k-font-mono);
    color: var(--k-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-style: normal;
}
@media (max-width: 920px) {
    .section-prose { grid-template-columns: 1fr; gap: 32px; }
    .section-prose__aside { position: static; max-width: none; }
}

/* 2. .spec-sheet — fixed 12-col technical reference grid.
   Mono labels, body values, hairline rules. For protocol / actor / parameter lists. */
.spec-sheet {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    row-gap: 0;
    padding: 40px 0;
}
.spec-sheet__head {
    grid-column: 1 / -1;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--k-ink);
    margin-bottom: 8px;
}
.spec-sheet__head h2 {
    font: 300 28px/1.2 var(--k-font-sans);
    letter-spacing: -0.01em;
    color: var(--k-ink);
    margin: 0;
}
.spec-sheet__head .kicker {
    font: 500 11px/1.2 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.spec-sheet__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    column-gap: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--k-line);
    align-items: baseline;
}
.spec-sheet__row:first-of-type { border-top: none; }
.spec-sheet__label {
    grid-column: 1 / span 3;
    font: 500 11px/1.4 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.spec-sheet__value {
    grid-column: 4 / span 9;
    font: 400 15px/1.55 var(--k-font-sans);
    color: var(--k-ink-2);
}
.spec-sheet__value h3 {
    font: 500 16px/1.3 var(--k-font-sans);
    color: var(--k-ink);
    margin: 0 0 4px;
}
.spec-sheet__value p { margin: 0; }
.spec-sheet__value p + p { margin-top: 8px; }
@media (max-width: 720px) {
    .spec-sheet__row { display: block; }
    .spec-sheet__label { display: block; margin-bottom: 6px; }
}

/* 3. .photo-essay — full-bleed image, mono caption, single paragraph below.
   Cap at two per page; never the dominant rhythm. */
.photo-essay {
    margin: 64px calc(50% - 50vw);
}
/* When a photo-essay follows a section directly, the section's border-bottom
   line and the photo-essay's top margin together read as a "gap with a stray
   line". Collapse the gap so the photo sits flush against the divider. */
.section + .photo-essay {
    margin-top: 0;
}
.photo-essay__frame {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: var(--k-bg-alt);
    overflow: hidden;
    position: relative;
}
.photo-essay__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-essay__inner {
    max-width: 1080px;
    margin: 18px auto 0;
    padding: 0 24px;
}
.photo-essay__caption {
    font: 500 11px/1.4 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.photo-essay__lede {
    font: 400 17px/1.65 var(--k-font-sans);
    color: var(--k-ink-2);
    max-width: 60ch;
    margin: 0;
}
.photo-essay__lede b { font-weight: 500; color: var(--k-ink); }
@media (max-width: 720px) {
    .photo-essay__frame { aspect-ratio: 4 / 3; }
}

/* =============================================================
   .foot-ecosystem — Atypisch ecosystem strip above the © line.
   Lives inside .foot-base which is a flex-wrap row.
   ============================================================= */
.foot-ecosystem {
    flex-basis: 100%;
    order: -1;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--k-line);
    font: 500 11.5px/1.4 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.04em;
}
.foot-ecosystem a {
    color: var(--k-ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--k-line-2);
}
.foot-ecosystem a:hover {
    color: var(--k-ink);
    text-decoration-color: var(--k-ink-3);
}

/* =============================================================
   .eyebrow.accent-2 — teal variant of the accent eyebrow.
   Used for trust-register moments (Security pages, audit/canary).
   ============================================================= */
.eyebrow.accent-2 { color: var(--k-accent-2); }

/* =============================================================
   .mono-2 — mono inline span tinted teal (Platform code-spans).
   ============================================================= */
.mono-2 {
    font: 500 13.5px/1.3 var(--k-font-mono);
    color: var(--k-accent-2);
    background: var(--k-accent-2-soft);
    padding: 1px 6px;
    border-radius: 4px;
}

/* =============================================================
   .pricing-managed — wide "Atypisch Managed" tier card on Pricing.
   Sits beneath the 5-card pricing-head as a single full-width row.
   ============================================================= */
.pricing-managed {
    margin-top: 32px;
    padding: 32px 36px;
    border: 1px solid var(--k-line-2);
    border-radius: var(--k-r-lg);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--k-accent-2-soft) 60%, var(--k-surface)) 0%,
        var(--k-surface) 70%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
    align-items: center;
}
.pricing-managed .pm-body { display: flex; flex-direction: column; gap: 10px; }
.pricing-managed .pm-eyebrow {
    font: 500 11px/1.2 var(--k-font-mono);
    color: var(--k-accent-2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pricing-managed h3 {
    font: 300 26px/1.18 var(--k-font-sans);
    color: var(--k-ink);
    margin: 0;
    letter-spacing: -0.01em;
    max-width: 28ch;
}
.pricing-managed p {
    font: 400 15px/1.55 var(--k-font-sans);
    color: var(--k-ink-3);
    margin: 0;
    max-width: 56ch;
}
.pricing-managed p b { font-weight: 500; color: var(--k-ink); }
.pricing-managed .pm-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pricing-managed .pm-price {
    font: 400 22px/1.1 var(--k-font-sans);
    color: var(--k-ink);
}
.pricing-managed .pm-price small {
    font: 500 11px/1.2 var(--k-font-mono);
    color: var(--k-ink-4);
    display: block;
    margin-top: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 820px) {
    .pricing-managed { grid-template-columns: 1fr; }
}

/* =============================================================
   .showcase-strip — "Built on Kimezu" — six tenant cards in a row.
   3 cols desktop, 2 cols tablet, 1 col mobile.
   ============================================================= */
.showcase-strip {
    padding: 56px 0 72px;
    border-bottom: 1px solid var(--k-line);
}
.showcase-strip__head {
    max-width: 60ch;
    margin-bottom: 36px;
}
.showcase-strip__head .eyebrow {
    font: 500 11px/1.2 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
}
.showcase-strip__head h2 {
    font: 300 26px/1.2 var(--k-font-sans);
    color: var(--k-ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.showcase-strip__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.showcase-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.showcase-card__frame {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--k-line-2);
    border-radius: var(--k-r-md);
    overflow: hidden;
    background: var(--k-surface);
}
.showcase-card__frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.showcase-card__meta {
    display: flex; flex-direction: column; gap: 2px;
}
.showcase-card__name {
    font: 500 15px/1.2 var(--k-font-sans);
    color: var(--k-ink);
}
.showcase-card__domain {
    font: 400 11.5px/1.2 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.04em;
}
/* Bordered placeholder for screenshots not yet captured. */
.showcase-frame {
    aspect-ratio: 16 / 10;
    border: 1px dashed var(--k-line-2);
    border-radius: var(--k-r-md);
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--k-bg-alt) 92%, var(--k-ink) 8%) 0 20px,
            var(--k-bg-alt) 20px 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--k-ink-4);
    font: 500 12px/1.3 var(--k-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 24px;
}
@media (max-width: 920px) {
    .showcase-strip__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .showcase-strip__grid { grid-template-columns: 1fr; }
}

/* ────── HERO STRIP — split (photo left + USPs right, ~2× tall) ────── */
.cover2-strip--split {
    position: relative;
    height: auto;
    min-height: 480px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    overflow: hidden;
    background: var(--k-bg-alt);
    border-top: 1px solid var(--k-line);
}
.cover2-strip--split::after { content: none; }
.cover2-strip--split .cover2-strip__photo {
    position: relative;
    min-height: 480px;
    overflow: hidden;
}
.cover2-strip--split .cover2-strip__photo .img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.cover2-strip--split .cover2-strip__photo .caption {
    position: absolute;
    left: 40px; bottom: 18px;
    color: rgba(255,255,255,0.92);
    font: 500 11px/1.5 var(--k-font-mono);
    letter-spacing: 0.04em;
    z-index: 2;
    max-width: 80%;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.cover2-strip--split .cover2-strip__photo .todo-photo {
    position: absolute; inset: 0;
    border: 0;
    aspect-ratio: auto;
}
.cover2-strip--split .cover2-strip__usps {
    padding: 56px 56px 56px 48px;
    background: var(--k-bg);
    border-left: 1px solid var(--k-line);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.hero-usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.cover2-strip__usps > .eyebrow {
    display: block;
    font: 500 10.5px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero-usps li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--k-line);
}
.hero-usps li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-usps .n {
    font: 500 10.5px/1.5 var(--k-font-mono);
    color: var(--k-accent);
    letter-spacing: 0.04em;
    transition: color 0.4s ease;
}
.hero-usps .t {
    font: 400 15.5px/1.5 var(--k-font-sans);
    color: var(--k-ink-2);
}
.hero-usps .t strong {
    display: block;
    font-weight: 500;
    color: var(--k-ink);
    margin-bottom: 4px;
}
.hero-usps li {
    transition: opacity 0.4s ease;
    opacity: 0.55;
    cursor: pointer;
}
.hero-usps li.is-active {
    opacity: 1;
}
.hero-usps li.is-active .n {
    color: var(--k-accent);
}

/* ────── Hero photo (cover2-strip photo column) ────── */
.hero-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: var(--k-bg-alt);
}
.hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.hero-photo figcaption {
    position: absolute;
    left: 40px;
    bottom: 22px;
    z-index: 2;
    color: rgba(255,255,255,0.94);
    font: 500 11px/1.5 var(--k-font-mono);
    letter-spacing: 0.04em;
    max-width: 80%;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
@media (max-width: 980px) {
    .cover2-strip--split {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .cover2-strip--split .cover2-strip__photo { min-height: 320px; }
    .cover2-strip--split .cover2-strip__usps {
        padding: 36px 24px;
        border-left: 0;
        border-top: 1px solid var(--k-line);
    }
}

/* ────── Inline SVG schematic (security diagrams) ────── */
.schematic {
    margin: 40px 0 0;
    padding: 24px;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: 10px;
}
.schematic svg {
    width: 100%;
    height: auto;
    display: block;
}
.schematic figcaption {
    margin-top: 14px;
    font: 500 11.5px/1.5 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.02em;
    text-align: center;
}

/* =============================================================
   PLATFORM page — section grids (model, actors, payments, scope)
   These structural rules existed only in markup; without them
   /platform collapsed to plain stacked text. Style mirrors the
   rest of the marketing surface: warm surface cards, hairline
   borders, mono labels, generous whitespace.
   ============================================================= */

/* 01 — model-grid (Identity / Access / Ownership / Payments) */
.model-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.model-cell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
}
.model-cell .row {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 11.5px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.06em;
}
.model-cell .row > span:first-child {
    color: var(--k-ink-4);
}
.model-cell .pill {
    padding: 4px 10px;
    background: var(--k-accent-soft);
    color: var(--k-accent-ink);
    border-radius: 999px;
    font: 500 11px/1.4 var(--k-font-mono);
    letter-spacing: 0.03em;
}
.model-cell h3 {
    margin: 0;
    font: 400 19px/1.3 var(--k-font-sans);
    color: var(--k-ink);
    letter-spacing: -0.015em;
}
.model-cell p {
    margin: 0;
    font: 400 14.5px/1.6 var(--k-font-sans);
    color: var(--k-ink-3);
}
.model-cell .figure {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--k-line);
    font: 400 12px/1.5 var(--k-font-mono);
    color: var(--k-ink-3);
    word-break: break-word;
}
.model-cell .figure .k { color: var(--k-accent); }

/* 02 — actors-grid (User / Group / Agent) */
.actors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.actor {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 26px;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
}
.actor .head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.actor .glyph {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--k-accent-soft);
    color: var(--k-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 500 16px/1 var(--k-font-mono);
}
.actor.group .glyph { background: var(--k-trust-soft); color: var(--k-trust); }
.actor.agent .glyph { background: var(--k-accent-2-soft); color: var(--k-accent-2-ink); }
.actor .head h3 {
    margin: 0 0 4px;
    font: 500 18px/1.2 var(--k-font-sans);
    color: var(--k-ink);
}
.actor .who-meta {
    font: 400 12.5px/1.4 var(--k-font-sans);
    color: var(--k-ink-3);
    display: flex;
    align-items: center;
}
.actor .who-meta .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--k-accent);
}
.actor.group .who-meta .dot { background: var(--k-trust); }
.actor.agent .who-meta .dot { background: var(--k-accent-2); }
.actor > p {
    margin: 0;
    font: 400 14.5px/1.6 var(--k-font-sans);
    color: var(--k-ink-3);
}
.actor pre {
    margin: 0;
    padding: 16px 18px;
    background: var(--k-surface-sunk);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-sm);
    font: 400 12.5px/1.6 var(--k-font-mono);
    color: var(--k-ink-2);
    white-space: pre;
    overflow-x: auto;
}
.actor pre .k { color: var(--k-accent); }
.actor pre .v { color: var(--k-ink); }
.actor.group pre .k { color: var(--k-trust); }
.actor.agent pre .k { color: var(--k-accent-2); }

/* 04 — pay-grid + pay-flow (Payments section) */
.pay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 40px;
    align-items: start;
}
.pay-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.pay-fact {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 18px;
    align-items: start;
}
.pay-fact .n {
    font: 500 13px/1.4 var(--k-font-mono);
    color: var(--k-accent);
    letter-spacing: 0.04em;
}
.pay-fact h4 {
    margin: 0 0 6px;
    font: 500 17px/1.3 var(--k-font-sans);
    color: var(--k-ink);
    letter-spacing: -0.01em;
}
.pay-fact p {
    margin: 0;
    font: 400 14.5px/1.6 var(--k-font-sans);
    color: var(--k-ink-3);
    max-width: 50ch;
}
.pay-fact p b { font-weight: 500; color: var(--k-ink-2); }

.pay-flow {
    display: flex;
    flex-direction: column;
    padding: 24px 26px;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
}
.pay-flow .head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--k-line);
    font: 500 12px/1.4 var(--k-font-mono);
    color: var(--k-ink-3);
    letter-spacing: 0.03em;
}
.pay-flow .head .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--k-accent);
}
.pay-flow .step {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed var(--k-line);
}
.pay-flow .step:last-of-type { border-bottom: 0; }
.pay-flow .step .ix {
    font: 500 11px/1 var(--k-font-mono);
    color: var(--k-ink-4);
    letter-spacing: 0.04em;
}
.pay-flow .step .who {
    font: 500 14px/1.4 var(--k-font-sans);
    color: var(--k-ink);
}
.pay-flow .step .who small {
    display: block;
    margin-top: 2px;
    font: 400 12px/1.4 var(--k-font-sans);
    color: var(--k-ink-3);
}
.pay-flow .step .tag {
    font: 500 11px/1 var(--k-font-mono);
    color: var(--k-ink-3);
    padding: 6px 10px;
    background: var(--k-bg-alt);
    border-radius: 999px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.pay-flow .step.accent .tag {
    color: var(--k-accent-ink);
    background: var(--k-accent-soft);
}
.pay-foot {
    padding-top: 14px;
    margin-top: 8px;
    border-top: 1px solid var(--k-line);
    font: 400 13px/1.55 var(--k-font-sans);
    color: var(--k-ink-3);
}
.pay-foot b { font-weight: 500; color: var(--k-ink-2); }

/* 05 — scope-grid (centralised vs per-tenant) */
.scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 40px;
}
.scope-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 28px;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-r-lg);
}
.scope-col.right {
    background: var(--k-bg-alt);
}
.scope-col .lab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 11px/1 var(--k-font-mono);
    color: var(--k-ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.scope-col .lab .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--k-accent);
}
.scope-col.right .lab .dot { background: var(--k-accent-2); }
.scope-col h3 {
    margin: 0;
    font: 400 22px/1.25 var(--k-font-sans);
    color: var(--k-ink);
    letter-spacing: -0.015em;
}
.scope-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.scope-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    font: 400 14.5px/1.55 var(--k-font-sans);
    color: var(--k-ink-3);
}
.scope-list li .n {
    font: 500 12px/1.5 var(--k-font-mono);
    color: var(--k-accent);
}
.scope-col.right .scope-list li .n { color: var(--k-accent-2); }
.scope-list li b {
    font-weight: 500;
    color: var(--k-ink-2);
}

/* ────── PLATFORM — rhythm between grids, callouts and product-blocks
   The page has 8 product-blocks across 6 sections; without explicit
   spacing they collide with the preceding grid or with each other.
   These rules give each block its own room. */
.model-grid + .product-block,
.actors-grid + .callout,
.actors-grid + .product-block,
.outcome-grid + .product-block,
.pay-grid + .product-block,
.scope-grid + .product-block,
.stat-rows + .product-block,
.callout + .product-block {
    margin-top: 88px;
}
.product-block + .product-block {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--k-line);
}

/* Anchored sections (TOC #model, #actors, …) should land below the
   sticky nav, not behind it. */
.section[id],
section[id] {
    scroll-margin-top: 88px;
}

/* The TOC sits below the page hero; give it a clear edge above. */
.toc-list-wrap {
    padding: 32px 0 8px;
    border-bottom: 1px solid var(--k-line);
    background: var(--k-bg);
}

/* Responsive collapse for platform grids */
@media (max-width: 980px) {
    .model-grid { grid-template-columns: repeat(2, 1fr); }
    .actors-grid { grid-template-columns: 1fr; }
    .pay-grid { grid-template-columns: 1fr; gap: 40px; }
    .scope-grid { grid-template-columns: 1fr; gap: 24px; }
    .model-grid + .product-block,
    .actors-grid + .product-block,
    .actors-grid + .callout,
    .callout + .product-block,
    .pay-grid + .product-block,
    .scope-grid + .product-block,
    .stat-rows + .product-block,
    .outcome-grid + .product-block { margin-top: 56px; }
    .product-block + .product-block { margin-top: 48px; padding-top: 48px; }
}
@media (max-width: 560px) {
    .model-grid { grid-template-columns: 1fr; }
}

/* ────── TODO photo slot — visible placeholder ────── */
.todo-photo {
    aspect-ratio: 16 / 9;
    width: 100%;
    border: 1px dashed var(--k-line-2);
    background:
        repeating-linear-gradient(45deg,
            transparent 0 14px,
            color-mix(in srgb, var(--k-ink) 4%, transparent) 14px 28px);
    display: grid;
    place-items: center;
    color: var(--k-ink-3);
    font: 500 11px/1.5 var(--k-font-mono);
    letter-spacing: 0.04em;
    padding: 24px;
    text-align: center;
    text-transform: uppercase;
}
.todo-photo span {
    max-width: 44ch;
    display: block;
}
.todo-photo .lab {
    display: block;
    color: var(--k-accent);
    margin-bottom: 8px;
    letter-spacing: 0.08em;
}