/* ===== Tokens ===== */
        :root {
            --bg: #FAFAF7;
            --surface: #FFFFFF;
            --ink: #111813;
            --ink-2: #3D4A42;
            --muted: #57645C;
            --hair: #E5E8E2;
            --hair-strong: #CFD7CE;
            --accent: #0B7A45;
            --accent-strong: #08603A;
            --accent-contrast: #FFFFFF;
            --chip-bg: #EDF4EE;
            --chip-fg: #175C39;
            --band-bg: #101713;
            --band-ink: #ECF1EC;
            --band-dim: #9AA8A0;
            --danger: #B4452F;
            --amber: #9A7422;
            --warn: #9A7422;
            --warn-bg: #FDF6E8;
            --warn-fg: #7A5A12;
            --console-bg: #0D1310;
            --console-line: #202B24;
            --console-ink: #E4ECE6;
            --console-dim: #8A988E;
            --console-green: #5BC98A;
            --console-amber: #D8B269;
            --console-blue: #93B8DB;
            --console-str: #A9C79A;
            --console-key: #C792EA;
            --console-fn: #82AAFF;
            --console-num: #F78C6C;
            --console-com: #5E6C63;
            --shadow: 0 1px 2px rgba(17, 24, 19, .05), 0 14px 34px -22px rgba(17, 24, 19, .20);
            --radius: 12px;
            --radius-sm: 8px;
            --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", Inter, "Segoe UI", system-ui, sans-serif;
            --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
            --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
        }

        [data-theme="dark"] {
            color-scheme: dark;
            --bg: #0B100D;
            --surface: #101712;
            --ink: #E8EEE9;
            --ink-2: #C4CFC7;
            --muted: #94A29A;
            --hair: #1E2822;
            --hair-strong: #314036;
            --accent: #38C37E;
            --accent-strong: #4BD692;
            --accent-contrast: #06170E;
            --chip-bg: #13251B;
            --chip-fg: #7BD8A4;
            --band-bg: #0E1611;
            --band-ink: #E8EEE9;
            --band-dim: #8CA094;
            --warn: #D3AC5C;
            --warn-bg: #1A1608;
            --warn-fg: #D3AC5C;
            --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 44px -26px rgba(0, 0, 0, .6);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }
        @media (prefers-reduced-motion: no-preference) {
            html {
                scroll-behavior: smooth
            }
        }
        body {
            background: var(--bg);
            color: var(--ink);
            font: 400 15.5px/1.65 var(--font-body);
            -webkit-font-smoothing: antialiased
        }
        img,
        svg {
            display: block;
            max-width: 100%
        }
        a {
            color: inherit
        }
        button {
            font: inherit;
            color: inherit;
            background: none;
            border: none;
            cursor: pointer
        }
        ::selection {
            background: var(--accent);
            color: var(--accent-contrast)
        }
        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 4px
        }
        .container {
            max-width: 1180px;
            margin-inline: auto;
            padding-inline: clamp(20px, 4vw, 32px)
        }
        .skip-link {
            position: absolute;
            left: 16px;
            top: -48px;
            z-index: 100;
            background: var(--ink);
            color: var(--bg);
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: top .2s
        }
        .skip-link:focus {
            top: 12px
        }
        h1,
        h2,
        h3 {
            font-family: var(--font-display);
            letter-spacing: -.018em;
            line-height: 1.12;
            font-weight: 600
        }
        h1 {
            font-size: clamp(2.5rem, 5.6vw, 4.1rem);
            line-height: 1.04;
            letter-spacing: -.028em;
            font-weight: 700
        }
        h2 {
            font-size: clamp(1.75rem, 3.2vw, 2.5rem);
            letter-spacing: -.022em
        }
        h3 {
            font-size: 1.06rem;
            letter-spacing: -.008em
        }
        p {
            color: var(--muted)
        }
        code {
            font-family: var(--font-mono);
            font-size: .92em
        }
        .eyebrow {
            font: 500 11.5px/1 var(--font-mono);
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--accent);
            display: inline-flex;
            align-items: center;
            gap: 10px
        }
        .eyebrow::before {
            content: "";
            width: 22px;
            height: 1px;
            background: var(--accent)
        }
        .sec-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: clamp(34px, 5vw, 52px)
        }
        .sec-head .lead {
            max-width: 600px
        }
        .sec-head h2 {
            margin-top: 14px;
            max-width: 640px
        }
        .sec-index {
            font: 500 12px/1 var(--font-mono);
            color: var(--muted);
            letter-spacing: .12em;
            white-space: nowrap;
            padding-bottom: 6px
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            height: 46px;
            padding: 0 22px;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            font: 500 15px/1 var(--font-body);
            text-decoration: none;
            transition: background .18s, border-color .18s, transform .18s, color .18s;
            white-space: nowrap
        }
        .btn:active {
            transform: translateY(1px)
        }
        .btn-primary {
            background: var(--accent);
            color: var(--accent-contrast)
        }
        .btn-primary:hover {
            background: var(--accent-strong)
        }
        .btn-ghost {
            border-color: var(--hair-strong);
            color: var(--ink)
        }
        .btn-ghost:hover {
            border-color: var(--ink)
        }
        .btn-sm {
            height: 38px;
            padding: 0 16px;
            font-size: 13.5px
        }
        .btn .arr {
            transition: transform .18s
        }
        .btn:hover .arr {
            transform: translateX(3px)
        }
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font: 500 11.5px/1 var(--font-mono);
            letter-spacing: .04em;
            padding: 5px 9px;
            border-radius: 6px;
            background: var(--chip-bg);
            color: var(--chip-fg)
        }
        .chip.warn {
            background: var(--warn-bg);
            color: var(--warn-fg)
        }
        .tag {
            display: inline-flex;
            font: 500 10.5px/1 var(--font-mono);
            letter-spacing: .1em;
            padding: 4px 7px;
            border: 1px solid var(--hair-strong);
            border-radius: 5px;
            color: var(--muted)
        }
        .js .rv {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .65s ease, transform .65s cubic-bezier(.2, .65, .2, 1);
            transition-delay: var(--d, 0ms)
        }
        .js .rv.in {
            opacity: 1;
            transform: none
        }
        .js .mask {
            display: block;
            overflow: hidden
        }
        .js .mask>span {
            display: block;
            transform: translateY(112%);
            transition: transform .9s cubic-bezier(.2, .65, .2, 1);
            transition-delay: var(--d, 0ms)
        }
        .js .loaded .mask>span {
            transform: none
        }
        @media (prefers-reduced-motion: reduce) {
            .js .rv,
            .js .mask>span {
                opacity: 1;
                transform: none;
                transition: none
            }
            * {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important
            }
        }

        /* ===== Notice ===== */
        .notice {
            background: var(--chip-bg);
            border-bottom: 1px solid var(--hair)
        }
        .notice .container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            padding-block: 9px;
            text-align: center
        }
        .notice p {
            font: 500 12.5px/1.5 var(--font-mono);
            color: var(--chip-fg)
        }
        .notice .dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--accent);
            flex: none;
            animation: pulse 2.4s ease-in-out infinite
        }
        @keyframes pulse {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: .35
            }
        }
        .notice a {
            color: var(--chip-fg);
            font-weight: 600;
            text-decoration: underline;
            text-underline-offset: 3px
        }

        /* ===== Header ===== */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--bg);
            border-bottom: 1px solid var(--hair)
        }
        .header-in {
            display: flex;
            align-items: center;
            gap: 28px;
            height: 64px
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            text-decoration: none;
            margin-right: auto
        }
        .brand .mark {
            width: 26px;
            height: 26px;
            flex: none
        }
        .brand-name {
            font: 700 17px/1 var(--font-display);
            letter-spacing: -.02em
        }
        .brand-name em {
            font-style: normal;
            font-weight: 500;
            color: var(--muted);
            margin-left: 6px;
            font-size: 14px
        }
        .nav {
            display: flex;
            gap: 4px
        }
        .nav a {
            font: 500 13.5px/1 var(--font-body);
            color: var(--muted);
            text-decoration: none;
            padding: 9px 11px;
            border-radius: 7px;
            position: relative;
            transition: color .15s
        }
        .nav a:hover {
            color: var(--ink)
        }
        .nav a[aria-current="true"] {
            color: var(--ink)
        }
        .nav a[aria-current="true"]::after {
            content: "";
            position: absolute;
            left: 11px;
            right: 11px;
            bottom: 3px;
            height: 2px;
            background: var(--accent);
            border-radius: 2px
        }
        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px
        }
        .icon-btn {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            border: 1px solid var(--hair-strong);
            color: var(--ink-2);
            transition: border-color .15s, color .15s
        }
        .icon-btn:hover {
            border-color: var(--ink);
            color: var(--ink)
        }
        [data-theme="light"] .ic-sun {
            display: none
        }
        [data-theme="dark"] .ic-moon {
            display: none
        }
        .menu-btn {
            display: none
        }
        .mobile-nav {
            display: none
        }
        @media (max-width: 900px) {
            .nav {
                display: none
            }
            .menu-btn {
                display: inline-flex
            }
            .header-cta {
                display: none
            }
            .mobile-nav {
                display: block;
                position: absolute;
                top: 64px;
                left: 0;
                right: 0;
                background: var(--bg);
                border-bottom: 1px solid var(--hair);
                padding: 10px 20px 22px;
                visibility: hidden;
                opacity: 0;
                transform: translateY(-6px);
                transition: opacity .2s, transform .2s, visibility .2s
            }
            .mobile-nav[data-open] {
                visibility: visible;
                opacity: 1;
                transform: none
            }
            .mobile-nav a {
                display: block;
                padding: 13px 4px;
                font: 500 16px/1 var(--font-body);
                color: var(--ink);
                text-decoration: none;
                border-bottom: 1px solid var(--hair)
            }
            .mobile-nav a:last-child {
                border-bottom: none
            }
        }

        /* ===== Shared sections ===== */
        .section {
            padding-block: clamp(72px, 9vw, 116px)
        }
        .section+.section {
            border-top: 1px solid var(--hair)
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }
        .stat {
            padding: 26px 28px 6px 0;
            border-right: 1px solid var(--hair)
        }
        .stat:last-child {
            border-right: none
        }
        .stat+.stat {
            padding-left: 28px
        }
        .stat-num {
            font: 600 clamp(1.5rem, 2.6vw, 2.05rem)/1.1 var(--font-display);
            letter-spacing: -.02em
        }
        .stat-num .g {
            color: var(--accent)
        }
        .stat-lbl {
            margin-top: 6px;
            font: 500 11.5px/1.5 var(--font-mono);
            color: var(--muted);
            letter-spacing: .08em;
            text-transform: uppercase
        }
        @media (max-width:700px) {
            .stats {
                grid-template-columns: 1fr 1fr
            }
            .stat:nth-child(2) {
                border-right: none
            }
            .stat:nth-child(n+3) {
                border-top: 1px solid var(--hair)
            }
        }
        .distro {
            border-block: 1px solid var(--hair);
            background: var(--surface)
        }
        .distro-in {
            display: flex;
            align-items: center;
            gap: 26px;
            padding-block: 15px;
            flex-wrap: wrap
        }
        .distro-lbl {
            font: 500 11px/1 var(--font-mono);
            letter-spacing: .16em;
            color: var(--muted);
            text-transform: uppercase
        }
        .distro-items {
            display: flex;
            gap: 8px 26px;
            flex-wrap: wrap;
            font: 500 12.5px/1 var(--font-mono);
            color: var(--ink-2)
        }
        .distro-items span::before {
            content: "/";
            color: var(--hair-strong);
            margin-right: 8px
        }
        .distro-items span:first-child::before {
            content: ""
        }

        /* ===== Hero (home) ===== */
        .hero {
            padding: clamp(60px, 8vw, 100px) 0 clamp(44px, 6vw, 68px)
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1.02fr .98fr;
            gap: clamp(40px, 5vw, 72px);
            align-items: center
        }
        .hero h1 {
            margin: 22px 0 24px
        }
        .hero h1 .u {
            text-decoration: underline;
            text-decoration-color: var(--accent);
            text-decoration-thickness: .09em;
            text-underline-offset: .14em
        }
        .lede {
            font-size: clamp(1.02rem, 1.4vw, 1.14rem);
            line-height: 1.7;
            max-width: 540px
        }
        .hero-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 32px
        }
        .hero-meta {
            margin-top: 24px;
            font: 500 12px/1.6 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em
        }
        .console-wrap {
            position: relative
        }
        .console-wrap::before {
            content: "";
            position: absolute;
            inset: 0;
            transform: translate(12px, 12px);
            border: 1px solid var(--hair-strong);
            border-radius: 14px;
            pointer-events: none
        }
        .console {
            position: relative;
            background: var(--console-bg);
            border: 1px solid var(--console-line);
            border-radius: 14px;
            box-shadow: var(--shadow);
            overflow: hidden
        }
        .console-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--console-line)
        }
        .console-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--console-green);
            animation: pulse 2.2s infinite
        }
        .console-title {
            font: 500 12px/1 var(--font-mono);
            color: var(--console-dim);
            letter-spacing: .06em
        }
        .console-bar .off {
            margin-left: auto;
            font: 500 10.5px/1 var(--font-mono);
            color: var(--console-green);
            border: 1px solid var(--console-line);
            padding: 4px 8px;
            border-radius: 5px;
            letter-spacing: .1em
        }
        .console-body {
            padding: 18px 18px 14px;
            min-height: 230px;
            font: 400 12.8px/1.9 var(--font-mono)
        }
        .tl {
            white-space: pre-wrap;
            word-break: break-word
        }
        .tl.cmd {
            color: var(--console-ink)
        }
        .tl.out {
            color: var(--console-dim)
        }
        .tl.ok {
            color: var(--console-green)
        }
        .tl.ok2 {
            color: var(--console-blue)
        }
        .tl.warn {
            color: var(--console-amber)
        }
        .tcur {
            display: inline-block;
            width: 8px;
            height: 14px;
            background: var(--console-green);
            vertical-align: -2px;
            margin-left: 2px;
            animation: blink 1s steps(2) infinite
        }
        @keyframes blink {
            50% {
                opacity: 0
            }
        }
        .console-foot {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            padding: 12px 18px;
            border-top: 1px solid var(--console-line);
            font: 500 11px/1 var(--font-mono);
            color: var(--console-dim);
            letter-spacing: .05em
        }
        .console-foot b {
            color: var(--console-green);
            font-weight: 500
        }
        @media (max-width:960px) {
            .hero-grid {
                grid-template-columns: 1fr
            }
            .console-wrap {
                max-width: 640px
            }
        }

        /* ===== Bento ===== */
        .bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 16px
        }
        .span-7 {
            grid-column: span 7
        }
        .span-5 {
            grid-column: span 5
        }
        .span-4 {
            grid-column: span 4
        }
        .span-12 {
            grid-column: span 12
        }
        .p-card {
            background: var(--surface);
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            padding: 26px 26px 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: border-color .2s, transform .2s, box-shadow .2s
        }
        .p-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px);
            box-shadow: var(--shadow)
        }
        .p-head {
            display: flex;
            align-items: center;
            gap: 12px
        }
        .p-icon {
            width: 40px;
            height: 40px;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--hair);
            border-radius: 9px;
            color: var(--accent);
            background: var(--chip-bg)
        }
        .p-icon svg {
            width: 22px;
            height: 22px
        }
        .p-name {
            font-size: 1.12rem;
            font-weight: 600
        }
        .p-name a {
            text-decoration: none
        }
        .p-name a:hover {
            color: var(--accent)
        }
        .p-head .chip {
            margin-left: auto
        }
        .p-desc {
            font-size: 14px;
            line-height: 1.65
        }
        .p-foot {
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid var(--hair);
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap
        }
        .p-link {
            font: 600 13px/1 var(--font-body);
            color: var(--ink);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px
        }
        .p-link:hover {
            color: var(--accent)
        }
        .p-link .arr {
            transition: transform .15s
        }
        .p-link:hover .arr {
            transform: translate(2px, -2px)
        }
        .p-tags {
            margin-left: auto;
            display: flex;
            gap: 6px
        }
        .scanbar {
            height: 4px;
            border-radius: 4px;
            background: var(--hair);
            overflow: hidden
        }
        .scanbar i {
            display: block;
            height: 100%;
            width: 38%;
            border-radius: 4px;
            background: var(--accent);
            animation: scan 3.4s cubic-bezier(.45, 0, .55, 1) infinite
        }
        @keyframes scan {
            0% {
                transform: translateX(-10%)
            }
            50% {
                transform: translateX(170%)
            }
            100% {
                transform: translateX(-10%)
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .scanbar i {
                animation: none;
                width: 62%;
                transform: none
            }
        }
        .totp {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border: 1px solid var(--hair);
            border-radius: 10px;
            background: var(--bg);
            width: max-content
        }
        .totp-ring {
            width: 46px;
            height: 46px;
            transform: rotate(-90deg)
        }
        .tr-track {
            fill: none;
            stroke: var(--hair);
            stroke-width: 3.5
        }
        .tr-arc {
            fill: none;
            stroke: var(--accent);
            stroke-width: 3.5;
            stroke-linecap: round;
            stroke-dasharray: 150.8;
            animation: ring 30s linear infinite
        }
        @keyframes ring {
            from {
                stroke-dashoffset: 0
            }
            to {
                stroke-dashoffset: 150.8
            }
        }
        .totp-code {
            font: 600 19px/1.1 var(--font-mono);
            letter-spacing: .12em;
            transition: opacity .18s
        }
        .totp-code.swap {
            opacity: 0
        }
        .totp-lbl {
            display: block;
            font: 500 10.5px/1 var(--font-mono);
            color: var(--muted);
            letter-spacing: .1em;
            margin-top: 4px;
            text-transform: uppercase
        }
        .price-note {
            border: 1px solid var(--hair);
            border-left: 3px solid var(--accent);
            border-radius: 8px;
            background: var(--bg);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 4px
        }
        .price-note .pn-a {
            font: 600 13px/1.4 var(--font-body);
            color: var(--ink)
        }
        .price-note .pn-b {
            font: 500 11.5px/1.4 var(--font-mono);
            color: var(--accent);
            letter-spacing: .04em
        }
        .code {
            background: var(--console-bg);
            border: 1px solid var(--console-line);
            border-radius: 10px;
            padding: 16px 18px;
            font: 400 12.6px/1.85 var(--font-mono);
            color: var(--console-dim);
            overflow-x: auto
        }
        .code .c-key {
            color: var(--console-blue)
        }
        .code .c-str {
            color: var(--console-str)
        }
        .code .c-num {
            color: var(--console-amber)
        }
        .code .c-com {
            color: #5E6C63;
            font-style: italic
        }
        .code .c-cmd {
            color: var(--console-ink)
        }
        .sd-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 28px;
            align-items: center
        }
        @media (max-width:860px) {
            .sd-grid {
                grid-template-columns: 1fr
            }
        }

        /* ===== Spec tables / pillars ===== */
        .spec {
            width: 100%;
            border-collapse: collapse;
            font-size: 13.5px
        }
        .spec caption {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0)
        }
        .spec th,
        .spec td {
            text-align: left;
            padding: 11px 2px;
            border-top: 1px solid var(--hair);
            vertical-align: top
        }
        .spec tr:first-child th,
        .spec tr:first-child td {
            border-top: none
        }
        .spec th {
            font-weight: 500;
            color: var(--muted);
            width: 44%;
            font: 500 12px/1.6 var(--font-mono);
            letter-spacing: .05em;
            text-transform: uppercase;
            padding-top: 13px
        }
        .spec td {
            color: var(--ink-2);
            font: 500 12.8px/1.6 var(--font-mono)
        }
        .spec td .g {
            color: var(--accent)
        }
        .split {
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: clamp(40px, 6vw, 84px);
            align-items: start
        }
        .sticky {
            position: sticky;
            top: 96px
        }
        .pillars {
            border-top: 1px solid var(--hair)
        }
        .pillar {
            display: grid;
            grid-template-columns: 56px 1fr;
            gap: 18px;
            padding: 24px 0;
            border-bottom: 1px solid var(--hair)
        }
        .pillar-num {
            font: 500 12px/1.8 var(--font-mono);
            color: var(--accent);
            letter-spacing: .1em
        }
        .pillar h3 {
            font-size: 1.14rem;
            margin-bottom: 7px
        }
        .pillar p {
            font-size: 14px
        }
        .diagram {
            margin-top: 36px
        }
        .diagram svg {
            width: 100%;
            height: auto
        }
        .d-bound {
            fill: none;
            stroke: var(--hair-strong);
            stroke-dasharray: 5 7;
            stroke-width: 1.4
        }
        .d-box {
            fill: var(--surface);
            stroke: var(--hair-strong);
            stroke-width: 1.4
        }
        .d-node {
            fill: var(--surface);
            stroke: var(--hair-strong);
            stroke-width: 1.3
        }
        .d-flow {
            fill: none;
            stroke: var(--muted);
            stroke-width: 1.4;
            stroke-dasharray: 3 7;
            animation: dash 1.1s linear infinite
        }
        @keyframes dash {
            to {
                stroke-dashoffset: -10
            }
        }
        .d-solid {
            fill: none;
            stroke: var(--muted);
            stroke-width: 1.4
        }
        .d-okc {
            fill: none;
            stroke: var(--accent);
            stroke-width: 1.6
        }
        .d-okp {
            fill: none;
            stroke: var(--accent);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }
        .d-x {
            stroke: var(--danger);
            stroke-width: 1.8;
            stroke-linecap: round
        }
        .d-cloud {
            fill: none;
            stroke: var(--muted);
            stroke-width: 1.4
        }
        .d-mono {
            font: 500 10.5px var(--font-mono);
            fill: var(--muted);
            letter-spacing: .08em
        }
        .d-strong {
            font: 600 14px var(--font-display);
            fill: var(--ink)
        }
        .d-chip {
            fill: var(--chip-bg);
            stroke: var(--hair);
            stroke-width: 1.2
        }
        .d-chip-t {
            font: 500 11px var(--font-mono);
            fill: var(--chip-fg);
            letter-spacing: .05em
        }
        .d-amber {
            fill: var(--amber)
        }
        .d-green {
            fill: var(--accent)
        }
        .diagram figcaption {
            margin-top: 12px;
            font: 500 11.5px/1.6 var(--font-mono);
            color: var(--muted);
            letter-spacing: .05em
        }
        @media (max-width:900px) {
            .split {
                grid-template-columns: 1fr
            }
            .sticky {
                position: static
            }
        }

        /* ===== Personas ===== */
        .persona {
            display: grid;
            grid-template-columns: 52px 1.05fr 1fr;
            gap: 20px 28px;
            padding: 30px 4px;
            border-top: 1px solid var(--hair);
            transition: background .2s
        }
        .persona:last-of-type {
            border-bottom: 1px solid var(--hair)
        }
        .persona:hover {
            background: var(--surface)
        }
        .persona-idx {
            font: 500 12px/1.8 var(--font-mono);
            color: var(--muted);
            letter-spacing: .1em
        }
        .persona h3 {
            font-size: 1.3rem;
            margin-bottom: 8px
        }
        .persona p {
            font-size: 14px;
            max-width: 460px
        }
        .persona-tools {
            font: 500 12.5px/2.1 var(--font-mono);
            color: var(--ink-2)
        }
        .persona-tools b {
            color: var(--accent);
            font-weight: 500
        }
        .persona-cta {
            display: inline-flex;
            gap: 7px;
            align-items: center;
            margin-top: 10px;
            font: 600 13px/1 var(--font-body);
            color: var(--ink);
            text-decoration: none
        }
        .persona-cta:hover {
            color: var(--accent)
        }
        @media (max-width:820px) {
            .persona {
                grid-template-columns: 1fr
            }
            .persona-idx {
                line-height: 1
            }
        }

        /* ===== Ecosystem ===== */
        .eco-links {
            list-style: none;
            margin-top: 26px;
            border-top: 1px solid var(--hair)
        }
        .eco-links li {
            border-bottom: 1px solid var(--hair)
        }
        .eco-links a {
            display: flex;
            align-items: baseline;
            gap: 14px;
            padding: 15px 4px;
            text-decoration: none;
            transition: background .15s, padding-left .15s
        }
        .eco-links a:hover {
            background: var(--surface);
            padding-left: 10px
        }
        .eco-links .el-name {
            font: 600 14.5px/1 var(--font-body);
            color: var(--ink)
        }
        .eco-links .el-desc {
            font: 400 12.5px/1.5 var(--font-mono);
            color: var(--muted)
        }
        .eco-links .arr {
            margin-left: auto;
            color: var(--muted);
            transition: transform .15s, color .15s
        }
        .eco-links a:hover .arr {
            color: var(--accent);
            transform: translate(2px, -2px)
        }

        /* ===== Timeline ===== */
        .timeline {
            list-style: none;
            position: relative;
            margin-top: 8px
        }
        .timeline::before {
            content: "";
            position: absolute;
            left: 105px;
            top: 6px;
            bottom: 6px;
            width: 1px;
            background: var(--hair-strong)
        }
        .t-item {
            display: grid;
            grid-template-columns: 84px 42px 1fr;
            align-items: start;
            padding: 18px 0
        }
        .t-date {
            font: 500 12px/1.7 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em;
            text-align: right
        }
        .t-dot {
            position: relative
        }
        .t-dot::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 7px;
            transform: translateX(-50%);
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--accent)
        }
        .t-item.future .t-dot::before {
            background: var(--accent)
        }
        .t-body h3 {
            font-size: 1.02rem;
            margin-bottom: 5px
        }
        .t-body p {
            font-size: 14px;
            max-width: 640px
        }
        @media (max-width:700px) {
            .timeline::before {
                left: 7px
            }
            .t-item {
                grid-template-columns: 24px 1fr;
                gap: 4px 16px
            }
            .t-date {
                grid-column: 2;
                text-align: left;
                order: 2
            }
            .t-dot {
                grid-column: 1;
                grid-row: 1/span 2
            }
            .t-body {
                grid-column: 2;
                order: 3
            }
        }

        /* ===== Quote / loc ===== */
        .quote {
            margin-top: 30px;
            border-left: 3px solid var(--accent);
            padding: 6px 0 6px 22px
        }
        .quote p {
            font: 500 1.16rem/1.55 var(--font-display);
            letter-spacing: -.012em;
            color: var(--ink)
        }
        .quote footer {
            margin-top: 14px;
            font: 500 12px/1.6 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em
        }
        .loc {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 22px;
            font: 500 12px/1 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em
        }
        .loc svg {
            color: var(--accent)
        }

        /* ===== Band ===== */
        .band {
            background: var(--band-bg);
            color: var(--band-ink);
            border-block: 1px solid var(--hair)
        }
        .band .container {
            padding-block: clamp(64px, 8vw, 96px)
        }
        .band-grid {
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: clamp(36px, 6vw, 80px);
            align-items: center
        }
        .band h2 {
            color: var(--band-ink)
        }
        .band p {
            color: var(--band-dim);
            margin-top: 16px;
            max-width: 520px
        }
        .band-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 32px
        }
        .band .btn-ghost {
            border-color: #3A473F;
            color: var(--band-ink)
        }
        .band .btn-ghost:hover {
            border-color: var(--band-ink)
        }
        .band-mono {
            list-style: none;
            font: 500 13px/2.5 var(--font-mono);
            letter-spacing: .04em;
            color: var(--band-dim)
        }
        .band-mono b {
            color: var(--band-ink);
            font-weight: 500
        }
        .band-mono li {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            border-bottom: 1px solid #24302A;
            padding-block: 2px
        }
        @media (max-width:860px) {
            .band-grid {
                grid-template-columns: 1fr
            }
        }

        /* ===== Page chrome (subpages) ===== */
        .crumb {
            display: flex;
            gap: 8px;
            align-items: center;
            font: 500 12px/1 var(--font-mono);
            letter-spacing: .08em;
            color: var(--muted);
            padding-top: clamp(28px, 4vw, 44px);
            flex-wrap: wrap
        }
        .crumb a {
            text-decoration: none
        }
        .crumb a:hover {
            color: var(--accent)
        }
        .crumb .sep {
            color: var(--hair-strong)
        }
        .page-hero {
            padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 72px)
        }
        .page-hero h1 {
            margin: 18px 0 20px;
            max-width: 820px
        }
        .page-hero .lede {
            max-width: 640px
        }
        .p-hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(36px, 5vw, 72px);
            align-items: center;
            padding: clamp(28px, 4vw, 52px) 0 clamp(48px, 6vw, 72px)
        }
        @media (max-width:960px) {
            .p-hero-grid {
                grid-template-columns: 1fr
            }
        }
        .p-title-row {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin: 18px 0 16px
        }
        .p-title-row h1 {
            margin: 0
        }
        .p-visual {
            border: 1px solid var(--hair);
            border-radius: 14px;
            overflow: hidden;
            aspect-ratio: 4/3;
            background: var(--surface);
            box-shadow: var(--shadow)
        }
        .p-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.03);
            transition: transform 1.4s cubic-bezier(.2, .65, .2, 1)
        }
        .p-visual.rv.in img {
            transform: scale(1)
        }
        .p-visual figcaption {
            padding: 10px 14px;
            border-top: 1px solid var(--hair);
            font: 500 11px/1.5 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em;
            background: var(--surface)
        }
        .feat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 48px
        }
        .feat {
            padding: 22px 0;
            border-top: 1px solid var(--hair);
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 14px
        }
        .feat-n {
            font: 500 12px/1.8 var(--font-mono);
            color: var(--accent);
            letter-spacing: .1em
        }
        .feat h3 {
            font-size: 1.05rem;
            margin-bottom: 6px
        }
        .feat p {
            font-size: 14px
        }
        @media (max-width:760px) {
            .feat-grid {
                grid-template-columns: 1fr
            }
        }
        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        .step {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 22px
        }
        .step-n {
            font: 500 12px/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: .12em
        }
        .step h3 {
            margin: 12px 0 8px;
            font-size: 1.05rem
        }
        .step p {
            font-size: 13.5px
        }
        @media (max-width:760px) {
            .steps {
                grid-template-columns: 1fr
            }
        }
        .dl-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        .dl-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 22px;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            gap: 6px;
            transition: border-color .2s, transform .2s, box-shadow .2s
        }
        .dl-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px);
            box-shadow: var(--shadow)
        }
        .dl-card.primary {
            border-color: var(--accent)
        }
        .dl-t {
            font: 600 15px/1.3 var(--font-body);
            color: var(--ink);
            display: flex;
            justify-content: space-between;
            gap: 10px
        }
        .dl-t .arr {
            color: var(--accent)
        }
        .dl-s {
            font: 500 12px/1.6 var(--font-mono);
            color: var(--muted)
        }
        @media (max-width:760px) {
            .dl-grid {
                grid-template-columns: 1fr
            }
        }
        .log-row {
            display: grid;
            grid-template-columns: 110px 70px 1fr;
            gap: 18px;
            padding: 16px 2px;
            border-top: 1px solid var(--hair);
            align-items: baseline
        }
        .log-row .ld {
            font: 500 12px/1.7 var(--font-mono);
            color: var(--muted)
        }
        .log-row .lv {
            font: 500 12px/1.7 var(--font-mono);
            color: var(--accent)
        }
        .log-row p {
            font-size: 14px
        }
        @media (max-width:700px) {
            .log-row {
                grid-template-columns: 1fr;
                gap: 4px
            }
        }
        .related {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
        }
        .rel-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 18px;
            text-decoration: none;
            transition: border-color .2s, transform .2s
        }
        .rel-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px)
        }
        .rel-card .p-icon {
            width: 34px;
            height: 34px;
            margin-bottom: 12px
        }
        .rel-card .p-icon svg {
            width: 19px;
            height: 19px
        }
        .rel-card h3 {
            font-size: 1rem
        }
        .rel-card p {
            font: 500 11.5px/1.6 var(--font-mono);
            color: var(--muted);
            margin-top: 4px
        }
        @media (max-width:900px) {
            .related {
                grid-template-columns: 1fr 1fr
            }
        }
        @media (max-width:560px) {
            .related {
                grid-template-columns: 1fr
            }
        }

        /* Products index rows */
        .idx-row {
            display: grid;
            grid-template-columns: 48px 1.15fr .95fr auto;
            gap: 20px;
            align-items: center;
            padding: 24px 4px;
            border-top: 1px solid var(--hair);
            text-decoration: none;
            transition: background .2s, padding-left .2s
        }
        .idx-row:last-of-type {
            border-bottom: 1px solid var(--hair)
        }
        .idx-row:hover {
            background: var(--surface);
            padding-left: 12px
        }
        .idx-row h3 {
            font-size: 1.15rem;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap
        }
        .idx-row .idx-desc {
            font-size: 13.5px;
            margin-top: 4px
        }
        .idx-row .idx-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: flex-end
        }
        .idx-row .go {
            color: var(--muted);
            transition: transform .2s, color .2s
        }
        .idx-row:hover .go {
            color: var(--accent);
            transform: translateX(4px)
        }
        @media (max-width:820px) {
            .idx-row {
                grid-template-columns: 48px 1fr auto
            }
            .idx-row .idx-tags {
                display: none
            }
        }

        /* ===== About specific styles ===== */
        .prose {
            font-size: 16px;
            line-height: 1.8;
            color: var(--ink-2);
            max-width: 680px
        }
        .prose p+p {
            margin-top: 20px
        }
        .prose strong {
            color: var(--ink);
            font-weight: 600
        }

        .hero-visual {
            border: 1px solid var(--hair);
            border-radius: 14px;
            overflow: hidden;
            aspect-ratio: 1/1;
            background: var(--surface);
            box-shadow: var(--shadow)
        }
        .hero-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.03);
            transition: transform 1.4s cubic-bezier(.2, .65, .2, 1)
        }
        .hero-visual.rv.in img {
            transform: scale(1)
        }
        .hero-visual figcaption {
            padding: 12px 16px;
            border-top: 1px solid var(--hair);
            font: 500 11px/1.5 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em;
            background: var(--surface)
        }

        .founder-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: clamp(28px, 4vw, 40px);
            display: flex;
            flex-direction: column;
            gap: 20px
        }
        .founder-meta {
            display: flex;
            flex-direction: column;
            gap: 4px
        }
        .founder-name {
            font: 700 clamp(1.4rem, 2.5vw, 1.8rem)/1.1 var(--font-display);
            letter-spacing: -.02em;
            color: var(--ink)
        }
        .founder-role {
            font: 500 13px/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: .1em;
            text-transform: uppercase
        }
        .founder-bio {
            font-size: 15px;
            line-height: 1.75;
            color: var(--ink-2)
        }
        .founder-bio+p {
            margin-top: 14px
        }
        .quote-block {
            border-left: 3px solid var(--accent);
            padding: 4px 0 4px 24px;
            margin-top: 8px
        }
        .quote-block p {
            font: 500 clamp(1.05rem, 1.4vw, 1.2rem)/1.6 var(--font-display);
            letter-spacing: -.01em;
            color: var(--ink);
            font-style: italic
        }
        .quote-block footer {
            margin-top: 14px;
            font: 500 12px/1.6 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em
        }
        .social-links {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 8px
        }
        .social-link {
            font: 500 12.5px/1 var(--font-mono);
            color: var(--ink-2);
            text-decoration: none;
            padding: 7px 14px;
            border: 1px solid var(--hair-strong);
            border-radius: 6px;
            transition: border-color .15s, color .15s
        }
        .social-link:hover {
            border-color: var(--accent);
            color: var(--accent)
        }

        .principles-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px
        }
        .principle-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: clamp(24px, 3vw, 32px);
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: border-color .2s, transform .2s
        }
        .principle-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px)
        }
        .principle-arrow {
            font: 500 14px/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: .08em
        }
        .principle-card h3 {
            font-size: 1.12rem
        }
        .principle-card p {
            font-size: 14px;
            line-height: 1.7
        }
        @media (max-width:700px) {
            .principles-grid {
                grid-template-columns: 1fr
            }
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        .service-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: clamp(26px, 3vw, 34px);
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: border-color .2s, transform .2s, box-shadow .2s
        }
        .service-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px);
            box-shadow: var(--shadow)
        }
        .service-icon {
            width: 44px;
            height: 44px;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--hair);
            border-radius: 10px;
            color: var(--accent);
            background: var(--chip-bg)
        }
        .service-icon svg {
            width: 24px;
            height: 24px
        }
        .service-card h3 {
            font-size: 1.14rem
        }
        .service-card p {
            font-size: 14px;
            line-height: 1.7
        }
        @media (max-width:900px) {
            .services-grid {
                grid-template-columns: 1fr
            }
        }

        .values-strip {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--surface)
        }
        .value-cell {
            padding: clamp(24px, 3vw, 32px);
            border-right: 1px solid var(--hair)
        }
        .value-cell:last-child {
            border-right: none
        }
        .value-cell h3 {
            font-size: 1.08rem;
            margin-bottom: 10px
        }
        .value-cell p {
            font-size: 13.5px;
            line-height: 1.7
        }
        @media (max-width:900px) {
            .values-strip {
                grid-template-columns: 1fr 1fr
            }
            .value-cell:nth-child(2) {
                border-right: none
            }
            .value-cell:nth-child(n+3) {
                border-top: 1px solid var(--hair)
            }
        }
        @media (max-width:560px) {
            .values-strip {
                grid-template-columns: 1fr
            }
            .value-cell {
                border-right: none
            }
            .value-cell+.value-cell {
                border-top: 1px solid var(--hair)
            }
        }

        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--hair);
            border-bottom: 1px solid var(--hair)
        }
        .stat-cell {
            padding: 28px 0;
            text-align: center
        }
        .stat-cell+.stat-cell {
            border-left: 1px solid var(--hair)
        }
        .stat-num {
            font: 700 clamp(1.6rem, 2.8vw, 2.2rem)/1.1 var(--font-display);
            letter-spacing: -.02em;
            color: var(--ink)
        }
        .stat-num .g {
            color: var(--accent)
        }
        .stat-lbl {
            margin-top: 8px;
            font: 500 11.5px/1.4 var(--font-mono);
            color: var(--muted);
            letter-spacing: .1em;
            text-transform: uppercase
        }
        @media (max-width:700px) {
            .stats-row {
                grid-template-columns: 1fr 1fr
            }
            .stat-cell:nth-child(2) {
                border-left: none
            }
            .stat-cell:nth-child(n+3) {
                border-top: 1px solid var(--hair)
            }
        }

        .band-inner {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            gap: clamp(36px, 6vw, 80px);
            align-items: center
        }
        .band-inner .eyebrow {
            color: var(--accent)
        }
        .band-inner h2 {
            color: var(--band-ink);
            margin-top: 14px
        }
        .band-inner p {
            color: var(--band-dim);
            margin-top: 16px;
            max-width: 540px;
            font-size: 16px;
            line-height: 1.75
        }
        .band-inner .band-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 32px
        }
        .band-inner .btn-primary {
            background: var(--accent);
            color: var(--accent-contrast)
        }
        .band-inner .btn-ghost {
            border-color: #3A473F;
            color: var(--band-ink)
        }
        .band-inner .btn-ghost:hover {
            border-color: var(--band-ink)
        }
        .band-inner table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px
        }
        .band-inner table th,
        .band-inner table td {
            text-align: left;
            padding: 11px 2px;
            border-top: 1px solid #24302A
        }
        .band-inner table th {
            font: 500 11px/1.6 var(--font-mono);
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--band-dim);
            width: 40%
        }
        .band-inner table td {
            font: 500 12.5px/1.6 var(--font-mono);
            color: var(--band-ink)
        }
        @media (max-width:860px) {
            .band-inner {
                grid-template-columns: 1fr
            }
        }

        /* ===== Contact Page ===== */
        .contact-list {
            list-style: none;
            margin-top: 26px;
            border-top: 1px solid var(--hair)
        }
        .contact-list li {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 2px;
            border-bottom: 1px solid var(--hair);
            flex-wrap: wrap
        }
        .contact-list .cl-l {
            font: 500 11.5px/1.8 var(--font-mono);
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted)
        }
        .contact-list .cl-v {
            font: 500 13.5px/1.6 var(--font-mono);
            color: var(--ink)
        }
        .contact-list a {
            text-decoration: none
        }
        .contact-list a:hover {
            color: var(--accent)
        }

        .social-links {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 18px
        }
        .social-links a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font: 500 12.5px/1 var(--font-body);
            color: var(--muted);
            text-decoration: none;
            padding: 6px 12px;
            border: 1px solid var(--hair);
            border-radius: 6px;
            transition: border-color .15s, color .15s
        }
        .social-links a:hover {
            border-color: var(--accent);
            color: var(--accent)
        }
        .social-links a svg {
            width: 14px;
            height: 14px
        }

        form {
            display: grid;
            gap: 18px
        }
        .field label {
            display: block;
            font: 600 13px/1 var(--font-body);
            margin-bottom: 8px
        }
        .field input,
        .field select,
        .field textarea {
            width: 100%;
            height: 46px;
            padding: 0 14px;
            border: 1px solid var(--hair-strong);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--ink);
            font: 400 14.5px/1.4 var(--font-body);
            transition: border-color .15s, box-shadow .15s
        }
        .field textarea {
            height: auto;
            min-height: 130px;
            padding: 12px 14px;
            resize: vertical
        }
        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)
        }
        .field .f-err {
            display: none;
            font: 500 12px/1.5 var(--font-mono);
            color: var(--danger);
            margin-top: 6px
        }
        .field.invalid .f-err {
            display: block
        }
        .field.invalid input,
        .field.invalid textarea {
            border-color: var(--danger)
        }
        .form-note {
            font: 400 12.5px/1.7 var(--font-mono);
            color: var(--muted)
        }
        .form-done {
            border: 1px solid var(--hair);
            border-left: 3px solid var(--accent);
            border-radius: 10px;
            background: var(--surface);
            padding: 26px
        }
        .form-done h3 {
            font-size: 1.2rem;
            margin-bottom: 8px
        }

        /* ===== Footer ===== */
        .site-footer {
            background: var(--surface);
            border-top: 1px solid var(--hair)
        }
        .foot-grid {
            display: grid;
            grid-template-columns: 1.4fr repeat(4, 1fr);
            gap: 36px;
            padding-block: clamp(52px, 7vw, 76px)
        }
        .foot-brand p {
            margin-top: 16px;
            font-size: 13.5px;
            max-width: 260px
        }
        .foot-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 20px
        }
        .foot-col h4 {
            font: 500 11.5px/1 var(--font-mono);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 18px
        }
        .foot-col ul {
            list-style: none;
            display: grid;
            gap: 11px
        }
        .foot-col a {
            font: 400 13.5px/1.4 var(--font-body);
            color: var(--ink-2);
            text-decoration: none
        }
        .foot-col a:hover {
            color: var(--accent)
        }
        .foot-bottom {
            border-top: 1px solid var(--hair);
            padding-block: 20px;
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            font: 400 12.5px/1.6 var(--font-mono);
            color: var(--muted)
        }
        .foot-bottom .fb-r {
            margin-left: auto;
            display: flex;
            gap: 18px;
            align-items: center;
            flex-wrap: wrap
        }
        .foot-bottom a {
            text-decoration: none
        }
        .foot-bottom a:hover {
            color: var(--accent)
        }
        @media (max-width:960px) {
            .foot-grid {
                grid-template-columns: 1fr 1fr
            }
            .foot-brand {
                grid-column: 1/-1
            }
        }
        @media (max-width:1020px) {
            .span-7,
            .span-5 {
                grid-column: span 12
            }
            .span-4 {
                grid-column: span 6
            }
        }
        @media (max-width:680px) {
            .span-4 {
                grid-column: span 12
            }
        }

        .step-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-top: 12px
        }
        .step-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 22px;
            text-align: center
        }
        .step-card .step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--chip-bg);
            color: var(--accent);
            font: 600 18px/1 var(--font-mono);
            margin-bottom: 12px
        }
        .step-card h3 {
            font-size: 1.05rem;
            margin-bottom: 6px
        }
        .step-card p {
            font-size: 13px
        }
        @media (max-width:760px) {
            .step-grid {
                grid-template-columns: 1fr 1fr
            }
        }
        @media (max-width:480px) {
            .step-grid {
                grid-template-columns: 1fr
            }
        }

        .distro-logos {
            display: flex;
            flex-wrap: wrap;
            gap: 16px 28px;
            align-items: center;
            padding: 16px 0;
            border-top: 1px solid var(--hair);
            border-bottom: 1px solid var(--hair)
        }
        .distro-logos span {
            font: 500 13.5px/1 var(--font-mono);
            color: var(--ink-2);
            letter-spacing: .04em
        }
        .distro-logos .tag {
            font-size: 11px
        }
        .tier {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 26px;
            display: flex;
            flex-direction: column;
            gap: 14px
        }
        .tier.featured {
            border-color: var(--accent)
        }
        .tier h3 {
            font-size: 1.2rem
        }
        .tier .tier-tag {
            font: 500 11px/1 var(--font-mono);
            letter-spacing: .14em;
            color: var(--accent);
            text-transform: uppercase
        }
        .tier ul {
            list-style: none;
            display: grid;
            gap: 9px;
            font-size: 14px;
            color: var(--ink-2)
        }
        .tier li {
            display: flex;
            gap: 9px
        }
        .tier li::before {
            content: "—";
            color: var(--accent)
        }
        .tier .btn {
            margin-top: auto;
            justify-content: center
        }
        .tiers {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        @media (max-width:900px) {
            .tiers {
                grid-template-columns: 1fr
            }
        }
        .partner-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        @media (max-width:900px) {
            .partner-cards {
                grid-template-columns: 1fr
            }
        }
        .partner-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 22px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-decoration: none;
            transition: border-color .2s, transform .2s
        }
        .partner-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px)
        }
        .partner-card h3 {
            font-size: 1.08rem
        }
        .partner-card p {
            font-size: 13.5px
        }
        .partner-card .pc-l {
            margin-top: auto;
            font: 500 11.5px/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: .06em
        }
        .policy-note {
            border: 1px solid var(--hair);
            border-left: 3px solid var(--accent);
            border-radius: 8px;
            background: var(--surface);
            padding: 18px 20px;
            font-size: 14px
        }

        /* ===== Product page specific styles ===== */
        .prod-hero {
            padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 72px)
        }
        .prod-hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(36px, 5vw, 72px);
            align-items: center
        }
        @media (max-width:960px) {
            .prod-hero-grid {
                grid-template-columns: 1fr
            }
        }
        .prod-title-row {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin: 16px 0 20px
        }
        .prod-title-row h1 {
            margin: 0
        }
        .prod-lede {
            font-size: clamp(1.05rem, 1.4vw, 1.18rem);
            line-height: 1.75;
            max-width: 560px
        }
        .prod-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 20px
        }
        .prod-cta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 28px
        }
        .prod-price {
            margin-top: 20px;
            font: 500 13px/1.6 var(--font-mono);
            color: var(--muted);
            letter-spacing: .04em
        }
        .prod-price strong {
            color: var(--accent);
            font-weight: 600
        }

        .prod-visual {
            border: 1px solid var(--hair);
            border-radius: 14px;
            overflow: hidden;
            background: #080c12;
            box-shadow: var(--shadow);
            position: relative
        }
        .prod-visual .ss-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            overflow: hidden
        }
        .prod-visual .ss-frame img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center center;
            display: block
        }
        .prod-visual figcaption {
            padding: 12px 16px;
            border-top: 1px solid var(--hair);
            font: 500 11px/1.5 var(--font-mono);
            color: var(--muted);
            letter-spacing: .06em;
            background: var(--surface)
        }

        .feat-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: clamp(22px, 3vw, 28px);
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: border-color .2s, transform .2s
        }
        .feat-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px)
        }
        .feat-icon {
            width: 40px;
            height: 40px;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--hair);
            border-radius: 9px;
            color: var(--accent);
            background: var(--chip-bg)
        }
        .feat-icon svg {
            width: 20px;
            height: 20px
        }
        .feat-card h3 {
            font-size: 1.05rem
        }
        .feat-card p {
            font-size: 13.5px;
            line-height: 1.7
        }

        .rel-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        .rel-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: 22px;
            text-decoration: none;
            transition: border-color .2s, transform .2s
        }
        .rel-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-2px)
        }
        .rel-card h3 {
            font-size: 1rem;
            margin-bottom: 4px
        }
        .rel-card p {
            font: 500 11.5px/1.5 var(--font-mono);
            color: var(--muted)
        }
        @media (max-width:700px) {
            .rel-grid {
                grid-template-columns: 1fr
            }
        }

        /* ===== Docs layout ===== */
        .docs-layout {
            display: grid;
            grid-template-columns: 264px 1fr 210px;
            gap: 0;
            min-height: calc(100vh - 64px)
        }
        .docs-sidebar {
            position: sticky;
            top: 64px;
            height: calc(100vh - 64px);
            overflow-y: auto;
            border-right: 1px solid var(--hair);
            padding: 28px 20px 40px 24px;
            scrollbar-width: thin;
            scrollbar-color: var(--hair-strong) transparent
        }
        .docs-sidebar::-webkit-scrollbar {
            width: 4px
        }
        .docs-sidebar::-webkit-scrollbar-thumb {
            background: var(--hair-strong);
            border-radius: 4px
        }
        .sidebar-section {
            margin-bottom: 24px
        }
        .sidebar-label {
            font: 600 11px/1 var(--font-mono);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 10px;
            padding-left: 4px
        }
        .sidebar-link {
            display: flex;
            align-items: center;
            gap: 8px;
            font: 500 13.5px/1.5 var(--font-body);
            color: var(--muted);
            text-decoration: none;
            padding: 6px 10px;
            border-radius: 6px;
            transition: background .12s, color .12s;
            margin-bottom: 2px
        }
        .sidebar-link:hover {
            background: var(--chip-bg);
            color: var(--ink)
        }
        .sidebar-link.active {
            background: var(--chip-bg);
            color: var(--accent);
            font-weight: 600
        }
        .sidebar-link .stag {
            margin-left: auto;
            font: 500 9.5px/1 var(--font-mono);
            padding: 2px 5px;
            border: 1px solid var(--hair-strong);
            border-radius: 4px;
            color: var(--muted);
            letter-spacing: .06em
        }
        .docs-main {
            padding: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 56px) clamp(60px, 8vw, 100px);
            max-width: 820px
        }
        .docs-main h1 {
            margin-bottom: 20px
        }
        .docs-main .lede {
            font-size: clamp(1.02rem, 1.3vw, 1.12rem);
            line-height: 1.75;
            max-width: 640px;
            margin-bottom: 32px
        }
        .docs-toc {
            position: sticky;
            top: 64px;
            height: calc(100vh - 64px);
            overflow-y: auto;
            border-left: 1px solid var(--hair);
            padding: 28px 16px 40px 20px;
            scrollbar-width: thin;
            scrollbar-color: var(--hair-strong) transparent
        }
        .docs-toc::-webkit-scrollbar {
            width: 4px
        }
        .docs-toc::-webkit-scrollbar-thumb {
            background: var(--hair-strong);
            border-radius: 4px
        }
        .toc-label {
            font: 600 11px/1 var(--font-mono);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 12px
        }
        .toc-link {
            display: block;
            font: 400 12.5px/1.6 var(--font-body);
            color: var(--muted);
            text-decoration: none;
            padding: 3px 0 3px 12px;
            border-left: 2px solid transparent;
            transition: color .12s, border-color .12s
        }
        .toc-link:hover {
            color: var(--ink)
        }
        .toc-link.active {
            color: var(--accent);
            border-left-color: var(--accent);
            font-weight: 500
        }
        @media (max-width:1080px) {
            .docs-layout {
                grid-template-columns: 1fr
            }
            .docs-sidebar,
            .docs-toc {
                display: none
            }
            .docs-main {
                max-width: 100%;
                padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 32px) clamp(60px, 8vw, 80px)
            }
            .mobile-docs-nav {
                display: block;
                margin-bottom: 28px
            }
        }
        @media (min-width:1081px) {
            .mobile-docs-nav {
                display: none
            }
        }
        .mobile-docs-select {
            width: 100%;
            height: 46px;
            padding: 0 14px;
            border: 1px solid var(--hair-strong);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--ink);
            font: 500 14px/1 var(--font-body);
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357645C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center
        }

        .doc-section {
            margin-top: clamp(44px, 5vw, 60px);
            padding-top: clamp(28px, 4vw, 40px);
            border-top: 1px solid var(--hair)
        }
        .doc-section:first-of-type {
            margin-top: 32px;
            padding-top: 0;
            border-top: none
        }
        .prose {
            font-size: 15.5px;
            line-height: 1.75;
            color: var(--ink-2)
        }
        .prose p+p {
            margin-top: 16px
        }
        .prose ul,
        .prose ol {
            margin: 16px 0;
            padding-left: 24px;
            color: var(--ink-2)
        }
        .prose li {
            margin-bottom: 8px
        }
        .prose li::marker {
            color: var(--accent)
        }
        .prose strong {
            color: var(--ink);
            font-weight: 600
        }
        .prose a {
            color: var(--accent);
            text-decoration: underline;
            text-underline-offset: 3px
        }
        .prose a:hover {
            text-decoration-thickness: 2px
        }
        .code-block {
            background: var(--console-bg);
            border: 1px solid var(--console-line);
            border-radius: 10px;
            padding: 18px 20px;
            font: 400 13px/1.85 var(--font-mono);
            color: var(--console-dim);
            overflow-x: auto;
            margin: 20px 0;
            position: relative
        }
        .code-block .c-key {
            color: var(--console-blue)
        }
        .code-block .c-str {
            color: var(--console-str)
        }
        .code-block .c-num {
            color: var(--console-amber)
        }
        .code-block .c-com {
            color: #5E6C63;
            font-style: italic
        }
        .code-block .c-cmd {
            color: var(--console-ink)
        }
        .code-block .c-ok {
            color: var(--console-green)
        }
        .code-block .c-warn {
            color: var(--console-amber)
        }
        .code-label {
            position: absolute;
            top: 10px;
            right: 14px;
            font: 500 10px/1 var(--font-mono);
            color: var(--console-dim);
            letter-spacing: .1em;
            text-transform: uppercase;
            opacity: .6
        }

        /* ===== Code panel specific ===== */
        .code-panel {
            border: 1px solid var(--console-line);
            border-radius: 14px;
            overflow: hidden;
            background: var(--console-bg);
            box-shadow: var(--shadow);
            position: sticky;
            top: 88px
        }
        .code-panel-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--console-line)
        }
        .code-panel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--console-green);
            animation: pulse 2.2s infinite
        }
        .code-panel-title {
            font: 500 12px/1 var(--font-mono);
            color: var(--console-dim);
            letter-spacing: .06em
        }
        .code-panel-tabs {
            margin-left: auto;
            display: flex;
            gap: 2px
        }
        .code-tab {
            font: 500 11px/1 var(--font-mono);
            color: var(--console-dim);
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background .15s, color .15s;
            letter-spacing: .04em;
            border: none;
            background: none
        }
        .code-tab:hover {
            color: var(--console-ink)
        }
        .code-tab.active {
            background: var(--console-line);
            color: var(--console-green)
        }
        .code-panel-body {
            padding: 18px 20px;
            min-height: 340px;
            font: 400 12.8px/1.85 var(--font-mono);
            color: var(--console-dim);
            overflow-x: auto;
            position: relative
        }
        .code-slide {
            display: none;
            white-space: pre;
            word-break: break-word
        }
        .code-slide.active {
            display: block
        }
        .code-slide .tk {
            color: var(--console-key)
        }
        .code-slide .tf {
            color: var(--console-fn)
        }
        .code-slide .ts {
            color: var(--console-str)
        }
        .code-slide .tn {
            color: var(--console-num)
        }
        .code-slide .tc {
            color: var(--console-com);
            font-style: italic
        }
        .code-slide .ti {
            color: var(--console-ink)
        }
        .code-slide .tg {
            color: var(--console-green)
        }
        .type-cursor {
            display: inline-block;
            width: 8px;
            height: 15px;
            background: var(--console-green);
            vertical-align: -2px;
            margin-left: 1px;
            animation: blink 1s steps(2) infinite
        }
        @keyframes blink {
            50% {
                opacity: 0
            }
        }
        .code-panel-foot {
            padding: 10px 16px;
            border-top: 1px solid var(--console-line);
            font: 500 11px/1 var(--font-mono);
            color: var(--console-dim);
            letter-spacing: .05em;
            display: flex;
            gap: 16px;
            flex-wrap: wrap
        }
        .code-panel-foot b {
            color: var(--console-green);
            font-weight: 500
        }
        @media(max-width:960px) {
            .code-panel {
                position: static
            }
        }
        @media(prefers-reduced-motion:reduce) {
            .type-cursor {
                animation: none
            }
        }

        /* SDK install tabs */
        .install-tabs {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--surface)
        }
        .install-tab-bar {
            display: flex;
            border-bottom: 1px solid var(--hair)
        }
        .install-tab {
            flex: 1;
            font: 500 13px/1 var(--font-body);
            color: var(--muted);
            padding: 14px 16px;
            cursor: pointer;
            transition: background .15s, color .15s;
            border: none;
            background: none;
            text-align: center;
            border-right: 1px solid var(--hair)
        }
        .install-tab:last-child {
            border-right: none
        }
        .install-tab:hover {
            color: var(--ink)
        }
        .install-tab.active {
            color: var(--accent);
            background: var(--chip-bg)
        }
        .install-pane {
            display: none;
            padding: 0
        }
        .install-pane.active {
            display: block
        }
        .install-pane pre {
            margin: 0;
            background: var(--console-bg);
            padding: 18px 20px;
            font: 400 13px/1.85 var(--font-mono);
            color: var(--console-dim);
            overflow-x: auto
        }
        .install-pane pre .c-cmd {
            color: var(--console-ink)
        }
        .install-pane pre .c-com {
            color: var(--console-com);
            font-style: italic
        }

        /* Output block */
        .output-block {
            border: 1px solid var(--console-line);
            border-left: 3px solid var(--console-green);
            border-radius: 8px;
            background: var(--console-bg);
            padding: 16px 18px;
            font: 400 12.5px/1.8 var(--font-mono);
            color: var(--console-dim);
            overflow-x: auto;
            margin: 16px 0
        }
        .output-block .tg {
            color: var(--console-green)
        }
        .output-block .tf {
            color: var(--console-fn)
        }
        .output-block .ts {
            color: var(--console-str)
        }
        .output-block .tn {
            color: var(--console-num)
        }

        /* Numbered steps for SDK */
        .num-step {
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 16px;
            padding: 20px 0;
            border-top: 1px solid var(--hair)
        }
        .num-step:first-child {
            border-top: none
        }
        .num-step-n {
            font: 700 14px/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: .04em
        }
        .num-step h4 {
            font-size: 1.02rem;
            margin-bottom: 6px
        }
        .num-step p {
            font-size: 14px;
            line-height: 1.7
        }

        /* ===== Products page specific ===== */
        .stats-strip {
            border-block: 1px solid var(--hair);
            background: var(--surface)
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }
        .stat-cell {
            padding: 24px 0;
            text-align: center
        }
        .stat-cell+.stat-cell {
            border-left: 1px solid var(--hair)
        }
        .stat-num {
            font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--font-display);
            letter-spacing: -.02em
        }
        .stat-num .g {
            color: var(--accent)
        }
        .stat-lbl {
            margin-top: 6px;
            font: 500 11px/1.4 var(--font-mono);
            color: var(--muted);
            letter-spacing: .1em;
            text-transform: uppercase
        }
        @media (max-width:700px) {
            .stats-grid {
                grid-template-columns: 1fr 1fr
            }
            .stat-cell:nth-child(2) {
                border-left: none
            }
            .stat-cell:nth-child(n+3) {
                border-top: 1px solid var(--hair)
            }
        }

        .filter-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            padding-block: clamp(28px, 4vw, 40px)
        }
        .filter-label {
            font: 500 11.5px/1 var(--font-mono);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted);
            margin-right: 4px
        }
        .filter-btn {
            font: 500 13px/1 var(--font-body);
            color: var(--muted);
            padding: 8px 14px;
            border: 1px solid var(--hair-strong);
            border-radius: 20px;
            cursor: pointer;
            transition: all .15s;
            background: transparent
        }
        .filter-btn:hover {
            color: var(--ink);
            border-color: var(--ink)
        }
        .filter-btn.active {
            background: var(--accent);
            color: var(--accent-contrast);
            border-color: var(--accent)
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding-bottom: clamp(64px, 8vw, 104px)
        }
        @media (max-width:860px) {
            .products-grid {
                grid-template-columns: 1fr
            }
        }

        .product-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: clamp(26px, 3vw, 34px);
            display: flex;
            flex-direction: column;
            gap: 16px;
            transition: border-color .25s, transform .25s, box-shadow .25s;
            position: relative;
            overflow: hidden
        }
        .product-card:hover {
            border-color: var(--hair-strong);
            transform: translateY(-3px);
            box-shadow: var(--shadow)
        }
        .product-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .35s cubic-bezier(.2, .65, .2, 1)
        }
        .product-card:hover::before {
            transform: scaleX(1)
        }
        .product-card.featured {
            border-color: var(--accent)
        }
        .product-card.featured::before {
            transform: scaleX(1)
        }
        .product-card.hidden {
            display: none
        }

        .pc-header {
            display: flex;
            align-items: flex-start;
            gap: 14px
        }
        .pc-icon {
            width: 48px;
            height: 48px;
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--hair);
            border-radius: 11px;
            color: var(--accent);
            background: var(--chip-bg);
            transition: transform .25s
        }
        .product-card:hover .pc-icon {
            transform: scale(1.05) rotate(-2deg)
        }
        .pc-icon svg {
            width: 24px;
            height: 24px
        }
        .pc-title-wrap {
            flex: 1;
            min-width: 0
        }
        .pc-name {
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: -.01em;
            margin-bottom: 4px
        }
        .pc-name a {
            text-decoration: none;
            color: var(--ink)
        }
        .pc-name a:hover {
            color: var(--accent)
        }
        .pc-badges {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            align-items: center
        }
        .pc-category {
            font: 500 10.5px/1 var(--font-mono);
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted)
        }

        .pc-desc {
            font-size: 14.5px;
            line-height: 1.75;
            color: var(--ink-2)
        }

        .pc-features {
            list-style: none;
            display: grid;
            gap: 8px
        }
        .pc-features li {
            display: grid;
            grid-template-columns: 20px 1fr;
            gap: 10px;
            font-size: 13.5px;
            line-height: 1.6;
            color: var(--ink-2);
            align-items: start
        }
        .pc-features li svg {
            width: 14px;
            height: 14px;
            color: var(--accent);
            margin-top: 3px;
            flex: none
        }

        .pc-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding-top: 14px;
            border-top: 1px solid var(--hair)
        }

        .pc-footer {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: auto;
            padding-top: 4px
        }
        .pc-detail {
            font: 600 13px/1 var(--font-body);
            color: var(--ink);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: color .15s
        }
        .pc-detail:hover {
            color: var(--accent)
        }
        .pc-detail .arr {
            transition: transform .15s
        }
        .pc-detail:hover .arr {
            transform: translateX(3px)
        }
        .pc-downloads {
            margin-left: auto;
            display: flex;
            gap: 6px;
            flex-wrap: wrap
        }
        .pc-dl {
            font: 500 11px/1 var(--font-mono);
            color: var(--muted);
            text-decoration: none;
            padding: 6px 10px;
            border: 1px solid var(--hair-strong);
            border-radius: 5px;
            letter-spacing: .04em;
            transition: all .15s;
            display: inline-flex;
            align-items: center;
            gap: 5px
        }
        .pc-dl:hover {
            border-color: var(--accent);
            color: var(--accent)
        }
        .pc-dl svg {
            width: 10px;
            height: 10px
        }

        .cld-countdown {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font: 600 11.5px/1 var(--font-mono);
            color: var(--warn-fg);
            background: var(--warn-bg);
            padding: 6px 10px;
            border-radius: 6px;
            letter-spacing: .04em
        }
        .cld-countdown .cd-tick {
            font-variant-numeric: tabular-nums
        }

        .principle-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }
        .principle-card {
            border: 1px solid var(--hair);
            border-radius: var(--radius);
            background: var(--surface);
            padding: clamp(22px, 3vw, 28px);
            display: flex;
            flex-direction: column;
            gap: 12px
        }
        .principle-card .p-num {
            font: 700 13px/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: .06em
        }
        .principle-card h3 {
            font-size: 1.05rem
        }
        .principle-card p {
            font-size: 13.5px;
            line-height: 1.7
        }
        @media (max-width:700px) {
            .principle-grid {
                grid-template-columns: 1fr
            }
        }

        /* ===== Extractor format pills ===== */
        .fmt-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 20px
        }
        .fmt-pill {
            font: 500 12px/1 var(--font-mono);
            padding: 6px 12px;
            border: 1px solid var(--hair-strong);
            border-radius: 6px;
            color: var(--ink-2);
            letter-spacing: .03em;
            transition: border-color .15s, color .15s
        }
        .fmt-pill:hover {
            border-color: var(--accent);
            color: var(--accent)
        }
        .fmt-pill.rw {
            border-color: var(--accent);
            color: var(--accent);
            background: var(--chip-bg)
        }

        /* ===== Code Leak Detector specific styles ===== */
        .pricing-card {
            border: 1px solid var(--accent);
            border-radius: var(--radius);
            background: var(--chip-bg);
            padding: clamp(20px, 3vw, 28px);
            margin-top: 24px;
            display: flex;
            flex-direction: column;
            gap: 12px
        }
        .pricing-card.expired {
            border-color: var(--warn);
            background: var(--warn-bg)
        }
        .pricing-label {
            font: 600 11px/1 var(--font-mono);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--accent)
        }
        .pricing-card.expired .pricing-label {
            color: var(--warn)
        }
        .pricing-amount {
            font: 700 clamp(2rem, 4vw, 2.8rem)/1 var(--font-display);
            letter-spacing: -.02em;
            color: var(--ink)
        }
        .pricing-amount .free {
            color: var(--accent)
        }
        .pricing-card.expired .pricing-amount .paid {
            color: var(--warn)
        }
        .pricing-sub {
            font: 500 13px/1.6 var(--font-mono);
            color: var(--ink-2);
            letter-spacing: .02em
        }
        .countdown-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 4px
        }
        .cd-cell {
            border: 1px solid var(--hair-strong);
            border-radius: var(--radius-sm);
            background: var(--surface);
            padding: 10px 6px;
            text-align: center
        }
        .cd-num {
            font: 700 clamp(1.2rem, 2.5vw, 1.6rem)/1 var(--font-mono);
            color: var(--accent);
            letter-spacing: -.01em
        }
        .cd-lbl {
            font: 500 9.5px/1 var(--font-mono);
            color: var(--muted);
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-top: 4px
        }
        .pricing-note {
            font: 400 12.5px/1.6 var(--font-mono);
            color: var(--muted);
            letter-spacing: .02em
        }
