/* =====================================================================
   ROOTKey — cinematic design system
   Brand: #F73936 red · #4C1DFF blue · #00D47E green · #1A1AFF dark blue
          #060606 bg · #FFFFFF · IBM Plex Sans / IBM Plex Mono
   ===================================================================== */
/* self-hosted IBM Plex (/assets/fonts/fonts.css): linked from every page's head by tools/site/seo.mjs, not @imported here, so it loads in parallel with this file */

:root {
    --rk-css: 8;   /* version marker: rk-chrome.js loads this file again when the cached copy is older than the script */
    --rk-red: #F73936;
    --rk-red-deep: #C40B08;
    --rk-blue: #4C1DFF;
    --rk-blue-dark: #1A1AFF;
    --rk-green: #00D47E;
    --rk-bg: #060606;
    --rk-white: #FFFFFF;

    /* theme tokens — dark (default) */
    --fg: #FFFFFF;
    --fg-rgb: 255, 255, 255;
    --bg: #060606;
    --bg-rgb: 6, 6, 6;
    --panel-rgb: 10, 9, 16;
    --ink-rgb: 237, 235, 255;
    --ink: #F4F3FF;
    --ink-2: rgba(var(--ink-rgb), 0.72);
    --ink-3: rgba(var(--ink-rgb), 0.52);   /* 4.5:1 on --bg for small labels */
    --rk-red-ui: #D92B28;                  /* red fill behind white text: 4.8:1 (brand #F73936 is 3.7:1) */
    --line: rgba(var(--fg-rgb), 0.08);
    --line-2: rgba(var(--fg-rgb), 0.14);
    --panel: rgba(var(--panel-rgb), 0.55);
    --panel-solid: rgb(var(--panel-rgb));
    --tag-red: #ff8b86; --tag-green: #6cf3bb; --tag-blue: #a898ff; --tag-amber: #ffd28a;
    --accent-red: #F73936; --accent-blue: #9d8bff; --accent-green: #00D47E;   /* solid accents in section titles */
    --shadow-card: none;
    color-scheme: dark;

    --grad-red: linear-gradient(100deg, #FF6A5C 0%, #F73936 45%, #C40B08 100%);
    --grad-brand: var(--grad-red);   /* the brand has one accent: red (brand kit, Oct 2026) */

    --shell: 60px;
    --col: calc((100vw - var(--shell) * 2) / 4);
    --header-h: 76px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-2: cubic-bezier(0.25, 1, 0.5, 1);
    /* IBM Plex Sans Arabic only carries the Arabic range (fonts.css unicode-range): Arabic glyphs fall back to it */
    --mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
    --sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    background: var(--bg);
    transition: background-color .5s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
::-webkit-scrollbar { display: none; width: 0; }

body {
    font-family: var(--sans);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
    body.rk-has-cursor, body.rk-has-cursor * { cursor: none !important; }
    /* typing and choosing keep the system cursor (the I-beam in a field) */
    body.rk-has-cursor :is(input, textarea, select, [contenteditable]) { cursor: auto !important; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--rk-red); color: #fff; }

/* ---------- Stage canvas ---------- */
#rk-stage {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    display: block;
    outline: none;
    pointer-events: none;
}
.rk-stage-veil {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    --veil-bottom: 0.85; --veil-top: 0.6; --veil-scrim: 0;
    background: linear-gradient(to bottom, rgba(var(--bg-rgb),var(--veil-top)) 0%, rgba(var(--bg-rgb),0) 18%);
}
/* bottom fade + (phones) an even scrim so body copy over the sculpture keeps its contrast.
   rk-stage.js adds .is-anchored while the sculpture is pinned inside an element (the footer logo band)
   so that band is never veiled. */
.rk-stage-veil::before, .rk-stage-veil::after { content: ""; position: absolute; inset: 0; transition: opacity .6s ease; }
.rk-stage-veil::before { background: radial-gradient(120% 80% at 50% 120%, rgba(var(--bg-rgb),var(--veil-bottom)) 0%, rgba(var(--bg-rgb),0) 60%); }
.rk-stage-veil::after { background: rgba(var(--bg-rgb),var(--veil-scrim)); }
.rk-stage-veil.is-anchored::before, .rk-stage-veil.is-anchored::after { opacity: 0; }
@media (max-width: 800px) {
    .rk-stage-veil { --veil-scrim: 0.3; }
}

/* ---------- Tile field (rk-chrome.js setupTiles): over the stage, under the veil and the content ---------- */
.rk-tiles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.rk-tiles canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rk-tiles__hit {
    position: absolute; left: 0; top: 0; background: var(--rk-red);
    opacity: 0; transition: opacity 1.1s ease;
}
.rk-tiles__hit.is-on { opacity: .5; transition-duration: .7s; }
html[data-theme="light"] .rk-tiles__hit.is-on { opacity: .42; }
@media print { .rk-tiles { display: none; } }

/* ---------- Cursor ---------- */
.cursor-inner, .cursor-outer {
    position: fixed; top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s;
}
body.rk-has-cursor .cursor-inner, body.rk-has-cursor .cursor-outer { opacity: 1; }
.cursor-inner {
    width: 6px; height: 6px;
    border: 2px solid var(--fg);
    z-index: 9999;
}
.cursor-outer {
    width: 40px; height: 40px;
    border: 1.5px solid rgba(var(--fg-rgb),0.6);
    z-index: 9998;
    transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s, opacity .3s;
}
.cursor-outer.is-hover {
    width: 64px; height: 64px;
    background: rgba(247, 57, 54, 0.10);
    border-color: rgba(247, 57, 54, 0.8);
}

/* ---------- Grid overlay ---------- */
.rk-grid {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
}
.rk-grid__h {
    position: absolute; top: var(--header-h); left: 0; right: 0; height: 1px;
    background: var(--line);
}
.rk-grid__v {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(to bottom, transparent 0%, rgba(var(--fg-rgb),0.055) 12%, rgba(var(--fg-rgb),0.055) 88%, transparent 100%);
}
.rk-grid__v:nth-child(2) { left: var(--shell); }
.rk-grid__v:nth-child(3) { left: calc(var(--shell) + var(--col)); }
.rk-grid__v:nth-child(4) { left: calc(var(--shell) + var(--col) * 2); }
.rk-grid__v:nth-child(5) { left: calc(var(--shell) + var(--col) * 3); }
.rk-grid__v:nth-child(6) { left: calc(100vw - var(--shell)); }
.rk-grid__dot {
    position: absolute; left: -2px; top: 0;
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(var(--fg-rgb),0.5);
    box-shadow: 0 0 10px rgba(247,57,54,0.6);
    will-change: transform;
}

/* ---------- Progress rail (right edge; left on RTL pages) ---------- */
.rk-rail {
    position: fixed; z-index: 30;
    inset-inline-end: calc(var(--shell) - 1px);
    /* confined between the floating top bar and the bottom-right toolbar (never overlaps it) */
    top: 110px; bottom: 300px;
    transform: translateX(50%);
    display: flex; flex-direction: column; justify-content: center; gap: 8px;
    pointer-events: auto;
}
.rk-rail__item {
    position: relative;
    width: 2px; height: 44px; flex: 0 1 44px; min-height: 10px;
    background: rgba(var(--fg-rgb),0.14);
    border-radius: 2px;
    overflow: visible;
    display: block;
}
.rk-rail__fill {
    position: absolute; left: 0; top: 0; width: 100%; height: 0%;
    background: var(--fg);
    box-shadow: 0 0 8px rgba(247,57,54,0.9);
    border-radius: 2px;
}
.rk-rail__label {
    position: absolute; inset-inline-end: 16px; top: 50%;
    transform: translate(6px, -50%);
    white-space: nowrap;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis;
    font: 500 10px/1 var(--mono);
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-2);
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s var(--ease);
}
.rk-rail__item:hover .rk-rail__label,
.rk-rail__item:focus-visible .rk-rail__label,
.rk-rail:is(.is-flash, :hover, :focus-within) .rk-rail__item.is-current .rk-rail__label { opacity: 1; transform: translate(0, -50%); }
.rk-rail__item.is-current .rk-rail__label { color: var(--fg); }
.rk-rail__item::before { content: ''; position: absolute; inset: -4px -10px; }

/* ---------- Focus (global) ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring, #F73936);
    outline-offset: 3px;
}
:where(main[tabindex="-1"]):focus { outline: none; }

/* ---------- Header: floating liquid dock ----------
   .rk-bar--a (logo + nav), .rk-bar--c (sign-in + create account) and .rk-bar--b (language, theme, contact)
   are transparent; the glass is drawn by three fixed .rk-glass layers that rk-chrome.js sizes/positions
   (CSS-transitioned). Top of the page: one centred capsule (logo + nav + sign-in + CTA). .is-split:
   A top-left on the content grid line, C top-right on the opposite grid line, B a vertical toolbar
   bottom-right. RTL mirrors all three. */
.rk-header {
    --dock-gap: 16px;
    --tool: 40px;
    --bar-pad: 8px;
    --bar-h: calc(var(--tool) + var(--bar-pad) * 2);
    --dock-dur: .68s;
    --dock-ease: cubic-bezier(.77, 0, .18, 1);
    /* a browser tab never draws the page under the status bar, but some Android browsers still report its
       height as the top inset, which pushed the dock down over the first line of content */
    --safe-top: env(safe-area-inset-top, 0px);
    position: fixed; top: 0; left: 0; width: 0; height: 0;
    z-index: 50;
}
.rk-dock {
    position: fixed; left: 0; right: 0;
    top: calc(var(--dock-gap) + var(--safe-top));
    padding: 0 calc(var(--dock-gap) + env(safe-area-inset-right, 0px)) 0 calc(var(--dock-gap) + env(safe-area-inset-left, 0px));
    display: flex; justify-content: center;
    pointer-events: none;
}
.rk-bar {
    position: relative;
    display: flex; align-items: center;
    height: var(--bar-h);
    padding: var(--bar-pad);
    pointer-events: auto;
}
.rk-bar--a { gap: 26px; padding-inline: 24px 18px; }
.rk-bar--b { gap: 4px; padding-inline-start: 0; }
.rk-bar--c { gap: 4px; padding-inline-start: 0; }
/* theme + language live only in the scrolled toolbar (and the footer / mobile menu) */
.rk-header:not(.is-split) .rk-tool--theme,
.rk-header:not(.is-split) .rk-lang,
.rk-header:not(.is-split) .rk-sep,
.rk-header:not(.is-split) .rk-tool--contact,
.rk-header:not(.is-split) .rk-tool--sound { display: none; }
@media (display-mode: browser) { .rk-header { --safe-top: 0px; } }
@media (min-width: 801px) { .rk-header:has(.rk-bar--c):not(.is-split) .rk-bar--b { display: none; } }

/* the liquid glass */
.rk-glass {
    position: fixed; left: 0; top: 0; width: 0; height: 0;
    pointer-events: none;
    border-radius: calc(var(--bar-h) / 2);
    overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, rgba(var(--panel-rgb), .58), rgba(var(--panel-rgb), .38));
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 0 0 1px rgba(var(--fg-rgb), .09),
        inset 0 -12px 24px -20px rgba(255, 255, 255, .22),
        0 22px 50px -22px rgba(0, 0, 0, .75);
    transition:
        transform var(--dock-dur) var(--dock-ease),
        width var(--dock-dur) var(--dock-ease),
        height var(--dock-dur) var(--dock-ease),
        opacity .26s ease .42s;
    will-change: transform, width, height;
}
.rk-glass::before {   /* slow fluid colour field inside the glass */
    content: ''; position: absolute; inset: -70% -25%;
    background:
        radial-gradient(28% 60% at 18% 52%, rgba(247, 57, 54, .30), transparent 70%),
        radial-gradient(26% 70% at 82% 40%, rgba(76, 29, 255, .36), transparent 70%),
        radial-gradient(20% 55% at 52% 72%, rgba(176, 44, 255, .20), transparent 70%);
    filter: blur(14px);
    opacity: .55;
    animation: rk-liquid 22s ease-in-out infinite alternate;
}
.rk-glass::after {    /* specular sheen along the edge */
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .07) 100%);
}
@keyframes rk-liquid {
    0%   { transform: translate3d(-9%, 2%, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(5%, -6%, 0) rotate(9deg) scale(1.1); }
    100% { transform: translate3d(11%, 4%, 0) rotate(-7deg) scale(1); }
}
.rk-glass--b, .rk-glass--c { opacity: 0; }
.rk-header.is-split :is(.rk-glass--b, .rk-glass--c) { opacity: 1; transition-delay: 0s, 0s, 0s, 0s; transition-duration: var(--dock-dur), var(--dock-dur), var(--dock-dur), .2s; }
.rk-header:not(.is-ready) .rk-glass { opacity: 0 !important; }
.rk-header.is-instant .rk-glass { transition: none !important; }

/* split layout */
.rk-header.is-split .rk-bar--a {
    position: fixed;
    /* the same distance from its edge as the account capsule and the toolbar dock from theirs */
    inset-inline-start: calc(var(--dock-gap) + env(safe-area-inset-left, 0px));
    top: calc(var(--dock-gap) + var(--safe-top));
    gap: 24px;
}
@media (min-width: 801px) {   /* slimmer than the top-of-page capsule, with more air at both ends */
    .rk-header.is-split .rk-bar--a { height: calc(var(--tool) + 4px); padding-block: 2px; padding-inline: 30px 24px; }
    /* the account capsule sits on the same vertical line as the toolbar dock below it (bar B) */
    .rk-header.is-split .rk-bar--c {
        position: fixed;
        inset-inline-end: calc(var(--dock-gap) + env(safe-area-inset-right, 0px));
        top: calc(var(--dock-gap) + var(--safe-top));
        height: calc(var(--tool) + 4px); padding: 2px; padding-inline-start: 6px;
    }
}
.rk-header.is-split .rk-bar--b {
    position: fixed;
    inset-inline-end: calc(var(--dock-gap) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: flex-end;
    width: var(--bar-h); height: auto;
    gap: 6px; padding: var(--bar-pad);
}
.rk-header.is-split .rk-nav { gap: 18px; }
.rk-header.is-split .rk-nav__dot { display: none; }
.rk-header.is-split .rk-nav__link { letter-spacing: 1.2px; }
.rk-header.is-tight .rk-nav { display: none; }
.rk-header.is-tight .rk-burger { display: inline-flex; }
.rk-header.is-tight .rk-bar--a { padding-inline-end: 4px; }

/* logo + nav */
.rk-logo { display: inline-flex; align-items: center; color: var(--fg); }
.rk-logo svg { height: 26px; width: auto; }
.rk-bar .rk-logo svg { height: 19px; }
.rk-bar .rk-logo { padding: 6px 0; border-radius: 6px; }
.rk-nav { display: flex; align-items: center; gap: 16px; }
.rk-nav__item { position: relative; }
.rk-nav__link {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--tool);
    font: 500 11px/1 var(--sans);
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-2);
    border-radius: 6px;
    transition: color .3s;
}
.rk-nav__link:hover, .rk-nav__link.is-current, .rk-nav__item:focus-within > .rk-nav__link { color: var(--fg); }
.rk-nav__link.is-current::after {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--rk-red); margin-inline-start: 2px;
}
.rk-nav__dot { width: 3px; height: 3px; flex: none; background: rgba(var(--fg-rgb), .22); border-radius: 50%; }

