/* ==========================================================================
   Runtime Zero — design system (Clarity foundation, custom theme)
   Implements the Claude Design handoff. Colors are driven by CSS custom
   properties so the light/dark toggle re-themes the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKENS
   -------------------------------------------------------------------------- */
:root {
    --rz-padx: 56px;
    --rz-maxw: 1200px;   /* shared content column width (main, header, footer) */

    --rz-bg: #fafafa;
    --rz-surface: #fff;
    --rz-surface-subtle: #fcfdfe;

    --rz-ink: #21343d;          /* headings */
    --rz-body: #3a4750;         /* prose */
    --rz-secondary: #5b6770;    /* ledes, descriptions */
    --rz-muted: #9aa6ad;        /* meta, labels */
    --rz-faint: #aab3ba;        /* dates */
    --rz-footer-text: #80898f;

    --rz-border: #e1e6ea;       /* bands, cards */
    --rz-divider: #eef1f3;      /* list/table rows */

    --rz-primary: #0079b8;
    --rz-primary-hover: #00689f;
    --rz-cyan: #49afe9;
    --rz-nav-inactive: #bcd5e6;
    --rz-header-from: #0a3a5c;
    --rz-header-to: #002a45;

    --rz-chip-bg: #e6f2f9;
    --rz-chip-text: #0079b8;
    --rz-chip-inactive-bg: #eef1f3;
    --rz-chip-inactive-text: #54616a;
    --rz-count-text: #0a5e88;
    --rz-link-hover: #004b6b;

    --rz-input-border: #cfd6db;
    --rz-result-hover: #f6f9fb;

    --rz-inline-code-bg: #eef2f5;
    --rz-inline-code-text: #0a5e88;
    --rz-quote: #37576b;

    --rz-th-bg: #f1f4f6;
    --rz-th-text: #37454d;
    --rz-table-border: #dfe5e9;
}

body[cds-theme="dark"] {
    --rz-bg: #15232b;
    --rz-surface: #1c2d36;
    --rz-surface-subtle: #192831;

    --rz-ink: #eaf0f3;
    --rz-body: #c4d0d7;
    --rz-secondary: #a3b3bc;
    --rz-muted: #8195a0;
    --rz-faint: #6f838d;
    --rz-footer-text: #8195a0;

    --rz-border: #2c3e48;
    --rz-divider: #22323b;

    --rz-chip-bg: #143444;
    --rz-chip-text: #2ec0ff;
    --rz-chip-inactive-bg: #27373f;
    --rz-chip-inactive-text: #bcc8ce;
    --rz-count-text: #7fd0f5;
    --rz-link-hover: #7fd0f5;

    --rz-input-border: #33454f;
    --rz-result-hover: #22323b;

    --rz-inline-code-bg: #22323b;
    --rz-inline-code-text: #7fd0f5;
    --rz-quote: #a9bcc7;

    --rz-th-bg: #22323b;
    --rz-th-text: #c4d0d7;
    --rz-table-border: #2c3e48;
}

@media (max-width: 999px) { :root { --rz-padx: 34px; } }
@media (max-width: 639px) { :root { --rz-padx: 22px; } }

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
}
body {
    /* Font family is inherited from Clarity's stock typography (Metropolis). */
    background: var(--rz-bg);
    color: var(--rz-ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* contain full-bleed breakouts (e.g. the about header band) without a
       horizontal scrollbar; `clip` is not a scroll container, so it leaves the
       sticky header and TOC unaffected. */
    overflow-x: clip;
}
* { box-sizing: border-box; }

/* All content pages share one capped, centered column so heroes, bands, and body
   scale identically across pages and don't stretch edge to edge on wide screens
   (auto inline margins centre it in the body flex). The header and footer live
   outside <main> and stay full-width; legal pages narrow further via .rz-legal. */
.rz-main { flex: 1 0 auto; width: 100%; max-width: var(--rz-maxw); margin-inline: auto; }

.rz-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;
}
.rz-hide { display: none !important; }

/* Clarity's `body p:not([cds-text])` rule (specificity 0,1,2) forces a top margin
   and `margin-bottom:0` on every paragraph, collapsing our intended spacing
   (e.g. the hero CTA hugged the lede). Re-assert our model at higher specificity:
   drop Clarity's injected top margin, then restore each paragraph's bottom margin. */