/* ==========================================================================
   Page components — product pages & documentation
   ========================================================================== */

/* --- Download link cards (products + docs): compact icon + two-line text --- */
.dl-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 20px
}
.dl-card svg {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--accent)
}
.dl-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}
.dl-card-name {
    font: 600 14.5px/1.35 var(--font-body);
    color: var(--ink)
}
.dl-card-sub {
    font: 500 10.5px/1.5 var(--font-mono);
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase
}

/* --- Specification tables (products + docs) --- */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin: 16px 0
}
.spec-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0)
}
.spec-table th,
.spec-table td {
    text-align: left;
    padding: 11px 2px;
    border-top: 1px solid var(--hair);
    vertical-align: top
}
.spec-table tr:first-child th,
.spec-table tr:first-child td {
    border-top: none
}
.spec-table th {
    font: 500 12px/1.6 var(--font-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    width: 44%;
    padding-top: 13px
}
.spec-table td {
    font: 500 12.8px/1.6 var(--font-mono);
    color: var(--ink-2)
}
.spec-table td .g {
    color: var(--accent)
}
.spec-table td a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px
}
.spec-table td a:hover {
    text-decoration-thickness: 2px
}

/* --- Callout note boxes --- */
.callout {
    border: 1px solid var(--hair);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 16px 0
}
.callout strong {
    color: var(--ink)
}