.rk-drop {
    position: absolute; top: calc(100% + var(--bar-pad) + 10px); left: 50%;
    transform: translate(-50%, 8px);
    min-width: 560px;
    padding: 22px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
    background: rgba(var(--panel-rgb), .9);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.rk-drop::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--bar-pad) + 14px); }   /* hover bridge */
.rk-nav__item:hover .rk-drop, .rk-nav__item:focus-within .rk-drop {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.rk-header.is-split .rk-drop { left: -14px; transform: translate(0, 8px); }
.rk-header.is-split .rk-nav__item:hover .rk-drop, .rk-header.is-split .rk-nav__item:focus-within .rk-drop { transform: translate(0, 0); }
/* rk-chrome.js measures each drop as it opens and slides it back inside the viewport (--drop-dx) */
.rk-drop { translate: var(--drop-dx, 0px) 0; max-width: calc(100vw - 32px); }
.rk-nav__item.is-dismissed .rk-drop { opacity: 0 !important; visibility: hidden !important; }
.rk-drop__label {
    grid-column: 1 / -1;
    font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-3); margin: 6px 0;
}
.rk-drop a { display: block; padding: 10px 12px; border-radius: 10px; transition: background .25s; }
.rk-drop a:hover, .rk-drop a:focus-visible { background: rgba(var(--fg-rgb), .06); }
.rk-drop strong { display: block; font-size: 13px; font-weight: 500; color: var(--fg); }
.rk-drop span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.rk-drop .rk-tag { display: inline-block; margin: 0; margin-inline-start: 6px; padding: 3px 6px; font-size: 9px; vertical-align: 1px; }
/* rich drop: the links, each with its own particle icon, then a particle preview at the inline end
   (right on LTR pages) that morphs to the hovered link (both drawn by rk-navicons.js) */
.rk-drop--rich { grid-template-columns: minmax(0, 1fr) 200px; gap: 0 20px; min-width: 720px; padding: 16px; }
.rk-drop__preview {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; align-items: flex-start;
    min-height: 260px; padding: 16px;
    border: 1px solid var(--line); border-radius: 14px;
    background: radial-gradient(120% 90% at 50% 30%, rgba(var(--fg-rgb), .06), transparent 70%);
}
.rk-drop__canvas { display: block; margin: 4px auto auto; }
.rk-drop .rk-drop__pt { margin-top: 14px; font-size: 15px; font-weight: 400; color: var(--fg); }
.rk-drop .rk-drop__pd { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }
.rk-drop__preview.is-swap :is(.rk-drop__pt, .rk-drop__pd) { animation: rk-drop-swap .45s var(--ease); }
@keyframes rk-drop-swap { from { opacity: 0; transform: translateY(6px); } }
.rk-drop__links { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; align-content: start; }
:is(.rk-drop, .rk-mobile__sub) a[data-ico] { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: center; }
:is(.rk-drop, .rk-mobile__sub) a[data-ico] .rk-ico { grid-row: 1 / span 2; }
:is(.rk-drop, .rk-mobile__sub) a[data-ico] > span { grid-column: 2; }
.rk-ico { display: block; width: 26px; height: 26px; }
.rk-ico__cv { display: block; }
/* the last menu (far end of the bar) opens towards the inside, so the wider panel never leaves the screen */
.rk-nav__item:last-child .rk-drop { left: auto; right: auto; inset-inline-end: -24px; transform: translate(0, 8px); }
.rk-nav__item:last-child:hover .rk-drop, .rk-nav__item:last-child:focus-within .rk-drop { transform: translate(0, 0); }
.rk-header.is-split .rk-nav__item:last-child .rk-drop { left: auto; right: auto; inset-inline-end: -14px; }
@media (prefers-reduced-motion: reduce) { .rk-drop__preview.is-swap :is(.rk-drop__pt, .rk-drop__pd) { animation: none; } }

/* tools (bar B) */
.rk-tool {
    position: relative; flex: none;
    width: var(--tool); height: var(--tool);
    display: inline-grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--fg);
    font: inherit;
    transition: background .25s, color .25s, box-shadow .3s;
}
.rk-tool:hover { background: rgba(var(--fg-rgb), .08); }
.rk-tool svg { width: 17px; height: 17px; }
.rk-tool--theme .i-sun { display: none; }
html[data-theme="light"] .rk-tool--theme .i-sun { display: block; }
html[data-theme="light"] .rk-tool--theme .i-moon { display: none; }
.rk-tool__badge {
    position: absolute; inset-inline-end: 3px; bottom: 4px;
    padding: 2px 3px; border-radius: 4px;
    font: 600 7.5px/1 var(--mono); letter-spacing: .4px; text-transform: uppercase;
    background: var(--fg); color: var(--bg);
}
.rk-tool--cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: auto; padding: 0; padding-inline: 20px 15px;
    border-radius: 999px;
    background: var(--rk-red-ui); color: #fff;
    font: 600 11px/1 var(--sans); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 10px 26px -12px rgba(247, 57, 54, .95), inset 0 1px 0 rgba(255, 255, 255, .22);
    margin-inline-start: 4px;
}
.rk-tool--cta:hover { background: #ff4b47; }
.rk-tool--cta svg { width: 15px; height: 15px; }
/* sign-in: an icon in the top capsule, icon + label in the split account capsule */
.rk-tool__text { display: none; }
.rk-header.is-split .rk-tool--login {
    width: auto; gap: 8px; padding-inline: 14px 16px;
    display: inline-flex; align-items: center; border-radius: 999px;
    font: 500 11px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
}
.rk-header.is-split .rk-tool--login svg { width: 15px; height: 15px; }
.rk-header.is-split .rk-tool__text { display: inline; }
.rk-header.is-snug .rk-tool--login { width: var(--tool); padding: 0; justify-content: center; }
.rk-header.is-snug .rk-tool__text { display: none; }
.rk-sep { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--line-2); }
.rk-header.is-split .rk-sep { width: 20px; height: 1px; margin: 2px 10px; }

/* labels: visible on hover and keyboard focus (never the only way to know what a tool does: aria-label + title) */
.rk-tip {
    position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translate(-50%, -4px);
    padding: 7px 10px; border-radius: 8px;
    background: rgba(var(--panel-rgb), .94); border: 1px solid var(--line-2);
    color: var(--fg);
    font: 500 10px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .25s var(--ease);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .5);
}
.rk-tool:hover > .rk-tip, .rk-tool:focus-visible > .rk-tip { opacity: 1; transform: translate(-50%, 0); }
.rk-header.is-split .rk-bar--b .rk-tip { top: 50%; left: auto; right: calc(100% + 16px); transform: translate(4px, -50%); }
.rk-header.is-split .rk-bar--b .rk-tool:hover > .rk-tip, .rk-header.is-split .rk-bar--b .rk-tool:focus-visible > .rk-tip { transform: translate(0, -50%); }
.rk-header:not(.is-split) .rk-tool--cta > .rk-tip,
.rk-tool[aria-expanded="true"] > .rk-tip { display: none; }
@media (hover: none) { .rk-tool:hover > .rk-tip { opacity: 0; } }

/* language popover (listbox) */
.rk-lang { position: relative; flex: none; }
.rk-lang__menu {
    position: absolute; z-index: 3;
    top: calc(100% + var(--bar-pad) + 10px); inset-inline-end: -10px;
    min-width: 210px; list-style: none;
    padding: 6px; border-radius: 16px;
    background: rgba(var(--panel-rgb), .94); border: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
    animation: rk-pop .28s var(--ease);
}
.rk-header.is-split .rk-lang__menu { top: auto; bottom: -6px; inset-inline-end: calc(100% + var(--bar-pad) + 12px); }
@keyframes rk-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.rk-lang__menu li {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    min-height: 40px; padding: 0 12px; border-radius: 10px;
    font-size: 14px; color: var(--ink-2);
    cursor: pointer; transition: background .2s, color .2s;
}
.rk-lang__menu li.is-active { background: rgba(var(--fg-rgb), .07); color: var(--fg); }
.rk-lang__menu li[aria-selected="true"] { color: var(--fg); }
.rk-lang__menu li[aria-selected="true"] .rk-lang__code::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--rk-red); margin-inline-end: 8px; vertical-align: 1px; }
.rk-lang__code { font: 500 10px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); }
.rk-lang__menu:focus-visible { outline-offset: 2px; }

/* menu button */
.rk-burger {
    display: none; align-items: center; gap: 10px;
    height: var(--tool); padding: 0; padding-inline: 14px 16px;
    border-radius: 999px; border: 0;   /* part of the capsule's glass, not a pill inside it */
    background: transparent; color: var(--fg);
    font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase;
    transition: background .25s;
}
.rk-burger:hover, .rk-burger[aria-expanded="true"] { background: rgba(var(--fg-rgb), .08); }
.rk-burger__i { position: relative; width: 14px; height: 8px; }
.rk-burger__i i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.rk-burger__i i:first-child { top: 0; }
.rk-burger__i i:last-child { top: 6.5px; }
.rk-burger[aria-expanded="true"] .rk-burger__i i:first-child { top: 3.25px; transform: rotate(45deg); }
.rk-burger[aria-expanded="true"] .rk-burger__i i:last-child { top: 3.25px; transform: rotate(-45deg); }

