@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&display=swap');
/* FT Sans: Fyscal's brand typeface, the same files as fyscaltech.com (converted to woff2). */
@font-face { font-family: 'FT Sans'; src: url('../fonts/FTSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'FT Sans'; src: url('../fonts/FTSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'FT Sans'; src: url('../fonts/FTSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'FT Sans'; src: url('../fonts/FTSans-Semi_Bold.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; }

        :root {
            /* ===== Real FyscalTech brand tokens (from the site's own design system) =====
     Electric blue is the light-mode brand primary; magenta is reserved for
     dark-mode accents/chips only — never a large button fill, per the
     system's own rule, honored here. */
            --primary: #352eff;
            /* electric blue — brand, primary actions */
            --pink: #ff00ff;
            /* magenta — accents, chips, badges only */
            --secondary: #0053ff;
            /* royal blue — gradients */
            --tertiary-1: #7c9dff;
            /* periwinkle — hover/soft accents */
            --tertiary-2: #030192;
            /* deep indigo — pressed/hover state */
            --primary-soft: #352eff1a;
            /* 10% blue tint */
            --pink-soft: #ff00ff1a;

            --fg: #171717;
            /* ink — never pure black */
            --fg-muted: #5f6270;
            --fg-placeholder: #b2b2b2;
            --bg: #ffffff;
            --bg-secondary: #e5e5e5;
            --bg-tertiary: #e6edff;
            --border: #efefef;
            --border-strong: #171717;

            --success: #629c28;
            --danger: #ff0000;
            --warning: #ff8400;

            /* All rectangular surfaces are 0 — buttons, inputs, cards. Only chips/
     badges/avatars stay fully round. This is the brand's own rule. */
            --radius: 0;
            --radius-full: 9999px;

            --shadow-sm: 0px 2px 4px 0px rgba(16, 16, 19, 0.04), 0px 16px 32px -4px rgba(16, 16, 19, 0.10);
            --shadow-md: 0px 2px 4px 0px rgba(16, 16, 19, 0.04), 0px 24px 48px -8px rgba(16, 16, 19, 0.12);
            --shadow-lg: 0px 2px 4px 0px rgba(16, 16, 19, 0.04), 0px 40px 80px -16px rgba(16, 16, 19, 0.16);
            --shadow-brand: 0 8px 32px rgba(53, 46, 255, 0.35);

            --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

            /* FT Sans, the brand face, is self-hosted from fonts/ (the same files as
     fyscaltech.com). JetBrains Mono is the real, actual brand mono
     face (data, tokens, currency) and is used as-is. */
            --font-body: 'FT Sans', system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', ui-monospace, monospace;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--fg);
            font-family: 'FT Sans', system-ui, sans-serif;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: var(--font-body);
            font-weight: 600;
            letter-spacing: -.02em;
            margin: 0;
        }

        .mono {
            font-family: var(--font-mono);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img,
        svg {
            display: block;
            max-width: 100%;
        }

        ::selection {
            background: var(--tertiary-1);
            color: #fff;
        }

        .skip-link {
            position: absolute;
            left: 12px;
            top: -60px;
            z-index: 999;
            background: var(--primary);
            color: #fff;
            padding: 10px 18px;
            border-radius: var(--radius);
            font-weight: 600;
            transition: top .15s ease;
        }

        .skip-link:focus {
            top: 12px;
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ============ NAV ============ */
        .nav {
            position: sticky;
            top: 0;
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 48px;
            background: rgba(247, 247, 251, 0.82);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--border);
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-body);
            font-weight: 700;
            font-size: 18px;
        }

        .nav-brand .dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 4px rgba(53, 46, 255, 0.16);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 30px;
            font-size: 14.5px;
            font-weight: 600;
            color: var(--fg-muted);
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .nav-search {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 9px 16px;
            font-size: 13.5px;
            color: var(--fg-muted);
            cursor: pointer;
        }

        .nav-search kbd {
            font-family: var(--font-mono);
            font-size: 11px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 2px 6px;
            color: var(--fg-muted);
        }

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 22px;
            cursor: pointer;
            color: var(--fg);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 14.5px;
            padding: 13px 24px;
            border-radius: var(--radius);
            border: 1.5px solid transparent;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease;
            font-family: 'FT Sans', system-ui, sans-serif;
        }

        .btn-primary {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            box-shadow: var(--shadow-brand);
        }

        .btn-primary:hover {
            background: var(--tertiary-2);
            border-color: var(--tertiary-2);
        }

        .btn-ghost {
            background: rgba(255, 255, 255, 0.5);
            color: var(--fg);
            border: 1.5px solid rgba(10, 16, 40, 0.18);
        }

        .btn-ghost:hover {
            background: #fff;
        }

        /* ============ HERO ============ */
        .hero {
            position: relative;
            overflow: hidden;
            padding: 88px 48px 60px;
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: 40px;
            align-items: center;
        }

        .hero::before {
            content: "";
            position: absolute;
            top: -30%;
            right: -10%;
            width: 70%;
            height: 160%;
            background: radial-gradient(circle, rgba(53, 46, 255, 0.14), transparent 65%);
            z-index: 0;
            pointer-events: none;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(53, 46, 255, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(53, 46, 255, 0.06) 1px, transparent 1px);
            background-size: 44px 44px;
            -webkit-mask-image: radial-gradient(ellipse 65% 60% at 74% 42%, black 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 65% 60% at 74% 42%, black 35%, transparent 78%);
            z-index: 0;
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-mono);
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--primary);
            background: rgba(53, 46, 255, 0.08);
            padding: 7px 14px;
            border-radius: 0;
            margin-bottom: 22px;
        }

        .hero-eyebrow .live-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success);
            animation: pulseDot 2s ease-in-out infinite;
        }

        @keyframes pulseDot {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .3;
            }
        }

        .hero h1 {
            font-size: clamp(38px, 4.6vw, 58px);
            line-height: 1.06;
            margin-bottom: 20px;
        }

        .hero h1 .accent {
            background: linear-gradient(120deg, var(--primary), var(--tertiary-1));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-lead {
            font-size: 17.5px;
            color: var(--fg-muted);
            max-width: 520px;
            margin-bottom: 32px;
        }

        .hero-cta-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 36px;
            flex-wrap: wrap;
        }

        .hero-search {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px 20px;
            max-width: 440px;
            box-shadow: var(--shadow-sm);
        }

        .hero-search input {
            border: none;
            outline: none;
            font-size: 14.5px;
            font-family: 'FT Sans', system-ui, sans-serif;
            flex: 1;
            background: transparent;
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            background: rgba(53, 46, 255, 0.015);
        }

        .hero-stat {
            flex: 1;
            min-width: 128px;
            padding: 14px 20px;
            border-right: 1px solid var(--border);
            position: relative;
        }

        .hero-stat:last-child {
            border-right: none;
        }

        .hero-stat::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--tertiary-1));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .25s ease;
        }

        .hero-stat:hover::before {
            transform: scaleX(1);
        }

        .hero-stat .num {
            font-family: var(--font-mono);
            font-size: 25px;
            font-weight: 700;
            color: var(--fg);
            letter-spacing: -.01em;
        }

        .hero-stat .label {
            font-size: 12.5px;
            color: var(--fg-muted);
            margin-top: 2px;
        }

        /* --- Signature hero illustration: live risk-screening radar --- */
        .hero-illustration {
            position: relative;
            z-index: 1;
            aspect-ratio: 1/0.85;
            min-height: 340px;
        }

        .glow-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(55px);
            pointer-events: none;
        }

        .glow-blob-1 {
            width: 260px;
            height: 260px;
            background: var(--primary);
            opacity: 0.14;
            top: -20px;
            left: 8%;
            animation: blobDrift 9s ease-in-out infinite;
        }

        .glow-blob-2 {
            width: 220px;
            height: 220px;
            background: #8A2BE8;
            opacity: 0.13;
            bottom: 4%;
            right: 4%;
            animation: blobDrift 11s ease-in-out infinite reverse;
        }

        .glow-blob-3 {
            width: 180px;
            height: 180px;
            background: var(--pink);
            opacity: 0.08;
            bottom: 12%;
            left: -4%;
            animation: blobDrift 7.5s ease-in-out infinite;
        }

        @keyframes blobDrift {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(14px, -10px) scale(1.08);
            }
        }

        .live-feed-mock {
            position: absolute;
            top: 2%;
            left: 0;
            display: flex;
            align-items: center;
            gap: 9px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0;
            padding: 9px 16px 9px 12px;
            box-shadow: 0 10px 24px -8px rgba(53, 46, 255, 0.22);
            font-family: var(--font-mono);
            font-size: 11.5px;
            color: var(--fg-muted);
            z-index: 5;
        }

        .live-feed-mock .lf-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-soft);
            flex: none;
            animation: pulseDot 2s ease-in-out infinite;
        }

        .live-feed-mock b {
            color: var(--fg);
            font-weight: 700;
        }

        .live-feed-mock .lf-ok {
            color: var(--primary);
            font-weight: 600;
        }

        /* --- The radar itself --- */
        .radar-wrap {
            position: absolute;
            top: 46%;
            left: 42%;
            transform: translate(-50%, -50%);
            width: 260px;
            height: 260px;
        }

        .radar-ring {
            position: absolute;
            border-radius: 50%;
            border: 1.5px solid rgba(53, 46, 255, 0.16);
        }

        .radar-ring.r1 {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .radar-ring.r2 {
            top: 15.5%;
            left: 15.5%;
            right: 15.5%;
            bottom: 15.5%;
            border-color: rgba(138, 43, 232, 0.16);
        }

        .radar-ring.r3 {
            top: 31%;
            left: 31%;
            right: 31%;
            bottom: 31%;
        }

        .radar-sweep {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background: conic-gradient(from 0deg, transparent 0deg, rgba(53, 46, 255, 0.16) 45deg, transparent 100deg);
            animation: radarSpin 5s linear infinite;
        }

        @keyframes radarSpin {
            to {
                transform: rotate(360deg);
            }
        }

        .radar-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 82px;
            height: 82px;
            border-radius: 50%;
            background: var(--bg);
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 32px -10px rgba(53, 46, 255, 0.28);
            z-index: 3;
        }

        .radar-center .rc-num {
            font-size: 23px;
            font-weight: 800;
            color: var(--fg);
            line-height: 1;
        }

        .radar-center .rc-lbl {
            font-size: 8.5px;
            color: var(--fg-muted);
            text-transform: uppercase;
            letter-spacing: .03em;
            margin-top: 3px;
        }

        .radar-entity {
            position: absolute;
            border-radius: 50%;
        }

        .re-1 {
            width: 11px;
            height: 11px;
            background: radial-gradient(circle at 35% 30%, #a8b6ff, var(--primary));
            box-shadow: 0 0 10px 1px rgba(53, 46, 255, 0.4);
            top: 3%;
            left: 46%;
        }

        .re-2 {
            width: 9px;
            height: 9px;
            background: radial-gradient(circle at 35% 30%, #d3aef8, #8A2BE8);
            box-shadow: 0 0 8px 1px rgba(138, 43, 232, 0.35);
            top: 22%;
            left: 86%;
        }

        .re-3 {
            width: 8px;
            height: 8px;
            background: radial-gradient(circle at 35% 30%, #c2cfff, var(--secondary));
            box-shadow: 0 0 8px 1px rgba(0, 83, 255, 0.3);
            top: 79%;
            left: 5%;
        }

        .re-flag {
            width: 15px;
            height: 15px;
            top: 83%;
            left: 67%;
            background: radial-gradient(circle at 35% 30%, #ff9df7, var(--pink));
            box-shadow: 0 0 0 7px var(--pink-soft), 0 0 16px 3px rgba(255, 0, 255, 0.5);
            animation: flagPulse 2.2s ease-in-out infinite;
        }

        @keyframes flagPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.22);
            }
        }

        .case-card-mock {
            position: absolute;
            bottom: 3%;
            right: 0;
            width: 220px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px 18px;
            box-shadow: 0 26px 50px -14px rgba(53, 46, 255, 0.3);
            z-index: 6;
            animation: floatCard 5s ease-in-out infinite;
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .case-card-mock .cc-tag {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #c400c4;
            background: var(--pink-soft);
            padding: 3px 8px;
            margin-bottom: 8px;
        }

        .case-card-mock .cc-title {
            font-size: 13.5px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .case-card-mock .cc-sub {
            font-size: 11.5px;
            color: var(--fg-muted);
        }

        /* ============ TRUST ROW ============ */
        .trust-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            padding: 0 48px 70px;
            max-width: 1280px;
            margin: 0 auto;
        }

        .trust-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .trust-icon {
            flex: none;
            width: 44px;
            height: 44px;
            border-radius: var(--radius);
            background: rgba(53, 46, 255, 0.08);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .trust-item h4 {
            font-size: 15px;
            margin-bottom: 4px;
        }

        .trust-item p {
            font-size: 13.5px;
            color: var(--fg-muted);
            margin: 0;
        }

        /* ============ SECTION SHELL ============ */
        .section {
            padding: 52px 48px;
            max-width: 1280px;
            margin: 0 auto;
        }

        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            margin-bottom: 26px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .section-eyebrow {
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 10px;
            display: block;
        }

        .section h2 {
            font-size: 32px;
        }

        .section-sub {
            font-size: 15px;
            color: var(--fg-muted);
            max-width: 560px;
            margin-top: 10px;
        }

        /* ============ CAPABILITIES ============ */
        .capability-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px 28px;
        }

        .capability-card {
            display: grid;
            grid-template-columns: 34px 1fr;
            grid-template-rows: auto auto;
            column-gap: 14px;
            row-gap: 4px;
            padding: 22px 0;
            border-bottom: 1px solid var(--border);
            transition: background-color .15s ease;
        }

        .capability-card:hover {
            background: var(--bg-card, #fafafe);
        }

        .cap-icon {
            grid-column: 1;
            grid-row: 1 / 3;
            align-self: start;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: var(--primary);
            flex: none;
        }

        .cap-icon svg {
            width: 16px;
            height: 16px;
        }

        .capability-card h3 {
            grid-column: 2;
            grid-row: 1;
            font-size: 16px;
            margin: 0;
            align-self: end;
        }

        .capability-card p {
            grid-column: 2;
            grid-row: 2;
            font-size: 13.8px;
            color: var(--fg-muted);
            margin: 0;
        }

        /* ============ MODULE DASHBOARD (grouped by category) ============ */
        .mod-groups {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        .mod-group-header {
            display: flex;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 14px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }

        .mod-group-title {
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--primary);
            margin: 0;
        }

        .mod-group-count {
            font-size: 12.5px;
            color: var(--fg-muted);
            font-weight: 500;
        }

        /* ============ MODULE DASHBOARD (bento grid) ============ */
        .mod-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(168px, auto);
            gap: 16px;
        }

        .mod-card {
            position: relative;
            background: var(--bg);
            border: 1px solid var(--border);
            border-top: 3px solid var(--primary);
            border-radius: var(--radius);
            padding: 20px 22px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .22s ease;
            opacity: 0;
            transform: translateY(16px);
        }

        .mod-card.revealed {
            opacity: 1;
            transform: translateY(0);
        }

        .mod-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px -16px rgba(53, 46, 255, 0.28);
            border-color: var(--primary);
        }

        .mod-card--lg {
            grid-column: span 2;
            grid-row: span 1;
        }

        .mod-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            background: var(--primary);
            box-shadow: 0 10px 20px -10px rgba(53, 46, 255, 0.5);
            transition: transform .22s ease;
        }

        .mod-preview {
            border-radius: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            margin-bottom: 18px;
            aspect-ratio: 16 / 7.2;
            background: var(--bg-card, #f7f8fc);
        }
        .mod-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
            transition: transform .3s ease;
        }
        .mod-card:hover .mod-preview img {
            transform: scale(1.04);
        }
        .mod-card--lg .mod-preview {
            aspect-ratio: 16 / 6;
        }

        .mod-card:hover .mod-icon {
            transform: scale(1.08) rotate(-3deg);
        }

        .mod-card h3 {
            font-size: 16.5px;
            margin-bottom: 8px;
        }

        .mod-card p {
            font-size: 13.3px;
            color: var(--fg-muted);
            margin: 0 0 18px;
            flex: 1;
        }

        .mod-explore {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary);
        }

        .mod-card:hover .mod-explore svg {
            transform: translateX(3px);
        }

        .mod-explore svg {
            transition: transform .18s ease;
        }

        .mod-card[data-hidden="true"] {
            display: none;
        }

        /* ============ QUICK START ============ */
        .quickstart {
            background: linear-gradient(135deg, var(--fg), var(--tertiary-2));
            color: #fff;
            border-radius: var(--radius);
            padding: 52px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        .quickstart h2 {
            color: #fff;
            font-size: 30px;
            margin-bottom: 14px;
        }

        .quickstart p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 15px;
            margin-bottom: 28px;
        }

        .qs-steps {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .qs-step {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .qs-num {
            flex: none;
            width: 32px;
            height: 32px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 600;
        }

        .qs-step h4 {
            color: #fff;
            font-size: 14.5px;
            margin-bottom: 3px;
        }

        .qs-step p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 13px;
            margin: 0;
        }

        /* ============ UPDATES ============ */
        .updates-list {
            display: flex;
            flex-direction: column;
        }

        .release-list {
            display: flex;
            flex-direction: column;
        }

        .release-row {
            display: grid;
            grid-template-columns: 160px 1fr;
            gap: 24px;
            padding: 22px 0;
            border-bottom: 1px solid var(--border);
        }

        .release-row:first-child {
            padding-top: 0;
        }

        .release-version {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 2px;
        }

        .release-tag {
            display: inline-block;
            font-family: var(--font-mono);
            font-size: 12.5px;
            font-weight: 700;
            color: var(--primary);
            background: rgba(53, 46, 255, 0.08);
            padding: 3px 9px;
            border-radius: 0;
            width: fit-content;
        }

        .release-date {
            font-family: var(--font-mono);
            font-size: 11.5px;
            color: var(--fg-muted);
        }

        .release-body .release-item h4 {
            font-size: 15px;
            margin-bottom: 4px;
        }

        .release-body .release-item p {
            font-size: 13.5px;
            color: var(--fg-muted);
            margin: 0;
        }

        @media (max-width: 640px) {
            .release-row {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }

        .update-row {
            display: grid;
            grid-template-columns: 120px 1fr;
            gap: 24px;
            padding: 22px 0;
            border-bottom: 1px solid var(--border);
        }

        .update-row:first-child {
            padding-top: 0;
        }

        .update-date {
            font-family: var(--font-mono);
            font-size: 12.5px;
            color: var(--fg-muted);
            padding-top: 3px;
        }

        .update-tag {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            padding: 3px 9px;
            border-radius: 0;
            margin-bottom: 8px;
        }

        .update-tag.new {
            background: rgba(98, 156, 40, 0.12);
            color: #3b6a12;
        }

        .update-tag.improved {
            background: rgba(53, 46, 255, 0.1);
            color: var(--primary);
        }

        .update-tag.fix {
            background: rgba(255, 0, 0, 0.08);
            color: var(--danger);
        }

        .update-row h4 {
            font-size: 15px;
            margin-bottom: 4px;
        }

        .update-row p {
            font-size: 13.5px;
            color: var(--fg-muted);
            margin: 0;
        }

        /* ============ FOOTER ============ */
        footer {
            border-top: 1px solid var(--border);
            padding: 48px;
            margin-top: 20px;
        }

        .foot-inner {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
        }

        .foot-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-body);
            font-weight: 700;
        }

        .foot-links {
            display: flex;
            gap: 24px;
            font-size: 13.5px;
            color: var(--fg-muted);
        }

        .foot-links a:hover {
            color: var(--primary);
        }

        /* ============ COMMAND PALETTE ============ */
        .cmdk-overlay {
            position: fixed;
            inset: 0;
            z-index: 900;
            background: rgba(11, 14, 26, 0.4);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 12vh;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s ease;
        }

        .cmdk-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .cmdk-box {
            width: min(560px, 90vw);
            background: #fff;
            border-radius: var(--radius);
            box-shadow: 0 40px 90px -20px rgba(11, 14, 26, 0.4);
            overflow: hidden;
            transform: translateY(-8px);
            transition: transform .15s ease;
        }

        .cmdk-overlay.open .cmdk-box {
            transform: translateY(0);
        }

        .cmdk-input {
            width: 100%;
            border: none;
            padding: 20px 22px;
            font-size: 16px;
            font-family: 'FT Sans', system-ui, sans-serif;
            border-bottom: 1px solid var(--border);
            outline: none;
        }

        .cmdk-results {
            max-height: 360px;
            overflow-y: auto;
            padding: 8px;
        }

        .cmdk-item {
            padding: 12px 14px;
            border-radius: var(--radius);
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }

        .cmdk-item:hover,
        .cmdk-item.active {
            background: rgba(53, 46, 255, 0.07);
            color: var(--primary);
        }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 1080px) {
            .mod-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .mod-card--lg {
                grid-column: span 2;
            }

            .capability-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .trust-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 860px) {
            .nav-links {
                display: none;
            }

            .menu-toggle {
                display: block;
            }

            .hero {
                grid-template-columns: 1fr;
                padding: 60px 24px 40px;
            }

            .hero-illustration {
                order: -1;
                max-width: 380px;
                margin: 0 auto 20px;
            }

            .section {
                padding: 50px 24px;
            }

            .quickstart {
                grid-template-columns: 1fr;
                padding: 32px;
            }

            .mod-grid {
                grid-template-columns: 1fr;
            }

            .mod-card--lg {
                grid-column: span 1;
            }

            .capability-grid {
                grid-template-columns: 1fr;
            }

            .trust-row {
                grid-template-columns: 1fr;
                padding: 0 24px 50px;
            }

            .update-row {
                grid-template-columns: 1fr;
                gap: 6px;
            }

            footer {
                padding: 32px 24px;
            }
        }


        :root {
            --accent: #352EFF;
            --accent-2: #5B54FF;
            --accent-soft: #EAEAFF;
            --dark: #171717;
            --grey: #575757;
            --grey-light: #6b6b73;
            --border: #E7E7EF;
            --bg-card: #F7F8FC;
            --white: #FFFFFF;
            --radius-lg: 20px;
            --radius-md: 14px;
            --radius-sm: 9px;
            --sidebar-w: 228px;
            --topbar-h: 76px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        html,
        body {
            overflow-x: clip;
            max-width: 100%;
        }

        body {
            margin: 0;
            background: var(--white);
            color: var(--dark);
            font-family: 'FT Sans', system-ui, sans-serif;
            font-size: 15.5px;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }

        h1,
        h2,
        h3,
        h4,
        .display,
        nav a,
        .btn,
        .eyebrow,
        .side-link,
        .sec-tag {
            font-family: 'FT Sans', system-ui, sans-serif;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        code {
            font-family: 'IBM Plex Mono', Consolas, monospace;
            background: var(--accent-soft);
            color: var(--accent);
            padding: 1px 6px;
            border-radius: 0;
            font-size: .92em;
        }

        /* faint dot-grid background wash, like the hero section on the live site */
        .bg-grid {
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(53, 46, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(53, 46, 255, 0.05) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: linear-gradient(to bottom, black, transparent 90%);
        }

        /* ---------- Topbar ---------- */
        .topbar {
            position: sticky;
            top: 0;
            z-index: 100;
            height: var(--topbar-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 0 40px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex-shrink: 1;
        }

        .brand img {
            height: 34px;
            width: auto;
            flex-shrink: 1;
            min-width: 0;
            max-width: 100%;
        }

        .crumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            color: var(--grey);
            font-weight: 500;
        }

        .crumb .sep {
            color: #C9C9D6;
        }

        .crumb .current {
            color: var(--dark);
            font-weight: 600;
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: 18px;
            flex: none;
        }

        .top-actions a.back {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--grey);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 14px;
            padding: 11px 22px;
            border-radius: 0;
            cursor: pointer;
            border: none;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .btn-primary {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 8px 20px rgba(53, 46, 255, 0.25);
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 26px rgba(53, 46, 255, 0.32);
        }

        .btn-outline {
            background: #fff;
            color: var(--dark);
            border: 1.5px solid var(--border);
        }

        .btn-outline:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* ---------- Hero ---------- */
        .hero {
            position: relative;
            padding: 72px 40px 56px;
            max-width: 1180px;
            margin: 0 auto;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 12.5px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 22px;
        }

        .eyebrow::before {
            content: "";
            display: inline-block;
            width: 22px;
            height: 2px;
            background: var(--accent);
            border-radius: 0;
        }

        .hero h1 {
            font-size: 46px;
            font-weight: 700;
            line-height: 1.14;
            margin: 0 0 18px;
            letter-spacing: -.01em;
        }

        .hero h1 .blue {
            color: var(--accent);
        }

        .hero-lead {
            font-size: 17.5px;
            color: var(--grey);
            max-width: 640px;
            margin: 0 0 28px;
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

        .hero-stats .stat {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 14.5px;
            font-weight: 600;
            color: var(--dark);
            background: var(--white);
            border-radius: 0;
            padding: 14px 20px;
            box-shadow: 0 10px 24px -14px rgba(23, 23, 23, 0.18);
            border: 1px solid var(--border);
        }

        .stat .tick {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex: none;
        }

        /* ---------- Layout ---------- */
        .layout {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 40px 100px;
            display: grid;
            grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 240px;
            gap: 56px;
            align-items: flex-start;
            position: relative;
        }

        .sidebar {
            width: var(--sidebar-w);
            flex: none;
            position: relative;
        }
        .sidebar-nav {
            position: static;
            top: calc(var(--topbar-h) + 28px);
            max-height: calc(100vh - var(--topbar-h) - 56px);
            overflow-y: auto;
            padding-right: 6px;
            display: flex;
            flex-direction: column;
        }
        .sidebar-nav.js-pinned { position: fixed; }
        .sidebar-nav.js-released { position: absolute; left: 0; }

        /* Minimal, professional scrollbar for the sidebar's internal scroll
           (avoids OS-default scrollbars with arrow buttons on some platforms). */
        .sidebar-nav {
            scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
        }
        .sidebar-nav::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar-nav::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar-nav::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 999px;
        }
        .sidebar-nav::-webkit-scrollbar-thumb:hover {
            background: var(--fg-muted);
        }

        /* Category headers: FT blue, matching the brand accent. */
        .side-category-title {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: var(--primary);
            margin: 10px 0 3px;
            padding-top: 7px;
            border-top: 1px solid var(--border);
            font-family: 'FT Sans', system-ui, sans-serif;
        }
        .side-category-title:first-of-type {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

        /* Fix: the base .side-group>.side-link rule elsewhere in this file
           sets justify-content:space-between, which (with only a caret and
           a text span as children) shoves the text all the way to the
           right edge, leaving an ugly gap after the caret. Force left
           alignment here instead. */
        .side-group > .side-link,
        .sidebar .side-link {
            justify-content: flex-start !important;
        }

        /* Main topic links: black/dark for strong contrast, not grey. */
        .side-link,
        .side-link-text,
        .side-link-plain {
            color: var(--dark);
            font-weight: 400;
        }
        /* Align leaf items (no caret, e.g. Glossary) with the text of items
           that do have a caret, rather than sitting flush at the caret's position. */
        .sidebar .side-link-plain {
            padding-left: 18px;
        }
        .side-link:hover,
        .side-link:hover .side-link-text {
            color: var(--primary);
        }
        .side-link.active,
        .side-link.active .side-link-text {
            color: var(--primary);
        }

        /* Sub-topic links: grey, clearly secondary to the main topics above. */
        .sidebar .side-sublink {
            color: var(--fg-muted);
            font-weight: 500;
        }
        .sidebar .side-sublink:hover {
            color: var(--dark);
        }
        .sidebar .side-sublink.active-sublink {
            color: var(--primary);
            font-weight: 600;
        }

        /* ---------- Right-hand "On this page" panel ---------- */
        .page-toc {
            width: 240px;
            flex: none;
            position: sticky;
            top: calc(var(--topbar-h) + 28px);
            max-height: calc(100vh - var(--topbar-h) - 56px);
            overflow-y: auto;
            padding-left: 20px;
            border-left: 1px solid var(--border);
        }

        .page-toc::-webkit-scrollbar {
            width: 5px;
        }

        .page-toc::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 0;
        }

        .toc-list {
            display: flex;
            flex-direction: column;
        }

        .toc-link {
            position: relative;
            display: block;
            padding: 7px 0 7px 16px;
            font-size: 13px;
            font-weight: 500;
            color: var(--grey-light);
            border-left: 2px solid var(--border);
            line-height: 1.4;
            transition: color .15s ease, border-color .15s ease;
        }

        .toc-link:hover {
            color: var(--dark);
        }

        .toc-link.active {
            color: var(--accent);
            font-weight: 600;
            border-left-color: var(--accent);
        }

        .toc-empty {
            font-size: 13px;
            color: var(--grey-light);
            padding-left: 16px;
        }

        .sidebar::-webkit-scrollbar {
            width: 5px;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 0;
        }

        .side-title {
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--grey-light);
            margin-bottom: 14px;
        }

        .sidebar-cta {
            display: none;
        }

        .side-link {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 4px 14px 4px 12px;
            border-left: 2px solid transparent;
            border-radius: 0;
            font-size: 13.3px;
            font-weight: 400;
            color: var(--grey);
            margin-bottom: 0px;
            line-height: 1.4;
            transition: background .15s ease, color .15s ease;
        }

        .side-link:hover {
            background: var(--bg-card);
            color: var(--dark);
        }

        .side-link.active {
            background: transparent;
            border-left-color: var(--accent);
            color: var(--accent);
        }

        .side-num {
            font-size: 11px;
            font-weight: 700;
            width: 22px;
            height: 22px;
            border-radius: 0;
            background: var(--bg-card);
            color: var(--grey-light);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: none;
            margin-top: 1px;
        }

        .side-link.active .side-num {
            background: var(--accent);
            color: #fff;
        }

        .content {
            flex: 1;
            min-width: 0;
        }

        .doc-section {
            padding: 40px 0 8px;
            border-top: 1px solid var(--border);
        }

        .doc-section:first-child {
            border-top: none;
            padding-top: 8px;
        }

        .sec-tag {
            display: inline-block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--accent);
            background: var(--accent-soft);
            padding: 5px 12px;
            border-radius: 0;
            margin-bottom: 14px;
        }

        .doc-section h2 {
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 12px;
            letter-spacing: -.01em;
        }

        .sec-intro {
            font-size: 16.5px;
            color: var(--grey);
            margin: 0 0 22px;
        }

        h3 {
            font-size: 19px;
            font-weight: 700;
            margin: 34px 0 12px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sub-num {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--accent);
            background: var(--accent-soft);
            padding: 3px 9px;
            border-radius: 0;
        }

        .h4-plain {
            font-size: 15.5px;
            font-weight: 700;
            margin: 22px 0 10px;
            color: var(--dark);
        }

        p {
            margin: 0 0 14px;
            color: var(--grey);
        }

        strong {
            color: var(--dark);
            font-weight: 600;
        }

        .nav-crumb {
            font-size: 13px;
            color: var(--grey-light);
            margin: 0 0 14px;
            font-style: normal;
            background: var(--bg-card);
            display: inline-block;
            padding: 7px 13px;
            border-radius: 0;
        }

        .nav-crumb span {
            font-weight: 700;
            color: var(--dark);
            margin-right: 6px;
        }

        ul.check-list {
            margin: 0 0 18px;
        }

        ul.check-list li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 11px;
            color: var(--grey);
            font-size: 15px;
        }

        ul.check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 1px;
            width: 19px;
            height: 19px;
            border-radius: 0;
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 11px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .howto {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 20px 24px;
            margin: 18px 0 20px;
        }

        .howto h4 {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0 0 12px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--accent);
        }

        .howto h4::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23352EFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7 4 20 12 7 20 7 4'/%3E%3C/svg%3E");
            display: inline-block;
            width: 13px;
            height: 13px;
        }

        .howto ul.check-list {
            margin-bottom: 0;
        }

        .callout {
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: linear-gradient(135deg, #F1F0FF, #F7F8FC);
            border-left: 3px solid var(--accent);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            padding: 16px 20px;
            margin: 0 0 20px;
        }

        .callout-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: var(--accent);
        }

        .callout-tag::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23352EFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10M7 12h7'/%3E%3Cpath d='M4 4.5h16A1.5 1.5 0 0 1 21.5 6v10A1.5 1.5 0 0 1 20 17.5H10l-4.2 3.2a.6.6 0 0 1-1-.5V17.5h-.3A1.5 1.5 0 0 1 3 16V6A1.5 1.5 0 0 1 4 4.5Z'/%3E%3C/svg%3E");
            display: inline-block;
            width: 13px;
            height: 13px;
        }

        .callout p {
            margin: 0;
            color: var(--dark);
            font-size: 14.5px;
            font-style: italic;
        }

        figure.shot-wide,
        figure.shot {
            margin: 22px 0 8px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 20px 44px -20px rgba(23, 23, 23, 0.16);
        }

        figure img {
            width: 100%;
            height: auto;
            display: block;
        }

        figcaption {
            padding: 12px 18px;
            font-size: 12.5px;
            color: var(--grey-light);
            background: var(--bg-card);
            border-top: 1px solid var(--border);
            font-style: italic;
        }

        .table-wrap {
            overflow-x: auto;
            margin: 14px 0 22px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            position: relative;
            -webkit-overflow-scrolling: touch;
        }

        .table-wrap.scrollable::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 22px;
            pointer-events: none;
            box-shadow: inset -14px 0 10px -10px rgba(23, 23, 23, 0.28);
            opacity: 1;
            transition: opacity .2s ease;
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        .table-wrap.scrollable.at-end::after {
            opacity: 0;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13.8px;
        }

        thead th {
            background: var(--dark);
            color: black;
            text-align: left;
            padding: 11px 16px;
            font-weight: 600;
            font-family: 'FT Sans', system-ui, sans-serif;
        }

        tbody td {
            padding: 11px 16px;
            border-top: 1px solid var(--border);
            color: var(--grey);
        }

        tbody tr:nth-child(even) {
            background: var(--bg-card);
        }

        tbody tr {
            transition: background .12s ease;
        }

        tbody tr:hover {
            background: var(--accent-soft);
        }

        .thanks {
            text-align: center;
            font-weight: 600;
            color: var(--dark);
            margin-top: 28px;
        }

        /* ---------- Dynamic UI additions ---------- */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            z-index: 1000;
            background: linear-gradient(90deg, var(--accent), var(--accent-2));
            transition: width .08s linear;
            box-shadow: 0 0 8px rgba(53, 46, 255, 0.5);
        }

        .bg-blob {
            position: fixed;
            z-index: -1;
            border-radius: 50%;
            filter: blur(90px);
            pointer-events: none;
            opacity: .35;
        }

        .blob-a {
            width: 480px;
            height: 480px;
            top: -160px;
            right: -140px;
            background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
        }

        .blob-b {
            width: 420px;
            height: 420px;
            top: 900px;
            left: -160px;
            background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 70%);
        }

        .back-to-top {
            position: fixed;
            left: 50%;
            bottom: 28px;
            z-index: 200;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1px solid rgba(53, 46, 255, 0.35);
            cursor: pointer;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(6px);
            color: var(--accent);
            font-size: 18px;
            font-weight: 700;
            box-shadow: 0 10px 26px rgba(53, 46, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(12px);
            transition: opacity .25s ease, transform .25s ease, visibility .25s ease,
                        box-shadow .15s ease, background .15s ease;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .back-to-top:hover {
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 14px 32px rgba(53, 46, 255, 0.3);
            transform: translateX(-50%) translateY(-2px);
        }

        .doc-section {
            opacity: 1;
            transform: translateY(0);
            transition: transform .6s ease;
        }

        .doc-section:not(.in-view) {
            transform: translateY(14px);
        }

        .doc-section.in-view {
            transform: translateY(0);
        }

        .no-js .doc-section {
            opacity: 1;
            transform: none;
        }

        figure.shot-wide {
            cursor: zoom-in;
            transition: transform .25s ease, box-shadow .25s ease;
        }

        figure.shot-wide:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px rgba(23, 23, 23, 0.12);
        }

        /* ============ SCREENSHOT ANNOTATIONS (highlight + callout) ============ */
        figure.shot-wide.has-annotation,
        figure.shot-wide:has(.shot-frame) {
            overflow: visible;
        }

        .shot-frame {
            position: relative;
            display: block;
            line-height: 0;
        }

        .shot-frame img {
            display: block;
            width: 100%;
        }

        .shot-highlight {
            position: absolute;
            border: 3px solid var(--primary);
            border-radius: 0;
            background: rgba(53, 46, 255, 0.10);
            box-shadow: 0 0 0 4px rgba(53, 46, 255, 0.14), 0 0 18px rgba(53, 46, 255, 0.35);
            pointer-events: none;
            animation: shotPulse 2.2s ease-in-out infinite;
            z-index: 1;
        }

        @keyframes shotPulse {

            0%,
            100% {
                box-shadow: 0 0 0 4px rgba(53, 46, 255, 0.14), 0 0 18px rgba(53, 46, 255, 0.35);
            }

            50% {
                box-shadow: 0 0 0 7px rgba(53, 46, 255, 0.04), 0 0 26px rgba(53, 46, 255, 0.55);
            }
        }

        .shot-callout {
            position: absolute;
            background: var(--primary);
            color: #fff;
            font-family: var(--font-body);
            font-weight: 700;
            font-size: 14px;
            line-height: 1.3;
            padding: 7px 14px;
            border-radius: 0;
            white-space: nowrap;
            pointer-events: none;
            box-shadow: 0 6px 18px rgba(53, 46, 255, 0.45);
            z-index: 2;
        }

        .shot-callout::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }

        .shot-callout.point-down::after {
            left: 20px;
            bottom: -8px;
            border-top: 8px solid var(--primary);
        }

        .shot-callout.point-up::after {
            left: 20px;
            top: -8px;
            border-bottom: 8px solid var(--primary);
        }

        @media (max-width: 720px) {
            .shot-callout {
                font-size: 11px;
                padding: 5px 10px;
                white-space: normal;
            }
        }

        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: rgba(15, 15, 20, 0.86);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 40px;
            backdrop-filter: blur(4px);
        }

        .lightbox.open {
            display: flex;
        }

        .lightbox img {
            max-width: 92vw;
            max-height: 88vh;
            border-radius: 0;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            cursor: zoom-out;
        }

        .lightbox-close {
            position: absolute;
            top: 26px;
            right: 34px;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease;
        }

        .lightbox-close:hover {
            background: rgba(255, 255, 255, 0.22);
        }

        .doc-section h2 {
            position: relative;
        }

        .h2-anchor {
            opacity: 0;
            margin-left: 10px;
            font-size: 16px;
            color: var(--accent);
            font-weight: 600;
            transition: opacity .15s ease;
            cursor: pointer;
            vertical-align: middle;
        }

        .doc-section h2:hover .h2-anchor {
            opacity: 1;
        }




        /* ---------- Footer ---------- */
        footer {
            background: var(--dark);
            color: #B7B7C3;
            padding: 56px 40px 30px;
            margin-top: 40px;
        }

        .foot-inner {
            max-width: 1180px;
            margin: 0 auto;
        }

        .foot-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            padding-bottom: 28px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .foot-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .foot-brand img {
            height: 26px;
            filter: brightness(0) invert(1);
        }

        .foot-brand span {
            font-weight: 700;
            color: #fff;
            font-size: 14px;
            font-family: 'FT Sans', system-ui, sans-serif;
        }

        footer .btn-primary {
            box-shadow: none;
        }

        .foot-bottom {
            padding-top: 22px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            font-size: 12.8px;
            color: #a3a3b2;
        }

        /* mobile */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--dark);
            font-size: 20px;
            cursor: pointer;
            width: 38px;
            height: 38px;
            border-radius: 0;
            align-items: center;
            justify-content: center;
        }

        .menu-toggle:hover {
            background: var(--bg-card);
        }

        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(17, 17, 17, 0.42);
            z-index: 149;
        }

        .sidebar-overlay.show {
            display: block;
        }

        /* ---------- Tablet & mobile ---------- */
        @media (max-width:1200px) {
            .layout {
                grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
            }

            .page-toc {
                display: none;
            }
        }

        @media (max-width:900px) {
            .layout {
                display: block;
                padding-bottom: 60px;
            }

            .content {
                width: 100%;
                max-width: 100%;
            }

            .sidebar-cta {
                display: flex;
                margin-bottom: 16px;
            }

            .sidebar {
                position: fixed;
                top: var(--topbar-h);
                left: 0;
                right: 0;
                width: 100%;
                max-height: calc(100vh - var(--topbar-h));
                overflow-y: auto;
                padding: 18px 20px 24px;
                margin: 0;
                z-index: 150;
                background: var(--white);
                border-bottom: 1px solid var(--border);
                box-shadow: 0 18px 34px rgba(23, 23, 23, 0.14);
                transform: translateY(-12px);
                opacity: 0;
                visibility: hidden;
                transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
            }

            .sidebar.open {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }

            .side-link {
                padding: 12px 14px;
                font-size: 14.5px;
            }

            .menu-toggle {
                display: flex;
            }

            .crumb {
                display: none;
            }

            .top-actions {
                gap: 10px;
            }

            .top-actions .back {
                display: none;
            }

            .top-actions .btn-primary {
                padding: 9px 16px;
                font-size: 13px;
            }

            .hero {
                padding: 40px 20px 40px;
            }

            .hero h1 {
                font-size: 32px;
            }

            .hero-lead {
                font-size: 16px;
            }

            .layout {
                padding-left: 20px;
                padding-right: 20px;
            }

            .topbar {
                padding: 0 20px;
            }

            .brand img {
                height: 28px;
            }
        }

        @media (max-width:600px) {
            body {
                font-size: 16px;
                line-height: 1.65;
            }

            .brand img {
                height: 24px;
            }

            .top-actions {
                gap: 10px;
            }

            .hero {
                padding: 32px 18px 36px;
            }

            .eyebrow {
                font-size: 11.5px;
                padding: 6px 12px;
                margin-bottom: 16px;
            }

            .hero h1 {
                font-size: 26px;
                line-height: 1.2;
            }

            .hero-lead {
                font-size: 15.5px;
                margin-bottom: 20px;
            }

            .hero-stats {
                flex-direction: column;
                gap: 12px;
                align-items: flex-start;
            }

            .layout {
                padding: 0 18px 60px;
                gap: 0;
            }

            .doc-section {
                padding: 28px 0 6px;
            }

            .doc-section h2 {
                font-size: 22px;
            }

            .sec-intro {
                font-size: 15.5px;
            }

            h3 {
                font-size: 17px;
                margin: 26px 0 10px;
                flex-wrap: wrap;
            }

            .h4-plain {
                font-size: 14.5px;
            }

            p {
                font-size: 15px;
            }

            ul.check-list li {
                font-size: 14.5px;
                padding-left: 26px;
            }

            .howto {
                padding: 16px 16px;
                margin: 14px 0 16px;
            }

            .callout {
                padding: 14px 16px;
            }

            .sec-tag {
                font-size: 11px;
                padding: 4px 10px;
            }

            .nav-crumb {
                font-size: 12px;
                padding: 6px 11px;
            }

            figure.shot-wide,
            figure.shot {
                margin: 18px 0 8px;
                border-radius: var(--radius-md);
            }

            figcaption {
                padding: 10px 14px;
                font-size: 11.5px;
            }

            table {
                font-size: 12.8px;
            }

            thead th,
            tbody td {
                padding: 9px 12px;
            }

            .table-wrap {
                -webkit-overflow-scrolling: touch;
                position: relative;
            }

            .lightbox {
                padding: 16px;
            }

            .lightbox-close {
                top: 14px;
                right: 14px;
                width: 38px;
                height: 38px;
                font-size: 18px;
            }

            .back-to-top {
                right: 16px;
                bottom: 16px;
                width: 44px;
                height: 44px;
            }

            footer {
                padding: 40px 18px 24px;
            }

            .foot-top {
                flex-direction: column;
                align-items: flex-start;
            }

            .foot-bottom {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            code {
                word-break: break-word;
            }
        }

        @media (max-width:480px) {
            .top-actions .btn-primary {
                display: none;
            }
        }

        @media (max-width:420px) {
            .hero h1 {
                font-size: 23px;
            }

            .doc-section h2 {
                font-size: 20px;
            }

            .hero-stats .stat {
                font-size: 13.5px;
            }

            .brand img {
                height: 22px;
            }
        }

        @media (max-width:700px) {
            .bg-blob {
                display: none;
            }
        }


        /* ===== Guide Assistant ===== */
        /*!
 * Developer Guide Assistant — styles
 * -----------------------------------
 * Deliberately reuses the host page's own design tokens (CSS custom
 * properties) instead of introducing a new palette/type system. If the
 * host page defines --accent, --dark, --grey, --border, --white,
 * --bg-card, --radius-lg/md/sm and the Poppins/Inter/IBM Plex Mono
 * fonts (as this Developer Portal does), the assistant inherits them
 * automatically. The --da-* fallbacks below only kick in if a token is
 * missing, so this file can be dropped into a different guide too.
 */

        :root {
            --da-accent: var(--accent, #352EFF);
            --da-accent-soft: var(--accent-soft, #EAEAFF);
            --da-dark: var(--dark, #171717);
            --da-grey: var(--grey, #575757);
            --da-grey-light: var(--grey-light, #8A8A8A);
            --da-border: var(--border, #E7E7EF);
            --da-white: var(--white, #FFFFFF);
            --da-bg-card: var(--bg-card, #F7F8FC);
            --da-radius-lg: var(--radius-lg, 20px);
            --da-radius-md: var(--radius-md, 14px);
            --da-radius-sm: var(--radius-sm, 9px);
            --da-font-heading: 'Poppins', system-ui, sans-serif;
            --da-font-body: 'FT Sans', system-ui, sans-serif;
            --da-font-mono: 'IBM Plex Mono', Consolas, monospace;
            --da-panel-width: 400px;
            /* Bottom offset of the launcher — override per page via inline style
     (e.g. style="--da-launcher-bottom: 100px") when another fixed
     element (a back-to-top button, a cookie bar, etc.) already sits
     in the default corner. */
            --da-launcher-bottom: 24px;
            --da-launcher-right: 24px;
        }

        /* ============================================================
   Launcher (floating pill button, bottom-right by default)
   ============================================================ */

        .da-launcher {
            position: fixed;
            right: var(--da-launcher-right);
            bottom: var(--da-launcher-bottom);
            z-index: 2147483000;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            height: 52px;
            padding: 0 20px 0 16px;
            border-radius: 0;
            border: none;
            cursor: pointer;
            background: var(--da-accent);
            color: #fff;
            font-family: var(--da-font-heading);
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 12px 28px rgba(53, 46, 255, 0.32), 0 2px 8px rgba(23, 23, 23, 0.12);
            transition: transform .15s ease, box-shadow .15s ease, padding .15s ease;
        }

        .da-launcher:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 34px rgba(53, 46, 255, 0.4);
        }

        .da-launcher:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 3px;
        }

        .da-launcher-icon {
            display: block;
            flex: none;
        }

        .da-launcher-label {
            display: inline-block;
        }

        /* Once opened, collapse to an icon-only circle so it reads as a
   toggle rather than a repeated call-to-action while the panel is up. */
        .da-launcher[aria-expanded="true"] {
            width: 52px;
            padding: 0;
            justify-content: center;
        }

        .da-launcher[aria-expanded="true"] .da-launcher-label {
            display: none;
        }

        /* Small screens: icon-only from the start, to keep a light footprint
   next to other floating controls (e.g. a back-to-top button). */
        @media (max-width: 560px) {
            .da-launcher {
                width: 52px;
                padding: 0;
                justify-content: center;
            }

            .da-launcher-label {
                display: none;
            }
        }

        /* ============================================================
   Overlay (click-outside close; also the mobile sheet backdrop)
   ============================================================ */

        .da-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147482998;
            background: rgba(23, 23, 23, 0.28);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease;
        }

        .da-overlay.da-open {
            opacity: 1;
            pointer-events: auto;
        }

        .da-overlay[hidden] {
            display: none;
        }

        /* ============================================================
   Panel (desktop: right-hand slide-in; mobile: bottom sheet)
   ============================================================ */

        .da-panel {
            position: fixed;
            z-index: 2147482999;
            top: 0;
            right: 0;
            height: 100%;
            width: min(var(--da-panel-width), 92vw);
            background: var(--da-white);
            border-left: 1px solid var(--da-border);
            box-shadow: -18px 0 40px rgba(23, 23, 23, 0.14);
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform .28s cubic-bezier(.32, .72, 0, 1);
            font-family: var(--da-font-body);
            color: var(--da-dark);
        }

        .da-panel.da-open {
            transform: translateX(0);
        }

        .da-panel[hidden] {
            display: none;
        }

        .da-resize-handle {
            position: absolute;
            left: -6px;
            top: 0;
            bottom: 0;
            width: 12px;
            cursor: ew-resize;
        }

        .da-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 22px 22px 16px;
            border-bottom: 1px solid var(--da-border);
            flex: none;
        }

        .da-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--da-font-heading);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--da-accent);
            margin-bottom: 6px;
        }

        .da-eyebrow::before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 2px;
            background: var(--da-accent);
            border-radius: 0;
        }

        .da-title {
            font-family: var(--da-font-heading);
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            color: var(--da-dark);
        }

        .da-close {
            flex: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--da-border);
            background: var(--da-white);
            color: var(--da-grey);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .15s ease, color .15s ease;
        }

        .da-close:hover {
            background: var(--da-bg-card);
            color: var(--da-dark);
        }

        .da-close:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        .da-form {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 22px;
            border-bottom: 1px solid var(--da-border);
            flex: none;
        }

        .da-input {
            flex: 1;
            font-family: var(--da-font-body);
            font-size: 14.5px;
            padding: 11px 14px;
            border-radius: var(--da-radius-sm);
            border: 1px solid var(--da-border);
            background: var(--da-bg-card);
            color: var(--da-dark);
        }

        .da-input::placeholder {
            color: var(--da-grey-light);
        }

        .da-input:focus {
            outline: none;
            border-color: var(--da-accent);
            background: var(--da-white);
            box-shadow: 0 0 0 3px var(--da-accent-soft);
        }

        .da-submit {
            flex: none;
            width: 38px;
            height: 38px;
            border-radius: var(--da-radius-sm);
            border: none;
            background: var(--da-accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(53, 46, 255, 0.28);
            transition: transform .15s ease;
        }

        .da-submit:hover {
            transform: translateY(-1px);
        }

        .da-submit:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        .da-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px 22px 28px;
        }

        .da-body::-webkit-scrollbar {
            width: 6px;
        }

        .da-body::-webkit-scrollbar-thumb {
            background: var(--da-border);
            border-radius: 0;
        }

        .da-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* ---- Idle / empty state ---- */

        .da-empty p {
            font-size: 14px;
            color: var(--da-grey);
            line-height: 1.6;
            margin: 0 0 10px;
        }

        .da-empty-sub {
            font-size: 12.5px !important;
            color: var(--da-grey-light) !important;
        }

        /* ---- Result card ---- */

        .da-result {
            background: var(--da-bg-card);
            border: 1px solid var(--da-border);
            border-radius: var(--da-radius-md);
            padding: 18px 20px;
            animation: da-fade-in .2s ease;
        }

        .da-result-empty {
            background: transparent;
            border-style: dashed;
        }

        /* ---- Loading state (while the LLM backend is answering) ---- */

        .da-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 22px 0;
            background: transparent;
            border: none;
        }

        .da-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--da-accent);
            opacity: .35;
            animation: da-dot-bounce 1.1s ease-in-out infinite;
        }

        .da-dot:nth-child(2) {
            animation-delay: .15s;
        }

        .da-dot:nth-child(3) {
            animation-delay: .3s;
        }

        @keyframes da-dot-bounce {

            0%,
            80%,
            100% {
                opacity: .35;
                transform: translateY(0);
            }

            40% {
                opacity: 1;
                transform: translateY(-4px);
            }
        }

        /* ---- "AI" tag next to an LLM-drafted answer summary ---- */

        .da-ai-tag {
            display: inline-block;
            font-family: var(--da-font-heading);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--da-accent);
            background: var(--da-accent-soft);
            border-radius: 0;
            padding: 1px 6px;
            vertical-align: middle;
        }

        .da-answer-label,
        .da-doc-label {
            font-family: var(--da-font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--da-grey-light);
            margin: 0 0 6px;
        }

        .da-doc-label {
            margin-top: 16px;
        }

        .da-answer {
            font-size: 14.5px;
            line-height: 1.65;
            color: var(--da-dark);
            margin: 0;
        }

        .da-doc-title {
            font-family: var(--da-font-heading);
            font-size: 15px;
            font-weight: 600;
            color: var(--da-dark);
            margin: 0 0 14px;
        }

        .da-goto {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--da-font-heading);
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            background: var(--da-accent);
            border: none;
            border-radius: var(--da-radius-sm);
            padding: 10px 16px;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(53, 46, 255, 0.24);
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .da-goto:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(53, 46, 255, 0.32);
        }

        .da-goto:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        .da-related {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--da-border);
        }

        .da-related-label {
            display: block;
            font-family: var(--da-font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--da-grey-light);
            margin-bottom: 10px;
        }

        .da-related-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .da-chip {
            font-family: var(--da-font-body);
            font-size: 12.5px;
            font-weight: 500;
            color: var(--da-accent);
            background: var(--da-accent-soft);
            border: none;
            border-radius: var(--da-radius-sm);
            padding: 7px 12px;
            cursor: pointer;
            transition: background .15s ease;
        }

        .da-chip:hover {
            background: var(--da-accent);
            color: #fff;
        }

        .da-chip:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        @keyframes da-fade-in {
            from {
                opacity: 0;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================================
   Destination highlight (applied to the target .doc-section)
   ============================================================ */

        .da-highlight {
            animation: da-highlight-pulse 2.6s ease;
            border-radius: var(--da-radius-md);
        }

        @keyframes da-highlight-pulse {
            0% {
                box-shadow: 0 0 0 0 var(--da-accent-soft);
                background-color: var(--da-accent-soft);
            }

            15% {
                box-shadow: 0 0 0 6px var(--da-accent-soft);
                background-color: var(--da-accent-soft);
            }

            85% {
                box-shadow: 0 0 0 6px rgba(234, 234, 255, 0);
                background-color: var(--da-accent-soft);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(234, 234, 255, 0);
                background-color: transparent;
            }
        }

        /* ============================================================
   Mobile — bottom sheet instead of side panel
   ============================================================ */

        @media (max-width: 720px) {
            .da-panel {
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                max-height: 82vh;
                border-left: none;
                border-top: 1px solid var(--da-border);
                border-radius: var(--da-radius-lg) var(--da-radius-lg) 0 0;
                box-shadow: 0 -18px 40px rgba(23, 23, 23, 0.18);
                transform: translateY(100%);
            }

            .da-panel.da-open {
                transform: translateY(0);
            }

            .da-resize-handle {
                display: none;
            }

            .da-launcher {
                right: max(16px, var(--da-launcher-right) - 8px);
                bottom: max(16px, var(--da-launcher-bottom) - 8px);
            }
        }

        /* ============================================================
   Reduced motion
   ============================================================ */

        @media (prefers-reduced-motion: reduce) {

            .da-panel,
            .da-overlay,
            .da-launcher,
            .da-goto,
            .da-submit {
                transition: none !important;
            }

            .da-highlight {
                animation: none !important;
                background-color: var(--da-accent-soft) !important;
            }

            .da-result {
                animation: none !important;
            }

            .da-dot {
                animation: none !important;
                opacity: .7 !important;
            }
        }

        /* ============================================================
   High-contrast / forced-colors compatibility
   ============================================================ */

        @media (forced-colors: active) {

            .da-launcher,
            .da-goto,
            .da-submit {
                border: 2px solid ButtonText;
            }

            .da-panel {
                border: 2px solid ButtonText;
            }

            .da-highlight {
                outline: 3px solid Highlight;
            }
        }



        /* ============================================================
   PORTAL ADDITIONS — new components only. Nothing above this
   comment (the original stylesheet) is modified. Every rule below
   reuses the existing --accent / --dark / --grey / --border / --bg-card /
   --radius-* variables and the existing Poppins/Inter/IBM Plex Mono
   fonts — no new colors, spacing scale, or typography introduced.
   ============================================================ */

        /* ---------- Skip-to-content (accessibility) ---------- */
        .skip-link {
            position: absolute;
            left: 12px;
            top: -60px;
            z-index: 1000;
            background: var(--accent);
            color: #fff;
            padding: 10px 18px;
            border-radius: var(--radius-sm);
            font-family: 'FT Sans', system-ui, sans-serif;
            font-weight: 600;
            font-size: 13.5px;
            transition: top .15s ease;
        }

        .skip-link:focus {
            top: 12px;
        }

        /* ---------- Breadcrumb trail (top of content column) ---------- */
        .breadcrumb-trail {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0 0 14px;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: .04em;
            color: var(--grey-light);
            font-weight: 600;
        }

        .breadcrumb-trail a {
            color: var(--grey-light);
        }

        .breadcrumb-trail a:hover {
            color: var(--accent);
        }

        .breadcrumb-trail .bc-sep {
            color: #C9C9D6;
        }

        .breadcrumb-trail .bc-current {
            color: var(--accent);
        }

        /* ---------- Content topbar: breadcrumb + Copy Page ---------- */
        .content-topbar {
            display: none;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding-bottom: 14px;
            margin-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }

        .content-topbar.visible {
            display: flex;
        }

        .content-topbar .breadcrumb-trail {
            padding-bottom: 0;
            border-bottom: none;
        }

        .btn-copy-page {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex: none;
            width: 34px;
            height: 34px;
            font-size: 13px;
            font-weight: 600;
            color: var(--dark);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 0;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease, color .15s ease;
        }

        .btn-copy-page:hover {
            background: #EFEFEF;
            border-color: #DADADA;
            color: var(--accent);
        }

        .btn-copy-page svg {
            flex: none;
        }

        .btn-copy-page .cp-label {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            white-space: nowrap;
            font-size: 12px;
            font-weight: 700;
            color: white;
            background: var(--dark);
            padding: 5px 10px;
            border-radius: 0;
            opacity: 0;
            transform: translateY(-4px);
            pointer-events: none;
            transition: opacity .15s ease, transform .15s ease;
        }

        .btn-copy-page.copied {
            color: var(--success);
            border-color: var(--success);
            background: #F0F8E8;
        }

        .btn-copy-page.copied .cp-label {
            opacity: 1;
            transform: translateY(0);
            background: var(--success);
        }

        /* ---------- Docs shell: hidden until a module/search opens it ---------- */
        .docs-shell {
            display: none;
        }

        .docs-shell.is-open {
            display: block;
        }

        /* ---------- Back to modules (shown inside open documentation) ---------- */
        .btn-back-modules {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: none;
            padding: 8px 15px;
            font-size: 13px;
            font-weight: 700;
            color: var(--accent);
            background: var(--accent-soft);
            border: 1px solid rgba(53, 46, 255, 0.22);
            border-radius: 0;
            cursor: pointer;
            transition: background .18s ease, border-color .18s ease, color .18s ease,
                        transform .18s ease, box-shadow .18s ease;
            font-family: inherit;
        }

        .btn-back-modules:hover {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
            transform: translateX(-2px);
            box-shadow: 0 6px 16px -4px rgba(53, 46, 255, 0.45);
        }

        .btn-back-modules:active {
            transform: translateX(-1px) scale(0.97);
        }

        .btn-back-modules svg {
            flex: none;
            transition: transform .18s ease;
        }

        .btn-back-modules:hover svg {
            transform: translateX(-2px);
        }

        .content-topbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: none;
        }

        /* ---------- Doc meta strip (version / last updated) ---------- */
        .doc-meta-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            align-items: center;
            font-size: 13px;
            color: var(--grey-light);
            font-weight: 500;
        }

        .doc-meta-strip strong {
            color: var(--dark);
            font-weight: 600;
        }

        .doc-meta-strip .dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--border);
            display: inline-block;
        }

        /* ---------- Documentation statistics strip ---------- */
        .stat-strip {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
            margin: 32px 0;
        }

        .stat-strip .stat-box {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 20px 22px;
            text-align: left;
        }

        .stat-strip .stat-num {
            font-family: 'FT Sans', system-ui, sans-serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--accent);
            line-height: 1.1;
        }

        .stat-strip .stat-label {
            font-size: 13px;
            color: var(--grey);
            margin-top: 6px;
        }

        /* ---------- Quick-start button row ---------- */
        .quick-start-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 28px;
        }

        /* ---------- Module card grid (Home page) ---------- */
        .module-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;
            margin: 28px 0 8px;
        }

        .module-card {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 24px;
            transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
        }

        .module-card:hover {
            box-shadow: 0 16px 34px -18px rgba(23, 23, 23, 0.22);
            transform: translateY(-2px);
            border-color: var(--accent);
        }

        .module-card .mc-icon {
            width: 42px;
            height: 42px;
            border-radius: var(--radius-sm);
            background: var(--accent-soft);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
        }

        .module-card h4 {
            margin: 0;
            font-size: 16px;
        }

        .module-card p {
            margin: 0;
            font-size: 13.5px;
            color: var(--grey);
            line-height: 1.6;
        }

        .module-card .mc-link {
            margin-top: auto;
            font-size: 13px;
            font-weight: 600;
            color: var(--accent);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* ---------- Frequently accessed strip ---------- */
        .freq-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 14px;
        }

        .freq-chip {
            font-size: 13px;
            font-weight: 600;
            color: var(--dark);
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 0;
            padding: 8px 16px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .freq-chip .freq-count {
            color: var(--grey-light);
            font-weight: 500;
        }

        .freq-chip:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* ---------- Nested sidebar (multi-page navigation) ---------- */
        .side-group {
            display: flex;
            flex-direction: column;
        }

        .side-group>.side-link {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }

        .side-link-label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }

        .side-group .side-caret {
            font-size: 11px;
            color: var(--grey-light);
            transition: transform .15s ease;
            margin-top: 3px;
            flex: none;
            display: none;
        }

        .side-group:has(.side-sublist) .side-caret {
            display: inline-block;
        }

        .side-group.expanded .side-caret {
            transform: rotate(90deg);
        }

        .side-sublist {
            display: none;
            flex-direction: column;
            padding-left: 34px;
            margin-top: 2px;
            margin-bottom: 6px;
        }

        .side-group.expanded .side-sublist {
            display: flex;
        }

        .side-sublink {
            font-size: 13.5px;
            color: var(--grey);
            font-weight: 500;
            padding: 7px 10px;
            border-radius: var(--radius-sm);
        }

        .side-sublink:hover {
            background: var(--bg-card);
            color: var(--dark);
        }

        .side-sublink.active {
            background: var(--accent-soft);
            color: var(--accent);
            font-weight: 600;
        }

        /* ---------- Command palette (Ctrl+K global search) ---------- */
        .cmdk-trigger {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 320px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 9px 12px;
            font-size: 13.5px;
            color: var(--grey-light);
            cursor: pointer;
        }

        .cmdk-trigger kbd {
            margin-left: auto;
            font-family: 'IBM Plex Mono', Consolas, monospace;
            font-size: 11px;
            color: var(--grey);
            background: var(--white);
            border: 1px solid var(--border);
            border-radius: 0;
            padding: 2px 6px;
        }

        .cmdk-overlay {
            position: fixed;
            inset: 0;
            z-index: 900;
            background: rgba(23, 23, 23, 0.35);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 12vh;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s ease;
        }

        .cmdk-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .cmdk-box {
            width: min(560px, 90vw);
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: 0 30px 70px -20px rgba(23, 23, 23, 0.35);
            overflow: hidden;
            transform: translateY(-8px);
            transition: transform .15s ease;
        }

        .cmdk-overlay.open .cmdk-box {
            transform: translateY(0);
        }

        .cmdk-input {
            width: 100%;
            border: none;
            padding: 20px 22px;
            font-size: 16px;
            font-family: 'FT Sans', system-ui, sans-serif;
            border-bottom: 1px solid var(--border);
            outline: none;
        }

        .cmdk-results {
            max-height: 360px;
            overflow-y: auto;
            padding: 8px;
        }

        .cmdk-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 12px 14px;
            border-radius: var(--radius-sm);
            cursor: pointer;
        }

        .cmdk-item:hover,
        .cmdk-item.active {
            background: var(--accent-soft);
        }

        .cmdk-item .cmdk-item-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--dark);
        }

        .cmdk-item .cmdk-item-title mark {
            background: transparent;
            color: var(--accent);
            font-weight: 700;
        }

        .cmdk-item .cmdk-item-path {
            font-size: 12px;
            color: var(--grey-light);
        }

        .cmdk-empty {
            padding: 32px 22px;
            text-align: center;
            color: var(--grey-light);
            font-size: 13.5px;
        }

        .cmdk-ask-ai {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px 22px;
            font-size: 13.5px;
            font-weight: 600;
            color: var(--accent);
            border-top: 1px solid var(--border);
            cursor: pointer;
            transition: background .12s ease;
        }

        .cmdk-ask-ai:hover {
            background: var(--bg-card);
        }

        .cmdk-ask-ai .ai-spark {
            font-size: 14px;
        }

        /* ---------- Ask AI assistant ---------- */
        .nav-ai {
            display: flex;
            align-items: center;
            gap: 7px;
            background: var(--accent);
            border: 1px solid var(--accent);
            color: #fff;
            border-radius: var(--radius-sm);
            padding: 9px 14px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s ease;
        }

        .nav-ai:hover {
            background: #030192;
        }

        .nav-ai .ai-spark {
            font-size: 14px;
            line-height: 1;
        }

        /* Pill-shaped search + Ask AI trigger pair in the top nav */
        .nav-search-pill {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            border: 1px solid #E3E3EA;
            border-radius: 0;
            padding: 10px 8px 10px 18px;
            font-size: 14px;
            color: #6b6b78;
            cursor: pointer;
            min-width: 180px;
        }

        .nav-search-pill svg {
            flex: none;
            color: #6b6b78;
        }

        .nav-search-pill span {
            flex: 1;
            text-align: left;
            white-space: nowrap;
        }

        .nav-search-kbd {
            font-family: var(--font-mono);
            font-size: 12px;
            color: #6b6b78;
            background: #F2F2F6;
            border-radius: 0;
            padding: 3px 9px;
            line-height: 1.3;
        }

        .nav-ai-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            border: 1.6px solid var(--primary);
            border-radius: 0;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 700;
            color: var(--primary);
            cursor: pointer;
            white-space: nowrap;
            transition: background .15s ease, color .15s ease;
        }

        .nav-ai-pill:hover {
            background: var(--primary);
            color: #fff;
        }

        .nav-ai-pill .ai-spark {
            font-size: 15px;
            line-height: 1;
        }

        .ai-overlay {
            position: fixed;
            inset: 0;
            z-index: 950;
            background: rgba(23, 23, 23, 0.35);
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            padding: 24px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s ease;
        }

        .ai-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .ai-box {
            width: min(400px, 92vw);
            height: min(560px, 80vh);
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: 0 30px 70px -20px rgba(23, 23, 23, 0.4);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: translateY(12px);
            transition: transform .15s ease;
        }

        .ai-overlay.open .ai-box {
            transform: translateY(0);
        }

        .ai-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 18px;
            background: var(--dark);
            color: #fff;
            font-weight: 700;
            font-size: 14.5px;
        }

        .ai-header .ai-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            opacity: .8;
        }

        .ai-header .ai-close:hover {
            opacity: 1;
        }

        .ai-messages {
            flex: 1;
            overflow-y: auto;
            padding: 16px 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--bg-card);
        }

        .ai-msg {
            max-width: 88%;
            padding: 10px 13px;
            border-radius: var(--radius-sm);
            font-size: 13.5px;
            line-height: 1.5;
        }

        .ai-msg.bot {
            background: var(--white);
            border: 1px solid var(--border);
            color: var(--dark);
            align-self: flex-start;
        }

        .ai-msg.user {
            background: var(--accent);
            color: #fff;
            align-self: flex-end;
        }

        .ai-msg a {
            color: var(--accent);
            text-decoration: underline;
        }

        .ai-msg.bot a {
            color: var(--accent);
        }

        .ai-suggested {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 0 18px 12px;
            background: var(--bg-card);
        }

        .ai-suggested button {
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 0;
            border: 1px solid var(--border);
            background: var(--white);
            color: var(--grey);
            cursor: pointer;
        }

        .ai-suggested button:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .ai-input-row {
            display: flex;
            gap: 8px;
            padding: 12px 14px;
            border-top: 1px solid var(--border);
            background: var(--white);
        }

        .ai-input {
            flex: 1;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            font-size: 13.5px;
            font-family: 'FT Sans', system-ui, sans-serif;
            outline: none;
        }

        .ai-input:focus {
            border-color: var(--accent);
        }

        .ai-send {
            background: var(--accent);
            border: 1px solid var(--accent);
            color: #fff;
            border-radius: var(--radius-sm);
            padding: 0 16px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
        }

        .ai-send:hover {
            background: #030192;
        }

        /* ---------- Footer country + language controls (stacked, bottom-left) ---------- */
        .foot-bottom {
            position: relative;
        }

        .footer-selectors {
            display: flex;
            flex-direction: column;
            gap: 3px;
            order: 1;
            align-items: flex-end;
        }

        .lang-control {
            display: flex;
            align-items: center;
            gap: 5px;
            position: relative;
            cursor: pointer;
            color: #B7B7C3;
            font-weight: 400;
            user-select: none;
            font-size: 11px;
        }

        .lang-control .lang-flag {
            display: block;
            border-radius: 0;
            flex: none;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
        }

        .lang-control .lang-text {
            white-space: nowrap;
        }

        .lang-control .lang-caret {
            font-size: 8px;
            color: #8A8A95;
            transition: transform .15s ease;
        }

        .lang-control:hover .lang-caret,
        .lang-control[aria-expanded="true"] .lang-caret {
            color: #B7B7C3;
        }

        .lang-control[aria-expanded="true"] .lang-caret {
            transform: rotate(180deg);
        }

        .lang-menu {
            list-style: none;
            margin: 0;
            padding: 6px;
            position: absolute;
            right: 0;
            bottom: calc(100% + 10px);
            background: var(--dark, #16324F);
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: var(--radius-md, 10px);
            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.55);
            min-width: 210px;
            max-height: 280px;
            overflow-y: auto;
            display: none;
            z-index: 20;
        }

        .lang-menu.open {
            display: block;
        }

        .lang-menu li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 0;
            font-size: 13px;
            font-weight: 500;
            color: #EDEDF2;
            cursor: pointer;
            white-space: nowrap;
        }

        .lang-menu li:hover,
        .lang-menu li.active {
            background: rgba(255, 255, 255, 0.08);
        }

        .lang-menu li img {
            display: block;
            flex: none;
            border-radius: 0;
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
        }

        /* Hide Google Translate's own banner/toolbar chrome — we drive translation
   through our own control instead of Google's default widget UI. */
        .goog-te-banner-frame.skiptranslate {
            display: none !important;
        }

        body {
            top: 0 !important;
        }

        .goog-te-gadget-icon {
            display: none !important;
        }

        .goog-tooltip,
        .goog-tooltip:hover {
            display: none !important;
        }

        .goog-text-highlight {
            background: none !important;
            box-shadow: none !important;
        }

        #google_translate_element {
            position: absolute;
            left: -9999px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        /* ---------- Document Control page tables & meta ---------- */
        .doc-control-table td:first-child {
            font-weight: 600;
            color: var(--dark);
            width: 220px;
        }

        .confidentiality-box {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: var(--radius-sm);
            padding: 16px 18px;
            font-size: 13.5px;
            color: var(--grey);
        }

        /* ---------- Screen Components / Permissions tables: sticky header + zebra ---------- */
        .table-wrap table thead th {
            position: sticky;
            top: 0;
            background: var(--white);
            z-index: 1;
        }

        .table-wrap table tbody tr:nth-child(even) {
            background: var(--bg-card);
        }

        /* ---------- Numbered callouts on screenshots ---------- */
        .shot-callout-wrap {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .shot-callout {
            position: absolute;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            font-family: 'FT Sans', system-ui, sans-serif;
            font-weight: 700;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(53, 46, 255, 0.35);
        }

        /* ---------- Warning / Note / Best Practice callout variants ---------- */
        .note-box,
        .warning-box,
        .practice-box {
            border-radius: var(--radius-md);
            padding: 18px 20px;
            font-size: 14px;
            line-height: 1.65;
            border: 1px solid var(--border);
            margin: 20px 0;
        }

        .note-box {
            background: var(--bg-card);
            border-left: 3px solid var(--accent);
        }

        .warning-box {
            background: #FFF8F0;
            border-left: 3px solid #E08A2E;
        }

        .practice-box {
            background: #F1FBF6;
            border-left: 3px solid #2FA36B;
        }

        .note-box .box-label,
        .warning-box .box-label,
        .practice-box .box-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'FT Sans', system-ui, sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .note-box .box-label::before,
        .warning-box .box-label::before,
        .practice-box .box-label::before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 13px;
            flex: none;
        }

        .note-box .box-label::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23352EFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16.5'/%3E%3Ccircle cx='12' cy='7.5' r='0.6' fill='%23352EFF'/%3E%3C/svg%3E");
        }

        .warning-box .box-label::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9660A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 L21.5 20 H2.5 Z'/%3E%3Cline x1='12' y1='9.5' x2='12' y2='14.5'/%3E%3Ccircle cx='12' cy='17.3' r='0.6' fill='%23B9660A'/%3E%3C/svg%3E");
        }

        .practice-box .box-label::before {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8055' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3 L10.8 15 L16 9'/%3E%3C/svg%3E");
        }

        .note-box .box-label {
            color: var(--accent);
        }

        .warning-box .box-label {
            color: #B9660A;
        }

        .practice-box .box-label {
            color: #1E8055;
        }

        /* ---------- Troubleshooting table ---------- */
        .trouble-table td:nth-child(1) {
            font-weight: 600;
            color: var(--dark);
        }

        /* ---------- Zoom-on-click affordance for figures (lightbox already exists; this just signals it) ---------- */
        figure.shot-wide {
            position: relative;
            cursor: zoom-in;
        }

        @media (max-width:860px) {
            .breadcrumb-trail {
                padding: 14px 20px;
            }

            .cmdk-trigger {
                max-width: 100%;
            }

            .nav-search-pill span {
                display: none;
            }

            .nav-search-pill {
                min-width: auto;
                padding: 10px;
            }

            .ai-overlay {
                padding: 0;
                align-items: stretch;
                justify-content: stretch;
            }

            .ai-box {
                width: 100%;
                height: 100%;
                border-radius: 0;
            }
        }

        /*!
 * Developer Guide Assistant — styles
 * -----------------------------------
 * Deliberately reuses the host page's own design tokens (CSS custom
 * properties) instead of introducing a new palette/type system. If the
 * host page defines --accent, --dark, --grey, --border, --white,
 * --bg-card, --radius-lg/md/sm and the Poppins/Inter/IBM Plex Mono
 * fonts (as this Developer Portal does), the assistant inherits them
 * automatically. The --da-* fallbacks below only kick in if a token is
 * missing, so this file can be dropped into a different guide too.
 */

        :root {
            --da-accent: var(--accent, #352EFF);
            --da-accent-soft: var(--accent-soft, #EAEAFF);
            --da-dark: var(--dark, #171717);
            --da-grey: var(--grey, #575757);
            --da-grey-light: var(--grey-light, #8A8A8A);
            --da-border: var(--border, #E7E7EF);
            --da-white: var(--white, #FFFFFF);
            --da-bg-card: var(--bg-card, #F7F8FC);
            --da-radius-lg: var(--radius-lg, 20px);
            --da-radius-md: var(--radius-md, 14px);
            --da-radius-sm: var(--radius-sm, 9px);
            --da-font-heading: 'Poppins', system-ui, sans-serif;
            --da-font-body: 'FT Sans', system-ui, sans-serif;
            --da-font-mono: 'IBM Plex Mono', Consolas, monospace;
            --da-panel-width: 400px;
            /* Bottom offset of the launcher — override per page via inline style
     (e.g. style="--da-launcher-bottom: 100px") when another fixed
     element (a back-to-top button, a cookie bar, etc.) already sits
     in the default corner. */
            --da-launcher-bottom: 24px;
            --da-launcher-right: 24px;
        }

        /* ============================================================
   Launcher (floating pill button, bottom-right by default)
   ============================================================ */

        .da-launcher {
            position: fixed;
            right: var(--da-launcher-right);
            bottom: var(--da-launcher-bottom);
            z-index: 2147483000;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            height: 52px;
            padding: 0 20px 0 16px;
            border-radius: 0;
            border: none;
            cursor: pointer;
            background: var(--da-accent);
            color: #fff;
            font-family: var(--da-font-heading);
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 12px 28px rgba(53, 46, 255, 0.32), 0 2px 8px rgba(23, 23, 23, 0.12);
            transition: transform .15s ease, box-shadow .15s ease, padding .15s ease;
        }

        .da-launcher:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 34px rgba(53, 46, 255, 0.4);
        }

        .da-launcher:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 3px;
        }

        .da-launcher-icon {
            display: block;
            flex: none;
        }

        .da-launcher-label {
            display: inline-block;
        }

        /* Once opened, collapse to an icon-only circle so it reads as a
   toggle rather than a repeated call-to-action while the panel is up. */
        .da-launcher[aria-expanded="true"] {
            width: 52px;
            padding: 0;
            justify-content: center;
        }

        .da-launcher[aria-expanded="true"] .da-launcher-label {
            display: none;
        }

        /* Small screens: icon-only from the start, to keep a light footprint
   next to other floating controls (e.g. a back-to-top button). */
        @media (max-width: 560px) {
            .da-launcher {
                width: 52px;
                padding: 0;
                justify-content: center;
            }

            .da-launcher-label {
                display: none;
            }
        }

        /* ============================================================
   Overlay (click-outside close; also the mobile sheet backdrop)
   ============================================================ */

        .da-overlay {
            position: fixed;
            inset: 0;
            z-index: 2147482998;
            background: rgba(23, 23, 23, 0.28);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease;
        }

        .da-overlay.da-open {
            opacity: 1;
            pointer-events: auto;
        }

        .da-overlay[hidden] {
            display: none;
        }

        /* ============================================================
   Panel (desktop: right-hand slide-in; mobile: bottom sheet)
   ============================================================ */

        .da-panel {
            position: fixed;
            z-index: 2147482999;
            top: 0;
            right: 0;
            height: 100%;
            width: min(var(--da-panel-width), 92vw);
            background: var(--da-white);
            border-left: 1px solid var(--da-border);
            box-shadow: -18px 0 40px rgba(23, 23, 23, 0.14);
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform .28s cubic-bezier(.32, .72, 0, 1);
            font-family: var(--da-font-body);
            color: var(--da-dark);
        }

        .da-panel.da-open {
            transform: translateX(0);
        }

        .da-panel[hidden] {
            display: none;
        }

        .da-resize-handle {
            position: absolute;
            left: -6px;
            top: 0;
            bottom: 0;
            width: 12px;
            cursor: ew-resize;
        }

        .da-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 22px 22px 16px;
            border-bottom: 1px solid var(--da-border);
            flex: none;
        }

        .da-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--da-font-heading);
            font-size: 11.5px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--da-accent);
            margin-bottom: 6px;
        }

        .da-eyebrow::before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 2px;
            background: var(--da-accent);
            border-radius: 0;
        }

        .da-title {
            font-family: var(--da-font-heading);
            font-size: 18px;
            font-weight: 600;
            margin: 0;
            color: var(--da-dark);
        }

        .da-close {
            flex: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--da-border);
            background: var(--da-white);
            color: var(--da-grey);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .15s ease, color .15s ease;
        }

        .da-close:hover {
            background: var(--da-bg-card);
            color: var(--da-dark);
        }

        .da-close:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        .da-form {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 22px;
            border-bottom: 1px solid var(--da-border);
            flex: none;
        }

        .da-input {
            flex: 1;
            font-family: var(--da-font-body);
            font-size: 14.5px;
            padding: 11px 14px;
            border-radius: var(--da-radius-sm);
            border: 1px solid var(--da-border);
            background: var(--da-bg-card);
            color: var(--da-dark);
        }

        .da-input::placeholder {
            color: var(--da-grey-light);
        }

        .da-input:focus {
            outline: none;
            border-color: var(--da-accent);
            background: var(--da-white);
            box-shadow: 0 0 0 3px var(--da-accent-soft);
        }

        .da-submit {
            flex: none;
            width: 38px;
            height: 38px;
            border-radius: var(--da-radius-sm);
            border: none;
            background: var(--da-accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(53, 46, 255, 0.28);
            transition: transform .15s ease;
        }

        .da-submit:hover {
            transform: translateY(-1px);
        }

        .da-submit:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        .da-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px 22px 28px;
        }

        .da-body::-webkit-scrollbar {
            width: 6px;
        }

        .da-body::-webkit-scrollbar-thumb {
            background: var(--da-border);
            border-radius: 0;
        }

        .da-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* ---- Idle / empty state ---- */

        .da-empty p {
            font-size: 14px;
            color: var(--da-grey);
            line-height: 1.6;
            margin: 0 0 10px;
        }

        .da-empty-sub {
            font-size: 12.5px !important;
            color: var(--da-grey-light) !important;
        }

        /* ---- Result card ---- */

        .da-result {
            background: var(--da-bg-card);
            border: 1px solid var(--da-border);
            border-radius: var(--da-radius-md);
            padding: 18px 20px;
            animation: da-fade-in .2s ease;
        }

        .da-result-empty {
            background: transparent;
            border-style: dashed;
        }

        /* ---- Loading state (while the LLM backend is answering) ---- */

        .da-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 22px 0;
            background: transparent;
            border: none;
        }

        .da-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--da-accent);
            opacity: .35;
            animation: da-dot-bounce 1.1s ease-in-out infinite;
        }

        .da-dot:nth-child(2) {
            animation-delay: .15s;
        }

        .da-dot:nth-child(3) {
            animation-delay: .3s;
        }

        @keyframes da-dot-bounce {

            0%,
            80%,
            100% {
                opacity: .35;
                transform: translateY(0);
            }

            40% {
                opacity: 1;
                transform: translateY(-4px);
            }
        }

        /* ---- "AI" tag next to an LLM-drafted answer summary ---- */

        .da-ai-tag {
            display: inline-block;
            font-family: var(--da-font-heading);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .04em;
            color: var(--da-accent);
            background: var(--da-accent-soft);
            border-radius: 0;
            padding: 1px 6px;
            vertical-align: middle;
        }

        .da-answer-label,
        .da-doc-label {
            font-family: var(--da-font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--da-grey-light);
            margin: 0 0 6px;
        }

        .da-doc-label {
            margin-top: 16px;
        }

        .da-answer {
            font-size: 14.5px;
            line-height: 1.65;
            color: var(--da-dark);
            margin: 0;
        }

        .da-doc-title {
            font-family: var(--da-font-heading);
            font-size: 15px;
            font-weight: 600;
            color: var(--da-dark);
            margin: 0 0 14px;
        }

        .da-goto {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--da-font-heading);
            font-size: 13.5px;
            font-weight: 600;
            color: #fff;
            background: var(--da-accent);
            border: none;
            border-radius: var(--da-radius-sm);
            padding: 10px 16px;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(53, 46, 255, 0.24);
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .da-goto:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(53, 46, 255, 0.32);
        }

        .da-goto:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        .da-related {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--da-border);
        }

        .da-related-label {
            display: block;
            font-family: var(--da-font-heading);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--da-grey-light);
            margin-bottom: 10px;
        }

        .da-related-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .da-chip {
            font-family: var(--da-font-body);
            font-size: 12.5px;
            font-weight: 500;
            color: var(--da-accent);
            background: var(--da-accent-soft);
            border: none;
            border-radius: var(--da-radius-sm);
            padding: 7px 12px;
            cursor: pointer;
            transition: background .15s ease;
        }

        .da-chip:hover {
            background: var(--da-accent);
            color: #fff;
        }

        .da-chip:focus-visible {
            outline: 2px solid var(--da-accent);
            outline-offset: 2px;
        }

        @keyframes da-fade-in {
            from {
                opacity: 0;
                transform: translateY(4px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ============================================================
   Destination highlight (applied to the target .doc-section)
   ============================================================ */

        .da-highlight {
            animation: da-highlight-pulse 2.6s ease;
            border-radius: var(--da-radius-md);
        }

        @keyframes da-highlight-pulse {
            0% {
                box-shadow: 0 0 0 0 var(--da-accent-soft);
                background-color: var(--da-accent-soft);
            }

            15% {
                box-shadow: 0 0 0 6px var(--da-accent-soft);
                background-color: var(--da-accent-soft);
            }

            85% {
                box-shadow: 0 0 0 6px rgba(234, 234, 255, 0);
                background-color: var(--da-accent-soft);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(234, 234, 255, 0);
                background-color: transparent;
            }
        }

        /* ============================================================
   Mobile — bottom sheet instead of side panel
   ============================================================ */

        @media (max-width: 720px) {
            .da-panel {
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                max-height: 82vh;
                border-left: none;
                border-top: 1px solid var(--da-border);
                border-radius: var(--da-radius-lg) var(--da-radius-lg) 0 0;
                box-shadow: 0 -18px 40px rgba(23, 23, 23, 0.18);
                transform: translateY(100%);
            }

            .da-panel.da-open {
                transform: translateY(0);
            }

            .da-resize-handle {
                display: none;
            }

            .da-launcher {
                right: max(16px, var(--da-launcher-right) - 8px);
                bottom: max(16px, var(--da-launcher-bottom) - 8px);
            }
        }

        /* ============================================================
   Reduced motion
   ============================================================ */

        @media (prefers-reduced-motion: reduce) {

            .da-panel,
            .da-overlay,
            .da-launcher,
            .da-goto,
            .da-submit {
                transition: none !important;
            }

            .da-highlight {
                animation: none !important;
                background-color: var(--da-accent-soft) !important;
            }

            .da-result {
                animation: none !important;
            }

            .da-dot {
                animation: none !important;
                opacity: .7 !important;
            }
        }

        /* ============================================================
   High-contrast / forced-colors compatibility
   ============================================================ */

        @media (forced-colors: active) {

            .da-launcher,
            .da-goto,
            .da-submit {
                border: 2px solid ButtonText;
            }

            .da-panel {
                border: 2px solid ButtonText;
            }

            .da-highlight {
                outline: 3px solid Highlight;
            }
        }

        /* ============================================================
   Re-skin: aligns the documentation content's own design tokens
   (originally already close, since both derive from the same real
   FyscalTech brand) to the verified tokens from the actual brand
   CSS — rectangular surfaces, and the blue+pink accent pairing
   carried through consistently from the homepage above.
   ============================================================ */
        :root {
            --accent: #352eff;
            /* exact match — same real brand blue already in use */
            --accent-2: #ff00ff;
            /* was a plain blue-violet; now the real brand pink,
                             used here only in gradients/ambient glow, never
                             as a large filled surface — same rule as the homepage */
            --accent-soft: #352eff1a;
            --dark: #171717;
            --grey: #575757;
            --grey-light: #6b6b73;
            --border: #efefef;
            --bg-card: #F7F8FC;
            --white: #FFFFFF;
            /* Rectangular, matching the homepage's real "all surfaces are 0" rule.
     Only chips/badges (already 999px) stay round, untouched below. */
            --radius-lg: 0;
            --radius-md: 0;
            --radius-sm: 0;
        }

        /* Unify typography with the homepage — Inter throughout (FT Sans substitute),
   JetBrains Mono in place of IBM Plex Mono (the real brand mono face). */
        body,
        h1,
        h2,
        h3,
        h4,
        .display,
        nav a,
        .btn,
        .eyebrow,
        .side-link,
        .sec-tag {
            font-family: 'FT Sans', system-ui, sans-serif;
        }

        code,
        .nav-crumb span,
        .mono {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
        }

        /* Buttons: match the homepage's exact fill + hover-to-deep-indigo pattern */
        .btn-primary {
            background: var(--accent);
            border: 1.5px solid var(--accent);
            color: #fff;
        }

        .btn-primary:hover {
            background: #030192;
            border-color: #030192;
        }

        /* Doc-section entrance animation kept, but figure/card corners now square */
        figure.shot-wide img {
            border-radius: 0;
            cursor: zoom-in;
            transition: opacity .15s ease;
        }
        figure.shot-wide img:hover {
            opacity: 0.92;
        }

        .module-card,
        .stat-box,
        .capability-card {
            border-radius: 0;
        }

/* ==== next block ==== */

/* Additions for tabbed interface */
        .doc-section {
            display: none;
            opacity: 1;
            transform: none;
        }

        .doc-section.active-tab {
            display: block;
        }

        /* Ensure the sublist styling */
        .side-group {
            display: flex;
            flex-direction: column;
        }

        .side-group>.side-link {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }

        .side-link-label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }

        .side-group .side-caret {
            font-size: 11px;
            color: var(--grey-light);
            transition: transform .15s ease;
            margin-top: 3px;
            flex: none;
            display: none;
        }

        .side-group:has(.side-sublist) .side-caret {
            display: inline-block;
        }

        .side-group.expanded .side-caret {
            transform: rotate(90deg);
        }

        .side-sublist {
            display: none;
            flex-direction: column;
            padding-left: 34px;
            margin-top: 2px;
            margin-bottom: 6px;
        }

        .side-group.expanded .side-sublist {
            display: flex;
        }

        .side-sublink {
            font-size: 13.5px;
            color: var(--grey);
            font-weight: 500;
            padding: 7px 10px;
            border-radius: var(--radius-sm);
        }

        .side-sublink:hover {
            background: var(--bg-card);
            color: var(--dark);
        }

        .side-sublink.active-sublink {
            background: var(--accent-soft);
            color: var(--accent);
            font-weight: 600;
        }

        /* ============ DEFENSIVE HEADING VISIBILITY FIX ============
           This file has several merged/duplicate stylesheets, which can cause
           heading colors to resolve inconsistently across browsers. Force all
           documentation headings to a readable dark color, always. */
        .doc-section h1,
        .doc-section h2,
        .doc-section h3,
        .doc-section h4,
        .doc-section .h4-plain,
        .doc-section .sub-num,
        .sidebar h1,
        .sidebar h2,
        .sidebar h3,
        .sidebar h4,
        .side-title,
        .side-link,
        .side-sublink {
            color: var(--dark, #171717) !important;
        }

        .doc-section .sub-num {
            color: var(--accent, #352eff) !important;
            background: var(--accent-soft, #eaeaff) !important;
        }

        .side-link.active,
        .side-link.active-tab {
            color: var(--accent, #352eff) !important;
        }

        .side-sublink.active-sublink {
            color: var(--accent, #352eff) !important;
        }
.btn-view-all-releases {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.btn-view-all-releases:hover {
    text-decoration: underline;
}

/* When a module is open, hide every landing-page section (hero, trust
   row, capabilities, module grid, quickstart, releases preview) so only
   the open module is on screen — not scrolled-past marketing content
   sitting above it. */
body.docs-open #landingMain,
body.docs-open .hero,
body.docs-open .trust-row,
body.docs-open section.section {
    display: none !important;
}

/* Short, light release teaser on the landing page — full history lives
   in its own Release Notes module now. */
#updates {
    padding-top: 28px;
    padding-bottom: 28px;
}
.release-light {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--bg-card, #f7f8fc);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
}
.release-light-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--fg-muted);
}
.release-light-text strong {
    color: var(--fg);
}
.release-light .release-date {
    color: var(--fg-muted);
}

/* ============================================================
   Design refresh: sidebar icons, card category labels, and the
   auto-generated Related Modules block at the end of each page.
   ============================================================ */

.side-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--grey-light);
    transition: color .15s ease;
}
.side-link:hover .side-link-icon {
    color: var(--dark);
}
.side-link.active .side-link-icon {
    color: var(--accent);
}
.side-link.side-link-plain {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mod-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.mod-card-category {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(53, 46, 255, 0.08);
    padding: 4px 8px;
    margin-top: 4px;
    white-space: nowrap;
}

.related-modules {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.related-modules-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 14px;
}
.related-modules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.related-module-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    background: var(--bg-card, #f7f8fc);
    color: var(--fg);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.related-module-card:hover {
    border-color: var(--primary);
    background: rgba(53, 46, 255, 0.06);
    color: var(--primary);
    transform: translateY(-1px);
}
.related-module-card .related-module-icon {
    display: flex;
    color: var(--primary);
    flex: none;
}

/* ---- Sidebar collapse: a plain arrow (no button chrome) sitting near
   the sidebar's own scrollbar edge, inside its visual column rather than
   floating in the gap between sidebar and content. Positioned as a
   sibling of .sidebar (not a child) since the sidebar itself collapses to
   width:0 + overflow:hidden — anything placed inside it would vanish
   along with it, leaving no way to re-expand. Its left offset animates
   between a point near the sidebar's right edge and the content's edge
   so it stays reachable and sensibly placed in both states. */
.sidebar-collapse-arrow {
    position: fixed;
    top: 94px;
    z-index: 25;
    width: 30px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--grey-light);
    cursor: pointer;
    transition: left .22s ease, color .15s ease, transform .15s ease;
}
.sidebar-collapse-arrow:hover {
    color: var(--primary);
    transform: scale(1.12);
}
.sidebar-collapse-arrow:active {
    transform: scale(0.92);
}
.sidebar-collapse-arrow svg {
    transition: transform .25s ease;
}
.layout.sidebar-collapsed .sidebar-collapse-arrow {
    color: var(--primary);
}
.layout.sidebar-collapsed .sidebar-collapse-arrow svg {
    transform: rotate(180deg);
}

/* Collapsed state: instead of hiding the sidebar entirely, show a
   narrow icon-only rail — just wide enough for the icons, vertically
   stacked, with no horizontal space wasted on now-hidden text labels. */
.layout.sidebar-collapsed {
    grid-template-columns: 52px minmax(0, 1fr) 240px;
}
.layout.sidebar-collapsed .sidebar {
    width: 52px;
    overflow: visible;
    pointer-events: auto;
}
.layout.sidebar-collapsed #sidebarNav {
    opacity: 1;
    pointer-events: auto;
}
.layout.sidebar-collapsed .side-category-title {
    display: none;
}
.layout.sidebar-collapsed .side-link {
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 4px;
}
.layout.sidebar-collapsed .side-link span:not(.side-link-icon) {
    display: none;
}
.layout.sidebar-collapsed .side-link-icon {
    margin: 0;
}

/* =========================================================================
   Doc-style refresh — heading anchor icons, plain breadcrumb, numbered
   step timeline. Same electric-blue accent (var(--accent) / var(--primary),
   #352EFF) throughout; this only changes typography/layout treatment,
   not the color system.
   ========================================================================= */

/* --- Heading anchor ("copy link") icons, matching a link/chain glyph --- */
.doc-section h2::after,
.doc-section h3::after,
.doc-section .h4-plain::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23352EFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07l1.5-1.5'/%3E%3C/svg%3E");
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.8;
}

.doc-section h2 {
    display: flex;
    align-items: center;
    gap: 2px;
    letter-spacing: -.015em;
    position: relative;
    padding-bottom: 16px;
    width: fit-content;
}

.doc-section h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 4px;
    background: var(--gradient-brand, linear-gradient(135deg, var(--accent), #7c9dff));
}

/* --- Plain breadcrumb (was a filled pill; now sits flush like a normal
   doc breadcrumb, bigger and airier, current segment reads dark/bold) --- */
.nav-crumb {
    background: none;
    display: block;
    padding: 0;
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--grey-light);
    line-height: 1.5;
}

.nav-crumb span {
    display: none;
}

/* the path text after the (hidden) label span still renders as plain
   text nodes in the existing markup, so style the whole line and let the
   final run of characters (the current page) inherit the bold treatment
   via the last strong/anchor if present */
.nav-crumb {
    font-weight: 500;
}

.nav-crumb a {
    color: var(--grey-light);
    text-decoration: none;
    font-weight: 500;
}

.nav-crumb a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- Numbered step timeline (circle + connecting line), opt-in via
   <ol class="step-list"> wrapping <li> — for genuinely sequential
   walkthroughs, alongside (not replacing) the existing check-list --- */
ol.step-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    counter-reset: step-counter;
}

ol.step-list li {
    position: relative;
    counter-increment: step-counter;
    padding: 0 0 28px 44px;
    margin: 0;
    color: var(--grey);
    font-size: 15px;
    line-height: 1.55;
}

ol.step-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--grey);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