/* --- Feature lists --- */
.feat-list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 14px 0
}
.feat-list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-2)
}
.feat-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-weight: 600
}

/* --- Numbered installation steps (docs) --- */
.step-list {
    list-style: none;
    counter-reset: step;
    margin: 18px 0;
    padding: 0;
    border-bottom: 1px solid var(--hair)
}
.step-list li {
    counter-increment: step;
    position: relative;
    padding: 18px 0 18px 52px;
    border-top: 1px solid var(--hair)
}
.step-list li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 20px;
    font: 600 13px/1 var(--font-mono);
    color: var(--accent);
    letter-spacing: .06em
}
.step-list h4 {
    font-size: 1rem;
    margin-bottom: 6px
}
.step-list p {
    font-size: 14px;
    margin: 0
}

/* --- Product heading row with version chips (docs) --- */
.product-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

/* --- Threat-intel source cards (AV Ultimate) --- */
.source-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}
.source-card {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 20px;
    transition: border-color .2s, transform .2s
}
.source-card:hover {
    border-color: var(--hair-strong);
    transform: translateY(-2px)
}
.source-card h4 {
    font: 600 15px/1.3 var(--font-display);
    letter-spacing: -.01em;
    margin-bottom: 6px
}
.source-card p {
    font: 500 10px/1.4 var(--font-mono);
    letter-spacing: .1em;
    color: var(--muted);
    text-transform: uppercase
}
@media (max-width:860px) {
    .source-grid {
        grid-template-columns: 1fr 1fr
    }
}
@media (max-width:480px) {
    .source-grid {
        grid-template-columns: 1fr
    }
}