/* full-screen menu */
html.rk-menu-open { overflow: hidden; }
.rk-header.is-menu :is(.rk-bar--b, .rk-glass--b, .rk-bar--c, .rk-glass--c) { opacity: 0 !important; visibility: hidden; }
.rk-mobile {
    position: fixed; inset: 0; z-index: 49;
    padding: calc(var(--header-h) + 28px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) calc(22px + env(safe-area-inset-left, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: rgba(var(--bg-rgb), .94);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    opacity: 0; visibility: hidden;
    transition: opacity .35s, visibility .35s;
}
.rk-mobile.is-open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.rk-mobile__inner { max-width: 620px; margin: 0 auto; transform: translateY(14px); transition: transform .55s var(--ease); }
.rk-mobile.is-open .rk-mobile__inner { transform: none; }
.rk-mobile__group, .rk-mobile__top { border-bottom: 1px solid var(--line); }
.rk-mobile__group > summary, .rk-mobile__top {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; list-style: none; cursor: pointer;
    font-size: 24px; font-weight: 300; letter-spacing: -.01em; color: var(--fg);
}
.rk-mobile__group > summary::-webkit-details-marker { display: none; }
.rk-mobile__group > summary::after { content: '+'; font: 400 18px/1 var(--mono); color: var(--ink-3); transition: transform .4s var(--ease), color .3s; }
.rk-mobile__group[open] > summary::after { transform: rotate(45deg); color: var(--rk-red); }
.rk-mobile__top[aria-current] { color: var(--fg); }
.rk-mobile__top[aria-current]::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rk-red); }
.rk-mobile__sub { padding: 0 0 18px; display: grid; gap: 2px; }
.rk-mobile__sub .rk-drop__label { margin: 14px 0 4px; }
.rk-mobile__sub a { display: block; padding: 10px 0; min-height: 44px; }
.rk-mobile__sub strong { display: block; font-size: 15px; font-weight: 400; color: var(--fg); }
.rk-mobile__sub span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.rk-mobile__sub .rk-tag { display: inline-block; margin-inline-start: 8px; padding: 3px 6px; font-size: 9px; vertical-align: 2px; }
.rk-mobile__actions { display: grid; gap: 10px; margin-top: 30px; }
.rk-mobile__actions .rk-btn { justify-content: center; min-height: 48px; }
.rk-btn__i { width: 15px; height: 15px; }
.rk-mobile__prefs { display: grid; gap: 22px; margin-top: 34px; }
.rk-mobile__prefs > div { display: grid; gap: 12px; justify-items: start; }
.rk-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.rk-langs a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1px solid var(--line-2); border-radius: 999px;
    font-size: 14px; color: var(--ink-2);
}
.rk-langs a[aria-current] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.rk-mobile .rk-seg button { min-height: 40px; padding: 0 16px; }

/* ---------- Buttons / tags ---------- */
.rk-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    border-radius: 999px;
    font: 600 11px/1 var(--sans);
    letter-spacing: 1.2px; text-transform: uppercase;
    transition: transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rk-btn:hover { transform: translateY(-1px) scale(1.03); }
/* phones: long CTA labels (FR/DE/ES run ~35+ chars) wrap inside the pill instead of overflowing */
@media (max-width: 480px) { .rk-btn { white-space: normal; text-align: center; line-height: 1.35; } }
/* touch screens: every button is at least a 44px target */
@media (max-width: 800px) { .rk-btn, .rk-btn--sm { min-height: 44px; justify-content: center; } }
/* press kit type specimen: the sample hash breaks rather than poking out of its card */
.pm-type__row p { overflow-wrap: anywhere; }
.rk-btn--primary { background: var(--rk-red-ui); color: #fff; box-shadow: 0 10px 30px -10px rgba(247,57,54,0.7); }
.rk-btn--primary:hover { background: #C4211E; box-shadow: 0 14px 40px -10px rgba(247,57,54,0.9); }
.rk-btn--light { background: var(--fg); color: var(--bg); }
.rk-btn--ghost { border-color: var(--line-2); color: var(--fg); background: rgba(var(--fg-rgb),0.02); }
.rk-btn--ghost:hover { border-color: rgba(var(--fg-rgb),0.5); }
.rk-btn__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.rk-btn--sm { padding: 10px 18px; font-size: 10px; }

.rk-badge {
    display: inline-flex; align-items: center; gap: 10px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--ink-2);
}
.rk-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--rk-red);
    box-shadow: 0 0 12px var(--rk-red);
}
.rk-badge--blue::before { background: var(--rk-blue); box-shadow: 0 0 12px var(--rk-blue); }
.rk-badge--green::before { background: var(--rk-green); box-shadow: 0 0 12px var(--rk-green); }
.rk-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px; border-radius: 6px;
    font: 500 10px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid var(--line-2); color: var(--ink-2);
    background: rgba(var(--fg-rgb),0.03);
    white-space: nowrap;
}
.rk-tag--red { color: var(--tag-red); border-color: rgba(247,57,54,0.35); background: rgba(247,57,54,0.08); }
.rk-tag--green { color: var(--tag-green); border-color: rgba(0,212,126,0.35); background: rgba(0,212,126,0.08); }
.rk-tag--blue { color: var(--tag-blue); border-color: rgba(76,29,255,0.45); background: rgba(76,29,255,0.12); }

/* ---------- Typography ---------- */
.rk-display {
    font-weight: 300;
    font-size: clamp(48px, 7.4vw, 124px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--fg);
}
.rk-h1 {
    font-weight: 300;
    font-size: clamp(40px, 5.6vw, 92px);
    line-height: 1.0;
    letter-spacing: -0.03em;
}
.rk-h2 {
    font-weight: 300;
    font-size: clamp(34px, 4.2vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.028em;
}
.rk-h3 {
    font-weight: 400;
    font-size: clamp(22px, 1.8vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.rk-h4 { font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: -0.005em; }
.rk-accent {
    background: var(--grad-red);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 400;
}
.rk-accent--brand { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; }
.rk-accent--blue { background: linear-gradient(100deg, #8f7bff, #4C1DFF); -webkit-background-clip: text; background-clip: text; }
.rk-accent--green { background: linear-gradient(100deg, #7dffc8, #00D47E); -webkit-background-clip: text; background-clip: text; }
.rk-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; font-weight: 300; color: var(--ink-2); }
.rk-body { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--ink-2); }
.rk-small { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.rk-mono { font-family: var(--mono); }
.rk-kicker {
    font: 500 11px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);
}
.rk-kicker b { color: var(--rk-red); font-weight: 500; }

/* ---------- Per-letter split reveal ---------- */
.rk-split .word { display: inline-block; white-space: nowrap; }
.rk-split .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(12px);
    transition: opacity .9s var(--ease-2), transform .9s var(--ease-2), filter .9s var(--ease-2);
}
.rk-split.is-in .char { opacity: 1; transform: none; filter: blur(0); }
/* split accents are painted per-char by rk-chrome.js */
.rk-accent.is-split { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; }
/* owner decision: gradients only on display titles (.rk-display, .rk-h1); section titles and smaller get a solid accent
   (--brand becomes the brand red). rk-chrome.js skips the per-char gradient inside these headings */
.rk-h2 .rk-accent, .rk-h3 .rk-accent, .rk-h4 .rk-accent { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent-red); }
.rk-h2 .rk-accent--blue, .rk-h3 .rk-accent--blue, .rk-h4 .rk-accent--blue { color: var(--accent-blue); }
.rk-h2 .rk-accent--green, .rk-h3 .rk-accent--green, .rk-h4 .rk-accent--green { color: var(--accent-green); }

/* hidden only while the chrome script is running (html.rk-anim), so content stays readable without JS */
.rk-anim .rk-reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s var(--ease-2), transform .9s var(--ease-2);
    transition-delay: var(--d, 0s);
}
.rk-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Layout ---------- */
.rk-main { position: relative; z-index: 5; }
.rk-shell { padding-left: var(--shell); padding-right: var(--shell); }
.rk-section {
    position: relative;
    padding: 160px var(--shell);
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
}
.rk-section--auto { min-height: 0; }
.rk-section--tight { padding-top: 100px; padding-bottom: 100px; }
.rk-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
}
.rk-cols > * { padding: 0 20px; }
.rk-cols > :first-child { padding-inline-start: 0; }
.rk-span-2 { grid-column-end: span 2; }
.rk-span-3 { grid-column-end: span 3; }
.rk-span-4 { grid-column: 1 / -1; }
.rk-start-2 { grid-column-start: 2; }
.rk-start-3 { grid-column-start: 3; }
.rk-stack > * + * { margin-top: 24px; }
.rk-stack-sm > * + * { margin-top: 12px; }
.rk-stack-lg > * + * { margin-top: 40px; }
.rk-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rk-maxw { max-width: 640px; }
.rk-maxw-sm { max-width: 460px; }
.rk-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.rk-hero {
    position: relative; min-height: 100vh;
    padding: calc(var(--header-h) + 80px) var(--shell) 64px;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.rk-hero__meta {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
    margin-top: 48px; flex-wrap: wrap;
}
.rk-scrollcue {
    display: inline-flex; align-items: center; gap: 12px;
    font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);
}
.rk-scrollcue i {
    width: 1px; height: 38px; background: linear-gradient(to bottom, var(--fg), transparent);
    animation: rk-cue 2.2s var(--ease) infinite; transform-origin: top;
}
@keyframes rk-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.rk-breadcrumb { display: flex; flex-wrap: wrap; row-gap: 8px; gap: 10px; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 28px; }
.rk-breadcrumb a:hover { color: var(--fg); }

/* ---------- Pinned story (Laocoön mechanic, scoped) ---------- */
.rk-story { position: relative; }
.rk-story__pin {
    position: sticky; top: 0; height: 100vh;
    overflow: hidden;
    padding: calc(var(--header-h) + 40px) var(--shell) 64px;
}
.rk-story__head { position: relative; z-index: 2; }
.rk-step {
    position: absolute; left: var(--shell); right: var(--shell); bottom: 12%;
    pointer-events: none;
}
.rk-anim .rk-step .rk-step__body { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease-2), transform .8s var(--ease-2); transition-delay: .35s; }
.rk-step.is-active { pointer-events: auto; }
.rk-step__body > p { grid-column: span 2; padding-inline-start: 0; }
.rk-anim .rk-step.is-active .rk-step__body { opacity: 1; transform: none; }
.rk-step .rk-split .char { transition-delay: calc(var(--i, 0) * 0.03s); }
.rk-step:not(.is-active) .rk-split .char { opacity: 0; transform: translateY(0.45em); filter: blur(12px); transition-delay: 0s; }
.rk-step.is-active .rk-split .char { opacity: 1; transform: none; filter: blur(0); }
.rk-step__num {
    font: 500 12px/1 var(--mono); letter-spacing: 2px; color: var(--rk-red); text-transform: uppercase;
    margin-bottom: 22px; display: inline-flex; gap: 10px; align-items: center;
    line-height: 1.5; text-wrap: balance;   /* a long label wraps in even lines, never a year alone on the second */
    opacity: 0; transition: opacity .6s;
}
.rk-step.is-active .rk-step__num { opacity: 1; }
.rk-story__counter {
    position: absolute; inset-inline-start: calc(var(--shell) + var(--col)); top: calc(var(--header-h) + 40px);
    font: 500 11px/1 var(--mono); letter-spacing: 2px; color: var(--ink-3);
}
.rk-story__counter b { color: var(--fg); font-weight: 500; }
.rk-story__bar { position: absolute; inset-inline-start: calc(var(--shell) + 74px); inset-inline-end: var(--shell); bottom: 36px; height: 1px; background: var(--line); } /* starts after the ‹ › buttons */
/* scene navigation (rk-chrome.js): subtle ‹ › at the start of the progress bar; the ← → keys do the same */
.rk-story__nav { position: absolute; z-index: 3; inset-inline-start: var(--shell); bottom: 22px; display: flex; gap: 6px; }
.rk-story__nav button {
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--line-2); border-radius: 50%; cursor: pointer;
    background: rgba(var(--bg-rgb), .35); color: var(--ink-3);
    transition: color .25s, border-color .25s, background-color .25s, opacity .25s;
}
.rk-story__nav button:hover { color: var(--fg); border-color: rgba(var(--fg-rgb), .35); background: rgba(var(--fg-rgb), .06); }
.rk-story__nav button:focus-visible { outline: 2px solid var(--rk-red); outline-offset: 2px; }
.rk-story__nav button:disabled { opacity: .28; cursor: default; pointer-events: none; }
.rk-story__nav svg { width: 14px; height: 14px; }
[dir="rtl"] .rk-story__nav svg { transform: scaleX(-1); }
@media (max-width: 800px) {   /* touch screens swipe; the buttons would sit on the scene's copy */
    .rk-story__nav { display: none; }
    .rk-story__bar { inset-inline-start: var(--shell); }
}
.rk-story__bar i { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; background: var(--rk-red); box-shadow: 0 0 10px var(--rk-red); }