.rz-main p:not([cds-text]) { margin-top: 0; }
.rz-main .rz-hero-lede { margin-bottom: 34px; }
.rz-main .rz-article-lede { margin-bottom: 26px; }
.rz-main .rz-prose > p:first-of-type { margin-bottom: 24px; }
.rz-main .rz-prose p { margin-bottom: 20px; }
.rz-main .rz-row-desc { margin-bottom: 12px; }
.rz-main .rz-about-main p { margin-bottom: 18px; }
.rz-main .rz-legal p { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   2. HEADER
   -------------------------------------------------------------------------- */
.rz-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 22px;
    /* full-width bar, but inner content aligned to the .rz-main content column:
       inset by the column gutter on wide screens, plain padx once below the cap */
    padding: 0 max(var(--rz-padx), calc((100% - var(--rz-maxw)) / 2 + var(--rz-padx)));
    background: linear-gradient(180deg, var(--rz-header-from), var(--rz-header-to));
}
.rz-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.rz-logo-tile {
    width: 30px; height: 30px; flex: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #3aa0e0, #1572c4);
    display: flex; align-items: center; justify-content: center;
}
.rz-wordmark { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

/* Header items behave like toolbar buttons: always pure white, no colour change
   in any state, with a subtle background highlight on hover and for the current
   page. `color: #fff !important` is the pragmatic, reliable way to stay white —
   Clarity recolours anchors across many states (:link, :visited, :link:hover,
   :link:active, …) at specificities that are tedious to out-rank one by one. */
.rz-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.rz-nav-link {
    color: #fff !important;
    font-size: 13.5px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    /* reset so a <button> nav item matches its <a> siblings */
    font-family: inherit; background: transparent; border: 0; cursor: pointer; line-height: inherit;
}
.rz-nav-link.active { font-weight: 600; }

.rz-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; cursor: pointer;
    padding: 7px;
    border-radius: 6px;
    color: #fff;
    transition: background-color 0.15s ease;
}
/* The icon fill is driven by --color (not the anchor's `color`), so it stays
   white regardless of Clarity's link colours. */