/* --- Template pills (GitIgnore Generator) --- */
.tpl-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px
}
.tpl-pill {
    font: 500 12px/1 var(--font-mono);
    padding: 7px 12px;
    border: 1px solid var(--hair-strong);
    border-radius: 20px;
    color: var(--ink-2);
    letter-spacing: .03em;
    transition: border-color .15s, color .15s
}
.tpl-pill:hover {
    border-color: var(--accent);
    color: var(--accent)
}

/* --- Code Leak Detector countdown (docs) --- */
.countdown-box {
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--chip-bg);
    padding: clamp(20px, 3vw, 28px);
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}
.countdown-box.expired {
    border-color: var(--warn);
    background: var(--warn-bg)
}
.countdown-label {
    font: 600 11px/1.4 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent)
}
.countdown-box.expired .countdown-label {
    color: var(--warn)
}
.countdown-timer {
    font: 700 clamp(1.7rem, 3.4vw, 2.3rem)/1.1 var(--font-mono);
    letter-spacing: .02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums
}
.countdown-sub {
    font: 500 12.5px/1.6 var(--font-mono);
    color: var(--muted);
    letter-spacing: .02em
}

/* --- Documentation typography rhythm --- */
.docs-main h2 {
    margin-bottom: 18px
}
.docs-main h3 {
    margin: 28px 0 12px
}
.docs-main .doc-section h3:first-of-type {
    margin-top: 22px
}
.prose h3 {
    font-size: 1.08rem;
    margin: 26px 0 10px
}
.prose h3:first-child {
    margin-top: 0
}