/* ---------- Floating HUD chips (used inside story steps) ---------- */
.rk-hud {
    position: absolute; z-index: 3;
    padding: 12px 14px;
    border: 1px solid var(--line-2);
    background: rgba(var(--panel-rgb),0.6);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    font: 500 11px/1.5 var(--mono); color: var(--ink-2);
    opacity: 0; transform: translateY(12px) scale(.98);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--d, .6s);
    pointer-events: none;
    min-width: 180px;
}
.rk-step.is-active .rk-hud, .rk-hud.is-in { opacity: 1; transform: none; }
.rk-hud__k { display: block; font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.rk-hud__v { color: var(--fg); }
.rk-hud__v.is-red { color: var(--tag-red); }
.rk-hud__v.is-green { color: var(--tag-green); }
/* a HUD value can cite its source: the article number links to the section of the pillar that explains it.
   The chip itself stays click-through; only its links take the pointer, and only in the scene on screen. */
.rk-hud a { position: relative; color: inherit; border-bottom: 1px solid rgba(247,57,54,.5); transition: color .2s, border-color .2s; }
.rk-hud a::before { content: ''; position: absolute; inset: -10px -3px; }   /* a larger hit area than the 11px text */
.rk-step.is-active .rk-hud a, .rk-hud.is-in a { pointer-events: auto; }
.rk-hud a:hover { color: var(--fg); border-bottom-color: var(--rk-red); }
.rk-hud a:focus-visible { outline: 2px solid var(--rk-red); outline-offset: 3px; border-radius: 2px; }

/* ---------- Question chips (a.rk-ask) ----------
   A link written as the question the reader has at that moment ("How is a document verified?"), never
   "Learn more", leading to the page that answers it. Two or three per page at most.
   Markup: <div class="rk-asks"><a class="rk-ask" href="/verify#como">How is a document verified?</a></div>
   - inside a pinned story scene add rk-step__body to .rk-asks so it arrives with the scene's copy
   - the chips follow the text alignment of the block they sit in (centred scene, start-aligned split scene)
   - an external answer (docs) takes target="_blank" rel="noopener" and gets the ↗ arrow */
.rk-asks { margin: 18px -4px 0; }
@media (max-width: 800px) { .rk-asks { margin-inline: 0; } .rk-ask { margin-inline: 0 8px; } }   /* no -4px bleed past a phone screen edge */
.rk-ask {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 44px; max-width: calc(100% - 8px); margin: 4px; padding: 10px 16px 10px 18px;
    border: 1px solid var(--line-2); border-radius: 22px;
    background: rgba(var(--panel-rgb), .6);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font: 400 14px/1.4 var(--sans); color: var(--fg); text-align: start; vertical-align: top;
    transition: border-color .25s, background-color .25s;
}
[dir="rtl"] .rk-ask { padding: 10px 18px 10px 16px; }
.rk-ask::after { content: '→'; flex: none; font: 500 13px/1 var(--mono); color: var(--tag-red); transition: transform .3s var(--ease); }
[dir="rtl"] .rk-ask::after { content: '←'; }
.rk-ask[target="_blank"]::after { content: '↗'; }
[dir="rtl"] .rk-ask[target="_blank"]::after { content: '↖'; }
.rk-ask:hover { border-color: rgba(247,57,54,.5); background: rgba(var(--panel-rgb), .82); }
.rk-ask:hover::after { transform: translateX(3px); }
[dir="rtl"] .rk-ask:hover::after { transform: translateX(-3px); }
.rk-ask[target="_blank"]:hover::after { transform: translate(2px, -2px); }
[dir="rtl"] .rk-ask[target="_blank"]:hover::after { transform: translate(-2px, -2px); }
.rk-ask:focus-visible { outline: 2px solid var(--rk-red); outline-offset: 3px; }

/* ---------- Cards ---------- */
.rk-card {
    position: relative;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(var(--fg-rgb),0.035), rgba(var(--fg-rgb),0.01));
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: border-color .4s, transform .5s var(--ease), background .4s;
    overflow: hidden;
}
.rk-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(247,57,54,0.12), transparent 45%);
    opacity: 0; transition: opacity .4s;
}
.rk-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.rk-card.rk-reveal { transition: opacity .9s var(--ease-2), transform .9s var(--ease-2), border-color .4s, background .4s; transition-delay: var(--d, 0s); }
.rk-card.rk-reveal.is-in:hover { transform: translateY(-3px); transition-delay: 0s; }
.rk-card:hover::after { opacity: 1; }
.rk-card__icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: grid; place-items: center;
    border: 1px solid var(--line-2);
    background: rgba(var(--fg-rgb),0.03);
    color: var(--fg); margin-bottom: 22px;
}
.rk-card__icon svg { width: 18px; height: 18px; }
.rk-card__num { font: 500 11px/1 var(--mono); letter-spacing: 1.5px; color: var(--ink-3); margin-bottom: 18px; display: block; }
.rk-card h3, .rk-card h4 { margin-bottom: 10px; }
.rk-card p { font-size: 14px; line-height: 1.65; color: var(--ink-2); font-weight: 300; }
.rk-card--link::before {
    content: '→'; position: absolute; top: 24px; inset-inline-end: 26px; color: var(--ink-3);
    transition: transform .4s var(--ease), color .3s;
}
.rk-card--link:hover::before { transform: translateX(4px); color: var(--fg); }

.rk-cards { display: grid; gap: 16px; }
.rk-cards--2 { grid-template-columns: repeat(2, 1fr); }
.rk-cards--3 { grid-template-columns: repeat(3, 1fr); }
.rk-cards--4 { grid-template-columns: repeat(4, 1fr); }

/* Divided list (editorial alternative to cards) */
.rk-list { border-top: 1px solid var(--line); }
.rk-list__row {
    display: grid; grid-template-columns: 80px 1fr 1.3fr; gap: 24px;
    padding: 28px 0; border-bottom: 1px solid var(--line);
    align-items: baseline;
    transition: background .3s, padding .4s var(--ease);
}
.rk-list__row:hover { padding-inline-start: 12px; }
.rk-list__row .rk-kicker { color: var(--rk-red); }

/* ---------- Stats ---------- */
.rk-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.rk-stat { padding: 30px 0 0; padding-inline-end: 20px; }
.rk-stat + .rk-stat { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.rk-stat__k { font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.rk-stat__v { font-size: clamp(40px, 4.4vw, 72px); font-weight: 200; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 10px; color: var(--fg); }
.rk-stat__l { font-size: 13px; color: var(--ink-2); font-weight: 300; }

/* ---------- Code / proof panels ---------- */
.rk-code {
    font: 400 12.5px/1.75 var(--mono);
    color: var(--ink-2);
    background: rgba(var(--panel-rgb),0.72);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 20px 22px;
    overflow: auto;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rk-code .k { color: var(--tag-blue); }
.rk-code .s { color: var(--tag-green); }
.rk-code .r { color: var(--tag-red); }
.rk-code .c { color: var(--ink-3); }
.rk-code__bar { display: flex; gap: 6px; margin-bottom: 14px; }
.rk-code__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--fg-rgb),0.14); }

/* ---------- Logos marquee ---------- */
.rk-marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.rk-marquee__track { display: flex; gap: 72px; width: max-content; animation: rk-marquee 48s linear infinite; align-items: center; }
.rk-marquee:hover .rk-marquee__track { animation-play-state: paused; }
.rk-marquee img { height: 30px; width: auto; opacity: .6; filter: grayscale(1) brightness(1.6); transition: opacity .3s, filter .3s; }
.rk-marquee img:hover { opacity: 1; filter: none; }
@keyframes rk-marquee { to { transform: translateX(-50%); } }

/* ---------- Quote ---------- */
.rk-quote { font-size: clamp(22px, 2.4vw, 38px); font-weight: 300; line-height: 1.35; letter-spacing: -0.015em; color: var(--fg); }
.rk-quote__by { margin-top: 28px; display: flex; gap: 14px; align-items: center; }
.rk-quote__by strong { font-weight: 500; }
.rk-quote__by span { color: var(--ink-3); font-size: 13px; }

/* ---------- Pricing ---------- */
.rk-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rk-plan { display: flex; flex-direction: column; gap: 16px; }
.rk-plan__price { font-size: 48px; font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.rk-plan__price small { font-size: 13px; color: var(--ink-3); letter-spacing: 0; font-weight: 400; }
.rk-plan.is-popular { border-color: rgba(247,57,54,0.5); background: linear-gradient(180deg, rgba(247,57,54,0.10), rgba(var(--fg-rgb),0.01)); }
.rk-plan ul { list-style: none; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.rk-plan li::before { content: '✓'; color: var(--tag-green); margin-inline-end: 10px; font-family: var(--mono); }
.rk-plan .rk-btn { margin-top: auto; justify-content: center; }

/* ---------- FAQ ---------- */
.rk-faq details { border-bottom: 1px solid var(--line); overflow-x: clip; }
.rk-faq summary {
    list-style: none; padding: 26px 0; display: flex; justify-content: space-between; gap: 20px;
    font-size: clamp(17px, 1.4vw, 22px); font-weight: 300; color: var(--fg);
}
.rk-faq summary::-webkit-details-marker { display: none; }
.rk-faq summary::after { content: '+'; flex: none; display: inline-block; width: 1em; text-align: center; font-family: var(--mono); color: var(--ink-3); transition: transform .4s var(--ease); }
.rk-faq details[open] summary::after { transform: rotate(45deg); color: var(--rk-red); }
.rk-faq details p { padding: 0 0 26px; max-width: 760px; color: var(--ink-2); font-weight: 300; }

/* ---------- Forms ---------- */
.rk-field { display: grid; gap: 8px; }
.rk-field label { font: 500 10px/1 var(--mono); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); }
.rk-input, .rk-select, .rk-textarea {
    width: 100%; padding: 14px 16px; border-radius: 10px;
    border: 1px solid rgba(var(--fg-rgb), .3); background: rgba(var(--fg-rgb),0.03);   /* 3:1 against the page */
    color: var(--fg); font: 300 15px/1.4 var(--sans);
    transition: border-color .3s, background .3s;
}
.rk-input:focus, .rk-select:focus, .rk-textarea:focus { outline: none; border-color: var(--rk-red); background: rgba(247,57,54,0.04); }
.rk-input:focus-visible, .rk-select:focus-visible, .rk-textarea:focus-visible { outline: 3px solid rgba(247,57,54,0.35); outline-offset: 2px; }
.rk-textarea { min-height: 140px; resize: vertical; }
.rk-select option { background: rgb(var(--panel-rgb)); }
select.rk-select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] select.rk-select { background-position: 17px 52%, 22px 52%; }

/* custom select (rk-chrome.js enhances select.rk-select on mouse/trackpad devices) */
.rk-sel { position: relative; }
.rk-sel__native { position: absolute; inset: 0; width: 100%; max-width: 100%; min-width: 0; opacity: 0; pointer-events: none; }
.rk-sel__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: start; cursor: pointer; }
.rk-sel__btn.is-placeholder .rk-sel__val { color: var(--ink-3); }
.rk-sel__btn::after { content: ''; flex: none; width: 7px; height: 7px; margin-inline-end: 4px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
    transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease), border-color .3s; }
.rk-sel.is-open .rk-sel__btn { border-color: var(--rk-red); background: rgba(247,57,54,0.04); }
.rk-sel.is-open .rk-sel__btn::after { transform: translateY(2px) rotate(-135deg); border-color: var(--fg); }
.rk-sel__list { position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
    max-height: 288px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line-2);
    background: rgba(var(--panel-rgb), 0.96); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 18px 50px rgba(0,0,0,0.35); outline: none; animation: rk-sel-in .18s var(--ease) both; }