ol.step-list li::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

ol.step-list li:last-child {
    padding-bottom: 0;
}

ol.step-list li:last-child::after {
    display: none;
}

.howto ol.step-list {
    margin-bottom: 0;
}

ol.step-list li strong {
    color: var(--dark);
}

ol.step-list .step-title {
    display: block;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
    font-size: 15.5px;
}

/* =========================================================================
   Guided visual story — numbered step blocks used to narrate a workflow
   through its screenshots (title, explanation, screenshot, transition to
   the next step), instead of a flat list of figures.
   ========================================================================= */
.flow-step {
    margin: 28px 0 0;
}

.flow-step-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.flow-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex: none;
}

.flow-step-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.flow-step-body {
    margin: 0 0 14px 36px;
    color: var(--grey);
    font-size: 14.5px;
    line-height: 1.6;
}

.flow-step figure.shot-wide {
    margin-left: 36px;
    width: calc(100% - 36px);
}

.flow-transition {
    margin: 10px 0 10px 36px;
    padding-left: 14px;
    border-left: 2px solid var(--accent-soft);
    color: var(--grey-light);
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.5;
}

.flow-transition::before {
    content: "↓ ";
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}

/* ============ AML LIFECYCLE (landing + documentation) ============ */
.lc {
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: 34px 30px 26px;
    color: #fff;
    background:
        radial-gradient(110% 70% at 8% 0%, rgba(124, 157, 255, 0.38), transparent 58%),
        radial-gradient(70% 60% at 100% 100%, rgba(255, 0, 255, 0.16), transparent 60%),
        linear-gradient(150deg, #030192 0%, #1a12c9 55%, #352eff 100%);
    box-shadow: 0 30px 60px -28px rgba(3, 1, 146, 0.55);
    margin: 22px 0;
}
.lc::before {
    content: "";
    position: absolute;
    right: -140px;
    top: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.025), 0 0 0 120px rgba(255, 255, 255, 0.02);
    pointer-events: none;
}
.lc a { text-decoration: none; color: inherit; border: 0; }
.lc-phases { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 38px; }
.lc-phase { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.lc-phase:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: -1px;
    right: -32px;
    width: 26px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #a8b6ff;
}
.lc-phase-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.lc-phase-name {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
}
.lc-phase-sub { font-size: 12px; color: #b9c4ff; }
.lc-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.lc-stage:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.lc-num {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #030192;
    font-size: 13px;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
}
.lc-stage h4 { margin: 11px 0 6px; font-size: 16px; line-height: 1.25; color: #fff; font-weight: 700; }
.lc-stage p { margin: 0 0 14px; font-size: 12.6px; line-height: 1.52; color: #dbe1ff; }
.lc-stage p strong { color: #fff; }
.lc-where {
    margin-top: auto;
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 99px;
}
.lc-where::after { content: "  →"; }
.lc-stage--decide {
    border-color: rgba(255, 110, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(255, 0, 255, 0.25), 0 16px 38px -16px rgba(255, 0, 255, 0.6);
}
.lc-stage--decide .lc-num { background: #ff5cff; color: #2a0030; }
.lc-flag {
    position: absolute;
    top: 16px;
    right: 14px;
    font-family: var(--font-mono, monospace);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd6ff;
    background: rgba(255, 0, 255, 0.22);
    border: 1px solid rgba(255, 140, 255, 0.6);
    padding: 3px 8px;
    border-radius: 99px;
}
.lc-loop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding: 14px 18px;
    border: 1.5px dashed rgba(255, 255, 255, 0.5);
    background: rgba(3, 1, 146, 0.35);
}
.lc-loop-icon { font-size: 30px; line-height: 1; color: #a8b6ff; flex: none; }
.lc-loop-text { flex: 1; font-size: 13px; line-height: 1.5; color: #dbe1ff; }
.lc-loop-text strong { color: #fff; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.lc-chips a, .lc-gov a {
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 11px;
    border-radius: 99px;
}
.lc-chips a:hover, .lc-gov a:hover { background: #fff; color: #030192; }
.lc-gov { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.lc-gov-label {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a8b6ff;
    margin-right: 6px;
}
@container (max-width: 880px) {
    .lc-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
    .lc-phase:nth-child(2)::after { content: none; }
    .lc-phase:nth-child(odd):not(:last-child)::after { content: "→"; }
    .lc-loop { flex-direction: column; align-items: flex-start; }
}
@container (max-width: 520px) {
    .lc { padding: 26px 18px 20px; }
    .lc-phases { grid-template-columns: 1fr; }
    .lc-phase::after { content: none !important; }
}

/* lifecycle: keep colours correct when nested inside documentation styles */
.lc .lc-stage h4,
.doc-section .lc .lc-stage h4 { color: #fff !important; margin: 11px 0 6px; padding: 0; border: 0; font-size: 16px; letter-spacing: 0; }
.lc .lc-stage p,
.doc-section .lc .lc-stage p { color: #dbe1ff; margin: 0 0 14px; font-size: 12.6px; line-height: 1.52; }
.lc .lc-stage p strong,
.doc-section .lc .lc-stage p strong { color: #fff; }
.lc .lc-loop-text,
.doc-section .lc .lc-loop-text { color: #dbe1ff; margin: 0; }
.lc .lc-loop-text strong { color: #fff; }
.lc .lc-phase-name, .doc-section .lc .lc-phase-name { color: #fff; }
.lc .lc-phase-sub, .doc-section .lc .lc-phase-sub { color: #b9c4ff; }

/* ============ Walkthrough + ready-to-build rule cards ============ */
figure.shot-modal { max-width: 520px; margin-left: auto; margin-right: auto; }
.rule-label { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #352eff); margin: 16px 0 6px; }
.rule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rule-chip { display: inline-block; font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: var(--accent-soft, #eaeaff); color: var(--accent, #352eff); }
.rule-chip.alt { background: #f1f1f6; color: #575757; }
.notice-label { font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #352eff); margin: 8px 0 4px; }

.table-wrap td a { color: var(--accent, #352eff); font-weight: 600; }

.table-wrap table.compact th, .table-wrap table.compact td { padding: 9px 10px; font-size: 12.8px; }
.table-wrap table.compact code { font-size: 11px; padding: 1px 5px; overflow-wrap: break-word; }

/* Anchor jumps and scrollIntoView() must stop below the fixed top navigation,
   otherwise the target heading lands hidden underneath it. */
html { scroll-padding-top: 92px; }

/* ============ Search palette + Ask AI: snippets, hints, answers ============ */
.cmdk-item .cmdk-item-snippet { font-size: 12.5px; line-height: 1.45; color: var(--grey, #575757); margin-top: 3px; }
.cmdk-item .cmdk-item-snippet mark { background: #fff3a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.cmdk-hint { display: flex; gap: 16px; justify-content: flex-end; padding: 10px 14px 4px; font-size: 11.5px; color: var(--grey-light, #8a8a8a); }
.cmdk-hint kbd { display: inline-block; font-family: var(--font-mono, monospace); font-size: 10.5px; border: 1px solid var(--border, #e5e5ef); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; margin-right: 3px; background: #fff; color: var(--dark, #171717); }
@keyframes searchFlash { 0% { background: #fff3a8; box-shadow: 0 0 0 6px #fff3a8; } 70% { background: #fff3a8; box-shadow: 0 0 0 6px #fff3a8; } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
.search-flash { animation: searchFlash 2.4s ease-out; border-radius: 4px; }
.ai-msg.bot .ai-answer { line-height: 1.55; margin-bottom: 8px; }
.ai-msg.bot .ai-source { font-size: 12.5px; color: var(--grey, #575757); margin-bottom: 6px; }
.ai-msg.bot .ai-source a, .ai-msg.bot .ai-related a { color: var(--accent, #352eff); font-weight: 600; }
.ai-msg.bot .ai-related { font-size: 12.5px; color: var(--grey, #575757); }
.ai-msg.bot .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-msg.bot .ai-chips button { font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--border, #e5e5ef); background: #fff; color: var(--accent, #352eff); }
.ai-msg.bot .ai-chips button:hover { background: var(--accent-soft, #eaeaff); }

.cmdk-item .cmdk-item-snippet { font-weight: 400; }


/* ==== Audit fixes (Oct 2026): landing heading levels, mobile header + hero ==== */

/* Landing-page card headings were h4, which skipped levels. The trust row sits
   between the h1 and the first section h2, so its items are h2; lifecycle and
   quick-start steps (under a section h2) are h3. Same look as before. */
.trust-item h2 { display: block; font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.qs-step h3 { display: block; color: #fff; font-size: 14.5px; font-weight: 600; margin: 0 0 3px; }
.lc .lc-stage h3,
.lc-stage h3 { display: block; margin: 11px 0 6px; padding: 0; border: 0; font-size: 16px; line-height: 1.25;
    color: #fff !important; font-weight: 700; letter-spacing: 0; }

/* Keep the logo at its real proportions when the header gets tight. */
.nav-brand { flex-shrink: 0; }
.nav-brand img { height: 26px; width: auto; flex-shrink: 0; }

@media (max-width: 860px) {
    /* Headline first, illustration after it. */
    .hero-illustration { order: 0; margin: 32px auto 0; }
    .case-card-mock { right: 0; max-width: calc(100% - 16px); }
}

@media (max-width: 600px) {
    /* The radar illustration is decorative; on phones it pushed the
       headline below the fold and its case card overflowed the screen. */
    .hero-illustration { display: none; }
    .hero { padding-top: 36px; }
    .nav-brand img { height: 22px; }
    .nav-search-kbd { display: none; }
    .nav-search-pill { padding-left: 10px; padding-right: 10px; }
    /* Its radial glow showed as a hard-edged block once the illustration was hidden. */
    .hero::before { display: none; }
    /* Three stats side by side instead of three full-height rows. */
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
    .hero-stat { min-width: 0; padding: 12px 10px; border-right: 1px solid var(--border); border-bottom: 0; }
    .hero-stat:last-child { border-right: none; }
    .hero-stat .num { font-size: 20px; }
    .hero-stat .label { font-size: 11.5px; line-height: 1.35; }
}

/* ---- Ask AI: model answers ---- */
.ai-msg.bot .ai-answer--model p { margin: 0 0 8px; }
.ai-msg.bot .ai-answer--model ol,
.ai-msg.bot .ai-answer--model ul { margin: 0 0 8px; padding-left: 20px; }
.ai-msg.bot .ai-answer--model li { margin: 0 0 4px; }
.ai-msg.bot .ai-answer--model > :last-child { margin-bottom: 0; }
.ai-msg.bot .ai-disclaimer { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--fg-muted); }
.ai-msg.bot .ai-badge { font: 700 10px/1 var(--font-mono); letter-spacing: .06em; color: #fff; background: var(--primary); padding: 3px 5px; }
.ai-msg.ai-typing { display: inline-flex; gap: 5px; align-items: center; }
.ai-msg.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: .35; animation: aiTyping 1.1s infinite ease-in-out; }
.ai-msg.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-msg.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiTyping { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-msg.ai-typing span { animation: none; opacity: .7; } }
.ai-input:disabled, .ai-send:disabled { opacity: .6; cursor: wait; }

/* ---- Landing hero: real product screen ---- */
.hero-shot { position: relative; z-index: 1; margin: 0; align-self: center; background: #fff;
    border: 1px solid var(--border); box-shadow: 0 30px 60px -20px rgba(53, 46, 255, 0.28), var(--shadow-sm); }
.hero-shot-bar { display: flex; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: #f7f7fb; }
.hero-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d9d9e3; }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot figcaption { padding: 8px 12px; font-size: 12px; color: var(--fg-muted); border-top: 1px solid var(--border); }
.foot-edition a { color: inherit; text-decoration: underline; }
@media (max-width: 860px) { .hero-shot { margin-top: 28px; } }
.ai-msg.ai-typing .ai-typing-note { margin-left: 6px; font-size: 12px; font-style: normal; color: var(--fg-muted); }

/* =========================================================================
   DESIGN LAYER v2 (Oct 2026). One place for the documentation's layout,
   type scale, figures, steps and tables. Loaded last, so it wins over the
   older layered rules above.
   ========================================================================= */
:root {
    --doc-ink: #1b1c24;
    --doc-body: #3a3c48;
    --doc-muted: #5f6270;
    --doc-line: #e6e7f0;
    --doc-tint: #f6f6fb;
    --doc-accent-soft: #ecebff;
}

/* --- Layout: less dead space, a wider reading column --- */
.layout {
    max-width: 1640px;
    padding: 0 24px 100px;
    grid-template-columns: 232px minmax(0, 1fr) 212px;
    gap: 36px;
}
.layout.sidebar-collapsed { grid-template-columns: 52px minmax(0, 1fr) 212px; }
.sidebar { width: 232px; }
.sidebar .side-category-title { margin: 18px 0 4px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; }
.sidebar .side-link { padding: 6px 10px; font-size: 14px; line-height: 1.35; gap: 9px; }
.page-toc .toc-list a, .page-toc .toc-item { font-size: 13px; line-height: 1.4; }
@media (max-width: 1200px) { .layout { grid-template-columns: 220px minmax(0, 1fr); } }

/* --- Type scale: chapter > section > step are clearly different --- */
.doc-section { padding-top: 28px; }
.doc-section .sec-tag { margin-bottom: 10px; }
.doc-section h2 { font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; }
.doc-section .sec-intro { font-size: 18px; line-height: 1.6; color: var(--doc-muted); max-width: 760px; margin: 0 0 28px; }
.doc-section h3 {
    font-size: 25px; line-height: 1.25; font-weight: 750; letter-spacing: -.02em;
    margin: 64px 0 10px; padding-top: 34px; border-top: 1px solid var(--doc-line);
}
.doc-section h3:first-of-type { margin-top: 36px; }
.doc-section h4.h4-plain, .doc-section h4:not(.flow-step-title) { font-size: 17px; font-weight: 700; margin: 30px 0 8px; }
.doc-section p, .doc-section li, .doc-section td { color: var(--doc-body); font-size: 15.5px; font-weight: 400; line-height: 1.7; }
.doc-section p { max-width: 780px; }
.doc-section strong { color: var(--doc-ink); font-weight: 650; }
.doc-section .nav-crumb { font-size: 13px; font-weight: 500; color: var(--doc-muted); margin: 0 0 16px; }
.doc-section h3 + .nav-crumb { margin-top: -2px; }

/* --- Screenshots: framed, captioned, clearly zoomable --- */
.doc-section figure.shot-wide {
    position: relative; margin: 18px 0 30px; background: #fff;
    border: 1px solid var(--doc-line); border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 20, 50, .04), 0 14px 34px -16px rgba(20, 20, 60, .18);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.doc-section figure.shot-wide:hover { transform: none; border-color: #cfcdfc; box-shadow: 0 1px 2px rgba(20,20,50,.04), 0 18px 40px -14px rgba(53,46,255,.25); }
.doc-section figure.shot-wide img { display: block; width: 100%; height: auto; opacity: 1; }
.doc-section figure.shot-wide img:hover { opacity: 1; }
.doc-section figure.shot-wide::after {
    content: "⤢  Click to enlarge"; position: absolute; top: 10px; right: 10px;
    padding: 5px 10px; font: 600 12px/1 var(--font-body); color: #fff; background: rgba(27, 28, 36, .78);
    border-radius: 999px; opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.doc-section figure.shot-wide:hover::after { opacity: 1; }
.doc-section figure.shot-wide figcaption {
    margin: 0; padding: 10px 16px; font-size: 13px; line-height: 1.5; color: var(--doc-muted);
    background: var(--doc-tint); border-top: 1px solid var(--doc-line); text-align: left;
}

/* --- Task steps: a numbered timeline --- */
.doc-section .flow-step { position: relative; margin: 30px 0 0; padding-left: 44px; }
.doc-section .flow-step::before {
    content: ""; position: absolute; left: 14px; top: 34px; bottom: -26px;
    width: 2px; background: var(--doc-accent-soft);
}
.doc-section .flow-step-head { margin-bottom: 6px; }
.doc-section .flow-step-num {
    position: absolute; left: 0; top: -2px; min-width: 30px; height: 30px; font-size: 13.5px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--doc-accent-soft);
}
.doc-section .flow-step-title { font-size: 16.5px; font-weight: 650; color: var(--doc-ink) !important; }
.doc-section .flow-step-body { margin: 0 0 12px; font-size: 15px; color: var(--doc-body); }
.doc-section .flow-step figure.shot-wide { margin-left: 0; width: 100%; }
.doc-section .flow-transition { display: none; }

/* --- Reference tables --- */
.doc-section .table-wrap { border: 1px solid var(--doc-line); border-radius: 10px; overflow-x: auto; margin: 16px 0 26px; }
.doc-section .table-wrap table { margin: 0; border: 0; width: 100%; }
.doc-section .table-wrap th { background: var(--doc-tint); color: var(--doc-ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.doc-section .table-wrap th, .doc-section .table-wrap td { padding: 10px 14px; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.doc-section .table-wrap tr:last-child td { border-bottom: 0; }
.doc-section .table-wrap tbody tr:hover td { background: #fbfbfe; }
.doc-section .table-wrap td { font-size: 14.5px; }

/* --- Notes --- */
.doc-section .note-box { border: 1px solid #dcdafe; border-left: 4px solid var(--primary); background: #f7f7ff; border-radius: 8px; padding: 12px 16px; font-size: 14.5px; color: var(--doc-body); }
.doc-section .note-box .box-label { color: var(--primary); font-weight: 700; margin-right: 6px; }

/* ---- Landing hero: product tour ---- */
.hero-tour { position: relative; z-index: 1; align-self: center; min-width: 0; }
.hero-tour-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.hero-tour-tab {
    font: 600 13px/1 var(--font-body); color: var(--doc-muted, #5f6270); background: #fff;
    border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px; cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.hero-tour-tab:hover { color: var(--primary); border-color: #cfcdfc; }
.hero-tour-tab.is-active { color: #fff; background: var(--primary); border-color: var(--primary); }
.hero-tour-tab:focus-visible { outline: 3px solid #b9b6ff; outline-offset: 2px; }
.hero-tour .hero-shot { margin: 0; border-radius: 12px; overflow: hidden; }
.hero-tour-stage { position: relative; aspect-ratio: 16 / 10; background: #fff; cursor: pointer; overflow: hidden; }
.hero-tour .hero-tour-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left;
    opacity: 0; transform: scale(1.015); transition: opacity .45s ease, transform .6s ease;
}
.hero-tour .hero-tour-img.is-active { opacity: 1; transform: none; }
.hero-tour .hero-shot figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-style: normal; }
.hero-tour-link { color: var(--primary); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hero-tour-img { transition: none; transform: none; } }
@media (max-width: 860px) { .hero-tour { margin-top: 28px; } }
@media (max-width: 600px) { .hero-tour-tab { padding: 8px 11px; font-size: 12px; } }
.layout > .page-toc { width: auto; max-width: 212px; min-width: 0; }

/* =========================================================================
   DESIGN LAYER v2.1: calmer. Smaller headings, fewer lines and shadows,
   more white space; side panels show that they scroll.
   ========================================================================= */
.layout { gap: 48px; }
.doc-section h2 { font-size: 30px; letter-spacing: -.02em; margin-bottom: 10px; }
.doc-section .sec-intro { font-size: 16.5px; margin-bottom: 24px; }
.doc-section h3 { font-size: 21px; font-weight: 700; margin: 56px 0 8px; padding-top: 0; border-top: 0; }
.doc-section h3:first-of-type { margin-top: 32px; }
.doc-section h4.h4-plain, .doc-section h4:not(.flow-step-title) { font-size: 16px; }
.doc-section p, .doc-section li, .doc-section td { font-size: 15px; }

/* Screenshots: thin border only, plain caption underneath */
.doc-section figure.shot-wide { border-radius: 8px; box-shadow: none; margin: 16px 0 26px; }
.doc-section figure.shot-wide:hover { box-shadow: none; border-color: #d4d2fb; }
.doc-section figure.shot-wide::after { content: none; }
.doc-section figure.shot-wide figcaption { background: none; border-top: 1px solid var(--doc-line); padding: 8px 14px; font-size: 12.5px; }

/* Steps: number + title, no connecting line */
.doc-section .flow-step { margin-top: 26px; padding-left: 40px; }
.doc-section .flow-step::before { content: none; }
.doc-section .flow-step-num { min-width: 26px; height: 26px; font-size: 12.5px; box-shadow: none; top: 0; }
.doc-section .flow-step-title { font-size: 16px; }

/* Tables: plain headers */
.doc-section .table-wrap { border-radius: 8px; }
.doc-section .table-wrap th { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 650; background: #fafafc; }
.doc-section .table-wrap tbody tr:hover td { background: none; }

/* Notes: lighter */
.doc-section .note-box { border: 0; border-left: 3px solid #c9c6ff; background: #f8f8fd; border-radius: 0 6px 6px 0; }

/* Side panels: always fit the screen and show a thin scrollbar, so the last
   entries of a long "On this page" list are reachable. */
.page-toc, .sidebar-nav {
    max-height: calc(100vh - var(--topbar-h, 76px) - 48px);
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d9d8ec transparent;
    padding-bottom: 16px;
}
.page-toc::-webkit-scrollbar, .sidebar-nav::-webkit-scrollbar { width: 6px; display: block; }
.page-toc::-webkit-scrollbar-thumb, .sidebar-nav::-webkit-scrollbar-thumb { background: #d9d8ec; border-radius: 3px; }
.page-toc::-webkit-scrollbar-track, .sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* ---- Design layer v2.1: calmer, more white space (feedback 7 Oct) ---- */
.layout { grid-template-columns: 240px minmax(0, 1fr) 216px; gap: 52px; padding: 0 32px 100px; }
.layout.sidebar-collapsed { grid-template-columns: 52px minmax(0, 1fr) 216px; }
.sidebar { width: 240px; }
.layout > .page-toc { max-width: 216px; }
.doc-section h2 { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.doc-section .sec-intro { font-size: 17px; max-width: 720px; }
.doc-section h3 { font-size: 21px; font-weight: 700; margin: 56px 0 8px; padding-top: 0; border-top: 0; }
.doc-section h3:first-of-type { margin-top: 40px; }
.doc-section p { max-width: 720px; }
.doc-section p, .doc-section li { font-size: 15px; }
.doc-section figure.shot-wide { margin: 16px 0 34px; border: 1px solid #ebebf2; border-radius: 10px; box-shadow: none; }
.doc-section figure.shot-wide:hover { border-color: #d9d7fb; box-shadow: none; }
.doc-section figure.shot-wide figcaption { background: #fff; border-top: 1px solid #f0f0f5; font-size: 12.5px; padding: 9px 14px; }
.doc-section .flow-step { margin-top: 26px; }
.doc-section .flow-step-num { box-shadow: none; }
.doc-section .flow-step::before { background: #f0effc; }
.doc-section .table-wrap { border-color: #ebebf2; }
.doc-section .table-wrap th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 650; background: #fafafc; }
.doc-section .table-wrap tbody tr:hover td { background: transparent; }
.doc-section .note-box { border: 0; border-left: 3px solid var(--primary); background: #f8f8fd; border-radius: 0 6px 6px 0; }
/* Back-to-top sits in the corner so it never covers the footer. */
.back-to-top { left: auto; right: 24px; transform: none; }
.foot-top .foot-edition { color: rgba(255, 255, 255, .7); font-size: 13px; }
.foot-top .foot-edition a { color: #fff; }
footer .foot-top, footer .foot-bottom { width: 100%; }

/* ---- "In this chapter" map under each chapter intro ---- */
.doc-section ul.chapter-map { list-style: none; margin: 0 0 8px; padding: 14px 18px; max-width: 720px;
    background: #fafafd; border: 1px solid #efeff6; border-radius: 10px; columns: 2; column-gap: 28px; }
.doc-section ul.chapter-map li { break-inside: avoid; margin: 0 0 8px; padding: 0; font-size: 14px; line-height: 1.5; color: var(--doc-muted); }
.doc-section ul.chapter-map li::before { content: none; }
.doc-section ul.chapter-map a { color: var(--primary); font-weight: 600; text-decoration: none; }
.doc-section ul.chapter-map a:hover { text-decoration: underline; }
@media (max-width: 900px) { .doc-section ul.chapter-map { columns: 1; } }

/* Screenshots never upscale: small crops keep their real (screen) size and
   sit in a frame that fits them; wide ones shrink to the column. */
.doc-section figure.shot-wide { width: fit-content; max-width: 100%; }
.doc-section figure.shot-wide img { width: auto; max-width: 100%; height: auto; }
.doc-section .flow-step figure.shot-wide { width: fit-content; }
.ai-msg.bot .ai-feedback { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--fg-muted); }
.ai-msg.bot .ai-feedback button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 2px 9px; cursor: pointer; font-size: 13px; line-height: 1.6; }
.ai-msg.bot .ai-feedback button:hover { border-color: var(--primary); }
.ai-privacy { margin: 4px 2px 8px; font-size: 11.5px; color: var(--fg-muted); }

/* ---- Getting Started: "Where to start, by role" ---- */
.doc-section .role-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 28px; }
.doc-section .role-path { border: 1px solid #ebebf2; border-radius: 10px; padding: 16px 18px 6px; background: #fff; }
.doc-section .role-path h4.h4-plain { margin: 0 0 4px; font-size: 15.5px; }
.doc-section .role-path > p { font-size: 13.5px; margin: 0 0 10px; color: var(--doc-muted); }
.doc-section .role-path ol { margin: 0; padding-left: 20px; }
.doc-section .role-path li { font-size: 13.5px; line-height: 1.5; margin: 0 0 9px; color: var(--doc-body); }
.doc-section .role-path li a { font-weight: 600; color: var(--primary); }
@media (max-width: 1100px) { .doc-section .role-paths { grid-template-columns: 1fr; } }

/* ---- Phones: compact chapter header (mobile audit, 8 Oct) ---- */
@media (max-width: 860px) {
    #toggleSidebarBtn { display: none !important; }
    .content-topbar { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 0 12px; }
    .breadcrumb-trail { flex: 1; min-width: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; font-size: 11.5px; }
    .breadcrumb-trail .bc-current { overflow: hidden; text-overflow: ellipsis; }
    .btn-back-modules { padding: 6px 10px; }
    .content-topbar ~ .doc-section, .content-topbar + .doc-section { border-top: 0; }
    .doc-section h2 { font-size: 26px; }
    .doc-section .sec-intro { font-size: 16px; }
    .doc-section h3 { font-size: 19px; margin-top: 44px; }
}
@media (max-width: 860px) {
    .breadcrumb-trail > span:first-child, .breadcrumb-trail .bc-sep { display: none; }
}
.hero-cta-row .btn-pdf { align-self: center; font-size: 14px; font-weight: 600; color: var(--doc-muted, #5f6270); text-decoration: none; padding: 8px 4px; }
.hero-cta-row .btn-pdf:hover { color: var(--primary); text-decoration: underline; }

/* =========================================================================
   Step labels and topic dividers (8 Oct). Numbered text steps read "STEP 1"
   in a light brand-blue label, so solid blue circles appear only on
   screenshots. A thin brand-blue line marks where each topic ends.
   ========================================================================= */
.doc-section .flow-step { padding-left: 0; margin-top: 30px; }
.doc-section .flow-step::before { content: none; }
.doc-section .flow-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-section .flow-step-num {
    position: static; display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; height: auto; padding: 5px 9px; flex: none;
    border-radius: 6px; background: #eeedff; border: 1px solid #d9d7ff; box-shadow: none;
    color: #352eff; font: 700 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.doc-section .flow-step-num::before { content: "Step\00a0"; }
.doc-section .flow-step-title { font-size: 16px; }

.doc-section hr.section-end {
    border: 0; height: 2px; margin: 56px 0 0; border-radius: 2px;
    background: linear-gradient(90deg, #352eff 0%, #7c9dff 40%, rgba(124, 157, 255, 0) 100%);
}
.doc-section hr.section-end + h3 { margin-top: 40px; }
.print-edition .doc-section hr.section-end { margin-top: 10mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* =========================================================================
   DESIGN LAYER v3 (10 Oct 2026). Loaded last; wins over everything above.
   Part A fixes problems found in the 1440 / 1024 / 390 px audit.
   Part B adds the conceptual visual components (diagrams, callouts,
   comparison tables, key facts). Copy-paste HTML for each is in
   tools/STYLE.md, "Diagrams and callouts".
   ========================================================================= */

/* ---- A1. Layout: below 1200px the "On this page" panel is hidden, so drop
   its grid column (v2.1 kept a 216px empty column, leaving a 400px text
   column at 1024px). Phones get a 16-20px side gutter, not 32px. ---- */
@media (max-width: 1200px) {
    .layout { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
    .layout.sidebar-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .layout { padding: 0 20px 60px; }
    .nav { padding: 12px 20px; }
}
@media (max-width: 600px) {
    .layout { padding: 0 16px 56px; }
    .nav { padding: 10px 16px; }
    .breadcrumb-trail { padding-left: 0; padding-right: 0; }
}

/* ---- A2. Body copy: one colour and rhythm for paragraphs and lists ---- */
.doc-section li { color: var(--doc-body); line-height: 1.65; }
.doc-section ul.check-list li, .doc-section ol.step-list li { max-width: 760px; }

/* Numbered key under a layout screenshot: tighter, same ink as body text,
   numbers tinted to echo the blue badges on the screenshot (outlined, so
   solid blue circles still appear only on screenshots). */
.doc-section ol.step-list li { color: var(--doc-body); padding: 0 0 14px 40px; line-height: 1.6; }
.doc-section ol.step-list li::before {
    width: 24px; height: 24px; top: 1px; font-size: 12px;
    background: #f1f0ff; border: 1px solid #cfcdfc; color: #352eff;
}
.doc-section ol.step-list li::after { left: 11.5px; top: 27px; bottom: 2px; background: #e6e5fb; }

/* ---- A3. Reference tables: readable cell text (was 12.8px) ---- */
.doc-section .table-wrap table.compact th { font-size: 13px; padding: 10px 12px; }
.doc-section .table-wrap table.compact td { font-size: 14px; line-height: 1.55; padding: 10px 12px; }
.doc-section .table-wrap table.compact code { font-size: 12px; }
.doc-section .table-wrap td:first-child { color: var(--doc-ink); }

/* ---- A4. Screenshots ----
   - Captions: upright (not italic), with the "Figure n.m" label in ink
     (build.py wraps it in <span class="cap-num">).
   - Captions never widen the frame: a short crop no longer sits in a
     wide white box because its caption was long.
   - Very small crops get a minimum frame so the caption stays readable;
     the image is centred in it.
   - Unloaded lazy images keep their real size (app.js sets the width from
     the width attribute), so headings don't jump as images load. */
.doc-section figure.shot-wide { min-width: min(100%, 340px); }
.doc-section figure.shot-wide img { margin: 0 auto; }
.doc-section figure.shot-wide figcaption,
.doc-section figure.diagram figcaption {
    width: 0; min-width: 100%; box-sizing: border-box;
    font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--doc-muted);
}
.doc-section figcaption .cap-num { color: var(--doc-ink); font-weight: 650; }
.doc-section .flow-step figure.shot-wide { margin-top: 12px; }

/* Lightbox: caption under the zoomed image, keyboard focus, and on phones
   the image opens larger than the screen so it can be panned. */
.lightbox { flex-direction: column; gap: 12px; }
.lightbox-caption { max-width: min(92vw, 900px); color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.5; text-align: center; }
.lightbox-caption:empty { display: none; }
.lightbox-close { border: 0; padding: 0; font: 400 20px/1 var(--font-body); z-index: 2; }
.lightbox-close:focus-visible, .doc-section figure.shot-wide img:focus-visible { outline: 3px solid #7c9dff; outline-offset: 2px; }
@media (max-width: 860px) {
    .lightbox.open { display: block; overflow: auto; padding: 64px 12px 24px; -webkit-overflow-scrolling: touch; }
    .lightbox img { max-width: none; max-height: none; }
    .lightbox-caption { margin: 12px 0 0; text-align: left; }
    .lightbox-close { position: fixed; top: 12px; right: 12px; }
}

/* =========================================================================
   Part B. Conceptual visual components.
   Diagrams explain a concept or a sequence. They are drawn in HTML/CSS,
   sit on a dotted, tinted panel with a dashed border and a "Concept
   diagram" label, and are captioned "Diagram n.m — …", so they can never
   be mistaken for a product screenshot (white, solid frame, "Figure").
   Colours are tokens; :root[data-theme="dark"] switches them.
   ========================================================================= */
:root {
    --vx-ink: #1b1c24;
    --vx-body: #3a3c48;
    --vx-muted: #5f6270;
    --vx-panel: #f7f8fc;
    --vx-dot: #e2e4f0;
    --vx-frame: #c4c7dc;
    --vx-node: #ffffff;
    --vx-node-line: #d5d8e8;
    --vx-line: #8f94b3;
    --vx-accent: #352eff;
    --vx-accent-soft: #eeedff;
    --vx-accent-line: #9d99ff;
    --vx-lane-a: #f1f2f9;
    --vx-lane-b: #f8f9fc;
    /* callouts */
    --vx-note: #352eff;      --vx-note-bg: #f8f8fd;
    --vx-tip: #1e7a52;       --vx-tip-bg: #f2f9f5;
    --vx-warn: #a85a07;      --vx-warn-bar: #e08a2e;  --vx-warn-bg: #fff8ef;
    --vx-aml: #0e6582;       --vx-aml-bg: #f1f7fa;
    --vx-tbc: #6b6e80;       --vx-tbc-line: #c9cbd8;
    /* compare cells */
    --vx-yes: #1e7a52; --vx-no: #b4232c; --vx-partial: #a85a07;
}
@media screen { :root[data-theme="dark"] {
    --vx-ink: #ececf4;
    --vx-body: #c9cad6;
    --vx-muted: #9a9cae;
    --vx-panel: #16171f;
    --vx-dot: #262838;
    --vx-frame: #3b3e57;
    --vx-node: #1d1f2b;
    --vx-node-line: #363950;
    --vx-line: #7a7fa3;
    --vx-accent: #7c9dff;
    --vx-accent-soft: #232a52;
    --vx-accent-line: #5d6fd6;
    --vx-lane-a: #1b1d28;
    --vx-lane-b: #171822;
    --vx-note: #9db4ff;      --vx-note-bg: #1a1c2c;
    --vx-tip: #6fd3a1;       --vx-tip-bg: #15231d;
    --vx-warn: #f2b264;      --vx-warn-bar: #d98a33;  --vx-warn-bg: #261d12;
    --vx-aml: #6cc4e3;       --vx-aml-bg: #12212a;
    --vx-tbc: #a3a6b8;       --vx-tbc-line: #4a4d63;
    --vx-yes: #6fd3a1; --vx-no: #ff8a8f; --vx-partial: #f2b264;
} }

/* Small inline icons are CSS masks, so they take the text colour in both
   themes and in print. */
.doc-section {
    --vx-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 7h18M14 2l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --vx-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M1 4h8a4 4 0 0 1 4 4v19M8.5 22.5 13 27l4.5-4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --vx-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M1 26h8a4 4 0 0 0 4-4V3M8.5 7.5 13 3l4.5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --vx-i-head: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0L10 5L0 10z' fill='black'/%3E%3C/svg%3E");
    --vx-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.6' r='.7' fill='black'/%3E%3C/svg%3E");
    --vx-i-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.2 1.1 2V16h5v-.2c0-.8.4-1.5 1.1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
    --vx-i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19z'/%3E%3Cpath d='M12 9.5v5'/%3E%3Ccircle cx='12' cy='17.3' r='.7' fill='black'/%3E%3C/svg%3E");
    --vx-i-aml: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5zM20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E");
    --vx-i-tbc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='3 3'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.4 2.4c-.6.3-1 .8-1 1.5v.4'/%3E%3Ccircle cx='12' cy='16.8' r='.7' fill='black'/%3E%3C/svg%3E");
    --vx-i-yes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --vx-i-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
    --vx-i-partial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='black'/%3E%3C/svg%3E");
}

/* ---- B1. Diagram frame (shared) ---- */
.doc-section figure.diagram {
    container-type: inline-size;
    position: relative; width: 100%; max-width: 100%;
    margin: 18px 0 32px; padding: 16px 22px 0;
    background-color: var(--vx-panel);
    background-image: radial-gradient(var(--vx-dot) 1px, transparent 1.2px);
    background-size: 16px 16px; background-position: 8px 8px;
    border: 1.5px dashed var(--vx-frame); border-radius: 12px;
    color: var(--vx-body); cursor: default; box-shadow: none;
    overflow: visible;
}
.doc-section figure.diagram::before {
    content: "Concept diagram"; position: static; display: block;
    margin: 0 0 16px; padding: 0 0 0 19px; min-height: 14px; width: auto; height: auto; opacity: 1;
    font: 650 10.5px/14px var(--font-body); letter-spacing: .09em; text-transform: uppercase;
    color: var(--vx-muted); border: 0; box-shadow: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6270' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M6.5 10v4.5a2 2 0 0 0 2 2H14' stroke-linecap='round'/%3E%3C/svg%3E") left center / 13px 13px no-repeat;
}
@media screen { :root[data-theme="dark"] .doc-section figure.diagram::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9cae' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M6.5 10v4.5a2 2 0 0 0 2 2H14' stroke-linecap='round'/%3E%3C/svg%3E");
} }
.doc-section figure.diagram::after { content: none; }
.doc-section figure.diagram figcaption {
    width: auto; min-width: 0; margin: 18px -22px 0; padding: 10px 22px 11px;
    background: transparent; border-top: 1.5px dashed var(--vx-frame);
    color: var(--vx-muted); text-align: left;
}
.doc-section figure.diagram figcaption .cap-num { color: var(--vx-ink); }
.doc-section figure.diagram ol, .doc-section figure.diagram ul { list-style: none; margin: 0; padding: 0; }
.doc-section figure.diagram li { margin: 0; padding: 0; max-width: none; }
.doc-section figure.diagram li::before, .doc-section figure.diagram li::after { content: none; }
.doc-section figure.diagram p { margin: 0; max-width: none; }
/* every box in a diagram */
.doc-section .diagram .dg-node,
.doc-section .diagram.flow .dg-step,
.doc-section .diagram.lifecycle .dg-state,
.doc-section .diagram.decision .dg-q,
.doc-section .diagram.decision .dg-out,
.doc-section .diagram.swimlane .dg-task {
    background: var(--vx-node); border: 1px solid var(--vx-node-line); border-radius: 8px;
    color: var(--vx-ink); font-size: 13.5px; line-height: 1.4; font-weight: 600;
}
.doc-section .diagram .dg-sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--vx-muted); }
.doc-section .diagram .is-key {
    background: var(--vx-accent-soft) !important; border-color: var(--vx-accent-line) !important;
    box-shadow: inset 0 0 0 1px var(--vx-accent-line);
}

/* ---- B2. Process flow: .diagram.flow ---- */
.doc-section .diagram.flow .dg-steps {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    column-gap: 30px; counter-reset: dg-step;
}
.doc-section .diagram.flow .dg-step {
    position: relative; padding: 11px 12px 12px; counter-increment: dg-step;
    font-size: 13.5px; line-height: 1.4; color: var(--vx-ink);
}
.doc-section .diagram.flow .dg-step::before {
    content: counter(dg-step); display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin: 0 0 7px; border-radius: 50%;
    border: 1px solid var(--vx-accent-line); color: var(--vx-accent);
    font: 700 11px/1 var(--font-body); background: transparent;
}
.doc-section .diagram.flow .dg-step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -27px; width: 22px; height: 14px; margin-top: -7px;
    background: var(--vx-line); -webkit-mask: var(--vx-i-arrow) center / contain no-repeat; mask: var(--vx-i-arrow) center / contain no-repeat;
}
.doc-section .diagram.flow .dg-title { display: block; }
@container (max-width: 620px) {
    .doc-section .diagram.flow .dg-steps { grid-auto-flow: row; row-gap: 26px; }
    .doc-section .diagram.flow .dg-step { display: grid; grid-template-columns: 28px 1fr; align-items: start; padding: 10px 12px; }
    .doc-section .diagram.flow .dg-step::before { margin: 0; grid-row: 1 / span 2; }
    .doc-section .diagram.flow .dg-step:not(:last-child)::after { top: auto; bottom: -22px; right: auto; left: 21px; margin: 0; transform: rotate(90deg); width: 18px; }
}

/* ---- B3. Status lifecycle: .diagram.lifecycle ---- */
.doc-section .diagram.lifecycle .dg-track { display: flex; flex-wrap: wrap; align-items: center; row-gap: 34px; }
.doc-section .diagram.lifecycle .dg-state {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; white-space: nowrap; font-size: 13px;
}
.doc-section .diagram.lifecycle .dg-state::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--vx-line); position: static;
}
.doc-section .diagram.lifecycle .dg-state.is-start::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vx-line); }
.doc-section .diagram.lifecycle .dg-state.is-end { border-width: 3px; border-style: double; padding: 6px 11px; }
.doc-section .diagram.lifecycle .dg-state.is-ref { border-style: dashed; color: var(--vx-muted); font-weight: 500; background: transparent; }
.doc-section .diagram.lifecycle .dg-state.is-key::before { background: var(--vx-accent); }
.doc-section .diagram.lifecycle .dg-edge {
    position: relative; flex: 1 1 56px; min-width: 44px; max-width: 140px; height: 2px; margin: 0 6px;
    background: linear-gradient(var(--vx-line), var(--vx-line)) left center / calc(100% - 6px) 1.5px no-repeat;
    font-size: 11.5px; line-height: 1.25; font-weight: 500; color: var(--vx-muted); text-align: center;
}
.doc-section .diagram.lifecycle .dg-edge::after {
    content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 10px;
    background: var(--vx-line); -webkit-mask: var(--vx-i-head) center / contain no-repeat; mask: var(--vx-i-head) center / contain no-repeat;
}
.doc-section .diagram.lifecycle .dg-edge > span { position: absolute; left: -4px; right: -4px; bottom: 7px; }
.doc-section .diagram.lifecycle .dg-fork {
    margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--vx-frame);
}
.doc-section .diagram.lifecycle .dg-fork-label {
    display: block; margin: 0 0 22px; font-size: 12px; font-weight: 600; color: var(--vx-muted);
}
.doc-section .diagram.lifecycle .dg-fork + .dg-fork { margin-top: 12px; }
/* Vertical below 700px so a wrapped row never leaves an arrow dangling. */
@container (max-width: 700px) {
    .doc-section .diagram.lifecycle .dg-track { flex-direction: column; align-items: flex-start; row-gap: 0; }
    .doc-section .diagram.lifecycle .dg-state { white-space: normal; }
    .doc-section .diagram.lifecycle .dg-edge {
        flex: none; width: 2px; min-width: 0; max-width: none; height: 38px; margin: 0 0 0 20px;
        background: linear-gradient(var(--vx-line), var(--vx-line)) center top / 1.5px calc(100% - 6px) no-repeat;
        text-align: left;
    }
    .doc-section .diagram.lifecycle .dg-edge::after { right: auto; left: -4px; top: auto; bottom: 0; transform: rotate(90deg); }
    .doc-section .diagram.lifecycle .dg-edge > span { left: 14px; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); width: max-content; max-width: 220px; }
    .doc-section .diagram.lifecycle .dg-fork-label { margin-bottom: 12px; }
}

/* ---- B4. Decision tree: .diagram.decision ---- */
.doc-section .diagram.decision .dg-tree { display: flex; flex-direction: column; align-items: center; }
.doc-section .diagram.decision .dg-q {
    position: relative; max-width: 420px; padding: 10px 14px 10px 36px; text-align: left;
    font-size: 13.5px; font-weight: 600;
}
.doc-section .diagram.decision .dg-q::before {
    content: "?"; position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
    display: flex; align-items: center; justify-content: center; transform: rotate(45deg);
    border: 1.5px solid var(--vx-accent-line); border-radius: 3px; background: var(--vx-node);
    font: 700 0/1 var(--font-body); color: transparent;
}
.doc-section .diagram.decision .dg-answers {
    position: relative; display: flex; width: 100%; padding-top: 16px;
}
.doc-section .diagram.decision .dg-answers::before {
    content: ""; position: absolute; top: 0; left: 50%; height: 16px; border-left: 1.5px solid var(--vx-line);
}
.doc-section .diagram.decision .dg-answer {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    padding: 12px 8px 0;
}
.doc-section .diagram.decision .dg-answer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1.5px solid var(--vx-line);
}
.doc-section .diagram.decision .dg-answer:first-child::before { left: 50%; }
.doc-section .diagram.decision .dg-answer:last-child::before { right: 50%; }
.doc-section .diagram.decision .dg-answer:only-child::before { content: none; }
.doc-section .diagram.decision .dg-answer::after {
    content: ""; position: absolute; top: 0; left: 50%; height: 40px; border-left: 1.5px solid var(--vx-line);
}
.doc-section .diagram.decision .dg-a {
    position: relative; z-index: 1; margin: 0 0 10px; padding: 2px 10px;
    border-radius: 999px; background: var(--vx-panel); border: 1px solid var(--vx-node-line);
    font: 700 11px/1.5 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--vx-muted);
}
.doc-section .diagram.decision .dg-out { position: relative; z-index: 1; max-width: 300px; padding: 10px 13px; text-align: center; }
.doc-section .diagram.decision .dg-answer > .dg-q { z-index: 1; }
@container (max-width: 560px) {
    .doc-section .diagram.decision .dg-tree { align-items: stretch; }
    .doc-section .diagram.decision .dg-q { max-width: none; }
    .doc-section .diagram.decision .dg-answers { flex-direction: column; gap: 14px; padding: 14px 0 0 20px; margin-left: 14px; width: auto; }
    .doc-section .diagram.decision .dg-answers::before { left: 0; top: 0; bottom: 18px; height: auto; }
    .doc-section .diagram.decision .dg-answer { align-items: flex-start; padding: 0; }
    .doc-section .diagram.decision .dg-answer::before,
    .doc-section .diagram.decision .dg-answer:first-child::before,
    .doc-section .diagram.decision .dg-answer:last-child::before { content: ""; left: -20px; right: auto; width: 14px; top: 11px; }
    .doc-section .diagram.decision .dg-answer::after { content: none; }
    .doc-section .diagram.decision .dg-a { margin-bottom: 6px; }
    .doc-section .diagram.decision .dg-out { max-width: none; text-align: left; }
}

/* ---- B5. Swimlane: .diagram.swimlane ----
   .dg-lanes.n<steps> sets the number of step columns (n3 to n8).
   Lanes: .dg-lane.l1 / .l2 / .l3 (top to bottom). Tasks: .dg-task.l<lane>.s<step>,
   written in step order (the step number is drawn automatically). */
.doc-section .diagram.swimlane .dg-lanes {
    display: grid; grid-template-columns: 96px repeat(var(--dg-n, 5), minmax(0, 1fr));
    grid-auto-rows: minmax(70px, auto); column-gap: 26px; counter-reset: dg-task;
}
.doc-section .diagram.swimlane .dg-lanes.n3 { --dg-n: 3; } .doc-section .diagram.swimlane .dg-lanes.n4 { --dg-n: 4; }
.doc-section .diagram.swimlane .dg-lanes.n5 { --dg-n: 5; } .doc-section .diagram.swimlane .dg-lanes.n6 { --dg-n: 6; }
.doc-section .diagram.swimlane .dg-lanes.n7 { --dg-n: 7; } .doc-section .diagram.swimlane .dg-lanes.n8 { --dg-n: 8; }
.doc-section .diagram.swimlane .dg-lane {
    grid-column: 1 / -1; display: flex; align-items: center; margin: 0 -10px;
    padding: 0 10px; border-radius: 6px; background: var(--vx-lane-a);
    font: 700 11px/1.3 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--vx-muted);
}
.doc-section .diagram.swimlane .dg-lane.l2 { background: var(--vx-lane-b); }
.doc-section .diagram.swimlane .dg-lane.l1 { grid-row: 1; } .doc-section .diagram.swimlane .dg-lane.l2 { grid-row: 2; }
.doc-section .diagram.swimlane .dg-lane.l3 { grid-row: 3; }
.doc-section .diagram.swimlane .dg-lane + .dg-lane { box-shadow: 0 -1px 0 var(--vx-frame); border-radius: 0; }
.doc-section .diagram.swimlane .dg-task {
    position: relative; align-self: center; margin: 10px 0; padding: 9px 10px 10px;
    counter-increment: dg-task; font-size: 12.5px; line-height: 1.4;
}
.doc-section .diagram.swimlane .dg-task::before {
    content: counter(dg-task); display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin: 0 0 5px; border-radius: 50%;
    border: 1px solid var(--vx-accent-line); color: var(--vx-accent); font: 700 10.5px/1 var(--font-body);
}
.doc-section .diagram.swimlane .dg-task:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -23px; width: 18px; height: 12px; margin-top: -6px;
    background: var(--vx-line); -webkit-mask: var(--vx-i-arrow) center / contain no-repeat; mask: var(--vx-i-arrow) center / contain no-repeat;
}
/* Hand-off to a lane below / above: an elbow arrow turning down / up */
.doc-section .diagram.swimlane .dg-task.l1:has(+ .dg-task:is(.l2, .l3))::after,
.doc-section .diagram.swimlane .dg-task.l2:has(+ .dg-task.l3)::after {
    width: 20px; height: 30px; margin-top: -4px;
    -webkit-mask-image: var(--vx-i-down); mask-image: var(--vx-i-down);
}
.doc-section .diagram.swimlane .dg-task.l3:has(+ .dg-task:is(.l1, .l2))::after,
.doc-section .diagram.swimlane .dg-task.l2:has(+ .dg-task.l1)::after {
    width: 20px; height: 30px; margin-top: -26px;
    -webkit-mask-image: var(--vx-i-up); mask-image: var(--vx-i-up);
}
.doc-section .diagram.swimlane .dg-task.l1 { grid-row: 1; } .doc-section .diagram.swimlane .dg-task.l2 { grid-row: 2; }
.doc-section .diagram.swimlane .dg-task.l3 { grid-row: 3; }
.doc-section .diagram.swimlane .s1 { grid-column: 2; } .doc-section .diagram.swimlane .s2 { grid-column: 3; }
.doc-section .diagram.swimlane .s3 { grid-column: 4; } .doc-section .diagram.swimlane .s4 { grid-column: 5; }
.doc-section .diagram.swimlane .s5 { grid-column: 6; } .doc-section .diagram.swimlane .s6 { grid-column: 7; }
.doc-section .diagram.swimlane .s7 { grid-column: 8; } .doc-section .diagram.swimlane .s8 { grid-column: 9; }
/* Narrow: lanes become columns and time runs downwards. */
@container (max-width: 620px) {
    .doc-section .diagram.swimlane .dg-lanes {
        grid-template-columns: repeat(var(--dg-lanes, 3), minmax(0, 1fr));
        grid-template-rows: auto repeat(var(--dg-n, 5), auto); grid-auto-rows: auto;
        column-gap: 8px; row-gap: 0;
    }
    .doc-section .diagram.swimlane .dg-lanes:not(:has(.l3)) { --dg-lanes: 2; }
    .doc-section .diagram.swimlane .dg-lane {
        grid-row: 1 / -1; margin: 0; padding: 10px 6px; align-items: flex-start; justify-content: center;
        text-align: center; font-size: 10.5px; box-shadow: none !important; border-radius: 6px;
    }
    .doc-section .diagram.swimlane .dg-lane.l1 { grid-column: 1; grid-row: 1 / -1; }
    .doc-section .diagram.swimlane .dg-lane.l2 { grid-column: 2; grid-row: 1 / -1; }
    .doc-section .diagram.swimlane .dg-lane.l3 { grid-column: 3; grid-row: 1 / -1; }
    .doc-section .diagram.swimlane .dg-task { margin: 0 6px 22px; font-size: 12px; padding: 8px; }
    .doc-section .diagram.swimlane .dg-task.l1 { grid-column: 1; } .doc-section .diagram.swimlane .dg-task.l2 { grid-column: 2; }
    .doc-section .diagram.swimlane .dg-task.l3 { grid-column: 3; }
    .doc-section .diagram.swimlane .dg-task.s1 { grid-row: 2; }
    .doc-section .diagram.swimlane .dg-task.s2 { grid-row: 3; }
    .doc-section .diagram.swimlane .dg-task.s3 { grid-row: 4; }
    .doc-section .diagram.swimlane .dg-task.s4 { grid-row: 5; }
    .doc-section .diagram.swimlane .dg-task.s5 { grid-row: 6; }
    .doc-section .diagram.swimlane .dg-task.s6 { grid-row: 7; }
    .doc-section .diagram.swimlane .dg-task.s7 { grid-row: 8; }
    .doc-section .diagram.swimlane .dg-task.s8 { grid-row: 9; }
    .doc-section .diagram.swimlane .dg-task.s1 { margin-top: 36px; }
    .doc-section .diagram.swimlane .dg-task:not(:last-child)::after { display: none; }
}

/* ---- B6. Callouts: variants of .note-box ----
   <div class="note-box"> Note (default) | .is-tip | .is-important |
   .is-aml (AML context). The label text is
   written in the HTML (<span class="box-label">Tip</span>). */
.doc-section .note-box {
    margin: 20px 0; padding: 12px 16px 13px; max-width: 780px;
    border: 0; border-left: 3px solid var(--vx-note); border-radius: 0 8px 8px 0;
    background: var(--vx-note-bg); color: var(--vx-body); font-size: 14.5px; line-height: 1.6;
}
.doc-section .note-box p { font-size: 14.5px; margin: 0 0 8px; }
.doc-section .note-box p:last-child, .doc-section .note-box ul:last-child { margin-bottom: 0; }
.doc-section .note-box .box-label {
    display: flex; align-items: center; gap: 7px; margin: 0 0 5px;
    font: 700 11px/1.3 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--vx-note);
}
.doc-section .note-box .box-label::before {
    content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
    -webkit-mask: var(--vx-i-info) center / contain no-repeat; mask: var(--vx-i-info) center / contain no-repeat;
}
.doc-section .note-box.is-tip { border-left-color: var(--vx-tip); background: var(--vx-tip-bg); }
.doc-section .note-box.is-tip .box-label { color: var(--vx-tip); }
.doc-section .note-box.is-tip .box-label::before { -webkit-mask-image: var(--vx-i-tip); mask-image: var(--vx-i-tip); }
.doc-section .note-box.is-important { border-left-color: var(--vx-warn-bar); background: var(--vx-warn-bg); }
.doc-section .note-box.is-important .box-label { color: var(--vx-warn); }
.doc-section .note-box.is-important .box-label::before { -webkit-mask-image: var(--vx-i-warn); mask-image: var(--vx-i-warn); }
.doc-section .note-box.is-aml { border-left-color: var(--vx-aml); background: var(--vx-aml-bg); }
.doc-section .note-box.is-aml .box-label { color: var(--vx-aml); }
.doc-section .note-box.is-aml .box-label::before { -webkit-mask-image: var(--vx-i-aml); mask-image: var(--vx-i-aml); }
.doc-section .note-box.is-tbc {
    border: 1px dashed var(--vx-tbc-line); border-left: 3px dashed var(--vx-tbc-line); border-radius: 0 8px 8px 0;
    background: transparent; color: var(--vx-muted); font-size: 13.5px;
}
.doc-section .note-box.is-tbc p { font-size: 13.5px; color: var(--vx-muted); }
.doc-section .note-box.is-tbc .box-label { color: var(--vx-tbc); }
.doc-section .note-box.is-tbc .box-label::before { -webkit-mask-image: var(--vx-i-tbc); mask-image: var(--vx-i-tbc); }

/* ---- B7. Comparison table: table.compare (inside .table-wrap) ---- */
.doc-section .table-wrap table.compare th:not(:first-child),
.doc-section .table-wrap table.compare td:not(:first-child) { text-align: center; }
.doc-section .table-wrap table.compare td:first-child,
.doc-section .table-wrap table.compare th:first-child { text-align: left; font-weight: 600; color: var(--vx-ink); }
.doc-section .table-wrap table.compare td.yes,
.doc-section .table-wrap table.compare td.no,
.doc-section .table-wrap table.compare td.partial { white-space: nowrap; font-weight: 600; font-size: 13px; }
.doc-section table.compare td.yes { color: var(--vx-yes); }
.doc-section table.compare td.no { color: var(--vx-no); }
.doc-section table.compare td.partial { color: var(--vx-partial); }
.doc-section table.compare td.yes::before, .doc-section table.compare td.no::before, .doc-section table.compare td.partial::before {
    content: ""; display: inline-block; width: 14px; height: 14px; margin: 0 6px -2px 0; background: currentColor;
    -webkit-mask: var(--vx-i-yes) center / contain no-repeat; mask: var(--vx-i-yes) center / contain no-repeat;
}
.doc-section table.compare td.no::before { -webkit-mask-image: var(--vx-i-no); mask-image: var(--vx-i-no); }
.doc-section table.compare td.partial::before { -webkit-mask-image: var(--vx-i-partial); mask-image: var(--vx-i-partial); }
.doc-section table.compare td .cell-note { display: block; font-weight: 400; font-size: 12px; color: var(--vx-muted); white-space: normal; }
/* Keep the row labels in view while a wide comparison scrolls sideways */
@media (max-width: 760px) {
    .doc-section .table-wrap table.compare th:first-child,
    .doc-section .table-wrap table.compare td:first-child {
        position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 var(--doc-line);
        min-width: 120px; max-width: 160px;
    }
    .doc-section .table-wrap table.compare th:first-child { background: #fafafc; }
}

/* ---- B8. Key facts strip: dl.key-facts ---- */
.doc-section dl.key-facts {
    display: flex; flex-wrap: wrap; gap: 1px; margin: 4px 0 26px; padding: 0; max-width: 780px;
    background: var(--doc-line); border: 1px solid var(--doc-line); border-radius: 10px; overflow: hidden;
}
.doc-section dl.key-facts > div { flex: 1 1 140px; min-width: 0; padding: 10px 14px 11px; background: #fbfbfd; }
.doc-section dl.key-facts dt {
    margin: 0 0 3px; font: 700 10.5px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--doc-muted);
}
.doc-section dl.key-facts dd { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--doc-ink); }
.doc-section dl.key-facts dd a { color: var(--primary); }
@media screen { :root[data-theme="dark"] .doc-section dl.key-facts { background: var(--vx-node-line); border-color: var(--vx-node-line); } }
@media screen { :root[data-theme="dark"] .doc-section dl.key-facts > div { background: var(--vx-node); } }
@media screen { :root[data-theme="dark"] .doc-section dl.key-facts dt { color: var(--vx-muted); } }
/* Dark theme hooks for content inside the components (the site itself is
   light; these apply when <html data-theme="dark"> is set). */
@media screen { :root[data-theme="dark"] .doc-section :is(.note-box, figure.diagram, dl.key-facts, table.compare) strong { color: var(--vx-ink); } }
@media screen { :root[data-theme="dark"] .doc-section .table-wrap:has(table.compare) { border-color: var(--vx-node-line); } }
@media screen { :root[data-theme="dark"] .doc-section table.compare th,
:root[data-theme="dark"] .doc-section table.compare td { background: var(--vx-node) !important; color: var(--vx-body); border-color: var(--vx-node-line); } }
@media screen { :root[data-theme="dark"] .doc-section table.compare th,
:root[data-theme="dark"] .doc-section .table-wrap table.compare td:first-child { color: var(--vx-ink); } }
@media screen { :root[data-theme="dark"] .doc-section table.compare td.yes { color: var(--vx-yes); } }
@media screen { :root[data-theme="dark"] .doc-section table.compare td.no { color: var(--vx-no); } }
@media screen { :root[data-theme="dark"] .doc-section table.compare td.partial { color: var(--vx-partial); } }
@media screen { :root[data-theme="dark"] .doc-section dl.key-facts dd { color: var(--vx-ink); } }

/* ---- B9. Print (browser print and the PDF edition): light colours, no
   dot pattern, never split a diagram, callout or key-facts strip. ---- */
@media print {
    .doc-section figure.diagram { background-image: none; }
}
.print-edition .doc-section figure.diagram { background-image: none; }
.doc-section figure.diagram, .doc-section .note-box, .doc-section dl.key-facts { break-inside: avoid; page-break-inside: avoid; }

/* =========================================================================
   DESIGN LAYER v3, follow-ups (10 Oct 2026)
   ========================================================================= */

/* ---- B10. Steps not shown in screenshots, inside diagrams: .is-tbc ----
   Dashed and muted. A diagram that
   contains any .is-tbc item gets a one-line key under its caption. */
.doc-section .diagram.lifecycle .dg-state.is-tbc,
.doc-section .diagram.flow .dg-step.is-tbc,
.doc-section .diagram.swimlane .dg-task.is-tbc,
.doc-section .diagram.decision .dg-out.is-tbc {
    border: 1.5px dashed var(--vx-tbc-line) !important; background: transparent !important;
    box-shadow: none !important; color: var(--vx-muted); font-weight: 500;
}
.doc-section .diagram.lifecycle .dg-state.is-tbc::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vx-tbc-line); }
.doc-section .diagram.lifecycle .dg-state.is-tbc.is-end { border-width: 3px !important; border-style: double !important; }
.doc-section .diagram.lifecycle .dg-edge.is-tbc {
    background: repeating-linear-gradient(90deg, var(--vx-tbc-line) 0 5px, transparent 5px 9px) left center / calc(100% - 6px) 1.5px no-repeat;
    font-style: italic;
}
.doc-section .diagram.lifecycle .dg-edge.is-tbc::after { background: var(--vx-tbc-line); }
.doc-section .diagram.swimlane .dg-task.is-tbc::before,
.doc-section .diagram.flow .dg-step.is-tbc::before { border-style: dashed; border-color: var(--vx-tbc-line); color: var(--vx-muted); }
.doc-section figure.diagram:has(.is-tbc) figcaption::after {
    content: "Dashed items are steps not shown in this guide\2019s screenshots.";
    display: block; margin-top: 3px; font-size: 11.5px; color: var(--vx-muted);
}
@container (max-width: 700px) {
    .doc-section .diagram.lifecycle .dg-edge.is-tbc {
        background: repeating-linear-gradient(180deg, var(--vx-tbc-line) 0 5px, transparent 5px 9px) center top / 1.5px calc(100% - 6px) no-repeat;
    }
}

/* ---- B11. Flow step side note: .dg-aside inside a .dg-step ----
   An optional or parallel activity attached to one step, shown as a small
   dashed box under the step's text. */
.doc-section .diagram.flow .dg-aside {
    display: block; margin-top: 8px; padding: 5px 8px; border: 1px dashed var(--vx-node-line); border-radius: 6px;
    font-size: 11.5px; line-height: 1.4; font-weight: 500; color: var(--vx-muted);
}
@container (max-width: 620px) { .doc-section .diagram.flow .dg-aside { grid-column: 2; } }

/* ---- B12. Timeline: .diagram.timeline ----
   Spans on a shared axis. Positions are percentages of the axis, set per
   item: --from / --to on .dg-span, --at on each .dg-scale tick. */
.doc-section .diagram.timeline .dg-timeline { position: relative; padding: 0 0 40px; }
.doc-section .diagram.timeline .dg-spans { position: relative; z-index: 1; display: grid; row-gap: 14px; }
.doc-section .diagram.timeline .dg-span { margin: 0; }
.doc-section .diagram.timeline .dg-span-label {
    display: inline-block; max-width: 100%; margin: 0 0 6px; padding-right: 8px;
    background: var(--vx-panel); font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--vx-ink);
}
.doc-section .diagram.timeline .dg-span-label .dg-sub { margin-top: 1px; }
.doc-section .diagram.timeline .dg-bar { position: relative; display: block; height: 14px; }
.doc-section .diagram.timeline .dg-bar::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: var(--from, 0%); right: calc(100% - var(--to, 100%));
    background: var(--vx-accent-soft); border: 1.5px solid var(--vx-accent-line); border-radius: 4px;
}
.doc-section .diagram.timeline .dg-span.is-tbc .dg-bar::before { border-style: dashed; border-color: var(--vx-tbc-line); background: transparent; }
.doc-section .diagram.timeline .dg-scale { position: absolute; inset: 0; z-index: 0; }
.doc-section .diagram.timeline .dg-scale::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 28px; border-top: 1.5px solid var(--vx-line);
}
.doc-section .diagram.timeline .dg-tick {
    position: absolute; top: 0; bottom: 22px; left: var(--at); width: 0;
    border-left: 1px dashed var(--vx-frame);
}
.doc-section .diagram.timeline .dg-tick::before {
    content: ""; position: absolute; left: -1px; bottom: 0; height: 12px; border-left: 1.5px solid var(--vx-line);
}
.doc-section .diagram.timeline .dg-tick > span {
    position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 4px;
    width: max-content; max-width: 90px; text-align: center;
    font-size: 12px; line-height: 1.25; color: var(--vx-muted); font-weight: 500;
}
.doc-section .diagram.timeline .dg-tick.is-first > span { transform: none; text-align: left; }
.doc-section .diagram.timeline .dg-tick.is-last > span { transform: translateX(-100%); text-align: right; }
@container (max-width: 520px) {
    .doc-section .diagram.timeline .dg-timeline { padding-bottom: 48px; }
    .doc-section .diagram.timeline .dg-tick > span { max-width: 56px; font-size: 11px; }
    .doc-section .diagram.timeline .dg-span-label { font-size: 12.5px; }
}

/* ---- B12b. Timeline, clearer variant (user feedback 11 Oct): plain panel,
   label column + track column, solid filled bars, solid guides, emphasised T. */
.doc-section .diagram.timeline { background-image: none; }
.doc-section .diagram.timeline .dg-timeline { --lab: 230px; padding: 4px 0 44px; }
.doc-section .diagram.timeline .dg-spans { row-gap: 18px; }
.doc-section .diagram.timeline .dg-span {
    display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; column-gap: 0;
}
.doc-section .diagram.timeline .dg-span-label {
    margin: 0; padding: 0 16px 0 0; background: none; font-size: 14px; line-height: 1.35;
}
.doc-section .diagram.timeline .dg-span-label .dg-sub { display: block; font-size: 12.5px; font-weight: 500; color: var(--vx-muted); }
.doc-section .diagram.timeline .dg-bar { height: 26px; }
.doc-section .diagram.timeline .dg-bar::before {
    border: 0; border-radius: 6px;
    background: linear-gradient(90deg, #7c9dff 0%, var(--vx-accent) 100%);
    box-shadow: 0 1px 2px rgba(53, 46, 255, .25);
}
.doc-section .diagram.timeline .dg-span.is-tbc .dg-bar::before { background: transparent; box-shadow: none; border: 1.5px dashed var(--vx-tbc-line); }
.doc-section .diagram.timeline .dg-scale { left: var(--lab); }
.doc-section .diagram.timeline .dg-scale::before { bottom: 30px; border-top: 2px solid var(--vx-ink); opacity: .55; }
.doc-section .diagram.timeline .dg-tick { bottom: 24px; border-left: 1px solid rgba(53, 46, 255, .14); }
.doc-section .diagram.timeline .dg-tick::before { height: 12px; border-left: 2px solid var(--vx-ink); opacity: .55; }
.doc-section .diagram.timeline .dg-tick > span { font-size: 12.5px; color: var(--vx-ink); font-weight: 600; }
.doc-section .diagram.timeline .dg-tick.is-last { border-left: 2px solid var(--vx-accent); }
.doc-section .diagram.timeline .dg-tick.is-last > span { color: var(--vx-accent); font-weight: 700; }
@container (max-width: 620px) {
    .doc-section .diagram.timeline .dg-timeline { --lab: 0px; }
    .doc-section .diagram.timeline .dg-span { grid-template-columns: 1fr; row-gap: 6px; }
    .doc-section .diagram.timeline .dg-timeline { padding-top: 26px; }
    .doc-section .diagram.timeline .dg-tick > span { max-width: 60px; font-size: 11.5px; }
    .doc-section .diagram.timeline .dg-tick:not(.is-last) { border-left-color: transparent; }
    .doc-section .diagram.timeline .dg-tick.is-last > span { top: -24px; margin-top: 0; max-width: none; }
}
@media print {
    .doc-section .diagram.timeline .dg-bar::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- B13. Colour chip: <span class="swatch" style="--swatch:#3CAF49"></span> ----
   For colours the product shows (risk bands, tags). Prints in colour. */
.doc-section .swatch {
    display: inline-block; width: 11px; height: 11px; margin: 0 6px 0 0; vertical-align: -1px;
    border-radius: 3px; background: var(--swatch, #c4c5c4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ---- A5. In-content links: clearly blue with a subtle underline.
   Nav, "On this page", chapter map, cards and buttons are unchanged. ---- */
.doc-section :is(p, li, td, dd, figcaption, .note-box, .sec-intro) a:not([class]) {
    color: #352eff; font-weight: inherit;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: rgba(53, 46, 255, .35);
    transition: text-decoration-color .15s ease, color .15s ease;
}
.doc-section :is(p, li, td, dd, figcaption, .note-box, .sec-intro) a:not([class]):hover { color: #030192; text-decoration-color: currentColor; }
.doc-section ul.chapter-map a:not([class]), .doc-section .role-path li a:not([class]) { text-decoration: none; }
.doc-section ul.chapter-map a:not([class]):hover, .doc-section .role-path li a:not([class]):hover { text-decoration: underline; }
@media screen { :root[data-theme="dark"] .doc-section :is(p, li, td, dd, figcaption, .note-box) a:not([class]) { color: #9db4ff; text-decoration-color: rgba(157, 180, 255, .4); } }
.print-edition .doc-section a:not([class]) { color: inherit; text-decoration: none; }

/* ---- B14. Wide tables: opt-in sticky first column ----
   <table class="compact sticky-first">: the first column stays in view
   while the table scrolls sideways. */
.doc-section .table-wrap table.sticky-first th:first-child,
.doc-section .table-wrap table.sticky-first td:first-child {
    position: sticky; left: 0; z-index: 2; background: #fff;
    box-shadow: inset -1px 0 0 var(--doc-line); min-width: 140px;
}
.doc-section .table-wrap table.sticky-first thead th:first-child { background: #fafafc; z-index: 3; }
.doc-section .table-wrap table.sticky-first tbody tr:nth-child(even) td:first-child { background: var(--bg-card); }
@media (max-width: 600px) {
    .doc-section .table-wrap table.sticky-first th:first-child,
    .doc-section .table-wrap table.sticky-first td:first-child { min-width: 112px; max-width: 136px; }
}
.print-edition .doc-section table.sticky-first :is(th, td):first-child { position: static; box-shadow: none; }

/* ---- B6b. Lists inside callouts keep their bullets / numbers (the base
   stylesheet sets li { list-style: none }). ---- */
.doc-section .note-box ul:not([class]), .doc-section .note-box ol:not([class]) { margin: 6px 0 8px; padding-left: 20px; }
.doc-section .note-box ul:not([class]) > li { list-style: disc; margin: 0 0 4px; padding: 0; font-size: inherit; color: inherit; line-height: 1.55; }
.doc-section .note-box ol:not([class]) > li { list-style: decimal; margin: 0 0 4px; padding: 0; font-size: inherit; color: inherit; line-height: 1.55; }
.doc-section .note-box :is(ul, ol):not([class]) > li::before { content: none; }
.doc-section .note-box :is(ul, ol):last-child { margin-bottom: 0; }

/* Long flows (6+ steps, below 760px) and swimlanes with 6+ steps (below
   820px, so at every site width) use the vertical layout, so boxes never
   get narrower than about 100px. */
@container (max-width: 760px) {
    .doc-section .diagram.flow .dg-steps:has(> .dg-step:nth-child(6)) { grid-auto-flow: row; row-gap: 26px; }
    .doc-section .diagram.flow .dg-steps:has(> .dg-step:nth-child(6)) .dg-step { display: grid; grid-template-columns: 28px 1fr; align-items: start; padding: 10px 12px; }
    .doc-section .diagram.flow .dg-steps:has(> .dg-step:nth-child(6)) .dg-step::before { margin: 0; grid-row: 1 / span 2; }
    .doc-section .diagram.flow .dg-steps:has(> .dg-step:nth-child(6)) .dg-step:not(:last-child)::after { top: auto; bottom: -22px; right: auto; left: 21px; margin: 0; transform: rotate(90deg); width: 18px; }
}
@container (max-width: 820px) {
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) {
        grid-template-columns: repeat(var(--dg-lanes, 3), minmax(0, 1fr));
        grid-template-rows: auto repeat(var(--dg-n, 5), auto); grid-auto-rows: auto;
        column-gap: 8px; row-gap: 0;
    }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8):not(:has(.l3)) { --dg-lanes: 2; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-lane {
        grid-row: 1 / -1; margin: 0; padding: 10px 6px; align-items: flex-start; justify-content: center;
        text-align: center; font-size: 10.5px; box-shadow: none !important; border-radius: 6px;
    }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-lane.l1 { grid-column: 1; grid-row: 1 / -1; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-lane.l2 { grid-column: 2; grid-row: 1 / -1; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-lane.l3 { grid-column: 3; grid-row: 1 / -1; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task { margin: 0 6px 22px; font-size: 12px; padding: 8px; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.l1 { grid-column: 1; } .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.l2 { grid-column: 2; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.l3 { grid-column: 3; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s1 { grid-row: 2; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s2 { grid-row: 3; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s3 { grid-row: 4; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s4 { grid-row: 5; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s5 { grid-row: 6; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s6 { grid-row: 7; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s7 { grid-row: 8; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s8 { grid-row: 9; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task.s1 { margin-top: 36px; }
    .doc-section .diagram.swimlane .dg-lanes:is(.n6, .n7, .n8) .dg-task:not(:last-child)::after { display: none; }
}

/* =========================================================================
   DESIGN LAYER v4 (11 Oct 2026): chapter banner, task cards, rule cards,
   copy-link buttons, page feedback, screenshot badge linking, walkthrough
   tracker, theme toggle. Dark theme follows in its own block below.
   ========================================================================= */

/* ---- Theme toggle (header, between search and Ask AI) ---- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid #e3e3ea; border-radius: 0; color: #4a4c58;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--primary); border-color: #cfcdfc; }
.theme-toggle:focus-visible { outline: 3px solid #b9b6ff; outline-offset: 2px; }
.theme-toggle .theme-icon-sun { display: none; }
@media screen { :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; } }
@media screen { :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } }
@media (max-width: 600px) {
    .theme-toggle { width: 38px; height: 38px; }
    .nav-actions { gap: 6px; }
    .nav-ai-pill { padding: 10px 12px; }
}
@media (max-width: 360px) { .nav-ai-pill .ai-spark { display: none; } }
/* The toggle took room from the header links: between tablet and desktop
   the search pill shows only its icon, and links never wrap. */
@media (min-width: 861px) and (max-width: 1240px) {
    .nav-links a { white-space: nowrap; }
    .nav-search-pill { min-width: 0; padding: 10px 12px; }
    .nav-search-pill span, .nav-search-pill .nav-search-kbd { display: none; }
}

/* ---- A. Chapter banner ---- */
.doc-section .chapter-banner {
    position: relative; margin: 0 0 22px; padding: 26px 28px 20px;
    border: 1px solid #e6e5fb; border-radius: 14px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(124, 157, 255, .16) 0%, rgba(124, 157, 255, 0) 55%),
        linear-gradient(135deg, #f6f6ff 0%, #fbfbff 55%, #ffffff 100%);
}
.doc-section .chapter-banner .sec-tag { margin-bottom: 10px; }
.doc-section .chapter-banner h2 { margin-bottom: 10px; }
.doc-section .chapter-banner .sec-intro { margin: 0 0 16px; max-width: 760px; }
.doc-section .chapter-facts {
    display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 14px 0 0;
    border-top: 1px solid rgba(53, 46, 255, .1);
}
.doc-section .chapter-facts > div { min-width: 0; }
.doc-section .chapter-facts dt {
    margin: 0 0 2px; font: 700 10.5px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--doc-muted);
}
.doc-section .chapter-facts dd { margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--doc-ink); }
@media (max-width: 600px) {
    .doc-section .chapter-banner { padding: 18px 16px 16px; margin-left: -4px; margin-right: -4px; border-radius: 12px; }
    .doc-section .chapter-facts { gap: 8px 18px; }
}

/* ---- B. "I want to…" task cards ---- */
.doc-section .task-cards { margin: 0 0 28px; }
.doc-section .task-cards-title {
    margin: 0 0 8px; font: 700 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--doc-muted);
}
.doc-section .task-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.doc-section a.task-card {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px;
    padding: 11px 14px; border: 1px solid #e6e7f0; border-radius: 10px; background: #fff;
    color: var(--doc-ink); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.doc-section a.task-card:hover { border-color: #b9b6ff; background: #fafaff; }
.doc-section a.task-card:focus-visible { outline: 3px solid #b9b6ff; outline-offset: 2px; }
.doc-section .task-card-arrow { color: var(--primary); flex: none; transition: transform .15s ease; }
.doc-section a.task-card:hover .task-card-arrow { transform: translateX(2px); }
.doc-section .task-cards-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1300px) { .doc-section .task-cards-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .doc-section .task-cards-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .doc-section a.task-card { font-size: 13px; padding: 10px 12px; } }

/* ---- E. Rule cards (Typology Library) ---- */
.doc-section .rule-card {
    margin: 4px 0 22px; padding: 14px 18px 14px; max-width: 780px;
    border: 1px solid #e6e5fb; border-left: 3px solid var(--primary); border-radius: 0 10px 10px 0; background: #fafaff;
}
.doc-section .rule-card-flag { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--doc-ink); max-width: none; }
.doc-section .rule-card-k {
    display: inline-block; margin-right: 8px; font: 700 10.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}
.doc-section .rule-card-facts { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 24px; margin: 0 0 10px; }
.doc-section .rule-card-facts dt { margin: 0 0 2px; font: 700 10.5px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--doc-muted); }
.doc-section .rule-card-facts dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--doc-body); }
.doc-section .rule-card-facts dd code { font-size: 12px; }
.doc-section .rule-card-result { margin: 0; max-width: none; }
.doc-section .rule-card-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef8f2; border: 1px solid #cbe9d7;
    font: 600 12px/1.4 var(--font-body); color: #1e6b47;
}
@media (max-width: 760px) { .doc-section .rule-card-facts { grid-template-columns: 1fr 1fr; } .doc-section .rule-card-logic { grid-column: 1 / -1; } }

/* ---- G. Copy-link buttons and toast ---- */
.doc-section h2::after, .doc-section h3::after, .doc-section .h4-plain::after { content: none !important; }
.doc-section .copy-link {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 26px; height: 26px; margin-left: 6px; padding: 0; border: 0; border-radius: 6px; background: transparent;
    color: #9a9cf0; cursor: pointer; opacity: .55; transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.doc-section h2 .copy-link { width: 28px; height: 28px; }
.doc-section :is(h2, h3):hover .copy-link, .doc-section .copy-link:focus-visible { opacity: 1; color: var(--primary); }
.doc-section .copy-link:hover { background: #eeedff; }
.doc-section .copy-link:focus-visible { outline: 2px solid #7c9dff; outline-offset: 1px; }
@media (hover: none) { .doc-section .copy-link { opacity: .7; } }
.guide-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 3000; transform: translate(-50%, 12px);
    padding: 9px 16px; border-radius: 999px; background: #1b1c24; color: #fff;
    font: 600 13px/1.2 var(--font-body); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4);
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.guide-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- G. Was this page helpful? ---- */
.doc-section .page-helpful {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 36px 0 8px; padding: 12px 16px;
    border: 1px solid #ebebf2; border-radius: 10px; background: #fbfbfd; font-size: 14px; color: var(--doc-body);
}
.doc-section .page-helpful-q { font-weight: 600; color: var(--doc-ink); margin-right: 4px; }
.doc-section .page-helpful button {
    width: 38px; height: 32px; border: 1px solid #e3e3ea; border-radius: 8px; background: #fff; cursor: pointer;
    font-size: 15px; line-height: 1; transition: border-color .15s ease, background .15s ease;
}
.doc-section .page-helpful button:hover { border-color: #b9b6ff; }
.doc-section .page-helpful button:focus-visible { outline: 3px solid #b9b6ff; outline-offset: 1px; }
.doc-section .page-helpful.is-done button { cursor: default; opacity: .45; }
.doc-section .page-helpful.is-done button.is-picked { opacity: 1; border-color: var(--primary); }
.doc-section .page-helpful-thanks { font-size: 13px; color: var(--doc-muted); }

/* ---- D. Screenshot badges linked to the numbered list ---- */
.doc-section .shot-badge-wrap { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.doc-section .badge-ring {
    position: absolute; width: calc(var(--d, 2.4%) * 1.25); aspect-ratio: 1; min-width: 20px; transform: translate(-50%, -50%);
    border-radius: 50%; cursor: zoom-in; pointer-events: auto;
}
.doc-section .badge-ring.is-on {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 6px rgba(53, 46, 255, .55);
    animation: badge-pulse 1.3s ease-out infinite;
}
@keyframes badge-pulse {
    0% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 5px rgba(53, 46, 255, .6); }
    70% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 0 0 16px rgba(53, 46, 255, 0); }
    100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0), 0 0 0 16px rgba(53, 46, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .doc-section .badge-ring.is-on { animation: none; } }
.doc-section ol.step-list.is-linked li { cursor: default; border-radius: 6px; transition: background .15s ease; }
.doc-section ol.step-list.is-linked li.is-on { background: #f3f2ff; }
.doc-section ol.step-list.is-linked li.is-on::before { background: #352eff; border-color: #352eff; color: #fff; }
.doc-section ol.step-list.is-linked li:focus-visible { outline: 2px solid #b9b6ff; outline-offset: 2px; }

/* ---- C. Walkthrough tracker (fixed under the header; no layout shift) ---- */
.walk-tracker {
    position: fixed; left: 0; width: 100%; top: 0; z-index: 150;
    display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 12px;
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
    border: 1px solid #ebebf2; border-top: 0; border-radius: 0 0 10px 10px;
    font: 600 12.5px/1 var(--font-body); color: #3a3c48;
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.walk-tracker.show { opacity: 1; transform: none; }
.walk-tracker-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.walk-tracker-bar { flex: 1 1 120px; max-width: 320px; height: 4px; border-radius: 2px; background: #ecebfb; overflow: hidden; margin-left: auto; }
.walk-tracker-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #352eff, #7c9dff); transition: width .25s ease; }
@media (max-width: 600px) { .walk-tracker { padding: 0 16px; font-size: 12px; border-radius: 0; border-left: 0; border-right: 0; } .walk-tracker-bar { flex-basis: 60px; } }

/* ---- Print: none of the interactive pieces ---- */
@media print {
    .theme-toggle, .walk-tracker, .guide-toast, .doc-section .copy-link, .doc-section .page-helpful,
    .doc-section .task-cards, .doc-section .badge-ring { display: none !important; }
    .doc-section .chapter-banner { background: none; border: 0; padding: 0; }
    .doc-section .chapter-facts { display: none; }
}
.doc-section .rule-card { break-inside: avoid; page-break-inside: avoid; }

/* =========================================================================
   DARK THEME (11 Oct 2026). Matches fyscaltech.com's [data-theme="dark"]
   tokens: background #171717, surfaces #1f1f1f / #242424, borders #484848
   (#2e2e2e for quiet dividers), white text, magenta (#ff00ff) accents.
   Headings are pink; links and controls use a lightened electric blue so
   they pass WCAG AA on the dark background. Screen only: print stays light.
   Set by <html data-theme="dark"> (toggle in the header; default follows the
   system setting).
   ========================================================================= */
@media screen {
:root[data-theme="dark"] {
    color-scheme: dark;
    --dk-bg: #171717; --dk-surface: #1f1f1f; --dk-surface-2: #242424; --dk-raised: #2a2a2a;
    --dk-line: #2e2e2e; --dk-line-strong: #484848;
    --dk-text: #f2f2f2; --dk-body: #cdcdd3; --dk-muted: #a3a3ad;
    --dk-pink: #ff5cff; --dk-pink-2: #ff9cff; --dk-pink-soft: rgba(255, 0, 255, .14);
    --dk-blue: #9aa6ff; --dk-blue-soft: rgba(124, 157, 255, .14); --dk-blue-line: rgba(124, 157, 255, .4);
    /* remap the guide's own tokens */
    --bg: var(--dk-bg); --fg: var(--dk-text); --fg-muted: var(--dk-muted); --border: var(--dk-line);
    --bg-card: var(--dk-surface); --bg-secondary: var(--dk-surface-2); --bg-tertiary: var(--dk-surface-2);
    --accent: var(--dk-blue); --primary: var(--dk-blue); --accent-soft: var(--dk-blue-soft); --primary-soft: var(--dk-blue-soft);
    --grey: var(--dk-body); --grey-light: var(--dk-muted); --dark: var(--dk-text);
    --doc-ink: var(--dk-text); --doc-body: var(--dk-body); --doc-muted: var(--dk-muted);
    --doc-line: var(--dk-line); --doc-tint: var(--dk-surface); --doc-accent-soft: var(--dk-blue-soft);
    --white: var(--dk-surface);
    --shadow-sm: none; --shadow-md: 0 20px 40px -20px rgba(0, 0, 0, .6); --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); }

/* Header */
:root[data-theme="dark"] .nav { background: rgba(23, 23, 23, .86); border-bottom-color: var(--dk-line); }
:root[data-theme="dark"] .nav-brand img, :root[data-theme="dark"] .foot-brand img { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .nav-links a { color: var(--dk-body); }
:root[data-theme="dark"] .nav-links a:hover { color: var(--dk-text); }
:root[data-theme="dark"] .nav-search-pill { background: var(--dk-surface); border-color: var(--dk-line-strong); color: var(--dk-muted); }
:root[data-theme="dark"] .nav-search-kbd { background: var(--dk-raised); color: var(--dk-body); border-color: var(--dk-line-strong); }
:root[data-theme="dark"] .nav-ai-pill { background: transparent; border-color: var(--dk-pink); color: var(--dk-pink); }
:root[data-theme="dark"] .nav-ai-pill:hover { background: var(--dk-pink-soft); color: var(--dk-pink); }
:root[data-theme="dark"] .theme-toggle { border-color: var(--dk-line-strong); color: var(--dk-body); }
:root[data-theme="dark"] .theme-toggle:hover { color: var(--dk-pink); border-color: var(--dk-pink); }
:root[data-theme="dark"] .menu-toggle { color: var(--dk-text); }
:root[data-theme="dark"] .scroll-progress { background: linear-gradient(90deg, #ff00ff, #9aa6ff); }

/* Headings: white, as on fyscaltech.com dark; pink stays for labels, tags and numbers */
:root[data-theme="dark"] .doc-section h2 { color: #fff !important; }
:root[data-theme="dark"] .doc-section h3 { color: #fff !important; }
:root[data-theme="dark"] .doc-section h4, :root[data-theme="dark"] .doc-section .flow-step-title { color: var(--dk-text) !important; }
:root[data-theme="dark"] .doc-section h2::before { background: linear-gradient(90deg, #ff00ff, #9aa6ff); }
:root[data-theme="dark"] .sec-tag { color: var(--dk-pink); background: var(--dk-pink-soft); }
:root[data-theme="dark"] .doc-section hr.section-end { background: linear-gradient(90deg, #ff00ff 0%, #9aa6ff 40%, rgba(154, 166, 255, 0) 100%); }

/* Layout chrome: sidebar, breadcrumb bar, "On this page" */
:root[data-theme="dark"] .sidebar { background: var(--dk-bg); }
:root[data-theme="dark"] .page-toc { background: transparent; }
:root[data-theme="dark"] mark { background: rgba(255, 92, 255, .22); color: var(--dk-text); }
:root[data-theme="dark"] .sidebar .side-category-title { color: var(--dk-pink); border-color: var(--dk-line); }
:root[data-theme="dark"] .sidebar .side-link { color: var(--dk-body) !important; }
:root[data-theme="dark"] .sidebar .side-link:hover { color: var(--dk-text) !important; background: var(--dk-surface); }
:root[data-theme="dark"] .sidebar .side-link.active { color: var(--dk-blue) !important; background: var(--dk-blue-soft); border-color: var(--dk-blue); }
:root[data-theme="dark"] .page-toc .toc-link, :root[data-theme="dark"] .page-toc a { color: var(--dk-muted); }
:root[data-theme="dark"] .page-toc .toc-link.active, :root[data-theme="dark"] .page-toc a:hover { color: var(--dk-blue); }
:root[data-theme="dark"] .page-toc, :root[data-theme="dark"] .toc-list { border-color: var(--dk-line); }
:root[data-theme="dark"] .page-toc, :root[data-theme="dark"] .sidebar-nav { scrollbar-color: #444 transparent; }
:root[data-theme="dark"] .content-topbar { background: var(--dk-bg); border-color: var(--dk-line); }
:root[data-theme="dark"] .btn-back-modules { background: var(--dk-blue-soft); border-color: var(--dk-blue-line); color: var(--dk-blue); }
:root[data-theme="dark"] .btn-copy-page { background: var(--dk-surface); border-color: var(--dk-line-strong); color: var(--dk-body); }
:root[data-theme="dark"] .sidebar-overlay { background: rgba(0, 0, 0, .6); }

/* Body copy, links, code chips */
:root[data-theme="dark"] .doc-section p, :root[data-theme="dark"] .doc-section li, :root[data-theme="dark"] .doc-section td { color: var(--dk-body); }
:root[data-theme="dark"] .doc-section strong { color: var(--dk-text); }
:root[data-theme="dark"] .doc-section .sec-intro { color: var(--dk-muted); }
:root[data-theme="dark"] .doc-section .nav-crumb { color: var(--dk-muted); }
:root[data-theme="dark"] .doc-section :is(p, li, td, dd, figcaption, .note-box, .sec-intro) a:not([class]) { color: var(--dk-blue); text-decoration-color: rgba(154, 166, 255, .45); }
:root[data-theme="dark"] .doc-section :is(p, li, td, dd, figcaption, .note-box, .sec-intro) a:not([class]):hover { color: #c3c9ff; }
:root[data-theme="dark"] code, :root[data-theme="dark"] .doc-section code { background: #26263a; color: #c7ccff; border-color: #34345a; }
:root[data-theme="dark"] kbd { background: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-line-strong); }

/* Tables */
:root[data-theme="dark"] .doc-section .table-wrap { border-color: var(--dk-line); background: var(--dk-bg); }
:root[data-theme="dark"] .doc-section .table-wrap th, :root[data-theme="dark"] thead th { background: var(--dk-surface-2) !important; color: var(--dk-text); border-color: var(--dk-line); }
:root[data-theme="dark"] .doc-section .table-wrap td { border-color: var(--dk-line); }
:root[data-theme="dark"] .table-wrap table tbody tr:nth-child(even), :root[data-theme="dark"] tbody tr:nth-child(even) { background: #1c1c1c; }
:root[data-theme="dark"] .doc-section .table-wrap td:first-child { color: var(--dk-text); }
:root[data-theme="dark"] .table-wrap.scrollable::after { box-shadow: inset -14px 0 10px -10px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .doc-section .table-wrap table.sticky-first td:first-child,
:root[data-theme="dark"] .doc-section .table-wrap table.compare td:first-child { background: var(--dk-bg); }
:root[data-theme="dark"] .doc-section .table-wrap table.sticky-first tbody tr:nth-child(even) td:first-child { background: #1c1c1c; }
:root[data-theme="dark"] .doc-section .table-wrap table:is(.sticky-first, .compare) th:first-child { background: var(--dk-surface-2); }

/* Steps, numbered keys, chapter map, role paths */
:root[data-theme="dark"] .doc-section .flow-step-num { background: var(--dk-blue-soft); border-color: var(--dk-blue-line); color: var(--dk-blue); }
:root[data-theme="dark"] .doc-section ol.step-list li::before { background: var(--dk-blue-soft); border-color: var(--dk-blue-line); color: var(--dk-blue); }
:root[data-theme="dark"] .doc-section ol.step-list li::after { background: var(--dk-line); }
:root[data-theme="dark"] .doc-section ul.check-list li::before { filter: none; }
:root[data-theme="dark"] .doc-section ul.chapter-map { background: var(--dk-surface); border-color: var(--dk-line); }
:root[data-theme="dark"] .doc-section ul.chapter-map li { color: var(--dk-muted); }
:root[data-theme="dark"] .doc-section ul.chapter-map a, :root[data-theme="dark"] .doc-section .role-path li a { color: var(--dk-blue); }
:root[data-theme="dark"] .doc-section .role-path { background: var(--dk-surface); border-color: var(--dk-line); }

/* Screenshots: never inverted; a quiet dark frame so a light capture sits
   calmly on the dark page. */
:root[data-theme="dark"] .doc-section figure.shot-wide {
    background: var(--dk-surface); border: 1px solid var(--dk-line-strong); padding: 6px 6px 0; border-radius: 12px;
}
:root[data-theme="dark"] .doc-section figure.shot-wide img { border-radius: 7px; filter: brightness(.93); }
:root[data-theme="dark"] .doc-section figure.shot-wide:hover { border-color: #5a5a6a; }
:root[data-theme="dark"] .doc-section figure.shot-wide figcaption { background: transparent; border-top-color: transparent; color: var(--dk-muted); padding: 8px 10px 9px; }
:root[data-theme="dark"] .doc-section figcaption .cap-num { color: var(--dk-text); }

/* Callouts (v3 tokens already switch; label and base box) */
:root[data-theme="dark"] .doc-section .note-box p, :root[data-theme="dark"] .doc-section .note-box li { color: var(--vx-body); }

/* Chapter banner, task cards, rule cards, feedback, badges, tracker */
:root[data-theme="dark"] .doc-section .chapter-banner {
    border-color: #3a2340;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 0, 255, .13) 0%, rgba(255, 0, 255, 0) 55%),
        linear-gradient(135deg, #22192a 0%, #1d1a24 50%, #1b1b1f 100%);
}
:root[data-theme="dark"] .doc-section .chapter-facts { border-top-color: rgba(255, 92, 255, .18); }
:root[data-theme="dark"] .doc-section .rule-card-badge { background: rgba(111, 211, 161, .1); border-color: rgba(111, 211, 161, .3); color: #8fe0b6; }
:root[data-theme="dark"] .doc-section a.task-card { background: var(--dk-surface); border-color: var(--dk-line-strong); color: var(--dk-text); }
:root[data-theme="dark"] .doc-section a.task-card:hover { background: var(--dk-surface-2); border-color: var(--dk-pink); }
:root[data-theme="dark"] .doc-section .task-card-arrow { color: var(--dk-pink); }
:root[data-theme="dark"] .doc-section .rule-card { background: var(--dk-surface); border-color: var(--dk-line); border-left-color: var(--dk-pink); }
:root[data-theme="dark"] .doc-section .rule-card-k { color: var(--dk-pink); }
:root[data-theme="dark"] .doc-section .copy-link { color: #8a8aa8; }
:root[data-theme="dark"] .doc-section :is(h2, h3):hover .copy-link { color: var(--dk-pink); }
:root[data-theme="dark"] .doc-section .copy-link:hover { background: var(--dk-pink-soft); }
:root[data-theme="dark"] .guide-toast { background: #f2f2f2; color: #171717; }
:root[data-theme="dark"] .doc-section .page-helpful { background: var(--dk-surface); border-color: var(--dk-line); }
:root[data-theme="dark"] .doc-section .page-helpful button { background: var(--dk-surface-2); border-color: var(--dk-line-strong); }
:root[data-theme="dark"] .doc-section ol.step-list.is-linked li.is-on { background: var(--dk-blue-soft); }
:root[data-theme="dark"] .doc-section ol.step-list.is-linked li.is-on::before { background: #352eff; border-color: #352eff; color: #fff; }
:root[data-theme="dark"] .walk-tracker { background: rgba(31, 31, 31, .95); border-color: var(--dk-line-strong); color: var(--dk-body); }
:root[data-theme="dark"] .walk-tracker-bar { background: #2a2a35; }
:root[data-theme="dark"] .walk-tracker-fill { background: linear-gradient(90deg, #ff00ff, #9aa6ff); }

/* Related modules, release list, FAQ */
:root[data-theme="dark"] .related-modules-title { color: var(--dk-muted); }
:root[data-theme="dark"] .related-module-card { background: var(--dk-surface); border-color: var(--dk-line); color: var(--dk-text); }
:root[data-theme="dark"] .related-module-card:hover { border-color: var(--dk-pink); }
:root[data-theme="dark"] .related-module-icon { color: var(--dk-pink); background: var(--dk-pink-soft); }

/* Overlays: search palette, Ask AI, lightbox */
:root[data-theme="dark"] .cmdk-overlay, :root[data-theme="dark"] .ai-overlay { background: rgba(0, 0, 0, .65); }
:root[data-theme="dark"] .cmdk-box, :root[data-theme="dark"] .ai-box { background: var(--dk-surface); border: 1px solid var(--dk-line-strong); color: var(--dk-text); }
:root[data-theme="dark"] .cmdk-input, :root[data-theme="dark"] .ai-input { background: var(--dk-surface-2); color: var(--dk-text); border-color: var(--dk-line-strong); }
:root[data-theme="dark"] .cmdk-input::placeholder, :root[data-theme="dark"] .ai-input::placeholder { color: #8a8a94; }
:root[data-theme="dark"] .cmdk-item { color: var(--dk-body); border-color: var(--dk-line); }
:root[data-theme="dark"] .cmdk-item:hover, :root[data-theme="dark"] .cmdk-item.active, :root[data-theme="dark"] .cmdk-item.is-active { background: var(--dk-surface-2); }
:root[data-theme="dark"] .ai-header { background: var(--dk-surface-2); color: var(--dk-text); border-color: var(--dk-line); }
:root[data-theme="dark"] .ai-close { color: var(--dk-body); }
:root[data-theme="dark"] .ai-msg.bot { background: var(--dk-surface-2); color: var(--dk-body); border-color: var(--dk-line); }
:root[data-theme="dark"] .ai-msg.user { background: #352eff; color: #fff; }
:root[data-theme="dark"] .ai-suggested button { background: var(--dk-surface-2); color: var(--dk-body); border-color: var(--dk-line-strong); }
:root[data-theme="dark"] .ai-input-row { background: var(--dk-surface); border-color: var(--dk-line); }
:root[data-theme="dark"] .ai-send { background: #352eff; color: #fff; }
:root[data-theme="dark"] .ai-msg.bot .ai-feedback button { background: var(--dk-surface); border-color: var(--dk-line-strong); }
:root[data-theme="dark"] .lightbox { background: rgba(0, 0, 0, .9); }

/* Footer */
:root[data-theme="dark"] footer { background: #0f0f0f; border-top: 1px solid var(--dk-line); }

/* Landing page */
:root[data-theme="dark"] .hero { background: var(--dk-bg); }
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .hero-title { color: var(--dk-text); }
:root[data-theme="dark"] .hero-lead { color: var(--dk-body); }
:root[data-theme="dark"] .hero-eyebrow { color: var(--dk-pink); background: var(--dk-pink-soft); }
:root[data-theme="dark"] .hero-stats, :root[data-theme="dark"] .hero-stat { background: var(--dk-surface); border-color: var(--dk-line); }
:root[data-theme="dark"] .hero-stat .num { color: var(--dk-text); }
:root[data-theme="dark"] .hero-stat .label { color: var(--dk-muted); }
:root[data-theme="dark"] .hero-tour-tab { background: var(--dk-surface); border-color: var(--dk-line-strong); color: var(--dk-body); }
:root[data-theme="dark"] .hero-tour-tab.is-active { background: #ff00ff; border-color: #ff00ff; color: #171717; }
:root[data-theme="dark"] .hero-shot { background: var(--dk-surface); border-color: var(--dk-line-strong); }
:root[data-theme="dark"] .hero-shot figcaption { color: var(--dk-muted); border-color: var(--dk-line); background: var(--dk-surface); }
:root[data-theme="dark"] .hero-tour-img, :root[data-theme="dark"] .hero-shot img { filter: brightness(.93); }
:root[data-theme="dark"] .mod-card { background: var(--dk-surface); border-color: var(--dk-line); }
:root[data-theme="dark"] .mod-card h3 { color: var(--dk-text); }
:root[data-theme="dark"] .mod-card p { color: var(--dk-muted); }
:root[data-theme="dark"] .mod-card:hover { border-color: var(--dk-pink); }
:root[data-theme="dark"] .mod-group-title { color: var(--dk-pink); }

/* Landing page fixes found by the dark-mode audit */
:root[data-theme="dark"] .btn.btn-primary { background: #352eff; border-color: #352eff; color: #fff; }
:root[data-theme="dark"] .btn.btn-primary:hover { background: #4a44ff; }
:root[data-theme="dark"] .btn.btn-ghost { background: var(--dk-surface); border-color: var(--dk-line-strong); color: var(--dk-text); }
:root[data-theme="dark"] .btn.btn-ghost:hover { border-color: var(--dk-pink); color: var(--dk-pink); }
:root[data-theme="dark"] .hero-cta-row .btn-pdf { color: var(--dk-muted); }
:root[data-theme="dark"] .mod-icon, :root[data-theme="dark"] .cap-icon { background: #352eff; }
:root[data-theme="dark"] .quickstart { background: linear-gradient(135deg, #241a33 0%, #1d1c45 55%, #1a1660 100%); border: 1px solid #33284a; }
:root[data-theme="dark"] .quickstart .btn.btn-primary { background: #352eff; color: #fff; }
:root[data-theme="dark"] .lc {
    background:
        radial-gradient(110% 70% at 8% 0%, rgba(124, 157, 255, .16), transparent 58%),
        radial-gradient(70% 60% at 100% 100%, rgba(255, 0, 255, .14), transparent 60%),
        linear-gradient(150deg, #120f3a 0%, #1a1660 60%, #221c86 100%);
    border: 1px solid #2c2766;
}
:root[data-theme="dark"] .lc-num { color: #1d1a5c; }
:root[data-theme="dark"] .update-tag.new { color: #9bd46a; background: rgba(155, 212, 106, .12); }
:root[data-theme="dark"] .update-tag.improved { color: #9aa6ff; }
:root[data-theme="dark"] .update-tag.fix { color: #ffb38a; }
:root[data-theme="dark"] .hero-shot-bar { background: var(--dk-surface-2); border-color: var(--dk-line); }
:root[data-theme="dark"] .skip-link { background: #352eff; color: #fff; }

:root[data-theme="dark"] .hero h1 .accent { background-image: linear-gradient(120deg, #ff5cff, #9aa6ff); }
:root[data-theme="dark"] .section-head h2, :root[data-theme="dark"] .mod-groups ~ h2, :root[data-theme="dark"] main > section > .section-head h2 { color: var(--dk-pink); }
}

/* =========================================================================
   Glossary A–Z jump row (11 Oct 2026): <nav class="glossary-az"> above the
   glossary table in faq.html; each letter links to the first row (#g-a …).
   Letters with no entry are plain, muted spans.
   ========================================================================= */
.doc-section .glossary-az {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 10px 12px;
    border: 1px solid #e6e7f0; border-radius: 10px; background: #fafaff;
}
.doc-section .glossary-az a, .doc-section .glossary-az span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px;
    border-radius: 7px; font: 600 13.5px/1 var(--font-body);
}
.doc-section .glossary-az a {
    border: 1px solid #dcdcf5; background: #fff; color: var(--primary); text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.doc-section .glossary-az a:hover { border-color: #b9b6ff; background: #f1f0ff; }
.doc-section .glossary-az a:focus-visible { outline: 3px solid #b9b6ff; outline-offset: 2px; }
.doc-section .glossary-az span { color: #b4b6c4; }
.doc-section table.glossary td:first-child { font-weight: 600; color: var(--doc-ink); }
@media (min-width: 700px) { .doc-section table.glossary td:first-child { width: 26%; } }
@media (max-width: 600px) {
    .doc-section .glossary-az { gap: 4px; padding: 8px; }
    .doc-section .glossary-az a, .doc-section .glossary-az span { min-width: 28px; height: 30px; font-size: 13px; }
}
@media print { .doc-section .glossary-az { display: none; } }
@media screen {
    :root[data-theme="dark"] .doc-section .glossary-az { background: var(--dk-surface); border-color: var(--dk-line); }
    :root[data-theme="dark"] .doc-section .glossary-az a { background: var(--dk-surface-2); border-color: var(--dk-line-strong); color: var(--dk-blue); }
    :root[data-theme="dark"] .doc-section .glossary-az a:hover { border-color: var(--dk-blue); background: var(--dk-blue-soft); }
    :root[data-theme="dark"] .doc-section .glossary-az span { color: #5c5c66; }
    :root[data-theme="dark"] .doc-section table.glossary td:first-child { color: var(--dk-text); }
}