/* --- Home hero / split wrappers --- */
.hero-copy {
    min-width: 0
}
.hero-stats {
    margin-top: clamp(44px, 6vw, 64px)
}
.split-left,
.split-right {
    min-width: 0
}
/* ==========================================================================
   Brand logo & legal pages
   ========================================================================== */
.brand .mark {
    object-fit: contain
}
.prose h2 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    letter-spacing: -.015em;
    margin: 40px 0 12px
}
.prose h2:first-child {
    margin-top: 0
}
/* ==========================================================================
   Donate / Support page (Ko-fi)
   ========================================================================== */
:root {
    --kofi: #FF5E5B;
    --kofi-strong: #E64542
}
[data-theme="dark"] {
    --kofi: #FF6B68;
    --kofi-strong: #FF8583
}
.btn-kofi {
    background: var(--kofi);
    color: #fff;
    box-shadow: 0 8px 24px -12px rgba(255, 94, 91, .55)
}
.btn-kofi:hover {
    background: var(--kofi-strong)
}
.btn-lg {
    height: 54px;
    padding: 0 28px;
    font-size: 16px
}
.band .btn-kofi {
    box-shadow: 0 8px 28px -10px rgba(255, 94, 91, .5)
}

/* --- hero --- */
.donate-hero {
    padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 72px)
}
.donate-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center
}
@media (max-width:960px) {
    .donate-hero-grid {
        grid-template-columns: 1fr
    }
}
.donate-hero h1 {
    margin: 18px 0 20px;
    max-width: 680px
}
.donate-hero .lede {
    color: var(--ink-2)
}
.hero-assurance {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 24px;
    font: 500 12.5px/1.4 var(--font-mono);
    color: var(--muted);
    letter-spacing: .03em
}
.hero-assurance span {
    display: inline-flex;
    align-items: center;
    gap: 7px
}
.hero-assurance svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex: none
}