@keyframes rk-sel-in { from { opacity: 0; transform: translateY(-4px); } }
.rk-sel__opt { position: relative; padding: 10px 12px; padding-inline-end: 34px; border-radius: 8px; color: var(--ink); font: 300 15px/1.35 var(--sans); cursor: pointer; }
.rk-sel__opt.is-active { background: rgba(var(--fg-rgb), 0.07); color: var(--fg); }
.rk-sel__opt[aria-selected="true"] { color: var(--fg); }
.rk-sel__opt[aria-selected="true"]::after { content: ''; position: absolute; inset-inline-end: 14px; top: 50%; width: 5px; height: 9px;
    border-right: 1.5px solid var(--rk-red); border-bottom: 1.5px solid var(--rk-red); transform: translateY(-60%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .rk-sel__list { animation: none; } }

/* ---------- Tables ---------- */
.rk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rk-table th, .rk-table td { text-align: start; padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rk-table th { font: 500 10px/1 var(--mono); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); }
.rk-table td { color: var(--ink-2); font-weight: 300; }
.rk-table td:first-child { color: var(--fg); font-weight: 400; }

/* ---------- Prose (legal, blog) ---------- */
.rk-prose { max-width: 740px; font-size: 17px; line-height: 1.8; font-weight: 300; color: var(--ink-2); }
.rk-prose h2 { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; color: var(--fg); margin: 56px 0 18px; line-height: 1.2; }
.rk-prose h3 { font-size: 21px; font-weight: 400; color: var(--fg); margin: 36px 0 12px; }
.rk-prose p + p { margin-top: 18px; }
.rk-prose ul, .rk-prose ol { margin: 18px 0; margin-inline-start: 22px; display: grid; gap: 8px; }
.rk-prose strong { color: var(--fg); font-weight: 500; }
.rk-prose a { color: var(--fg); border-bottom: 1px solid var(--rk-red); }
.rk-prose blockquote { border-inline-start: 2px solid var(--rk-red); padding: 4px 0; padding-inline-start: 22px; margin: 28px 0; color: var(--fg); font-size: 20px; }
.rk-prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 14px; }
.rk-prose th, .rk-prose td { text-align: start; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rk-prose th { font: 500 10px/1.4 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.rk-prose code { font-family: var(--mono); font-size: 14px; color: var(--tag-blue); }

/* ---------- CTA band ---------- */
.rk-cta {
    position: relative; padding: 180px var(--shell) 140px; text-align: center; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.rk-cta .rk-row { justify-content: center; }

/* ---------- Footer ---------- */
.rk-footer { position: relative; z-index: 5; }
/* empty, transparent window: the fixed WebGL sculpture forms the ROOTKey logo here (data-stage="logo") */
.rk-footer__stage { position: relative; height: clamp(300px, 42vh, 480px); pointer-events: none; }
.rk-footer__body {
    position: relative;
    padding: 72px var(--shell) calc(30px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, rgba(var(--bg-rgb), .55), var(--bg) 240px);
}
.rk-footer__top { display: grid; grid-template-columns: minmax(240px, 1.25fr) 4fr; gap: 56px; }
.rk-footer__brand { display: grid; align-content: start; justify-items: start; gap: 18px; }
.rk-footer__brand .rk-logo svg { height: 20px; }
.rk-footer__brand p { font-size: 13px; color: var(--ink-3); max-width: 320px; line-height: 1.65; }
.rk-footer__contact { list-style: none; display: grid; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.rk-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.rk-footer__contact svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--ink-3); }
.rk-footer__contact a:hover { color: var(--fg); }
.rk-footer__contact small { display: block; font-size: 11px; color: var(--ink-3); }
.rk-footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.rk-footer__h { font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.rk-footer ul { list-style: none; }
.rk-footer__col ul { display: grid; gap: 10px; }
.rk-footer__col a { font-size: 13px; color: var(--ink-2); transition: color .3s; }
.rk-footer__col a:hover { color: var(--fg); }
.rk-footer__prefs {
    margin-top: 64px; padding: 22px 0;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px;
}
.rk-footer__pref { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rk-footer__k { font: 500 10px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); }
.rk-footer__langs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rk-footer__langs a, .rk-footer__social a { font-size: 12px; color: var(--ink-3); transition: color .3s; }
.rk-footer__langs a:hover, .rk-footer__social a:hover { color: var(--fg); }
.rk-footer__langs a[aria-current] { color: var(--fg); }
.rk-footer__social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rk-footer__bottom {
    padding-top: 22px; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px;
    font-size: 12px; color: var(--ink-3);
}
.rk-footer__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.rk-footer__meta a:hover { color: var(--fg); }
/* "Cookie settings" opens the consent banner: a button that reads like the links beside it */
.rk-footer__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; transition: color .3s; }
.rk-footer__cookies:hover { color: var(--fg); }
.rk-footer__status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .4px; }
.rk-footer__status svg { width: 14px; height: 14px; }
/* keep the bottom rows clear of the floating toolbar (bottom-right; bottom-left on RTL pages) */
.rk-footer__prefs, .rk-footer__bottom { padding-inline-end: 84px; }

/* ---------- Misc ---------- */
.rk-divider { height: 1px; background: var(--line); margin: 60px 0; }
.rk-hash { font-family: var(--mono); color: var(--fg); letter-spacing: 0.5px; }
.rk-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-green); box-shadow: 0 0 0 0 rgba(0,212,126,0.6); animation: rk-pulse 2s infinite; }
@keyframes rk-pulse { 70% { box-shadow: 0 0 0 10px rgba(0,212,126,0); } 100% { box-shadow: 0 0 0 0 rgba(0,212,126,0); } }
.rk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-tab {
    padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2);
    font: 500 11px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2);
    background: transparent; transition: all .3s;
}
.rk-tab.is-active, .rk-tab:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rk-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =====================================================================
   Technical page layout - <body data-layout="doc">
   For pages people open to get an answer (regulation pillars, pricing detail, verify, legal): no particle
   stage, no letter-by-letter titles, nothing pinned to the scroll, nothing waiting to be revealed.
   The page is complete at rest: the question, a short citable answer, the key facts, then the detail,
   with an index on one side and a single next step on the other.
   Markup: main.rk-main > .rk-doc > .rk-doc__head + .rk-doc__toc + .rk-doc__body + .rk-doc__aside
   ===================================================================== */
body[data-layout="doc"] :is(#rk-stage, .rk-stage-veil, .rk-footer__stage) { display: none; }
/* the music is driven by the stage (rk-stage.js loads rk-sound.js), which these pages leave out: no sound controls */
body[data-layout="doc"] :is(.rk-tool--sound, .rk-sheet__sound, .rk-mobile__prefs > div:has(> [data-sound-seg])) { display: none; }
.rk-doc {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 270px;
    grid-template-areas: "toc head head" "toc body aside";
    column-gap: 56px; row-gap: 48px;
    max-width: 1320px; margin: 0 auto;
    padding: calc(var(--header-h) + 64px) var(--shell) 96px;
}
.rk-doc__head { grid-area: head; display: grid; gap: 22px; max-width: 840px; }
.rk-doc__head .rk-breadcrumb { margin-bottom: 0; }
.rk-doc__title { font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.025em; color: var(--fg); text-wrap: balance; }
.rk-doc__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 11px/1.4 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.rk-doc__answer {
    display: grid; gap: 10px; padding: 20px 24px;
    border: 1px solid var(--line-2); border-inline-start: 3px solid var(--rk-red); border-radius: 12px;
    background: rgba(var(--panel-rgb), .55);
}
.rk-doc__answer .rk-kicker { color: var(--tag-red); }
.rk-doc__answer p { font-size: 17px; line-height: 1.65; font-weight: 400; color: var(--fg); }
.rk-doc__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.rk-doc__fact { display: grid; gap: 6px; align-content: start; padding: 16px 18px; }
.rk-doc__fact + .rk-doc__fact { border-inline-start: 1px solid var(--line); }
.rk-doc__fact dt { font: 500 10px/1.3 var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-3); }
.rk-doc__fact dd { font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); font-variant-numeric: tabular-nums; }
.rk-doc__fact small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; font-weight: 300; letter-spacing: 0; color: var(--ink-3); }

/* index: follows the section being read (rk-chrome.js setupToc) */
.rk-doc__toc { grid-area: toc; }
.rk-doc__toc nav { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 2px; }
.rk-doc__toc .rk-kicker { margin-bottom: 12px; }
.rk-doc__toc a {
    display: block; padding: 6px 0; padding-inline-start: 14px;
    border-inline-start: 1px solid var(--line);
    font-size: 13px; line-height: 1.4; color: var(--ink-3);
    transition: color .2s, border-color .2s;
}
.rk-doc__toc a:hover { color: var(--fg); }
.rk-doc__toc a.is-active { color: var(--fg); border-inline-start: 2px solid var(--rk-red); padding-inline-start: 13px; }

/* content */
.rk-doc__body { grid-area: body; min-width: 0; display: grid; gap: 64px; align-content: start; }
.rk-doc__sec { display: grid; gap: 18px; align-content: start; scroll-margin-top: calc(var(--header-h) + 24px); }
.rk-doc__sec > * { min-width: 0; }
/* blog article: folded index above the text where the side index is hidden (rk-chrome.js setupArticleToc) */
.ar-mtoc { display: none; }
@media (max-width: 1100px) {
    .ar-mtoc { display: block; max-width: 740px; margin: 0 0 36px; border: 1px solid var(--line); border-radius: 12px; }
    .ar-mtoc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px; cursor: pointer; list-style: none; font: 500 11px/1.3 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2); }
    .ar-mtoc summary::-webkit-details-marker { display: none; }
    .ar-mtoc summary::after { content: '+'; font-size: 16px; color: var(--ink-3); transition: transform .2s; }
    .ar-mtoc[open] summary::after { transform: rotate(45deg); }
    .ar-mtoc .ar-toc { margin: 0 18px 16px; }
}   /* wide tables scroll inside their wrapper instead of widening the page */
/* the Talk tab (rk-chrome.js) lands on the contact form card itself, clear of the floating header */
#ct-form { scroll-margin-top: calc(var(--header-h) + 24px); }
.rk-doc__sec h2 { font-weight: 300; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
.rk-doc__sec h3 { margin-top: 10px; font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--fg); }
.rk-doc__sec > p { max-width: 72ch; font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--ink-2); }
.rk-doc__table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.rk-doc__table .rk-table { min-width: 600px; }
.rk-doc__table .rk-table tr:last-child td { border-bottom: 0; }
.rk-doc__table .rk-table td { line-height: 1.55; }
.rk-doc__table .rk-table td:first-child { white-space: nowrap; }
.rk-doc__table .rk-table td:first-child small { display: block; margin-top: 4px; font: 500 10px/1.3 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); white-space: normal; }
.rk-doc__table .rk-mono { font-size: 13px; color: var(--fg); }
.rk-doc__note {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: 12px;
    font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--ink-2);
}
.rk-doc__note > [data-icon] { flex: none; display: inline-flex; width: 20px; height: 20px; margin-top: 2px; color: var(--tag-green); }
.rk-doc__note > [data-icon] svg { width: 100%; height: 100%; }
.rk-doc__note a, .rk-doc__sec > p a, .rk-doc__defs a, .rk-doc__table td a { color: var(--fg); border-bottom: 1px solid var(--rk-red); }
.rk-doc__defs { display: grid; border-top: 1px solid var(--line); }
.rk-doc__defs > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 6px 28px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rk-doc__defs dt { font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--fg); }
.rk-doc__defs dd { font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--ink-2); }
.rk-doc__steps { list-style: none; counter-reset: rk-step; display: grid; border-top: 1px solid var(--line); }
.rk-doc__steps li { counter-increment: rk-step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rk-doc__steps li::before { content: counter(rk-step, decimal-leading-zero); grid-row: span 2; font: 500 12px/1.6 var(--mono); color: var(--tag-red); }
.rk-doc__steps h3 { margin: 0; font-size: 16px; font-weight: 500; }
.rk-doc__steps p { font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--ink-2); }
.rk-doc__sec .rk-faq summary { font-size: 17px; }

/* next step + related questions */
.rk-doc__aside { grid-area: aside; min-width: 0; }
.rk-doc__aside > div { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 16px; }
.rk-doc__box { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.rk-doc__box p { font-size: 14px; line-height: 1.55; font-weight: 300; color: var(--ink-2); }
.rk-doc__box .rk-btn { justify-content: center; }
.rk-doc__links { display: grid; }
.rk-doc__links a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line);
    font-size: 14px; line-height: 1.4; color: var(--ink-2); transition: color .2s;
}
.rk-doc__links a:first-child { border-top: 0; }
.rk-doc__links a::after { content: '→'; flex: none; font-family: var(--mono); color: var(--ink-3); }
[dir="rtl"] .rk-doc__links a::after { content: '←'; }
.rk-doc__links a:hover { color: var(--fg); }