.rz-header cds-icon { --color: #fff; }

/* Subtle button-like hover + selected (current page) states. */
.rz-header .rz-nav-link:hover,
.rz-header .rz-icon-btn:hover { background-color: rgba(255, 255, 255, 0.12); }
.rz-header .rz-nav-link.active,
.rz-header .rz-icon-btn.active { background-color: rgba(255, 255, 255, 0.16); }

.rz-mobile-actions { display: none; align-items: center; gap: 4px; margin-left: auto; }

/* --------------------------------------------------------------------------
   3. MOBILE MENU + SEARCH DRAWER
   -------------------------------------------------------------------------- */
.rz-mobile-menu {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0;
    z-index: 40;
    flex-direction: column;
    background: var(--rz-surface);
    border-bottom: 1px solid var(--rz-border);
    box-shadow: 0 12px 28px rgba(10,32,52,0.12);
    padding: 6px 0;
}
.rz-mobile-menu.open { display: flex; }
.rz-mobile-menu a,
.rz-mobile-menu button {
    padding: 14px var(--rz-padx);
    color: var(--rz-body);
    text-decoration: none;
    font-size: 15px; font-weight: 600;
    /* button reset so the Topics toggle matches its <a> siblings */
    text-align: left; font-family: inherit; background: transparent; border: 0; cursor: pointer;
}
.rz-mobile-menu a:hover,
.rz-mobile-menu button:hover { background: var(--rz-divider); }
.rz-mobile-menu a.active,
.rz-mobile-menu button.active { color: var(--rz-primary); }

.rz-search-drawer {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0;
    z-index: 45;
    background: var(--rz-surface);
    border-bottom: 1px solid var(--rz-border);
    box-shadow: 0 12px 28px rgba(10,32,52,0.12);
    padding: 26px var(--rz-padx) 30px;
}
.rz-search-drawer.open { display: block; }

/* Topics fold-out — mirrors the search drawer: fixed panel under the sticky
   header that folds out when the Topics nav item is toggled. */
.rz-topics-drawer {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0;
    z-index: 45;
    max-height: calc(100vh - 56px); overflow-y: auto;
    background: var(--rz-surface);
    border-bottom: 1px solid var(--rz-border);
    box-shadow: 0 12px 28px rgba(10,32,52,0.12);
}
.rz-topics-drawer.open { display: block; }
.rz-topics-drawer-inner { max-width: 1040px; margin: 0 auto; padding: 22px var(--rz-padx) 30px; }
.rz-topics-drawer-label {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--rz-primary); margin: 0 0 16px;
}
.rz-topics-drawer .rz-filter-row { padding: 0; }
.rz-search-inner { max-width: 720px; margin: 0 auto; }
.rz-search-input-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--rz-input-border);
    border-radius: 6px;
    padding: 13px 16px;
}
.rz-search-input-icon { --color: var(--rz-muted); flex: none; }
.rz-search-input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 17px; color: var(--rz-ink);
}
.rz-search-input::placeholder { color: var(--rz-muted); }
.rz-esc-hint {
    font-size: 11px; font-weight: 600; color: var(--rz-muted);
    background: var(--rz-divider); border-radius: 4px; padding: 3px 7px; flex: none;
}
.rz-search-results { margin-top: 16px; }
.rz-search-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--rz-muted); margin: 4px 0 8px;
}
.rz-search-result {
    display: block; text-decoration: none;
    padding: 13px 12px; border-radius: 5px;
    border-bottom: 1px solid var(--rz-divider);
}
.rz-search-result:hover { background: var(--rz-result-hover); }
.rz-search-result-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.rz-search-result-title { display: block; font-size: 15.5px; font-weight: 700; color: var(--rz-ink); }
.rz-search-result-snip { display: block; font-size: 13px; line-height: 1.5; color: var(--rz-secondary); margin-top: 4px; }
.rz-search-empty { display: flex; gap: 8px; flex-wrap: wrap; }
.rz-search-none { font-size: 14px; color: var(--rz-muted); padding: 8px 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS, CHIPS, LABELS
   -------------------------------------------------------------------------- */
/* One consistent content-area button: solid primary at rest, inverting to an
   outline (transparent fill, primary text/border) on hover. Used for every
   content button — READ ARTICLE, LOAD MORE ARTICLES, ALL ARTICLES, etc.
   The text colour uses !important so it wins on <a> buttons regardless of
   Clarity's a:link / a:link:hover colours. */
.rz-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    color: #fff !important;
    background: var(--rz-primary);
    padding: 11px 22px; border-radius: 3px;
    border: 1px solid var(--rz-primary);
    text-decoration: none !important; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rz-btn:hover {
    color: var(--rz-primary) !important;
    background: transparent;
    border-color: var(--rz-primary);
    text-decoration: none !important;
}

.rz-chip {
    font-size: 13px; color: var(--rz-chip-inactive-text);
    background: var(--rz-chip-inactive-bg);
    padding: 7px 15px; border-radius: 16px; text-decoration: none;
    white-space: nowrap;
}
.rz-chip:hover { color: var(--rz-primary); }
.rz-chip.active { color: #fff; background: var(--rz-primary); }

/* Homepage topic filters — native Clarity `label` + `badge` counter, re-themed to
   the site's colour language (filled pill, no heavy Clarity label border). Rules
   are scoped under .rz-filter-row so they out-specify Clarity's a.label (0,1,1);
   text colours additionally need !important to beat Clarity's a:link colour. */
.rz-filter-row .rz-filter {
    margin: 0;
    gap: 7px;
    min-height: 0;
    padding: 4px 7px 4px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-chip-text) !important;
    background: var(--rz-chip-bg);
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rz-filter-row .rz-filter:hover,
.rz-filter-row .rz-filter.rz-filter--active {
    color: #fff !important;
    background: var(--rz-primary);
    border-color: var(--rz-primary);
}
.rz-filter-row .rz-filter .rz-filter-count {
    margin: 0;
    min-width: 0;
    height: auto;
    padding: 1px 6px;
    border: 0;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.5;
    color: #fff;
    background: var(--rz-primary);
}
.rz-filter-row .rz-filter:hover .rz-filter-count,
.rz-filter-row .rz-filter.rz-filter--active .rz-filter-count {
    color: var(--rz-primary);
    background: #fff;
}

.rz-topic-chip {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--rz-chip-text) !important; background: var(--rz-chip-bg);
    padding: 3px 8px; border-radius: 3px; text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rz-topic-chip:hover {
    color: #fff !important;
    background: var(--rz-primary);
}
.rz-pill {
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: #fff; background: var(--rz-primary);
    padding: 4px 9px; border-radius: 3px;
}

/* placeholder fill for missing thumbnails (matches the design's navy stripes) */
.rz-thumb-placeholder {
    background: repeating-linear-gradient(135deg, #0a2238, #0a2238 13px, #0f2f4d 13px, #0f2f4d 26px);
}

/* --------------------------------------------------------------------------
   5. ARTICLES LISTING
   -------------------------------------------------------------------------- */
.rz-hero {
    display: flex;
    background: var(--rz-surface);
    border-bottom: 1px solid var(--rz-border);
}
.rz-hero-text {
    flex: 1; min-width: 0;
    padding: 58px var(--rz-padx);
    display: flex; flex-direction: column; justify-content: center;
}
.rz-hero-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.rz-hero-readmeta { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--rz-muted); }
.rz-hero h1 {
    font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--rz-ink);
    margin: 0 0 16px; letter-spacing: -0.025em; max-width: 780px;
}
.rz-hero-lede { font-size: 16px; line-height: 1.6; color: var(--rz-secondary); margin: 0 0 34px; max-width: 470px; }
.rz-hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rz-byline { font-size: 13px; color: var(--rz-muted); }

/* Image-tinted featured hero — full-bleed cover + colour panel, sharing the
   structural rules of the article header (see "Split hero header" in section 7).
   Here only: position the text as the overlay and reverse it to white. */
.rz-hero--image .rz-hero-text {
    position: relative; z-index: 2;
    max-width: 600px;
    padding: 64px var(--rz-padx) 60px;
}
.rz-hero--image h1 { color: #fff; }
.rz-hero--image .rz-hero-lede { color: rgba(255,255,255,0.95); }
.rz-hero--image .rz-hero-readmeta,
.rz-hero--image .rz-byline { color: rgba(255,255,255,0.84); }

.rz-filter-row { padding: 28px var(--rz-padx) 0; display: flex; gap: 9px; flex-wrap: wrap; }
.rz-section-label {
    padding: 30px var(--rz-padx) 2px; margin: 0;
    font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--rz-muted);
}

.rz-article-list { padding: 20px var(--rz-padx) 46px; display: flex; flex-direction: column; }
.rz-article-row {
    display: flex; gap: 26px; padding: 24px 0;
    border-top: 1px solid var(--rz-divider); align-items: flex-start;
}
.rz-article-row-thumb {
    width: 200px; height: 128px; flex: none;
    border-radius: 3px; overflow: hidden; display: block;
}
.rz-article-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-article-row-body { flex: 1; min-width: 0; }
.rz-row-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rz-row-read { font-size: 11.5px; font-weight: 600; color: var(--rz-faint); margin-left: 2px; }
.rz-row-title { font-size: 22px; line-height: 1.22; font-weight: 700; color: var(--rz-ink); margin: 8px 0; }
.rz-row-title a, .rz-row-title a:link, .rz-row-title a:visited { color: inherit; text-decoration: none; }
.rz-row-title a:hover { color: var(--rz-primary); }
.rz-row-desc { font-size: 14.5px; line-height: 1.55; color: var(--rz-secondary); margin: 0 0 12px; max-width: 620px; }
.rz-row-date { font-size: 12.5px; color: var(--rz-faint); }

.rz-load-more {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding-top: 34px; border-top: 1px solid var(--rz-divider); margin-top: 4px;
}
.rz-load-more-hint { font-size: 12px; color: var(--rz-faint); }

/* --------------------------------------------------------------------------
   6. PAGE HEAD BAND (article, topics, category, about)
   -------------------------------------------------------------------------- */
.rz-head-band {
    background: var(--rz-surface);
    border-bottom: 1px solid var(--rz-border);
    padding: 48px var(--rz-padx) 40px;
}
/* Plain (non-image) header band — about page: break out of the capped column so
   the surface fill and bottom border run full width like the hero bands; the
   inner content stays centred (.rz-head-inner is max-width + margin auto). Image
   bands handle their full width via box-shadow above. */
.rz-head-band:not(.rz-head-band--image) {
    margin-inline: calc(50% - 50vw);
}
.rz-head-inner { max-width: 960px; margin: 0 auto; }
.rz-breadcrumb { font-size: 12.5px; color: var(--rz-muted); margin-bottom: 18px; }
.rz-breadcrumb a, .rz-breadcrumb a:link, .rz-breadcrumb a:visited { color: var(--rz-primary); font-weight: 600; text-decoration: none; }
.rz-page-title {
    font-size: 40px; line-height: 1.12; font-weight: 800; color: var(--rz-ink);
    margin: 0 0 14px; letter-spacing: -0.025em;
}
.rz-page-lede { font-size: 18px; line-height: 1.55; color: var(--rz-secondary); margin: 0; max-width: 640px; }

/* --------------------------------------------------------------------------
   7. ARTICLE DETAIL
   -------------------------------------------------------------------------- */
.rz-chip-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.rz-article-title {
    font-size: 44px; line-height: 1.08; font-weight: 800; color: var(--rz-ink);
    margin: 0 0 16px; letter-spacing: -0.025em; max-width: 780px;
}
.rz-article-lede { font-size: 19px; line-height: 1.55; color: var(--rz-secondary); margin: 0 0 26px; max-width: 700px; }
.rz-author-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 8px; }
.rz-avatar {
    width: 40px; height: 40px; flex: none; border-radius: 50%;
    background: linear-gradient(135deg, #3aa0e0, #1572c4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px;
}
.rz-author-name2 { font-size: 13.5px; font-weight: 600; color: var(--rz-ink); }
.rz-author-date { font-size: 12.5px; color: var(--rz-muted); }

/* Split hero header — shared by the article header (.rz-head-band--image) and the
   homepage featured hero (.rz-hero--image). The full-bleed cover image is featured
   on the right, and a panel in the cover's own dominant colour (--rz-cover-color,
   extracted at build time) covers the left behind the text, fading out to reveal
   the image. The panel's opacity is the dial (lower = more cover behind the text).
   Text is white (every cover colour is dark), so the look is theme-neutral. */
.rz-head-band--image,
.rz-hero--image {
    position: relative;
    display: block;
    overflow: hidden;
    border-bottom: 0;
    padding: 0;
    background: var(--rz-cover-color, #0a3a5c);
    /* extend the cover colour edge-to-edge as a full-width band behind the capped
       hero (image + text stay within the .rz-main column). Two offset shadows fill
       the gutters: the left gutter with the cover's top-left colour, the right with
       its bottom-right colour, so each gutter matches the image edge beside it. The
       colour split sits behind the band (hidden by the image); clip-path keeps it a
       horizontal band; shadows never affect scroll width. */
    box-shadow:
        -100vw 0 0 100vw var(--rz-cover-color, #0a3a5c),
         100vw 0 0 100vw var(--rz-cover-color, var(--rz-cover-color, #0a3a5c));
    clip-path: inset(0 -100vw);
}
.rz-head-bg,
.rz-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; display: block;
}
.rz-head-bg { object-fit: cover; }
.rz-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-head-band--image::after,
.rz-hero--image::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
        var(--rz-cover-color, #0a3a5c) 0%,
        var(--rz-cover-color, #0a3a5c) 50%,
        transparent 70%,
        transparent 84%,
        var(--rz-cover-color, var(--rz-cover-color, #0a3a5c)) 100%);
    opacity: 0.97;
}
.rz-head-band--image .rz-head-inner {
    position: relative; z-index: 2;
    max-width: 600px; margin: 0;
    padding: 64px var(--rz-padx) 60px;
}
.rz-head-band--image .rz-article-title,
.rz-head-band--image .rz-page-title,
.rz-head-band--image .rz-author-name2 { color: #fff; }
.rz-head-band--image .rz-article-lede,
.rz-head-band--image .rz-page-lede { color: rgba(255,255,255,0.95); }
.rz-head-band--image .rz-breadcrumb,
.rz-head-band--image .rz-author-date { color: rgba(255,255,255,0.84); }
.rz-head-band--image .rz-breadcrumb a,
.rz-head-band--image .rz-breadcrumb a:link,
.rz-head-band--image .rz-breadcrumb a:visited { color: #fff; }

/* Narrow screens: drop the split — solid colour panel full width, text full width. */
@media (max-width: 767px) {
    .rz-head-band--image::after,
    .rz-hero--image::after { background: var(--rz-cover-color, #0a3a5c); }
    .rz-head-band--image .rz-head-inner,
    .rz-hero--image .rz-hero-text { max-width: none; }
}

.rz-article-body {
    display: flex; justify-content: center; gap: 56px;
    padding: 48px var(--rz-padx) 24px;
    /* stretch so the TOC aside spans the article height, giving its sticky inner
       block room to travel as you scroll */
    align-items: stretch;
}
.rz-toc { width: 210px; flex: none; }
.rz-toc-sticky { position: sticky; top: 80px; }
.rz-toc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--rz-muted); margin-bottom: 14px; }
.rz-toc-list { display: flex; flex-direction: column; gap: 9px; border-left: 2px solid var(--rz-border); }
.rz-toc-list a { font-size: 13px; color: var(--rz-secondary); text-decoration: none; padding-left: 14px; line-height: 1.4; }
.rz-toc-list a:hover { color: var(--rz-primary); }
.rz-toc-list a.active { color: var(--rz-primary); font-weight: 600; border-left: 2px solid var(--rz-primary); margin-left: -2px; }

.rz-prose { width: 100%; max-width: 720px; }

/* prose markdown */
.rz-prose > p:first-of-type { font-size: 17.5px; line-height: 1.7; color: var(--rz-body); margin: 0 0 24px; }
.rz-prose p { font-size: 16.5px; line-height: 1.72; color: var(--rz-body); margin: 0 0 20px; }
.rz-prose h2 {
    font-size: 26px; font-weight: 800; color: var(--rz-ink);
    letter-spacing: -0.02em; margin: 38px 0 16px; padding-top: 6px;
    scroll-margin-top: 80px;
}
.rz-prose h3 { font-size: 20px; font-weight: 700; color: var(--rz-ink); margin: 28px 0 12px; scroll-margin-top: 80px; }
.rz-prose ul, .rz-prose ol { margin: 0 0 22px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.rz-prose li { font-size: 16.5px; line-height: 1.6; color: var(--rz-body); }
.rz-prose a { color: var(--rz-primary); text-decoration: underline; }
.rz-prose strong { color: var(--rz-ink); font-weight: 700; }
.rz-prose em { font-style: italic; }
.rz-prose code {
    font-family: var(--cds-alias-typography-monospace-font-family, ui-monospace, Consolas, Menlo, Monaco, monospace); font-size: 13.5px;
    background: var(--rz-inline-code-bg); color: var(--rz-inline-code-text);
    padding: 2px 6px; border-radius: 3px;
}

/* code block — dark in both themes, per design */
.rz-prose pre {
    position: relative; margin: 0 0 24px;
    padding: 46px 22px 20px;
    background: #0c141c; border: 1px solid #14202c; border-radius: 6px;
    overflow-x: auto;
}
.rz-prose pre::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px;
    background: #0a1219; border-bottom: 1px solid #16222e; border-radius: 6px 6px 0 0;
}
.rz-prose pre::after {
    content: ""; position: absolute; top: 13px; left: 16px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #ff5f56; box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
}
.rz-prose pre code {
    font-family: var(--cds-alias-typography-monospace-font-family, ui-monospace, Consolas, Menlo, Monaco, monospace); font-size: 13px; line-height: 1.7;
    color: #c6d4df; background: transparent; padding: 0; border-radius: 0; display: block;
}

/* Prism token colors for the dark code block */
.rz-prose pre .token.comment, .rz-prose pre .token.prolog,
.rz-prose pre .token.doctype, .rz-prose pre .token.cdata { color: #7c9cbb; }
.rz-prose pre .token.punctuation { color: #5b7283; }
.rz-prose pre .token.property, .rz-prose pre .token.tag, .rz-prose pre .token.keyword,
.rz-prose pre .token.boolean, .rz-prose pre .token.atrule, .rz-prose pre .token.important { color: #7c5cff; }
.rz-prose pre .token.string, .rz-prose pre .token.char,
.rz-prose pre .token.attr-value, .rz-prose pre .token.builtin, .rz-prose pre .token.inserted { color: #5fd3a8; }
.rz-prose pre .token.number, .rz-prose pre .token.constant, .rz-prose pre .token.symbol { color: #f2b35e; }
.rz-prose pre .token.function, .rz-prose pre .token.class-name { color: #6fb3ff; }
.rz-prose pre .token.operator, .rz-prose pre .token.entity, .rz-prose pre .token.url { color: #9aa6ad; }

.copy-code-btn {
    position: absolute; top: 6px; right: 8px; z-index: 2;
    background: transparent; border: none; cursor: pointer;
    color: #5b7283; padding: 4px; display: flex; align-items: center; justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
}
.copy-code-btn cds-icon { --color: currentColor; }
.copy-code-btn:hover { color: #c6d4df; transform: scale(1.1); }

.rz-prose blockquote {
    margin: 0 0 24px; padding: 6px 0 6px 22px;
    border-left: 3px solid var(--rz-cyan);
    font-size: 19px; line-height: 1.55; color: var(--rz-quote); font-style: italic;
}
.rz-prose blockquote p { font-size: inherit; color: inherit; margin: 0; }

.rz-prose table {
    border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 0 0 24px;
    display: block; overflow-x: auto;
}
.rz-prose th {
    text-align: left; padding: 11px 14px; background: var(--rz-th-bg);
    color: var(--rz-th-text); font-weight: 700; font-size: 12.5px;
    letter-spacing: 0.03em; text-transform: uppercase;
    border-bottom: 1px solid var(--rz-table-border); white-space: nowrap;
}
.rz-prose td { padding: 11px 14px; color: var(--rz-body); border-bottom: 1px solid var(--rz-divider); }

.rz-prose img {
    max-width: 100%; height: auto; border-radius: 4px;
    border: 1px solid var(--rz-border); margin: 8px 0 24px; display: block;
}

.rz-article-footer {
    max-width: 720px;
    display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap;
    margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--rz-border);
}

.rz-prevnext { padding: 8px var(--rz-padx) 52px; }
.rz-prevnext-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rz-pn-card {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--rz-surface); border: 1px solid var(--rz-border); border-radius: 5px;
    padding: 20px 22px; text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rz-pn-card:hover { border-color: var(--rz-primary); box-shadow: 0 2px 10px rgba(10,58,92,0.1); }
.rz-pn-card.next { text-align: right; align-items: flex-end; }
.rz-pn-label { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; color: var(--rz-muted); }
.rz-pn-title { font-size: 15.5px; font-weight: 700; color: var(--rz-ink); line-height: 1.25; }

/* --------------------------------------------------------------------------
   9. ABOUT
   -------------------------------------------------------------------------- */
.rz-about-intro { display: flex; align-items: center; gap: 30px; }
.rz-about-intro-text { flex: 1; min-width: 0; }
.rz-about-avatar {
    width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, #3aa0e0, #1572c4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 32px;
    box-shadow: 0 4px 16px rgba(21,114,196,0.3);
}
.rz-about-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* keep the pixel art crisp when scaled up */
    image-rendering: pixelated;
}
.rz-eyebrow {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--rz-primary); margin-bottom: 10px;
}
.rz-about-body-wrap { padding: 48px var(--rz-padx) 56px; }
.rz-about-body { max-width: 960px; margin: 0 auto; display: flex; gap: 48px; align-items: flex-start; }
.rz-about-main { flex: 1; min-width: 0; }
.rz-about-main h2 { font-size: 24px; font-weight: 800; color: var(--rz-ink); letter-spacing: -0.02em; margin: 0 0 14px; }
.rz-about-main h2 + p { margin-top: 0; }
.rz-about-main h2:not(:first-child) { margin-top: 32px; }
.rz-about-main p { font-size: 16.5px; line-height: 1.72; color: var(--rz-body); margin: 0 0 18px; }
.rz-about-main ul { margin: 0 0 26px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.rz-about-main li { font-size: 16.5px; line-height: 1.55; color: var(--rz-body); }
.rz-about-card {
    width: 280px; flex: none; background: var(--rz-surface);
    border: 1px solid var(--rz-border); border-radius: 6px; padding: 24px;
}
.rz-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--rz-muted); margin-bottom: 14px; }
.rz-contact-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    color: var(--rz-th-text); text-decoration: none; font-size: 14px;
    transition: color 0.15s ease;
}
.rz-contact-row:hover { color: var(--rz-primary); }
.rz-contact-row cds-icon { --color: var(--rz-muted); flex: none; }
.rz-card-divider { height: 1px; background: var(--rz-border); margin: 18px 0; }
.rz-builtwith { display: flex; gap: 8px; flex-wrap: wrap; }
.rz-builtwith span {
    font-size: 12px; color: var(--rz-chip-inactive-text); background: var(--rz-chip-inactive-bg);
    padding: 5px 11px; border-radius: 13px;
}

/* --------------------------------------------------------------------------
   10. LEGAL PAGES
   -------------------------------------------------------------------------- */
.rz-legal { max-width: 720px; margin: 0 auto; padding: 56px var(--rz-padx) 72px; }
.rz-legal h1 { font-size: 36px; font-weight: 800; color: var(--rz-ink); letter-spacing: -0.02em; margin: 0 0 8px; }
.rz-legal h2 { font-size: 18px; font-weight: 700; color: var(--rz-ink); margin: 34px 0 8px; }
.rz-legal p { font-size: 15.5px; line-height: 1.7; color: var(--rz-body); margin: 0 0 14px; }
.rz-legal ul { padding-left: 22px; margin: 0 0 14px; }
.rz-legal li { font-size: 15.5px; line-height: 1.6; color: var(--rz-body); margin-bottom: 6px; }
.rz-legal a { color: var(--rz-primary); }
.rz-legal strong { color: var(--rz-ink); }
.rz-legal table { border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.rz-legal th { text-align: left; color: var(--rz-ink); font-weight: 700; padding: 4px 16px 4px 0; vertical-align: top; white-space: nowrap; }
.rz-legal td { color: var(--rz-body); padding: 4px 0; }
.rz-legal hr { border: none; border-top: 1px solid var(--rz-border); margin: 24px 0; }
.rz-legal em { color: var(--rz-muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   11. 404
   -------------------------------------------------------------------------- */
.rz-404 { max-width: 640px; margin: 0 auto; padding: 96px var(--rz-padx) 120px; text-align: center; }
.rz-404-code {
    font-size: 120px; line-height: 1; font-weight: 800; letter-spacing: -0.04em;
    background: linear-gradient(135deg, #3aa0e0, #1572c4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rz-404-title { font-size: 28px; font-weight: 800; color: var(--rz-ink); letter-spacing: -0.02em; margin: 20px 0 10px; }
.rz-404-text { font-size: 16px; line-height: 1.6; color: var(--rz-secondary); margin: 0 0 28px; }

@media (max-width: 639px) {
    .rz-404 { padding: 60px var(--rz-padx) 80px; }
    .rz-404-code { font-size: 88px; }
    .rz-404-title { font-size: 23px; }
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.rz-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--rz-border);
    /* full-width bar with its content aligned to the .rz-main column (see header) */
    padding: 18px max(var(--rz-padx), calc((100% - var(--rz-maxw)) / 2 + var(--rz-padx)));
    display: flex; align-items: center; justify-content: space-between;
    background: var(--rz-surface-subtle); flex-wrap: wrap; gap: 10px;
}
.rz-copyright { font-size: 12.5px; color: var(--rz-footer-text); }
.rz-footer-links { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
/* Rest + visited stay primary (no recolour when clicked); the :link/:visited
   pseudos tie Clarity's a:link (0,2,1) and win by source order. On hover the link
   shifts colour and underlines (Clarity-style affordance) via --rz-link-hover,
   which is theme-aware (Clarity's own --clr-link-hover-color doesn't re-theme
   under our cds-theme dark mode, so it would go dark-on-dark). */
.rz-footer-links a:link,
.rz-footer-links a:visited { color: var(--rz-primary); text-decoration: none; }
.rz-footer-links a:hover { color: var(--rz-link-hover); text-decoration: underline; }
.rz-footer-divider { color: var(--rz-muted); margin: 0 4px; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
    .rz-toc { display: none; }
    .rz-article-body { gap: 0; }
    .rz-hero h1 { font-size: 32px; }
    .rz-article-title { font-size: 36px; }
}

@media (max-width: 859px) {
    .rz-about-body { flex-direction: column; gap: 32px; }
    .rz-about-card { width: 100%; }
}

@media (max-width: 639px) {
    .rz-nav { display: none; }
    .rz-mobile-actions { display: flex; }

    .rz-hero h1 { font-size: 27px; }
    .rz-hero-lede { font-size: 15px; }

    .rz-article-title { font-size: 28px; }
    .rz-article-lede { font-size: 16px; }
    .rz-page-title { font-size: 27px; }
    .rz-page-lede { font-size: 15.5px; }

    .rz-article-row { flex-direction: column; gap: 14px; align-items: stretch; }
    .rz-article-row-thumb { width: 100%; height: 180px; }
    .rz-row-title { font-size: 19px; }

    .rz-prose h2 { font-size: 22px; }
    .rz-prose > p:first-of-type { font-size: 16.5px; }
    .rz-prose p, .rz-prose li { font-size: 15.5px; }
    .rz-prose blockquote { font-size: 17px; }

    .rz-about-intro { flex-direction: column; align-items: flex-start; gap: 20px; }
    .rz-about-avatar { width: 64px; height: 64px; font-size: 24px; }
    .rz-about-main h2 { font-size: 21px; }
    .rz-prevnext-inner { grid-template-columns: 1fr; }
    .rz-legal h1 { font-size: 28px; }
}