/* --- Ko-fi card --- */
.kofi-card {
    border: 1px solid var(--hair);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative
}
.kofi-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kofi), #FF9A5B)
}
.kofi-body {
    padding: clamp(24px, 3vw, 32px)
}
.kofi-label {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kofi);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}
.kofi-label svg {
    width: 18px;
    height: 18px
}
.kofi-title {
    font: 700 clamp(1.4rem, 2.4vw, 1.7rem)/1.2 var(--font-display);
    letter-spacing: -.018em;
    color: var(--ink);
    margin-bottom: 10px
}
.kofi-desc {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-2);
    margin-bottom: 22px
}
.amount-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px
}
.amount-chip {
    border: 1px solid var(--hair-strong);
    border-radius: 8px;
    padding: 12px 6px;
    text-align: center;
    font: 600 14px/1 var(--font-mono);
    color: var(--ink-2);
    cursor: pointer;
    transition: all .15s;
    background: var(--bg);
    user-select: none
}
.amount-chip:hover {
    border-color: var(--kofi);
    color: var(--kofi)
}
.amount-chip.active {
    border-color: var(--kofi);
    background: var(--kofi);
    color: #fff
}
.amount-chip small {
    display: block;
    font: 500 9.5px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
    margin-top: 5px
}
.kofi-note {
    font: 500 11.5px/1.6 var(--font-mono);
    color: var(--muted);
    letter-spacing: .02em;
    margin-bottom: 18px
}
.kofi-foot {
    padding: 16px clamp(24px, 3vw, 32px);
    border-top: 1px solid var(--hair);
    background: var(--bg);
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 11.5px/1.5 var(--font-mono);
    color: var(--muted);
    letter-spacing: .03em
}
.kofi-foot svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex: none
}