@media (max-width: 1100px) {
    .rk-doc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "body" "aside"; max-width: 840px; row-gap: 32px; }
    /* the index becomes a row of chips under the facts */
    .rk-doc__toc nav { position: static; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .rk-doc__toc nav::-webkit-scrollbar { display: none; }
    .rk-doc__toc .rk-kicker { display: none; }
    .rk-doc__toc a, .rk-doc__toc a.is-active {
        flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
        border: 1px solid var(--line-2); border-radius: 999px; white-space: nowrap;
    }
    .rk-doc__toc a.is-active { border-color: var(--fg); }
    .rk-doc__aside > div { position: static; }
}
@media (max-width: 800px) {
    .rk-doc { padding-top: calc(var(--header-h) + 36px); padding-bottom: 64px; }
    .rk-doc__answer { padding: 16px 18px; }
    .rk-doc__answer p { font-size: 16px; }
    .rk-doc__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rk-doc__fact:nth-child(3) { border-inline-start: 0; }
    .rk-doc__fact:nth-child(n+3) { border-top: 1px solid var(--line); }
    .rk-doc__fact dd { font-size: 19px; }
    .rk-doc__body { gap: 48px; }
    .rk-doc__defs > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cookie consent banner (rk-chrome.js setupConsent) ----------
   Shown until the visitor decides, and again from "Cookie settings" in the footer (or RKConsent.open()).
   Accept all is the primary, larger button; Reject all stays a plain button beside it and Settings is a square
   icon on the leading edge, which unfolds the two purposes as switches and becomes Save. Centred above the bottom edge, clear of the toolbar column in the bottom corner on desktop and
   above the tab bar (--tabbar) on phones; it scrolls inside itself when the unfolded settings do not fit. */
.rk-consent {
    position: fixed; z-index: 59;   /* under the bottom sheet (60) and the tab bar (61) */
    left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: min(720px, calc(100% - 176px)); margin-inline: auto;
    max-height: calc(100vh - var(--header-h) - 32px); max-height: calc(100dvh - var(--header-h) - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
    padding: 18px 22px;
    border: 1px solid var(--line-2); border-radius: 22px;
    background: rgba(var(--panel-rgb), .9);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .55);
    animation: rk-consent-in .6s var(--ease) both;
}
.rk-consent__t { font: 600 14px/1.3 var(--sans); color: var(--fg); }
.rk-consent.is-reopened .rk-consent__t { padding-inline-end: 36px; }
.rk-consent__d { font: 400 13px/1.5 var(--sans); color: var(--ink-2); }
.rk-consent__d a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.rk-consent__d a:hover { text-decoration-color: currentColor; }
.rk-consent__x {
    position: absolute; top: 8px; inset-inline-end: 8px;
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
}
.rk-consent__x:hover { color: var(--fg); }
.rk-consent__x svg { width: 18px; height: 18px; transform: rotate(45deg); }
.rk-consent__prefs { margin-top: 10px; border-top: 1px solid var(--line); }
.rk-consent__opt {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 18px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.rk-consent__k { font: 600 13px/1.3 var(--sans); color: var(--fg); }
.rk-consent__od { grid-column: 1; font: 400 12px/1.5 var(--sans); color: var(--ink-2); }
.rk-consent__opt > .rk-switch, .rk-consent__on { grid-column: 2; grid-row: 1 / span 2; }
.rk-consent__on { font: 500 10px/1.3 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); text-align: end; }
.rk-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; }
.rk-consent__gear, .rk-consent__actions > [data-consent="save"] { margin-inline-end: auto; }
.rk-consent__gear {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--line-2); border-radius: 10px;
    background: rgba(var(--fg-rgb), .02); color: var(--ink-2); cursor: pointer;
    transition: color .3s, border-color .3s;
}
.rk-consent__gear:hover { color: var(--fg); border-color: rgba(var(--fg-rgb), .5); }
.rk-consent__gear svg { width: 18px; height: 18px; }
.rk-consent__gear[hidden] { display: none; }
/* Reject all, Accept all and the Settings icon share one height; Accept stands out by colour and width */
.rk-consent__actions .rk-btn { min-height: 38px; padding-block: 0; justify-content: center; }
.rk-consent__actions .rk-consent__accept { padding-inline: 30px; }
@keyframes rk-consent-in { from { opacity: 0; transform: translateY(16px); } }
/* on/off switch: <input type="checkbox" role="switch"> with a <label for> and a described-by text */
.rk-switch {
    -webkit-appearance: none; appearance: none;
    position: relative; width: 42px; height: 24px; margin: 0;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: rgba(var(--fg-rgb), .06); cursor: pointer;
    transition: background .25s, border-color .25s;
}
.rk-switch::after {
    content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--ink-2);
    transition: transform .25s var(--ease), background .25s;
}
.rk-switch:hover { border-color: rgba(var(--fg-rgb), .5); }
.rk-switch:checked { background: var(--fg); border-color: var(--fg); }
.rk-switch:checked::after { background: var(--bg); transform: translateX(18px); }
:root[dir="rtl"] .rk-switch:checked::after { transform: translateX(-18px); }
@media (max-width: 800px) {
    .rk-consent {
        left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px));
        bottom: var(--tabbar); width: auto;
        max-height: calc(100vh - var(--tabbar) - 64px); max-height: calc(100dvh - var(--tabbar) - 64px);   /* clear of the 40px top capsule */
        padding: 16px 18px; border-radius: 20px;
    }
    /* the Settings icon (or Save) and Reject all on one row, Accept all across the full width under it, nearest the thumb */
    .rk-consent__actions { margin-top: 10px; }
    .rk-consent__actions .rk-btn { justify-content: center; min-height: 44px; }
    .rk-consent__actions > [data-consent="declined"], .rk-consent__actions > [data-consent="save"] { flex: 1 1 0; margin-inline-end: 0; }
    .rk-consent__gear { width: 44px; height: 44px; border-radius: 12px; margin-inline-end: 0; }
    .rk-consent__actions .rk-consent__accept { flex: 1 1 100%; min-height: 52px; padding: 0 20px; font-size: 13px; }
    .rk-switch { width: 48px; height: 28px; }
    .rk-switch::after { width: 20px; height: 20px; }
    .rk-switch:checked::after { transform: translateX(20px); }
    :root[dir="rtl"] .rk-switch:checked::after { transform: translateX(-20px); }
}
@media (prefers-reduced-motion: reduce) { .rk-consent { animation: none; } .rk-switch, .rk-switch::after { transition: none; } }

/* ---------- Phone tab bar + bottom sheet (displayed at ≤800px only, see Responsive) ----------
   Five destinations at thumb height replace the full-screen menu on phones; Solutions and More open
   one shared bottom sheet. --tabbar is the room the bar takes at the bottom of the screen (0 elsewhere). */
:root { --tabbar: 0px; }
.rk-bar-cta, .rk-tabbar, .rk-sheet { display: none; }
.rk-bar-cta {
    align-items: center; height: var(--tool); padding-inline: 16px;
    border-radius: 999px; background: var(--rk-red-ui); color: #fff;
    font: 500 10px/1 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
}
.rk-tabbar {
    position: fixed; z-index: 61;
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 62px; padding: 4px;
    border: 1px solid var(--line-2); border-radius: 22px;
    background: rgba(var(--panel-rgb), .84);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 12px 40px -16px rgba(0, 0, 0, .55);
}
.rk-tabbar__i {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; min-height: 52px; padding: 0;
    border: 0; border-radius: 16px; background: transparent;
    color: var(--ink-2); font: 500 10px/1.1 var(--sans); letter-spacing: .01em;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .2s, background .2s;
}
.rk-tabbar__i svg { width: 21px; height: 21px; flex: none; transition: color .2s; }
.rk-tabbar__i > span:last-child { max-width: 100%; padding-inline: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tabbar__i:active { background: rgba(var(--fg-rgb), .06); }
.rk-tabbar__i:focus-visible { outline: 2px solid var(--rk-red); outline-offset: -2px; }
.rk-tabbar__i.is-current, .rk-tabbar__i.is-open { color: var(--fg); }
.rk-tabbar__i.is-current svg, .rk-tabbar__i.is-open svg { color: var(--rk-red); }
/* while a sheet is open, only its tab reads as selected */
.rk-tabbar:has(.is-open) .rk-tabbar__i.is-current:not(.is-open) { color: var(--ink-2); }
.rk-tabbar:has(.is-open) .rk-tabbar__i.is-current:not(.is-open) svg { color: currentColor; }
.rk-tabbar__i--cta { color: var(--fg); }
.rk-tabbar__dot {
    display: grid; place-items: center; width: 42px; height: 26px; border-radius: 999px;
    background: var(--rk-red-ui); color: #fff; box-shadow: 0 6px 18px -6px rgba(247, 57, 54, .8);
}
.rk-tabbar__i--cta .rk-tabbar__dot svg, .rk-tabbar__i--cta.is-current .rk-tabbar__dot svg { width: 16px; height: 16px; color: #fff; }

/* ---------- Site search (rk-search.js): a full screen on phones, a centred panel elsewhere ---------- */
.rk-tool--search svg { width: 16px; height: 16px; }
html.rk-search-open { overflow: hidden; }
.rk-search { position: fixed; inset: 0; z-index: 80; }
.rk-search[hidden] { display: none; }
.rk-search__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s; }
.rk-search__panel {
    position: absolute; left: 50%; top: 12vh; width: min(660px, calc(100vw - 32px)); max-height: 72vh;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--line-2); border-radius: 20px;
    background: rgba(var(--panel-rgb), .97);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
    opacity: 0; transform: translate(-50%, -8px); transition: opacity .25s, transform .35s var(--ease);
}
.rk-search.is-open .rk-search__scrim { opacity: 1; }
.rk-search.is-open .rk-search__panel { opacity: 1; transform: translate(-50%, 0); }
.rk-search__bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); }
.rk-search__i { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.rk-search__input {
    flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: transparent;
    color: var(--fg); font: 300 18px/1.2 var(--sans);
}
.rk-search__input::placeholder { color: var(--ink-3); }
.rk-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rk-search__close {
    flex: none; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px;
    border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.rk-search__close:hover { background: rgba(var(--fg-rgb), .06); }
.rk-search__close:focus-visible { outline: 2px solid var(--rk-red); outline-offset: -2px; }
.rk-search__esc { padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 6px; font: 500 10px/1 var(--mono); letter-spacing: 1px; }
.rk-search__x { display: none; width: 22px; height: 22px; transform: rotate(45deg); }
.rk-search__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 12px; }
.rk-search__group + .rk-search__group { margin-top: 6px; }
.rk-search__h { padding: 14px 12px 6px; font: 500 10px/1.2 var(--mono); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); }
.rk-search__item { display: grid; gap: 4px; padding: 11px 12px; border-radius: 12px; color: var(--fg); scroll-margin: 8px; }
.rk-search__item:hover, .rk-search__item.is-active { background: rgba(var(--fg-rgb), .06); }
.rk-search__item.is-active { box-shadow: inset 2px 0 0 var(--rk-red); }
.rk-search__item:focus-visible { outline: 2px solid var(--rk-red); outline-offset: -2px; }
.rk-search__t { display: flex; align-items: baseline; gap: 10px; font: 400 15px/1.35 var(--sans); }
.rk-search__t mark { background: none; color: var(--rk-red); }
.rk-search__meta { display: inline-flex; gap: 8px; margin-inline-start: auto; flex: none; font: 500 10px/1 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.rk-search__en { padding: 3px 5px; border: 1px solid var(--line-2); border-radius: 4px; }
.rk-search__d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 300 13px/1.5 var(--sans); color: var(--ink-3); }
.rk-search__empty { padding: 28px 12px; display: grid; gap: 8px; font: 300 15px/1.5 var(--sans); color: var(--ink-2); }
.rk-search__empty a { color: var(--fg); border-bottom: 1px solid var(--rk-red); }
.rk-search__keys { padding: 10px 20px; border-top: 1px solid var(--line); font: 500 10px/1.2 var(--mono); letter-spacing: 1px; color: var(--ink-3); }
@media (max-width: 800px) {
    /* phones: opened from the tab bar; the dialog fills the screen and the field stays at the top, above the keyboard */
    .rk-search__panel {
        inset: 0; left: 0; top: 0; width: auto; max-height: none; border: 0; border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px); transform: translateY(12px);
    }
    /* in a browser tab the page is never under the status bar, though some Android browsers report its height */
    @media (display-mode: browser) { .rk-search__panel { padding-top: 0; } }
    .rk-search.is-open .rk-search__panel { transform: none; }
    .rk-search__bar { padding: 8px 6px 8px 18px; }
    .rk-search__input { font-size: 17px; }   /* 16px or more: iOS does not zoom into the field */
    .rk-search__esc, .rk-search__keys { display: none; }
    .rk-search__x { display: block; }
    .rk-search__list { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .rk-search__panel, .rk-search__scrim { transition: none; } }