/* --- section heads on the donate page (single-column variant) --- */
.donate-page .sec-head {
    display: block;
    max-width: 680px;
    margin-bottom: clamp(32px, 4vw, 48px)
}
.donate-page .sec-head h2 {
    margin-top: 14px
}
.donate-page .sec-head p {
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--ink-2)
}

/* --- promise grid --- */
.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}
.promise-card {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(22px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .2s, transform .2s
}
.promise-card:hover {
    border-color: var(--hair-strong);
    transform: translateY(-2px)
}
.promise-icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hair);
    border-radius: 10px;
    color: var(--accent);
    background: var(--chip-bg)
}
.promise-icon svg {
    width: 21px;
    height: 21px
}
.promise-card h3 {
    font-size: 1.05rem
}
.promise-card p {
    font-size: 13.5px;
    line-height: 1.72
}
@media (max-width:860px) {
    .promise-grid {
        grid-template-columns: 1fr
    }
}

/* --- use of funds --- */
.funds-list {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-top: 8px
}
.funds-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--surface);
    align-items: start
}
.funds-pct {
    font: 700 15px/1 var(--font-mono);
    color: var(--accent);
    letter-spacing: -.01em;
    padding-top: 2px
}
.funds-item h3 {
    font-size: 1.02rem;
    margin-bottom: 6px
}
.funds-item p {
    font-size: 13.5px;
    line-height: 1.72;
    margin: 0
}
.funds-bar {
    height: 6px;
    border-radius: 6px;
    background: var(--hair);
    margin-top: 12px;
    overflow: hidden
}
.funds-bar i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 6px;
    transform-origin: left;
    animation: grow 1.2s cubic-bezier(.2, .65, .2, 1) forwards
}
@keyframes grow {
    from {
        transform: scaleX(0)
    }
}
@media (max-width:640px) {
    .funds-item {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        padding: 16px
    }
}

/* --- ways to give tiers --- */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}
.tier-card {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(24px, 3vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .2s, transform .2s
}
.tier-card:hover {
    border-color: var(--hair-strong);
    transform: translateY(-2px)
}
.tier-card.featured {
    border-color: var(--accent);
    position: relative
}
.tier-card.featured::after {
    content: "MOST CHOSEN";
    position: absolute;
    top: -10px;
    right: 18px;
    font: 600 10px/1 var(--font-mono);
    letter-spacing: .14em;
    color: var(--accent-contrast);
    background: var(--accent);
    padding: 5px 9px;
    border-radius: 5px
}
.tier-name {
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted)
}
.tier-price {
    font: 700 clamp(1.8rem, 3vw, 2.4rem)/1 var(--font-display);
    letter-spacing: -.02em;
    color: var(--ink)
}
.tier-price small {
    font: 500 13px/1 var(--font-mono);
    color: var(--muted);
    letter-spacing: .02em;
    margin-left: 6px
}
.tier-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ink-2)
}
.tier-list {
    list-style: none;
    display: grid;
    gap: 9px;
    margin-top: 4px
}
.tier-list li {
    display: flex;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
    align-items: start
}
.tier-list li svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex: none;
    margin-top: 3px
}
.tier-card .btn {
    margin-top: auto;
    justify-content: center
}
@media (max-width:860px) {
    .tier-grid {
        grid-template-columns: 1fr
    }
}

/* --- FAQ accordion --- */
.faq-list {
    display: grid;
    gap: 12px;
    max-width: 760px
}
.faq-item {
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    text-align: left;
    font: 600 15px/1.4 var(--font-body);
    color: var(--ink);
    cursor: pointer;
    transition: background .15s
}
.faq-q:hover {
    background: var(--bg)
}
.faq-q .ico {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--accent);
    transition: transform .25s
}
.faq-item.open .faq-q .ico {
    transform: rotate(45deg)
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease
}
.faq-a-inner {
    padding: 0 20px 20px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ink-2)
}
.faq-a-inner a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px
}