html.rk-sheet-open { overflow: hidden; }
.rk-sheet { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s .45s; }
.rk-sheet.is-open { visibility: visible; transition: visibility 0s; }
.rk-sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .35s; }
.rk-sheet.is-open .rk-sheet__scrim { opacity: 1; }
.rk-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    padding: 10px calc(22px + env(safe-area-inset-right, 0px)) calc(var(--tabbar) + 20px) calc(22px + env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line-2); border-radius: 24px 24px 0 0;
    background: rgba(var(--panel-rgb), .97);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    transform: translateY(100%);
    transition: transform .45s var(--ease);
}
.rk-sheet.is-open .rk-sheet__panel { transform: none; }
.rk-sheet__panel.is-dragging { transition: none; }
.rk-sheet__close {
    position: absolute; top: 8px; inset-inline-end: calc(12px + env(safe-area-inset-right, 0px));
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
}
.rk-sheet__close svg { width: 20px; height: 20px; transform: rotate(45deg); }
.rk-sheet__close:focus-visible { outline: 2px solid var(--rk-red); outline-offset: -2px; }
.rk-sheet__grab { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--line-2); }
.rk-sheet__body .rk-mobile__group > summary { min-height: 56px; font-size: 20px; }
.rk-sheet__body .rk-mobile__sub > .rk-drop__label:first-child { margin-top: 0; }
.rk-sheet__body .rk-mobile__actions { margin-top: 22px; }
/* preferences: one compact row (language picker, theme icons, sound), wrapping only on very narrow screens */
.rk-sheet__prefs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.rk-sheet__lang {
    position: relative; flex: 1 1 120px; min-width: 0;
    display: flex; align-items: center; gap: 8px; height: 40px; padding-inline: 14px 12px;
    border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-3);
}
.rk-sheet__lang svg { width: 16px; height: 16px; flex: none; pointer-events: none; }
.rk-sheet__lang select {
    -webkit-appearance: none; appearance: none;
    flex: 1; min-width: 0; height: 100%; padding: 0;
    border: 0; background: transparent; color: var(--fg);
    font: 400 14px/1 var(--sans); cursor: pointer;
}
.rk-sheet__lang select:focus-visible { outline: none; }
/* the option list is drawn by the browser: give it the theme's surface, or it shows white text on white */
.rk-sheet__lang option { background: rgb(var(--panel-rgb)); color: var(--fg); }
.rk-sheet__lang:focus-within { border-color: var(--fg); }
.rk-sheet .rk-seg button { min-height: 44px; padding: 0 12px; }
/* square buttons so the active pill is a circle, and the language field matches the control's 52px height */
.rk-sheet .rk-seg--icons button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex: none; }
.rk-sheet .rk-seg--icons { flex: none; }
.rk-sheet .rk-sheet__lang { height: 52px; }
.rk-seg--icons svg { width: 16px; height: 16px; }
.rk-sheet__sound { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.rk-sheet__sound > svg { width: 16px; height: 16px; flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .rk-nav { display: none; }
    .rk-burger { display: inline-flex; }
    .rk-plans { grid-template-columns: repeat(2, 1fr); }
    .rk-cards--4 { grid-template-columns: repeat(2, 1fr); }
    .rk-footer__top { grid-template-columns: 1fr; gap: 48px; }
    .rk-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .rk-hud { max-width: 210px; font-size: 10px; }
}
@media (max-width: 800px) {
    :root { --shell: 22px; --header-h: 64px; }
    .rk-grid__v:nth-child(3), .rk-grid__v:nth-child(5) { display: none; }
    .rk-grid__v:nth-child(4) { left: 50vw; }
    .rk-rail { display: none; }
    .rk-cols { grid-template-columns: 1fr; }
    .rk-cols > * { grid-column: 1 / -1 !important; padding: 0; }
    .rk-cols > * + * { margin-top: 24px; }
    .rk-cards--2, .rk-cards--3, .rk-cards--4, .rk-plans { grid-template-columns: 1fr; }
    .rk-stats { grid-template-columns: 1fr 1fr; }
    .rk-stat:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
    .rk-section { padding-top: 110px; padding-bottom: 110px; min-height: 0; }
    .rk-list__row { grid-template-columns: 1fr; gap: 8px; }
    .rk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
    .rk-footer__stage { height: clamp(220px, 30vh, 320px); }
    .rk-footer__body { padding-top: 56px; }
    .rk-footer__prefs { margin-top: 48px; flex-direction: column; align-items: flex-start; }
    .rk-footer__prefs, .rk-footer__bottom { padding-inline-end: 72px; }
    .rk-footer__bottom { flex-direction: column; }
    /* dock: full-width top capsule (logo + Menu); the toolbar only appears once scrolled */
    .rk-header { --dock-gap: 10px; --tool: 44px; --bar-pad: 6px; }
    .rk-bar--a, .rk-header.is-split .rk-bar--a { position: relative; inset-inline-start: auto; top: auto; flex: 1; justify-content: space-between; padding: var(--bar-pad); padding-inline-start: 20px; }
    .rk-bar--b, .rk-header.is-split .rk-bar--b {
        position: fixed;
        inset-inline-end: calc(var(--dock-gap) + env(safe-area-inset-right, 0px));
        bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
        flex-direction: column; align-items: center;
        width: var(--bar-h); height: auto; gap: 4px; padding: var(--bar-pad);
        transition: opacity .35s ease, visibility .35s;
    }
    .rk-header:not(.is-split) .rk-bar--b { opacity: 0; visibility: hidden; }
    .rk-bar--c, .rk-glass--c { display: none; }   /* sign-in and create account live in the menu */
    .rk-tool__badge { inset-inline-end: 5px; bottom: 6px; }
    .rk-tip { display: none; }
    .rk-header.is-split .rk-lang__menu { inset-inline-end: calc(100% + var(--bar-pad) + 10px); }
    .rk-step { bottom: 8%; }
    .rk-hud { display: none; }
    .rk-drop { display: none; }
    .rk-asks { margin-top: 12px; }
    .rk-ask { font-size: 13px; padding: 9px 14px 9px 16px; gap: 10px; }
    [dir="rtl"] .rk-ask { padding: 9px 16px 9px 14px; }
}
@media (max-width: 600px) {
    /* phones: no floating toolbar; language and theme are in the menu, contact in the footer */
    .rk-bar--b, .rk-glass--b { display: none !important; }
    .rk-footer__prefs, .rk-footer__bottom { padding-inline-end: 0; }
}
@media (max-width: 800px) {
    /* phones: the tab bar replaces the Menu button and the floating toolbar (language, theme, sound and
       contact live in its More sheet); sign-up stays reachable at the top as a compact button */
    :root { --tabbar: calc(78px + env(safe-area-inset-bottom, 0px)); }   /* 62px bar + 8px gap + 8px air */
    .rk-tabbar { display: grid; }
    .rk-sheet { display: block; }
    .rk-header .rk-burger, .rk-header.is-tight .rk-burger { display: none; }
    .rk-bar-cta { display: inline-flex; }
    /* slim top capsule (40px): with the navigation at the bottom it only carries the logo and sign-up.
       :root raises specificity over the pointer: coarse rule below that sets --tool to 44px */
    :root { --header-h: 52px; }
    :root .rk-header { --dock-gap: 8px; --tool: 32px; --bar-pad: 4px; }
    .rk-bar--a, .rk-header.is-split .rk-bar--a { padding-inline-start: 16px; }
    .rk-bar .rk-logo { position: relative; padding: 0; }
    .rk-bar .rk-logo svg { height: 16px; }
    .rk-bar-cta { position: relative; padding-inline: 14px; font-size: 9.5px; }
    /* the hit areas stay 44px tall although the bar is thinner */
    .rk-bar .rk-logo::before, .rk-bar-cta::before { content: ''; position: absolute; inset: -6px; }
    .rk-bar .rk-logo::before { inset: -14px -8px; }
    /* tucked while scrolling down (rk-chrome.js setupTuck); `translate` composes with the glass's own transform */
    .rk-dock { transition: translate .35s var(--ease); }
    .rk-header .rk-glass--a {
        transition: transform var(--dock-dur) var(--dock-ease), width var(--dock-dur) var(--dock-ease),
            height var(--dock-dur) var(--dock-ease), opacity .26s ease .42s, translate .35s var(--ease);
    }
    .rk-header.is-tucked :is(.rk-dock, .rk-glass--a) {
        translate: 0 calc(-1 * (var(--bar-h) + var(--dock-gap) + env(safe-area-inset-top, 0px) + 16px));
    }
    .rk-bar--b, .rk-glass--b { display: none !important; }
    .rk-footer__prefs, .rk-footer__bottom { padding-inline-end: 0; }
    .rk-footer { padding-bottom: calc(30px + var(--tabbar)); }
    body[data-no-footer] { padding-bottom: var(--tabbar); }
    /* pinned stories end above the bar, so a scene's copy is never under it */
    .rk-story__pin { height: calc(100vh - var(--tabbar)); }

    /* phones: pinned stories flow as ordinary sections, one scene after another, nothing clipped or hidden
       (rk-chrome.js marks the scene at the middle of the screen as active, for rk-scenes.js) */
    .rk-story { height: auto !important; }
    .rk-story__pin { position: relative; height: auto; overflow: visible; padding: 72px var(--shell) 24px; }
    .rk-story__counter, .rk-story__bar, .rk-story__nav { display: none; }
    .rk-step, .rk-ev .rk-step, .rk-ev .rk-step--split {
        position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto;
        pointer-events: auto; padding: 48px 0; border-top: 1px solid var(--line);
    }
    .rk-story__head + .rk-story__counter + .rk-step, .rk-story__head + .rk-step { border-top: 0; }
    .rk-anim .rk-step .rk-step__body, .rk-step__num { opacity: 1; transform: none; }
    /* scene titles reveal letter by letter as they scroll in, like every other title (rk-chrome.js hydrate) */
    .rk-step .rk-split:not(.is-in) .char { opacity: 0; transform: translateY(0.45em); filter: blur(12px); }
    .rk-step .rk-split.is-in .char { opacity: 1; transform: none; filter: blur(0); }

    /* the hero and the closing call to action fit the visible screen and clear the tab bar */
    .rk-hero { min-height: 100vh; min-height: 100svh; padding-bottom: calc(var(--tabbar) + 24px); }
    .rk-cta { min-height: 0; padding-top: 112px; padding-bottom: 96px; }
    html { scroll-padding-bottom: var(--tabbar); }
}

/* no WebGL stage (phones, Save-Data, no WebGL: rk-stage.js): a still gradient instead of the canvas, and no
   controls or empty space that only made sense with it */
html.rk-no-stage #rk-stage {
    background:
        radial-gradient(70% 45% at 85% 8%, rgba(247, 57, 54, .14), transparent 70%),
        radial-gradient(70% 45% at 10% 75%, rgba(76, 29, 255, .13), transparent 70%);
}
html.rk-no-stage :is(.rk-footer__stage, .rk-tool--sound, .rk-sheet__sound, .rk-mobile__prefs > div:has(> [data-sound-seg])) { display: none; }
@media (prefers-reduced-motion: reduce) {
    .rk-sheet__panel, .rk-sheet__scrim, .rk-dock { transition: none !important; }
    .rk-header .rk-glass--a { transition: opacity .3s ease !important; }
}
@media (prefers-reduced-motion: reduce) {
    .rk-split .char, .rk-reveal, .rk-step .rk-step__body { transition: none !important; }
    .rk-marquee__track { animation: none; }
    .rk-ask::after { transition: none; }
    .rk-ask:hover::after { transform: none; }
    .rk-glass { transition: opacity .3s ease !important; }
    .rk-glass::before { animation: none; }
    .rk-mobile__inner, .rk-bar--b { transition: opacity .3s ease, visibility .3s !important; transform: none !important; }
}
@media (pointer: coarse) {
    .rk-header { --tool: 44px; }
}

/* keep brand casing inside uppercase labels: <span class="rk-nocaps">ROOTKey</span> */
.rk-nocaps { text-transform: none !important; }

/* =====================================================================
   Light theme — html[data-theme="light"]
   ===================================================================== */
html[data-theme="light"] {
    --fg: #0B0A14;
    --fg-rgb: 11, 10, 20;
    --bg: #F6F5FA;
    --bg-rgb: 246, 245, 250;
    --panel-rgb: 255, 255, 255;
    --ink-rgb: 22, 20, 42;
    --ink: #0E0C1C;
    --ink-2: rgba(var(--ink-rgb), 0.74);
    --ink-3: rgba(var(--ink-rgb), 0.62);
    --line: rgba(var(--fg-rgb), 0.09);
    --line-2: rgba(var(--fg-rgb), 0.16);
    --panel: rgba(255, 255, 255, 0.72);
    --tag-red: #C8201D; --tag-green: #00784A; --tag-blue: #3A14D6; --tag-amber: #8A5300;
    --accent-red: #E0231F; --accent-blue: #4C1DFF; --accent-green: #00955B;
    --grad-red: linear-gradient(100deg, #F73936 0%, #D81E1B 50%, #A50906 100%);
    --shadow-card: 0 1px 0 rgba(255,255,255,.8) inset, 0 24px 48px -32px rgba(22, 20, 42, 0.28);
    color-scheme: light;
}
html[data-theme="light"] .rk-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.58));
    box-shadow: var(--shadow-card);
}
html[data-theme="light"] .rk-card::after { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(247,57,54,0.08), transparent 45%); }
html[data-theme="light"] .rk-hud,
html[data-theme="light"] .rk-code,
html[data-theme="light"] .rk-drop { box-shadow: 0 18px 50px -24px rgba(22, 20, 42, 0.3); }
html[data-theme="light"] .rk-stage-veil { --veil-bottom: 0.7; --veil-top: 0.7; }
@media (max-width: 800px) {
    html[data-theme="light"] .rk-stage-veil { --veil-scrim: 0.38; }
}
html[data-theme="light"] .rk-grid__v { background: linear-gradient(to bottom, transparent 0%, rgba(var(--fg-rgb),0.07) 12%, rgba(var(--fg-rgb),0.07) 88%, transparent 100%); }
html[data-theme="light"] .rk-grid__dot { background: rgba(var(--fg-rgb),0.75); box-shadow: 0 0 6px rgba(var(--fg-rgb),0.25); }
html[data-theme="light"] .rk-rail__fill { box-shadow: 0 0 6px rgba(247,57,54,0.5); }
html[data-theme="light"] .rk-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .48));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        inset 0 0 0 1px rgba(var(--fg-rgb), .08),
        inset 0 -12px 24px -20px rgba(var(--fg-rgb), .10),
        0 20px 46px -24px rgba(22, 20, 42, .35);
}
html[data-theme="light"] .rk-glass::before { opacity: .32; }
html[data-theme="light"] .rk-glass::after { background: linear-gradient(115deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .35) 100%); }
html[data-theme="light"] .rk-tip,
html[data-theme="light"] .rk-lang__menu { box-shadow: 0 18px 50px -24px rgba(22, 20, 42, 0.3); }
html[data-theme="light"] .rk-mobile { background: rgba(var(--bg-rgb), .95); }
html[data-theme="light"] .cursor-outer { border-color: rgba(var(--fg-rgb),0.5); }
/* partner / press logos ship as white-on-transparent variants for the dark site */
html[data-theme="light"] img[src*="/partners/"],
html[data-theme="light"] img[src*="_dark."],
html[data-theme="light"] img[src*="white"],
html[data-theme="light"] img[src*="White"],
html[data-theme="light"] img[src*="branco"] { filter: invert(1) grayscale(1) contrast(1.2); }
html[data-theme="light"] .rk-marquee img { opacity: .55; filter: invert(1) grayscale(1) contrast(1.2); }
html[data-theme="light"] .rk-marquee img:hover { opacity: .9; }
html[data-theme="light"] .rk-plan.is-popular { background: linear-gradient(180deg, rgba(247,57,54,0.08), rgba(255,255,255,0.7)); }
html[data-theme="light"] .rk-btn--ghost { background: rgba(255,255,255,0.5); }
html[data-theme="light"] .rk-ask { box-shadow: 0 12px 32px -22px rgba(22, 20, 42, 0.4); }
html[data-theme="light"] .rk-ask:hover { border-color: rgba(200,32,29,.4); }

/* segmented control (footer / menu theme) */
.rk-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; }
.rk-seg button {
    border: 0; background: transparent; color: var(--ink-3);
    font: 500 10px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase;
    padding: 8px 12px; border-radius: 999px; transition: background .3s, color .3s;
}
.rk-seg button:hover { color: var(--fg); }
.rk-seg button.is-active { background: var(--fg); color: var(--bg); }
html.rk-theme-anim, html.rk-theme-anim * { transition: background-color .5s ease, color .4s ease, border-color .4s ease !important; }
html[data-theme="light"] .rk-tag--red { background: rgba(247,57,54,0.07); border-color: rgba(200,32,29,0.3); }
html[data-theme="light"] .rk-tag--green { background: rgba(0,212,126,0.08); border-color: rgba(0,128,78,0.3); }
html[data-theme="light"] .rk-tag--blue { background: rgba(76,29,255,0.07); border-color: rgba(58,20,214,0.3); }
.rk-tab.is-active .aw-count, .rk-tab:hover .aw-count { color: inherit; opacity: .6; }

/* =====================================================================
   Right-to-left (Arabic) — html[dir="rtl"]
   Most of the layout mirrors on its own: grids and flex rows run right-to-left
   (.rk-cols spans/starts put the text column on the right) and the chrome uses
   logical properties (inset-inline-*, padding-inline-*, border-inline-*).
   rk-chrome.js mirrors what CSS cannot (dock FLIP, HUD chip offsets, word-split
   titles) and rk-stage.js puts the sculpture on the opposite side.
   Below: transforms and generated content that need an explicit mirror,
   bidi isolation for machine strings, and Arabic typography.
   ===================================================================== */
[dir="rtl"] .rk-rail { transform: translateX(-50%); }
[dir="rtl"] .rk-rail__label { transform: translate(-6px, -50%); }
[dir="rtl"] .rk-header.is-split .rk-drop { left: auto; right: -14px; }
[dir="rtl"] .rk-header.is-split .rk-bar--b .rk-tip { right: auto; left: calc(100% + 16px); transform: translate(-4px, -50%); }
/* icons that point somewhere point the reading way */
[dir="rtl"] [data-icon="arrow"] svg,
[dir="rtl"] .rk-tool--cta svg,
[dir="rtl"] .rk-tool--login svg,
[dir="rtl"] .rk-btn__i { transform: scaleX(-1); }
[dir="rtl"] .rk-card--link::before { content: '←'; }
[dir="rtl"] .rk-card--link:hover::before { transform: translateX(-4px); }
/* code, hashes, e-mail addresses and phone numbers stay left-to-right inside Arabic text */
[dir="rtl"] .rk-code,
[dir="rtl"] .rk-hash,
[dir="rtl"] .rk-prose code,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .rk-code { text-align: left; }
/* the marquee slides a max-content track by -50%: keep it left-to-right so the loop stays seamless */
[dir="rtl"] .rk-marquee { direction: ltr; }
/* a run of Latin words in a word-split title is one unit ("NTT Data Open Innovation"): let it wrap on narrow screens */
[dir="rtl"] .rk-split .char[dir="ltr"] { white-space: normal; }

/* Arabic typography: joined letters must not be tracked apart, tall glyphs need more leading,
   and the 10-11px labels of the Latin design are too small for Arabic */
:root[lang|="ar"] *:lang(ar) { letter-spacing: normal !important; }
:root[lang|="ar"] :is(.rk-display, .rk-h1, .rk-h2) { line-height: 1.25; }
:root[lang|="ar"] :is(.rk-h3, .rk-quote) { line-height: 1.45; }
:root[lang|="ar"] :is(.rk-nav__link, .rk-btn, .rk-tool--cta) { font-size: 13px; }
:root[lang|="ar"] :is(.rk-kicker, .rk-badge, .rk-tag, .rk-footer__h, .rk-footer__k, .rk-drop__label, .rk-stat__k, .rk-step__num, .rk-breadcrumb, .rk-rail__label, .rk-tab, .rk-seg button, .rk-burger, .rk-tip, .rk-field label, .rk-table th, .rk-prose th) { font-size: 12px; }
:root[lang|="ar"] .rk-hud__k { font-size: 11px; }
/* the phone chrome too: the bar call to action and the tab bar labels */
:root[lang|="ar"] :is(.rk-bar-cta, .rk-tabbar__i) { font-size: 12px; }

/* ---------- Sound (rk-sound.js): the mute button in the scrolled toolbar ---------- */
.rk-tool--sound .i-on, .rk-tool--sound.is-on .i-off { display: none; }
.rk-tool--sound.is-on .i-on { display: block; }
.rk-tool--sound:not(.is-on) { color: var(--ink-2); }
.rk-tool--sound.is-armed { color: var(--fg); }
/* armed = the visitor wants sound but the browser waits for a click: a pulsing dot, and a glow while scrolling */
.rk-tool--sound.is-armed::after { content: ''; position: absolute; top: 8px; inset-inline-end: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rk-red); animation: rk-sound-armed 1.6s ease-in-out infinite; }
.rk-tool--sound.is-nudge { box-shadow: 0 0 0 1.5px rgba(247, 57, 54, .6), 0 0 22px rgba(247, 57, 54, .35); }
@keyframes rk-sound-armed { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .rk-tool--sound.is-armed::after { animation: none; } }

/* light theme: small red labels use the darker tag red (the brand red is 3.5:1 on the light background) */
html[data-theme="light"] :is(.rk-step__num, .rk-kicker b, .rk-list__row .rk-kicker, .inc-block .rk-kicker, .ar-demo h3 em, .vf-steps li.is-run b) { color: var(--tag-red); }

/* =====================================================================
   Phones (800px and below): 5% side margins and text from the start edge (owner decision 2026-10-21).
   The first scene of a page (its hero) stays centred; every scene after it, and the closing call to
   action, read from the start edge like the rest of the page. html body raises specificity over the
   page-local scene styles (home-ev on the home page, rk-ev in rk-scenes.css, which load after this file).
   ===================================================================== */
@media (max-width: 800px) {
    :root { --shell: max(5vw, 22px); }
    html body :is(.rk-ev, .home-ev) .rk-story__pin { padding-inline: var(--shell); }
    html body :is(.rk-ev, .home-ev) .rk-step ~ .rk-step { text-align: start; }
    html body :is(.rk-ev, .home-ev) .rk-step ~ .rk-step :is(.rk-step__num, .rk-ev__cta, .home-ev__cta, .rk-ev__crumb, .rk-ev__chips, .rk-row) { justify-content: flex-start; }
    html body :is(.rk-ev, .home-ev) .rk-step ~ .rk-step :is(.rk-ev__text, .home-ev__text, .rk-lead, .rk-step__body) { margin-inline: 0; max-width: none; }
    /* a page that opens on a story: its first scene starts below the header, not under it */
    html body .rk-main > .rk-story:first-child .rk-step:not(.rk-step ~ .rk-step) { padding-top: calc(var(--header-h) + 56px); }
    html body .rk-cta { text-align: start; align-items: flex-start; }
    html body .rk-cta :is(.rk-row, ul) { justify-content: flex-start; }
    html body .rk-cta .rk-lead { margin-inline: 0 !important; }
}

/* still figures (rk-figures.js) where there is no WebGL stage: the forged document, the product screen or the
   platform's layers of a scene, drawn in the theme's ink after its heading. They follow the text: from the start
   edge, and centred only where the text is (the first scene on a phone; rk-figures.js adds .rk-fig--c) */
.rk-fig {
    display: block; margin: 18px 0 22px; max-width: 520px; padding: 12px;
    border: 1px solid var(--line-2); border-radius: 14px; background: rgba(var(--fg-rgb), .03);
}
.rk-fig canvas { display: block; width: 100%; height: auto; }
.rk-fig.rk-fig--c { margin-inline: auto; }
html:not(.rk-no-stage) .rk-fig { display: none; }
@media (min-width: 801px) { .rk-fig { display: none; } }   /* phone layout only: on desktop the pinned scenes overlap */