/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.
   Proprietary and confidential. See LICENSE in the project root. */

/* ═══════════════════════════════════════════════════════════════════════════
   rg-site.css — the public website (Components/Site).

   Loaded by the site's surface only: preloaded in App.razor, linked in the
   body by SiteLayout (CLAUDE.md §2 "Layout", rule 2). The signed-in system
   never pays for it.

   Every class is `rg-`, every colour and every gap is a custom property
   below. One spacing scale (--rg-s-*), one column (--rg-col + --rg-gutter)
   shared by the header, every section and the footer, so their left and
   right edges line up at every width (rule 1). Heights from the screen are
   `svh` / `dvh`, never `vh`. Everything that moves stops under
   prefers-reduced-motion and under Forge's own data-motion="reduced".

   Two themes from one set of tokens, chosen by data-theme on <html>. Dark
   (the :root block) is graphite and black with white text; light
   (:root[data-theme="light"]) is warm paper with near-black text, the family
   of the signed-in system's light theme. Both keep one signal red: #e10600 is
   4.2:1 on black, enough for large text, a button fill (white on it is 5:1)
   and decoration, so small red text uses --rg-red-ink (#ff5a4c on dark, 5.6:1
   on --rg-surface; #b30400 on paper, 6:1+). A colour is never typed outside
   the two token blocks: overlays use rgba(var(--rg-tint), a), shadows
   rgba(var(--rg-shade), a), red washes rgba(var(--rg-red-rgb), a).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Surfaces, darkest to lightest. */
    --rg-bg: #0b0a09;
    --rg-bg-2: #100f0d;
    --rg-surface: #161513;
    --rg-surface-2: #1f1d1b;
    --rg-line: rgba(255, 255, 255, 0.08);
    --rg-line-strong: rgba(255, 255, 255, 0.16);

    /* Text. */
    --rg-text: #f5f5f6;
    --rg-text-2: #c5c5cd;
    --rg-text-3: #94949e;

    /* The signal red and its uses. */
    --rg-red: #e10600;
    --rg-red-hover: #f2231c;
    --rg-red-ink: #ff5a4c;
    --rg-red-ink-hover: #ff8277;
    --rg-red-soft: rgba(225, 6, 0, 0.14);
    --rg-red-line: rgba(225, 6, 0, 0.42);
    --rg-red-glow: rgba(225, 6, 0, 0.45);
    --rg-scene-top: #141311;
    --rg-scene-bottom: #0c0b0a;
    --rg-net: #78c8ff;
    --rg-on-red: #ffffff;

    /* The security test's three bands. */
    --rg-band-good: #34d399;
    --rg-band-fair: #fbbf24;
    --rg-band-weak: var(--rg-red);

    /* Type. Outfit is already loaded for every page (fonts.css). */
    --rg-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rg-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
    --rg-fs-xs: 0.8125rem;
    --rg-fs-sm: 0.9375rem;
    --rg-fs-base: 1.0625rem;
    --rg-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --rg-fs-h3: 1.25rem;
    --rg-fs-h2: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
    --rg-fs-h1: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);
    --rg-fs-hero: clamp(2.5rem, 1.45rem + 4.6vw, 5rem);

    /* The one spacing scale. */
    --rg-s-1: 4px;
    --rg-s-2: 8px;
    --rg-s-3: 12px;
    --rg-s-4: 16px;
    --rg-s-5: 24px;
    --rg-s-6: 32px;
    --rg-s-7: 48px;
    --rg-s-8: 64px;
    --rg-s-9: 96px;

    /* Shape and motion. */
    --rg-radius-sm: 8px;
    --rg-radius: 12px;
    --rg-radius-lg: 24px;
    --rg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --rg-fast: 160ms;
    --rg-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.7);

    /* The helpers that make a theme: a faint overlay, a shadow, white that
       must stay white, and how heavy a shadow may be (soft on paper). */
    --rg-tint: 255, 255, 255;
    --rg-shade: 0, 0, 0;
    --rg-shadow-k: 1;
    --rg-glow-k: 1;
    --rg-on-dark: #ffffff;
    --rg-on-dark-rgb: 255, 255, 255;
    --rg-sheen: rgba(255, 255, 255, 0.035);
    --rg-sheen-soft: rgba(255, 255, 255, 0.04);
    --rg-control-line: rgba(255, 255, 255, 0.3);
    --rg-grain: 0.05;
    --rg-red-rgb: 225, 6, 0;
    --rg-red-ink-rgb: 255, 90, 76;
    --rg-warm-rgb: 255, 120, 60;
    --rg-lamp: rgba(255, 196, 120, 0.2);
    --rg-red-top: #f0170f;
    --rg-red-bottom: #c80500;
    --rg-red-top-hover: #ff2a21;
    --rg-red-bottom-hover: #d80900;

    /* Whole-surface gradients: the hero, a sub-page hero, the closing band,
       the teaser, the footer. */
    --rg-hero-from: #0f0e0c;
    --rg-hero-to: #080706;
    --rg-cta-from: #1a0c0c;
    --rg-cta-to: #111113;
    --rg-teaser-from: #151518;
    --rg-teaser-to: #0b0b0d;
    --rg-footer-bg: #070708;

    /* The phones of RG ONE imitate the app and the device: the same in both
       themes, a light screen in a dark bezel. */
    --rg-device-from: #3a3633;
    --rg-device-mid: #121110;
    --rg-device-to: #2a2724;
    --rg-device-edge: #050505;
    --rg-app-paper: #f6f3ee;
    --rg-app-card: #ffffff;
    --rg-app-ink: #23201c;
    --rg-app-ink-2: #1d1a17;
    --rg-app-text: #4a443e;
    --rg-app-muted: #6a635b;
    --rg-app-muted-2: #6f685f;
    --rg-app-muted-3: #7a736a;
    --rg-app-chip: #ebe6de;
    --rg-app-chip-ink: #5b554e;
    --rg-app-track: #e7e1d8;
    --rg-app-date: #efe9e1;
    --rg-app-av-from: #e6dfd5;
    --rg-app-av-to: #d6cdc1;
    --rg-app-av-ink: #2a2622;
    --rg-app-mark: #0b0b0c;
    --rg-app-shadow: rgba(60, 40, 20, 0.35);
    --rg-app-night-from: #2a2724;
    --rg-app-night-to: #141312;
    --rg-app-night-ink-2: rgba(246, 243, 238, 0.7);
    --rg-app-ok: #3fc07a;
    --rg-app-ok-ring: rgba(63, 192, 122, 0.25);
    --rg-app-ok-glow: rgba(52, 180, 110, 0.35);
    --rg-app-done: #2f9a57;

    /* The column: one width and one gutter for the header, every section and
       the footer (rule 1). */
    --rg-col: 1240px;
    --rg-gutter: 16px;
    --rg-header-h: 64px;
    --rg-section-y: var(--rg-s-8);
    --rg-section-y-tight: var(--rg-s-7);
}

/* A phone: the header is a slim bar, so the page starts as high as it can. */
@media (max-width: 639px) {
    :root { --rg-header-h: 56px; }
}

@media (min-width: 768px) {
    :root {
        --rg-gutter: 24px;
        --rg-section-y: 80px;
    }
}

@media (min-width: 1100px) {
    :root {
        --rg-gutter: clamp(32px, 4vw, 64px);
        --rg-header-h: 72px;
        --rg-section-y: var(--rg-s-9);
        --rg-section-y-tight: var(--rg-s-8);
    }
}

/* The light theme: warm paper, the signed-in system's family. Only values
   that differ from the dark block are redefined; the app and device tokens
   above are the same in both. White on --rg-red is 5.3:1; red text on paper
   is --rg-red-ink (#b30400, 6.2:1 on --rg-bg). */
:root[data-theme="light"] {
    --rg-bg: #f6f3ee;
    --rg-bg-2: #efebe4;
    --rg-surface: #fdfcfa;
    --rg-surface-2: #f3efe8;
    --rg-line: rgba(46, 32, 18, 0.10);
    --rg-line-strong: rgba(46, 32, 18, 0.18);

    --rg-text: #1a1714;
    --rg-text-2: #4a443d;
    --rg-text-3: #6b645b;

    --rg-red: #d40500;
    --rg-red-hover: #b80400;
    --rg-red-ink: #b30400;
    --rg-red-ink-hover: #8f0300;
    --rg-red-soft: rgba(212, 5, 0, 0.08);
    --rg-red-line: rgba(212, 5, 0, 0.30);
    --rg-red-glow: rgba(212, 5, 0, 0.26);
    --rg-scene-top: #fbf9f5;
    --rg-scene-bottom: #f1ece4;
    --rg-net: #006cbe;

    --rg-band-good: #0f9f6e;
    --rg-band-fair: #c27c0e;

    --rg-shadow: 0 28px 60px -28px rgba(46, 32, 18, 0.28);

    --rg-tint: 46, 32, 18;
    --rg-shade: 46, 32, 18;
    --rg-shadow-k: 0.35;
    --rg-glow-k: 0;
    --rg-sheen: rgba(255, 255, 255, 0.7);
    --rg-sheen-soft: rgba(255, 255, 255, 0.55);
    --rg-control-line: rgba(46, 32, 18, 0.5);
    --rg-grain: 0.02;
    --rg-red-rgb: 212, 5, 0;
    --rg-red-ink-rgb: 179, 4, 0;
    --rg-warm-rgb: 244, 140, 40;
    --rg-lamp: rgba(244, 160, 50, 0.4);
    --rg-red-top: #e30d05;
    --rg-red-bottom: #b80400;
    --rg-red-top-hover: #ef1a11;
    --rg-red-bottom-hover: #a00300;

    --rg-hero-from: #f6f3ee;
    --rg-hero-to: #efebe4;
    --rg-cta-from: #fbe6e2;
    --rg-cta-to: #fdfcfa;
    --rg-teaser-from: #fdfcfa;
    --rg-teaser-to: #efebe4;
    --rg-footer-bg: #efebe4;
}

/* ── The page ──────────────────────────────────────────────────────────── */

/* The host paints <html> and <body> in the system's dashboard colour; on a
   site page they take the site's, so an overscroll never shows a seam. */
html:has(.rg) {
    background-color: var(--rg-bg);
    color-scheme: dark;
}

html[data-theme="light"]:has(.rg) {
    color-scheme: light;
}

body:has(> .rg) {
    margin: 0;
    background: var(--rg-bg);
}

.rg {
    /* The bridge for the few Forge components the site uses (ForgeCheckbox):
       they read these tokens, so they paint in the site's red, not in the
       dashboard's accent. */
    --accent: var(--rg-red);
    --accent-base: var(--rg-red);
    --accent-on: var(--rg-on-red);
    --line-strong: var(--rg-control-line);
    --surface-s1: var(--rg-bg);
    --text-t1: var(--rg-text);
    --radius-sm: 5px;

    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--rg-bg);
    color: var(--rg-text);
    font-family: var(--rg-font);
    font-size: var(--rg-fs-base);
    font-feature-settings: normal;
    line-height: 1.6;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Zero-specificity resets: browser margins off, so every gap comes from the
   scale (rule 4) and any rule below wins over these. */
:where(.rg) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
}

:where(.rg) :where(a) {
    color: inherit;
    text-decoration: none;
}

:where(.rg) :where(img) {
    max-width: 100%;
    height: auto;
}

/* A list with one of the site's own classes is layout, not running text:
   no marker gutter (rule 3). */
:where(.rg :is(ol, ul)[class*="rg-"]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(.rg) :focus-visible {
    outline: 2px solid var(--rg-red-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

.rg summary {
    list-style: none;
}

.rg summary::-webkit-details-marker {
    display: none;
}

.rg-main {
    flex: 1 0 auto;
}

.rg-main:focus {
    outline: none;
}

.rg-skip {
    position: absolute;
    left: var(--rg-s-4);
    top: -100px;
    z-index: 100;
    padding: var(--rg-s-3) var(--rg-s-4);
    border-radius: var(--rg-radius);
    background: var(--rg-red);
    color: var(--rg-on-red);
    font-weight: 600;
}

.rg-skip:focus {
    top: var(--rg-s-3);
}

.rg-col {
    width: 100%;
    max-width: calc(var(--rg-col) + 2 * var(--rg-gutter));
    margin-inline: auto;
    padding-inline: var(--rg-gutter);
}

.rg-icon {
    flex: none;
    display: block;
}

/* ── Type ──────────────────────────────────────────────────────────────── */

.rg-h1 {
    font-size: var(--rg-fs-h1);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.rg-h2 {
    font-size: var(--rg-fs-h2);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.rg-h3 {
    font-size: var(--rg-fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.rg-item-title {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
}

.rg-lead {
    max-width: 68ch;
    color: var(--rg-text-2);
    font-size: var(--rg-fs-lead);
    line-height: 1.6;
}

.rg-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--rg-s-2);
    color: var(--rg-red-ink);
    font-size: var(--rg-fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rg-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rg-red-ink);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
    transition: color var(--rg-fast) var(--rg-ease);
}

.rg-text-link:hover {
    color: var(--rg-red-ink-hover);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.rg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--rg-radius);
    font: inherit;
    font-size: var(--rg-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--rg-fast) var(--rg-ease),
        border-color var(--rg-fast) var(--rg-ease),
        transform var(--rg-fast) var(--rg-ease);
}

.rg-btn:active {
    transform: translateY(1px);
}

.rg-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.rg-btn--primary {
    background: var(--rg-red);
    color: var(--rg-on-red);
    box-shadow: 0 12px 30px -12px var(--rg-red-glow), inset 0 1px 0 rgba(var(--rg-on-dark-rgb), 0.18);
}

.rg-btn--primary:hover:not(:disabled) {
    background: var(--rg-red-hover);
}

.rg-btn--ghost {
    border-color: var(--rg-line-strong);
    background: rgba(var(--rg-tint), 0.04);
    color: var(--rg-text);
}

.rg-btn--ghost:hover:not(:disabled) {
    border-color: rgba(var(--rg-tint), 0.3);
    background: rgba(var(--rg-tint), 0.08);
}

.rg-btn--lg {
    min-height: 54px;
    padding-inline: 26px;
    font-size: 1rem;
}

.rg-btn--block {
    width: 100%;
}

.rg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
}

@media (max-width: 639px) {
    /* On a phone each action is a full-width row: one thumb, one target. */
    .rg-actions > .rg-btn {
        flex: 1 1 100%;
    }
}

.rg-link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--rg-s-2) 2px;
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.rg-link-button:hover {
    color: var(--rg-text);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.rg-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--rg-line);
    background: color-mix(in srgb, var(--rg-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
}

.rg-header__inner {
    display: flex;
    align-items: center;
    gap: var(--rg-s-4);
    min-height: var(--rg-header-h);
}

.rg-brand {
    display: inline-flex;
    flex: none;
}

.rg-brand img {
    width: auto;
    height: 36px;
}

.rg-nav {
    display: none;
}

.rg-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--rg-radius-sm);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--rg-fast) var(--rg-ease), background-color var(--rg-fast) var(--rg-ease);
}

.rg-nav__link:hover {
    background: rgba(var(--rg-tint), 0.05);
    color: var(--rg-text);
}

.rg-drop {
    position: relative;
}

.rg-drop[open] > .rg-drop__toggle {
    background: rgba(var(--rg-tint), 0.06);
    color: var(--rg-text);
}

.rg-drop[open] .rg-drop__chevron {
    rotate: 180deg;
}

.rg-drop__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: -12px;
    z-index: 2;
    width: min(660px, calc(100vw - 2 * var(--rg-gutter)));
    padding: var(--rg-s-3);
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius-lg);
    background: var(--rg-surface);
    box-shadow: var(--rg-shadow);
}

.rg-drop__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rg-s-1);
}

.rg-drop__item {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-s-3);
    padding: var(--rg-s-3);
    border-radius: var(--rg-radius);
    transition: background-color var(--rg-fast) var(--rg-ease);
}

.rg-drop__item:hover {
    background: var(--rg-surface-2);
}

.rg-drop__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--rg-red-soft);
    color: var(--rg-red-ink);
}

.rg-drop__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rg-drop__text > b {
    color: var(--rg-text);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
}

.rg-drop__text > span {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-xs);
    line-height: 1.45;
}

.rg-drop__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--rg-s-2);
    padding: var(--rg-s-3);
    border-top: 1px solid var(--rg-line);
    color: var(--rg-red-ink);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
}

.rg-header__actions {
    display: flex;
    align-items: center;
    gap: var(--rg-s-3);
    margin-inline-start: auto;
}

.rg-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rg-text-3);
    font-size: 0.875rem;
    white-space: nowrap;
    transition: color var(--rg-fast) var(--rg-ease);
}

.rg-login:hover {
    color: var(--rg-text);
}

.rg-header__actions > .rg-login {
    display: none;
}

.rg-header__cta {
    display: none;
    min-height: 42px;
    padding-inline: 18px;
    font-size: 0.90625rem;
}

@media (min-width: 640px) {
    .rg-header__cta {
        display: inline-flex;
    }
}

.rg-burger__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius);
    color: var(--rg-text);
    cursor: pointer;
}

/* On a phone the brand and the two buttons fit the slim bar, the buttons one
   height to the pixel (rule 13; the theme button's size is beside its own rule). */
@media (max-width: 639px) {
    .rg-header__actions { gap: var(--rg-s-2); }
    .rg-brand img { height: 32px; }
    .rg-burger__toggle { width: 42px; height: 42px; }
}

.rg-burger__close,
.rg-burger[open] .rg-burger__open {
    display: none;
}

.rg-burger[open] .rg-burger__close {
    display: block;
}

/* The header is the containing block (its backdrop-filter makes it one for
   positioned descendants), so the panel hangs from its bottom edge and is
   exactly as wide as the screen. */
.rg-burger__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--rg-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--rg-s-5) var(--rg-gutter) var(--rg-s-7);
    border-top: 1px solid var(--rg-line);
    background: var(--rg-bg);
}

.rg-burger__panel > nav {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-4);
    max-width: 560px;
    margin-inline: auto;
}

.rg-burger__title {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rg-burger__services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-2);
}

@media (min-width: 480px) {
    .rg-burger__services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rg-burger__services a {
    display: flex;
    align-items: center;
    gap: var(--rg-s-3);
    min-height: 52px;
    padding: var(--rg-s-3) var(--rg-s-4);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    background: var(--rg-surface);
    font-weight: 500;
}

.rg-burger__services .rg-icon {
    color: var(--rg-red-ink);
}

.rg-burger__links {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rg-line);
}

.rg-burger__links a {
    display: block;
    padding: var(--rg-s-4) 0;
    border-bottom: 1px solid var(--rg-line);
    font-size: 1.125rem;
    font-weight: 500;
}

.rg-burger__foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rg-s-3);
}

.rg-burger__foot > .rg-login {
    justify-content: center;
    padding-block: var(--rg-s-2);
}

@media (min-width: 1100px) {
    .rg-brand img {
        height: 40px;
    }

    .rg-nav {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-inline-start: var(--rg-s-3);
    }

    .rg-header__actions > .rg-login {
        display: inline-flex;
    }

    .rg-burger {
        display: none;
    }
}

/* ── The viewfinder: corners, grid, grain, REC, scan line ──────────────── */

.rg-vf {
    --rg-vf-inset: clamp(10px, 2.2vw, 28px);
    --rg-vf-arm: clamp(18px, 3vw, 40px);

    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.rg-vf__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--rg-tint), 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--rg-tint), 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 65% 40%, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 70% at 65% 40%, #000 25%, transparent 80%);
}

.rg-vf__grain {
    position: absolute;
    inset: -40%;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: rg-grain 1.4s steps(6) infinite;
}

/* The scan: a hairline that drifts down the frame and is gone at either end — a
   sign the viewfinder is live, never something the eye has to follow. Slow, eased,
   faint; it runs on the page's clock (rg-in-phase.js), so the circuit's swap of the
   page cannot restart it. */
.rg-vf__scan {
    position: absolute;
    inset: 0;
    animation: rg-scan 14s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.rg-vf__scan::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--rg-red-rgb), 0.08) 25%, rgba(var(--rg-red-rgb), 0.14) 50%, rgba(var(--rg-red-rgb), 0.08) 75%, transparent);
}

/* On paper even less: a line the eye notices only when it looks for it. */
:root[data-theme="light"] .rg-vf__scan::before {
    opacity: 0.7;
}

.rg-vf__corner {
    position: absolute;
    width: var(--rg-vf-arm);
    height: var(--rg-vf-arm);
    border: 2px solid rgba(var(--rg-tint), 0.72);
}

.rg-vf__corner--tl {
    top: var(--rg-vf-inset);
    left: var(--rg-vf-inset);
    border-right: 0;
    border-bottom: 0;
}

.rg-vf__corner--tr {
    top: var(--rg-vf-inset);
    right: var(--rg-vf-inset);
    border-left: 0;
    border-bottom: 0;
}

.rg-vf__corner--bl {
    bottom: var(--rg-vf-inset);
    left: var(--rg-vf-inset);
    border-right: 0;
    border-top: 0;
}

.rg-vf__corner--br {
    bottom: var(--rg-vf-inset);
    right: var(--rg-vf-inset);
    border-left: 0;
    border-top: 0;
}

.rg-vf__hud {
    position: absolute;
    top: calc(var(--rg-vf-inset) + 4px);
    display: inline-flex;
    align-items: center;
    gap: var(--rg-s-2);
    color: var(--rg-text-2);
    font: 600 11px/1 var(--rg-mono);
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.rg-vf__hud--tl {
    left: calc(var(--rg-vf-inset) + var(--rg-vf-arm) + var(--rg-s-2));
}

.rg-vf__hud--tr {
    right: calc(var(--rg-vf-inset) + var(--rg-vf-arm) + var(--rg-s-2));
}

.rg-vf__rec,
.rg-live-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rg-red);
    box-shadow: 0 0 10px var(--rg-red);
    animation: rg-blink 1.2s steps(1, end) infinite;
}

@keyframes rg-scan {
    0% { transform: translateY(-3%); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(103%); opacity: 0; }
}

@keyframes rg-blink {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0.15; }
}

@keyframes rg-grain {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-4%, 3%); }
    40% { transform: translate(3%, -5%); }
    60% { transform: translate(-6%, -2%); }
    80% { transform: translate(5%, 4%); }
    100% { transform: translate(0, 0); }
}

/* ── Home hero ─────────────────────────────────────────────────────────── */

.rg-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--rg-line);
    background:
        radial-gradient(110% 80% at 78% 18%, rgba(var(--rg-red-rgb), 0.17), transparent 58%),
        radial-gradient(80% 60% at 8% 100%, var(--rg-sheen-soft), transparent 60%),
        linear-gradient(180deg, var(--rg-hero-from) 0%, var(--rg-hero-to) 100%);
}

.rg-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-s-6);
    padding-block: var(--rg-s-8) var(--rg-s-7);
}

.rg-hero__copy > * + * {
    margin-top: var(--rg-s-5);
}

.rg-hero__copy > .rg-actions {
    margin-top: var(--rg-s-6);
}

.rg-hero__title {
    font-size: var(--rg-fs-hero);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.rg-hero__accent {
    display: block;
    color: var(--rg-red-ink);
    text-shadow: 0 0 40px rgba(var(--rg-red-rgb), calc(0.35 * var(--rg-glow-k)));
}

.rg-hero__sub {
    max-width: 60ch;
    color: var(--rg-text-2);
    font-size: var(--rg-fs-lead);
}

.rg-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-2) var(--rg-s-5);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

.rg-hero__points > li {
    display: inline-flex;
    align-items: center;
    gap: var(--rg-s-2);
}

.rg-hero__points .rg-icon {
    color: var(--rg-red-ink);
}

.rg-hero__call {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-sm);
}

.rg-hero__call > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--rg-s-2);
    color: var(--rg-text);
    font-weight: 600;
}

.rg-hero__scene {
    position: relative;
    max-width: 600px;
}

.rg-scene {
    display: block;
    width: 100%;
    height: auto;
}

.rg-scene__line {
    stroke: rgba(var(--rg-tint), 0.62);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rg-scene__thin {
    stroke: rgba(var(--rg-tint), 0.3);
    stroke-width: 1;
}

.rg-scene__ground {
    stroke: rgba(var(--rg-tint), 0.18);
    stroke-width: 1;
}

.rg-scene__window {
    fill: rgba(var(--rg-tint), 0.05);
    stroke: rgba(var(--rg-tint), 0.62);
    stroke-width: 1.6;
}

.rg-scene__window--lit {
    fill: var(--rg-lamp);
}

.rg-scene__moon {
    fill: rgba(var(--rg-tint), 0.06);
    stroke: rgba(var(--rg-tint), 0.2);
}

.rg-scene__knob {
    fill: rgba(var(--rg-tint), 0.62);
}

.rg-scene__cone {
    fill: rgba(var(--rg-red-rgb), 0.13);
    animation: rg-cone 4s ease-in-out infinite;
}

.rg-scene__camera :is(path, rect) {
    fill: var(--rg-surface);
    stroke: var(--rg-text);
    stroke-width: 1.6;
}

.rg-scene__lens {
    fill: var(--rg-red);
}

.rg-scene__target {
    animation: rg-target 2.4s ease-in-out infinite;
}

.rg-scene__target > path {
    fill: none;
    stroke: var(--rg-red);
    stroke-width: 2.4;
    stroke-linecap: square;
}

.rg-scene__tag {
    fill: var(--rg-red);
}

.rg-scene__target > text {
    fill: var(--rg-on-red);
    font: 700 9px var(--rg-mono);
    letter-spacing: 0.08em;
}

@keyframes rg-cone {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes rg-target {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (min-width: 1100px) {
    .rg-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--rg-s-7);
        min-height: clamp(600px, calc(88svh - var(--rg-header-h)), 820px);
        padding-block: var(--rg-s-8);
    }

    .rg-hero__scene {
        max-width: none;
    }
}

/* ── The band under the hero ───────────────────────────────────────────── */

.rg-proof-band {
    border-bottom: 1px solid var(--rg-line);
    background: var(--rg-bg-2);
}

.rg-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: var(--rg-s-4) var(--rg-s-6);
    padding-block: var(--rg-s-6);
}

.rg-proof > li {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-s-3);
    color: var(--rg-text-3);
    font-size: var(--rg-fs-sm);
    line-height: 1.45;
}

.rg-proof .rg-icon {
    margin-top: 1px;
    color: var(--rg-red-ink);
}

.rg-proof b {
    display: block;
    margin-bottom: 2px;
    color: var(--rg-text);
    font-size: 1rem;
    font-weight: 600;
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.rg-section {
    padding-block: var(--rg-section-y);
}

.rg-section--tight {
    padding-block: var(--rg-section-y-tight);
}

.rg-section--alt {
    border-block: 1px solid var(--rg-line);
    background: var(--rg-bg-2);
}

.rg-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    max-width: 780px;
    margin-bottom: var(--rg-s-7);
}

.rg-section__head--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rg-s-4);
    max-width: none;
}

.rg-section__head--row > div {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
}

/* The panel every card-like block shares: one surface, one border, one radius. */
:is(.rg-layer, .rg-audience__item, .rg-tile, .rg-compare__item, .rg-aside, .rg-step) {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    padding: var(--rg-s-5);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius-lg);
    background: var(--rg-surface);
}

:is(.rg-layer, .rg-audience__item, .rg-tile, .rg-compare__item, .rg-step) > p {
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

.rg-icon-badge {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--rg-red-line);
    border-radius: var(--rg-radius);
    background: var(--rg-red-soft);
    color: var(--rg-red-ink);
}

/* Service cards. */
.rg-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
}

.rg-cards > li {
    display: flex;
}

.rg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    width: 100%;
    padding: var(--rg-s-5);
    overflow: hidden;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius-lg);
    background: linear-gradient(180deg, var(--rg-surface) 0%, var(--rg-bg-2) 100%);
    transition:
        border-color var(--rg-fast) var(--rg-ease),
        transform var(--rg-fast) var(--rg-ease),
        box-shadow var(--rg-fast) var(--rg-ease);
}

.rg-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--rg-red), transparent 70%);
    opacity: 0;
    transition: opacity var(--rg-fast) var(--rg-ease);
}

.rg-card:hover {
    border-color: var(--rg-red-line);
    box-shadow: 0 26px 50px -30px rgba(var(--rg-red-rgb), 0.55);
    transform: translateY(-2px);
}

.rg-card:hover::before {
    opacity: 1;
}

.rg-card__icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: var(--rg-s-2);
    border: 1px solid var(--rg-red-line);
    border-radius: 14px;
    background: var(--rg-red-soft);
    color: var(--rg-red-ink);
}

.rg-card__title {
    font-size: var(--rg-fs-h3);
    font-weight: 600;
    line-height: 1.3;
}

.rg-card__text {
    flex: 1;
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

.rg-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--rg-s-2);
    color: var(--rg-red-ink);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
}

/* The four layers. */
.rg-layers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
    counter-reset: rg-layer;
}

.rg-layer {
    position: relative;
    counter-increment: rg-layer;
}

.rg-layer::after {
    content: "0" counter(rg-layer);
    position: absolute;
    top: var(--rg-s-5);
    right: var(--rg-s-5);
    color: var(--rg-text-3);
    font: 600 13px/1 var(--rg-mono);
    letter-spacing: 0.1em;
}

/* Tiles: use cases, what the customer gets. Four in a row when there are
   exactly four, otherwise three. */
.rg-tiles {
    --rg-tiles: 3;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
}

.rg-tiles:has(> li:nth-child(4):last-child) {
    --rg-tiles: 4;
}

/* Who it is for. */
.rg-audience {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
}

.rg-audience__item > .rg-text-link {
    margin-top: auto;
    padding-top: var(--rg-s-2);
}

.rg-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
}

.rg-compare__item > .rg-text-link {
    margin-top: auto;
}

/* Steps, numbered by CSS. */
.rg-steps {
    --rg-steps: 3;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
    counter-reset: rg-step;
}

.rg-step {
    position: relative;
    gap: var(--rg-s-2);
    padding-top: calc(var(--rg-s-5) + 30px);
    counter-increment: rg-step;
}

.rg-step::before {
    content: counter(rg-step, decimal-leading-zero);
    position: absolute;
    top: var(--rg-s-5);
    left: var(--rg-s-5);
    color: var(--rg-red-ink);
    font: 700 14px/1 var(--rg-mono);
    letter-spacing: 0.08em;
}

.rg-step::after {
    content: "";
    position: absolute;
    top: calc(var(--rg-s-5) + 7px);
    left: calc(var(--rg-s-5) + 34px);
    right: var(--rg-s-5);
    height: 1px;
    background: linear-gradient(90deg, var(--rg-red-line), transparent);
}

.rg-step__title {
    font-size: 1.125rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .rg-cards,
    .rg-layers,
    .rg-tiles,
    .rg-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .rg-compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .rg-audience {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .rg-cards,
    .rg-steps {
        grid-template-columns: repeat(var(--rg-steps, 3), minmax(0, 1fr));
    }

    .rg-layers {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .rg-tiles {
        grid-template-columns: repeat(var(--rg-tiles), minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .rg-steps:has(> li:nth-child(5):last-child) {
        --rg-steps: 5;
    }
}

/* ── Sub-page hero ─────────────────────────────────────────────────────── */

.rg-subhero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid var(--rg-line);
    background:
        radial-gradient(90% 120% at 88% 0%, rgba(var(--rg-red-rgb), 0.15), transparent 55%),
        linear-gradient(180deg, var(--rg-hero-from), var(--rg-hero-to));
}

.rg-subhero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-4);
    padding-block: var(--rg-s-8);
}

.rg-subhero__inner > .rg-h1 {
    max-width: 22ch;
}

.rg-subhero__inner > .rg-actions {
    margin-top: var(--rg-s-3);
}

.rg-subhero--compact .rg-subhero__inner {
    padding-block: var(--rg-s-7);
}

.rg-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-2);
    margin-bottom: var(--rg-s-2);
    color: var(--rg-text-3);
    font-size: 0.875rem;
}

.rg-crumbs > a:hover {
    color: var(--rg-text);
}

.rg-crumbs > [aria-current] {
    color: var(--rg-text-2);
}

@media (min-width: 1100px) {
    .rg-subhero__inner {
        padding-block: var(--rg-s-9) var(--rg-s-8);
    }

    .rg-subhero--compact .rg-subhero__inner {
        padding-block: var(--rg-s-8) var(--rg-s-7);
    }
}

/* ── Two columns: the text and its side panel ──────────────────────────── */

.rg-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--rg-s-7);
}

.rg-split > .rg-section__head {
    margin-bottom: 0;
}

@media (min-width: 1100px) {
    .rg-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        gap: var(--rg-s-8);
    }

    .rg-split--even {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .rg-split > .rg-aside {
        position: sticky;
        top: calc(var(--rg-header-h) + var(--rg-s-5));
    }
}

.rg-prose {
    max-width: 72ch;
}

.rg-prose > * + * {
    margin-top: var(--rg-s-4);
}

.rg-prose > p + h2 {
    margin-top: var(--rg-s-7);
}

.rg-prose > p {
    color: var(--rg-text-2);
}

.rg-aside {
    gap: var(--rg-s-4);
    border-color: var(--rg-line-strong);
}

.rg-aside__title {
    font-size: 1.125rem;
    font-weight: 600;
}

.rg-aside__note {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-sm);
}

.rg-aside--link {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--rg-s-3);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
    transition: border-color var(--rg-fast) var(--rg-ease);
}

.rg-aside--link:hover {
    border-color: var(--rg-red-line);
}

.rg-aside--link .rg-icon {
    color: var(--rg-red-ink);
}

.rg-aside--link b {
    display: block;
    color: var(--rg-text);
    font-size: 1rem;
}

.rg-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
}

.rg-checklist > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

.rg-checklist .rg-icon {
    margin-top: 3px;
    color: var(--rg-red-ink);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.rg-faq {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
}

.rg-faq__item {
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    background: var(--rg-surface);
}

.rg-faq__item[open] {
    border-color: var(--rg-line-strong);
}

.rg-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-s-4);
    padding: var(--rg-s-4) var(--rg-s-5);
    font-weight: 600;
    cursor: pointer;
}

.rg-faq__chevron {
    color: var(--rg-text-3);
}

.rg-faq__item[open] .rg-faq__chevron {
    rotate: 180deg;
}

.rg-faq__a {
    padding: 0 var(--rg-s-5) var(--rg-s-5);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

/* ── The closing invitation ────────────────────────────────────────────── */

.rg-cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-s-5);
    padding: var(--rg-s-6) var(--rg-s-5);
    border: 1px solid var(--rg-red-line);
    border-radius: var(--rg-radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--rg-red-rgb), 0.32), transparent 55%),
        linear-gradient(135deg, var(--rg-cta-from), var(--rg-cta-to) 60%);
}

.rg-cta-band__text {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
}

.rg-cta-band__text > p {
    max-width: 62ch;
    color: var(--rg-text-2);
}

.rg-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-3);
}

@media (max-width: 639px) {
    .rg-cta-band__actions > .rg-btn {
        flex: 1 1 100%;
    }
}

@media (min-width: 900px) {
    .rg-cta-band {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--rg-s-7);
        padding: var(--rg-s-7);
    }
}

/* ── The test teaser on the home page ──────────────────────────────────── */

.rg-teaser {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-6);
    padding: var(--rg-s-8) var(--rg-s-5) var(--rg-s-6);
    overflow: hidden;
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius-lg);
    background:
        radial-gradient(80% 120% at 100% 100%, rgba(var(--rg-red-rgb), 0.2), transparent 60%),
        linear-gradient(160deg, var(--rg-teaser-from), var(--rg-teaser-to));
}

.rg-teaser__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rg-s-4);
}

.rg-teaser__copy > .rg-btn {
    margin-top: var(--rg-s-2);
}

.rg-teaser__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    counter-reset: rg-q;
}

.rg-teaser__list > li {
    display: flex;
    align-items: center;
    gap: var(--rg-s-3);
    padding: var(--rg-s-3) var(--rg-s-4);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    background: rgba(var(--rg-tint), 0.03);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
    counter-increment: rg-q;
}

.rg-teaser__list > li::before {
    content: counter(rg-q);
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rg-red-soft);
    color: var(--rg-red-ink);
    font: 600 12px/1 var(--rg-mono);
}

@media (max-width: 639px) {
    .rg-teaser__copy > .rg-btn {
        width: 100%;
    }
}

@media (min-width: 1100px) {
    .rg-teaser {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
        align-items: center;
        gap: var(--rg-s-8);
        padding: var(--rg-s-8);
    }
}

/* ── How we work: the timeline ─────────────────────────────────────────── */

.rg-timeline {
    display: flex;
    flex-direction: column;
    max-width: 880px;
}

.rg-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--rg-s-4);
    padding-bottom: var(--rg-s-6);
}

.rg-timeline__item::before {
    content: "";
    position: absolute;
    top: 56px;
    bottom: var(--rg-s-2);
    left: 23.5px;
    width: 1px;
    background: linear-gradient(var(--rg-red-line), var(--rg-line));
}

.rg-timeline__item:last-child {
    padding-bottom: 0;
}

.rg-timeline__item:last-child::before {
    display: none;
}

.rg-timeline__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--rg-red-line);
    border-radius: 14px;
    background: var(--rg-red-soft);
    color: var(--rg-red-ink);
}

.rg-timeline__item > div {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    padding-top: 10px;
}

.rg-timeline__item p {
    color: var(--rg-text-2);
}

.rg-promise {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--rg-s-3) var(--rg-s-4);
    border-radius: var(--rg-radius);
    background: var(--rg-red-soft);
    font-weight: 500;
}

.rg-promise .rg-icon {
    color: var(--rg-red-ink);
}

/* ── Contact: the form and its side ────────────────────────────────────── */

.rg-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--rg-s-6);
}

.rg-contact__aside {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-4);
}

@media (min-width: 1100px) {
    .rg-contact {
        grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
        gap: var(--rg-s-7);
    }

    .rg-contact__aside {
        position: sticky;
        top: calc(var(--rg-header-h) + var(--rg-s-5));
    }
}

/* A form in three bands: what is being filled in, the fields, the decision
   under a rule — so the button is never welded to the last field. */
.rg-form {
    overflow: hidden;
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius-lg);
    background: var(--rg-surface);
}

.rg-form__head {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    padding: var(--rg-s-5);
    border-bottom: 1px solid var(--rg-line);
}

.rg-form__head > p {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-sm);
}

.rg-form__body {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-5);
    padding: var(--rg-s-5);
}

.rg-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rg-s-4);
    padding: var(--rg-s-4) var(--rg-s-5) var(--rg-s-5);
    border-top: 1px solid var(--rg-line);
    background: rgba(var(--rg-tint), 0.015);
}

.rg-form__foot > .rg-alert {
    flex: 1 1 100%;
}

@media (max-width: 639px) {
    .rg-form__foot > .rg-btn {
        flex: 1 1 100%;
    }
}

@media (min-width: 768px) {
    .rg-form__head,
    .rg-form__body {
        padding: var(--rg-s-6);
    }

    .rg-form__foot {
        padding: var(--rg-s-5) var(--rg-s-6);
    }
}

.rg-field,
.rg-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
    min-width: 0;
}

.rg-field-group {
    gap: var(--rg-s-3);
}

.rg-field__label,
.rg-field-group__label {
    color: var(--rg-text);
    font-size: 0.90625rem;
    font-weight: 600;
}

.rg-field-group__label > span {
    display: block;
    margin-top: 2px;
    color: var(--rg-text-3);
    font-size: 0.84375rem;
    font-weight: 400;
}

.rg-field__opt {
    color: var(--rg-text-3);
    font-weight: 400;
}

.rg-field__hint {
    color: var(--rg-text-3);
    font-size: 0.84375rem;
}

.rg-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
}

@media (min-width: 640px) {
    .rg-field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rg-input {
    width: 100%;
    min-height: 50px;
    padding: var(--rg-s-3) 14px;
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius);
    background: var(--rg-bg);
    color: var(--rg-text);
    font: inherit;
    font-size: 1rem;
    transition: border-color var(--rg-fast) var(--rg-ease), box-shadow var(--rg-fast) var(--rg-ease);
}

.rg-input:hover {
    border-color: rgba(var(--rg-tint), 0.28);
}

.rg-input:focus {
    border-color: var(--rg-red-ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--rg-red-rgb), 0.25);
}

.rg-input.is-invalid {
    border-color: var(--rg-red-ink);
}

.rg-textarea {
    min-height: 140px;
    line-height: 1.5;
    resize: vertical;
}

.rg-field__errors {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-1);
}

.rg-field__error {
    color: var(--rg-red-ink);
    font-size: 0.84375rem;
}

/* The trades as tickable tiles: the whole tile is the ForgeCheckbox's label. */
.rg-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-2);
}

@media (min-width: 480px) {
    .rg-pick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .rg-pick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rg-pick > .forge-checkbox {
    position: relative;
    display: flex;
    gap: var(--rg-s-3);
    min-height: 52px;
    padding: var(--rg-s-3) 14px;
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius);
    background: var(--rg-bg);
    color: var(--rg-text);
    font-size: var(--rg-fs-sm);
    transition: border-color var(--rg-fast) var(--rg-ease), background-color var(--rg-fast) var(--rg-ease);
}

.rg-pick > .forge-checkbox[data-checked="true"] {
    border-color: var(--rg-red-line);
    background: var(--rg-red-soft);
}

.rg-pick > .forge-checkbox:focus-within {
    border-color: var(--rg-red-ink);
}

/* The honeypot: present for a bot, absent for a person. */
.rg-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.rg-alert {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-1);
    padding: var(--rg-s-3) 14px;
    border: 1px solid rgba(var(--rg-red-ink-rgb), 0.4);
    border-radius: var(--rg-radius);
    background: rgba(var(--rg-red-rgb), 0.1);
    font-size: 0.90625rem;
}

.rg-thanks__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--rg-s-2);
    border-radius: 50%;
    background: var(--rg-red);
    color: var(--rg-on-red);
    box-shadow: 0 0 30px var(--rg-red-glow);
}

.rg-thanks .rg-form__body > .rg-promise {
    align-self: flex-start;
}

.rg-next {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    counter-reset: rg-next;
}

.rg-next > li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: var(--rg-s-3);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
    counter-increment: rg-next;
}

.rg-next > li::before {
    content: counter(rg-next);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--rg-red-line);
    border-radius: 50%;
    color: var(--rg-red-ink);
    font: 600 12.5px/1 var(--rg-mono);
}

.rg-facts {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-4);
}

.rg-facts > li {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-s-3);
}

.rg-facts .rg-icon {
    margin-top: 2px;
    color: var(--rg-red-ink);
}

.rg-facts > li > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rg-facts small {
    color: var(--rg-text-3);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rg-facts a:hover {
    color: var(--rg-red-ink);
}

/* ── The security test ─────────────────────────────────────────────────── */

.rg-quiz {
    min-width: 0;
    padding: var(--rg-s-5);
    border: 1px solid var(--rg-line-strong);
    border-radius: var(--rg-radius-lg);
    background: var(--rg-surface);
}

@media (min-width: 768px) {
    .rg-quiz {
        padding: var(--rg-s-7);
    }
}

.rg-quiz__progress {
    display: flex;
    align-items: center;
    gap: var(--rg-s-4);
    color: var(--rg-text-3);
    font: 600 12px/1 var(--rg-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rg-quiz__bar {
    display: block;
    flex: 1;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(var(--rg-tint), 0.08);
}

.rg-quiz__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--rg-red), var(--rg-red-ink));
    transform: scaleX(var(--rg-progress));
    transform-origin: left;
    transition: transform 260ms var(--rg-ease);
}

/* A fieldset with none of the browser's frame (rule 11). The legend floats so
   it becomes an ordinary flex item instead of sitting on the frame's edge. */
.rg-quiz__question {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    min-width: 0;
    margin: var(--rg-s-6) 0 0;
    padding: 0;
    border: 0;
}

.rg-quiz__text {
    float: left;
    width: 100%;
    padding: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.rg-quiz__hint {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-sm);
}

.rg-quiz__options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-3);
    margin-top: var(--rg-s-2);
}

@media (min-width: 640px) {
    .rg-quiz__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rg-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 14px 18px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 14px;
    background: var(--rg-bg);
    color: var(--rg-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rg-fast) var(--rg-ease), background-color var(--rg-fast) var(--rg-ease);
}

.rg-option:hover:not(:disabled) {
    border-color: var(--rg-red-line);
    background: rgba(var(--rg-red-rgb), 0.06);
}

.rg-option:disabled {
    cursor: progress;
    opacity: 0.7;
}

.rg-option.is-chosen {
    border-color: var(--rg-red);
    background: var(--rg-red-soft);
}

.rg-option__mark {
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--rg-tint), 0.35);
    border-radius: 50%;
}

.rg-option.is-chosen .rg-option__mark {
    border-color: var(--rg-red);
    background: radial-gradient(circle, var(--rg-red) 0 42%, transparent 46%);
}

.rg-quiz__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-s-3);
    margin-top: var(--rg-s-6);
    padding-top: var(--rg-s-4);
    border-top: 1px solid var(--rg-line);
}

.rg-quiz__note {
    margin-left: auto;
    color: var(--rg-text-3);
    font-size: var(--rg-fs-xs);
}

.rg-result {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-6);
}

.rg-result--good { --rg-band: var(--rg-band-good); }
.rg-result--fair { --rg-band: var(--rg-band-fair); }
.rg-result--weak { --rg-band: var(--rg-band-weak); }

.rg-result__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-s-5);
}

.rg-result__head > div {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
}

@media (min-width: 640px) {
    .rg-result__head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--rg-s-6);
    }
}

.rg-result__gauge {
    display: grid;
    place-content: center;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--rg-surface) 79%, transparent 80% 100%),
        conic-gradient(var(--rg-band) calc(var(--rg-score) * 1%), rgba(var(--rg-tint), 0.08) 0);
    text-align: center;
}

.rg-result__number {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.rg-result__of {
    color: var(--rg-text-3);
    font-size: var(--rg-fs-xs);
}

.rg-result__block {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
}

.rg-findings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-3);
}

@media (min-width: 768px) {
    .rg-findings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rg-finding {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--rg-s-4) 18px;
    border: 1px solid var(--rg-line);
    border-left: 3px solid var(--rg-band);
    border-radius: 14px;
    background: var(--rg-bg);
}

.rg-finding > p {
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

.rg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rg-s-2);
}

.rg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--rg-s-2);
    min-height: 44px;
    padding: 0 var(--rg-s-4);
    border: 1px solid var(--rg-red-line);
    border-radius: 999px;
    background: var(--rg-red-soft);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
}

.rg-chip .rg-icon {
    color: var(--rg-red-ink);
}

.rg-result__honest {
    padding-top: var(--rg-s-4);
    border-top: 1px solid var(--rg-line);
    color: var(--rg-text-3);
    font-size: 0.84375rem;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.rg-footer {
    margin-top: auto;
    padding-block: var(--rg-s-8) var(--rg-s-5);
    border-top: 1px solid var(--rg-line);
    background: var(--rg-footer-bg);
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
}

.rg-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-6);
}

.rg-footer__brand,
.rg-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
}

.rg-footer__brand {
    max-width: 360px;
}

.rg-footer__logo {
    align-self: flex-start;
}

.rg-footer__logo img {
    width: auto;
    height: 36px;
}

.rg-footer__region {
    display: flex;
    align-items: center;
    gap: var(--rg-s-2);
    color: var(--rg-text-3);
}

.rg-footer__title {
    color: var(--rg-text);
    font-size: var(--rg-fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rg-footer__links,
.rg-footer__facts {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-2);
}

.rg-footer__links a:hover,
.rg-footer__facts a:hover {
    color: var(--rg-text);
}

.rg-footer__facts > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rg-footer__facts .rg-icon {
    margin-top: 4px;
    color: var(--rg-red-ink);
}

.rg-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-s-3);
    margin-top: var(--rg-s-7);
    padding-top: var(--rg-s-4);
    border-top: 1px solid var(--rg-line);
    color: var(--rg-text-3);
    font-size: 0.84375rem;
}

@media (min-width: 640px) {
    .rg-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .rg-footer__grid {
        grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
        gap: var(--rg-s-7);
    }
}

/* ── The premium layer ─────────────────────────────────────────────────── */

/* Everything below refines what the sections above already are — the same
   classes, the same tokens — so a page written before it still looks right
   and a page written after it needs nothing new. What it adds, and why:

     * a warm graphite instead of a blue-black, and a film grain over the
       whole site: flat #000 reads as a template, grain reads as a photograph;
     * one light source (top right, red) that every surface catches the same
       way, through a hairline gradient on the edge of each panel;
     * headings set tighter and balanced, an eyebrow with a short red rule;
     * sections that rise into view as they are scrolled to — where the
       browser can tie an animation to the scroll, never with a script, and
       never under reduced motion.                                           */

.rg {
    --rg-edge: linear-gradient(160deg, rgba(var(--rg-tint), 0.14), rgba(var(--rg-tint), 0.03) 38%, rgba(var(--rg-tint), 0.02) 62%, rgba(var(--rg-red-rgb), 0.22));
    --rg-panel: linear-gradient(180deg, var(--rg-sheen), transparent 60%), var(--rg-surface);
    position: relative;
}

/* The grain: one fixed layer, so it never scrolls and never repaints with
   the page. A 160 px SVG noise tile, at five per cent. */
.rg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: var(--rg-grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Type. */
.rg-h2 {
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1.06;
}

.rg-hero__title {
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.rg-lead,
.rg-section p {
    text-wrap: pretty;
}

.rg-eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--rg-red);
}

.rg-eyebrow--live::before { content: none; }

/* The header: glass that the page shows through, and a hairline that
   catches the light instead of a grey rule. */
.rg-header {
    background: color-mix(in srgb, var(--rg-bg) 72%, transparent);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
    backdrop-filter: saturate(170%) blur(20px);
    border-bottom-color: rgba(var(--rg-tint), 0.06);
    box-shadow: 0 1px 0 rgba(var(--rg-tint), 0.03), 0 10px 30px -20px rgba(var(--rg-shade), calc(0.8 * var(--rg-shadow-k)));
}

/* Buttons: a pill, lit from above, glowing only when it is pressed for. */
.rg-btn {
    border-radius: 999px;
    letter-spacing: 0.005em;
}

.rg-btn--primary {
    background: linear-gradient(180deg, var(--rg-red-top), var(--rg-red) 55%, var(--rg-red-bottom));
    box-shadow: 0 14px 34px -14px var(--rg-red-glow), inset 0 1px 0 rgba(var(--rg-on-dark-rgb), 0.28), inset 0 -1px 0 rgba(var(--rg-shade), calc(0.18 * var(--rg-shadow-k)));
}

.rg-btn--primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--rg-red-top-hover), var(--rg-red-hover) 55%, var(--rg-red-bottom-hover));
    box-shadow: 0 18px 44px -14px var(--rg-red-glow), inset 0 1px 0 rgba(var(--rg-on-dark-rgb), 0.32);
    transform: translateY(-1px);
}

.rg-btn--ghost {
    background: rgba(var(--rg-tint), 0.05);
    border-color: rgba(var(--rg-tint), 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Panels: the hairline gradient edge (a padding-box fill over a border-box
   gradient), a faint sheen at the top, and a lift that brings the light. */
:is(.rg-layer, .rg-audience__item, .rg-tile, .rg-compare__item, .rg-aside, .rg-step, .rg-card) {
    border: 1px solid transparent;
    border-radius: 24px;
    background:
        var(--rg-panel) padding-box,
        var(--rg-edge) border-box;
    box-shadow: 0 30px 60px -40px rgba(var(--rg-shade), calc(0.9 * var(--rg-shadow-k)));
}

:is(.rg-card, .rg-audience__item, .rg-layer) {
    transition:
        transform 420ms var(--rg-ease),
        box-shadow 420ms var(--rg-ease),
        background 420ms var(--rg-ease);
}

:is(.rg-card, .rg-audience__item, .rg-layer):hover {
    transform: translateY(-4px);
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(var(--rg-red-rgb), 0.12), transparent 60%) padding-box,
        var(--rg-panel) padding-box,
        linear-gradient(160deg, rgba(var(--rg-red-ink-rgb), 0.55), rgba(var(--rg-tint), 0.05) 45%, rgba(var(--rg-red-rgb), 0.35)) border-box;
    box-shadow: 0 40px 70px -40px rgba(var(--rg-red-rgb), 0.45), 0 30px 60px -40px rgba(var(--rg-shade), calc(0.9 * var(--rg-shadow-k)));
}

.rg-card::before { display: none; }

.rg-icon-badge,
.rg-card__icon {
    border-radius: 14px;
    background: radial-gradient(120% 120% at 30% 0%, rgba(var(--rg-red-ink-rgb), 0.28), rgba(var(--rg-red-rgb), 0.08));
    box-shadow: inset 0 1px 0 rgba(var(--rg-on-dark-rgb), 0.12), 0 10px 24px -12px rgba(var(--rg-red-rgb), 0.6);
}

/* Sections: the alternate band is a shade, not a box. */
.rg-section--alt {
    border-block-color: rgba(var(--rg-tint), 0.05);
    background:
        radial-gradient(70% 60% at 50% 0%, var(--rg-sheen-soft), transparent 70%),
        var(--rg-bg-2);
}

.rg-hero {
    background:
        radial-gradient(70% 60% at 80% 12%, rgba(var(--rg-red-rgb), 0.22), transparent 62%),
        radial-gradient(50% 50% at 95% 70%, rgba(var(--rg-warm-rgb), 0.06), transparent 70%),
        radial-gradient(80% 60% at 8% 100%, var(--rg-sheen-soft), transparent 60%),
        linear-gradient(180deg, var(--rg-hero-from) 0%, var(--rg-hero-to) 100%);
}

/* The closing invitation, lit like the hero. */
.rg-cta-band {
    border-radius: 32px;
}

/* ── RG ONE: the portal and the installer's app ────────────────────────── */

.rg-one {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-block: 1px solid rgba(var(--rg-tint), 0.05);
    background:
        radial-gradient(60% 70% at 85% 50%, rgba(var(--rg-red-rgb), 0.16), transparent 70%),
        radial-gradient(40% 50% at 0% 0%, var(--rg-sheen-soft), transparent 70%),
        var(--rg-bg-2);
}

.rg-one__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-s-8);
}

@media (min-width: 1100px) {
    .rg-one__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.rg-one__copy {
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-4);
}

.rg-one__copy .rg-actions { margin-top: var(--rg-s-3); }

.rg-one__points {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
    margin: var(--rg-s-3) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .rg-one__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rg-one__points li {
    display: flex;
    gap: var(--rg-s-3);
    align-items: flex-start;
}

.rg-one__points .rg-icon {
    flex: none;
    margin-top: 3px;
    color: var(--rg-red-ink);
}

.rg-one__points span { color: var(--rg-text-2); font-size: var(--rg-fs-sm); line-height: 1.5; }
.rg-one__points b { display: block; color: var(--rg-text); font-size: var(--rg-fs-base); font-weight: 600; margin-bottom: 2px; }

/* The two phones. Sized from one number so they scale as one picture. */
.rg-one__devices {
    --ph: clamp(250px, 24vw, 300px);
    position: relative;
    display: flex;
    justify-content: center;
    /* A phone is 19/9 of its width tall, the front one sits 6 % lower and the
       tilt adds a little: 2.3 widths hold both without spilling. */
    min-height: calc(var(--ph) * 2.3);
    max-width: 100%;
}

.rg-phone {
    position: absolute;
    top: 0;
    width: var(--ph);
    aspect-ratio: 9 / 19;
    padding: 10px;
    border-radius: calc(var(--ph) * 0.17);
    background: linear-gradient(160deg, var(--rg-device-from), var(--rg-device-mid) 40%, var(--rg-device-to));
    box-shadow:
        inset 0 0 0 1px rgba(var(--rg-on-dark-rgb), 0.12),
        inset 0 0 0 4px var(--rg-device-edge),
        0 50px 90px -40px rgba(var(--rg-shade), calc(0.95 * var(--rg-shadow-k))),
        0 30px 60px -30px rgba(var(--rg-red-rgb), 0.35);
}

.rg-phone--front { left: 50%; transform: translateX(-12%) rotate(4deg); top: 6%; z-index: 2; }
.rg-phone--back { right: 50%; transform: translateX(8%) rotate(-5deg); z-index: 1; filter: saturate(0.95); }

.rg-phone__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 34px 12px 12px;
    overflow: hidden;
    border-radius: calc(var(--ph) * 0.135);
    background: var(--rg-app-paper);
    color: var(--rg-app-ink);
    font-size: 11px;
    line-height: 1.35;
}

/* The island. */
.rg-phone__screen::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 30%;
    height: 16px;
    border-radius: 999px;
    background: var(--rg-device-edge);
    transform: translateX(-50%);
}

.rg-phone__screen--dark { background: var(--rg-app-paper); }

.rg-phone__bar {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.rg-phone__bar b { color: var(--rg-red); font-weight: 700; }

.rg-phone__bar i {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--rg-app-chip);
    color: var(--rg-app-chip-ink);
    font-style: normal;
    font-size: 9px;
}

.rg-phone__mark {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--rg-app-mark);
    color: var(--rg-on-dark);
    font-size: 8px;
    font-weight: 800;
    box-shadow: inset 0 -2px 0 var(--rg-red);
}

.rg-mini-now {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 12px 12px;
    border-radius: 18px;
    background:
        radial-gradient(140px 90px at 100% 0%, var(--rg-app-ok-glow), transparent 70%),
        linear-gradient(165deg, var(--rg-app-night-from), var(--rg-app-night-to));
    color: var(--rg-app-paper);
}

.rg-mini-now__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--rg-app-night-ink-2); font-size: 9.5px; font-weight: 600; }
.rg-mini-now__eyebrow .rg-live-dot { width: 6px; height: 6px; background: var(--rg-app-ok); box-shadow: 0 0 0 3px var(--rg-app-ok-ring); }
.rg-mini-now__title { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.rg-mini-now__clock { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }

.rg-mini-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.rg-mini-tiles span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 2px;
    border-radius: 10px;
    background: rgba(var(--rg-tint), 0.08);
    border: 1px solid rgba(var(--rg-tint), 0.1);
    font-size: 8.5px;
    font-weight: 600;
}

.rg-mini-tiles span.is-lit { background: var(--rg-red); border-color: transparent; }

.rg-mini-now__leave {
    padding: 9px;
    border-radius: 10px;
    background: var(--rg-app-paper);
    color: var(--rg-app-ink-2);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.rg-mini-project {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 18px;
    background: var(--rg-app-card);
    box-shadow: 0 10px 24px -16px var(--rg-app-shadow);
}

.rg-mini-project__title { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.rg-mini-project__phase { margin-top: -3px; color: var(--rg-app-muted); font-size: 10.5px; }

.rg-mini-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 4px;
}

.rg-mini-steps i { height: 5px; border-radius: 999px; background: var(--rg-app-track); }
.rg-mini-steps i.is-done { background: var(--rg-app-done); }
.rg-mini-steps i.is-now { background: linear-gradient(90deg, var(--rg-red) 55%, var(--rg-app-track) 55%); }

.rg-mini-steps__labels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    color: var(--rg-app-muted-2);
    font-size: 7.5px;
}

.rg-mini-steps__labels b { font-weight: 600; }
.rg-mini-steps__labels b:nth-child(3) { color: var(--rg-app-ink-2); }

.rg-mini-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-left: 3px solid var(--rg-red);
    border-radius: 14px;
    background: var(--rg-app-card);
}

.rg-mini-card__title { font-size: 10.5px; font-weight: 700; }
.rg-mini-card__text { color: var(--rg-app-text); font-size: 10px; }

.rg-mini-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.rg-mini-photos i {
    aspect-ratio: 1;
    border-radius: 9px;
    background:
        repeating-linear-gradient(-12deg, transparent 0 9px, rgba(var(--rg-red-rgb), 0.55) 9px 11px),
        linear-gradient(150deg, #8a7c6a, #4b4339);
}

.rg-mini-photos i:nth-child(2) {
    background:
        radial-gradient(circle at 50% 45%, #e9e4dc 0 18%, transparent 19%),
        linear-gradient(150deg, #5f6b74, #2d3338);
}

.rg-mini-photos i:nth-child(3) {
    background:
        repeating-linear-gradient(90deg, #d7d1c8 0 6px, #bdb5aa 6px 7px),
        #c9c1b6;
}


.rg-mini-head { margin-top: 2px; font-size: 11.5px; font-weight: 700; }

.rg-mini-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 12px;
    background: var(--rg-app-card);
    box-shadow: 0 6px 16px -12px var(--rg-app-shadow);
}

.rg-mini-row > span:last-child { display: flex; flex-direction: column; min-width: 0; color: var(--rg-app-muted-3); font-size: 9px; }
.rg-mini-row b { color: var(--rg-app-ink-2); font-size: 10px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rg-mini-date {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--rg-app-date);
    color: var(--rg-app-muted-2);
    font-size: 7px;
    line-height: 1;
    text-transform: uppercase;
}

.rg-mini-date b { color: var(--rg-app-ink-2); font-size: 12px; }

.rg-mini-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--rg-app-av-from), var(--rg-app-av-to));
    color: var(--rg-app-av-ink);
    font-size: 9px;
    font-weight: 700;
}

.rg-mini-help {
    margin-top: auto;
    padding: 10px;
    border-radius: 12px;
    background: var(--rg-red);
    color: var(--rg-on-red);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 639px) {
    .rg-one__devices { --ph: min(50vw, 220px); min-height: calc(var(--ph) * 2.35); }
    .rg-phone--front { transform: translateX(-8%) rotate(4deg); }
    .rg-phone--back { transform: translateX(6%) rotate(-5deg); }
}

/* ── The hero's house: a live 3D model (SiteBlueprint + rg-hero3d.js) ──── */

/* The stage is a canvas the module draws on, in the theme's ink (rg-wire3d.js);
   before the module runs (and in a test, and without JavaScript) it shows the
   glow the model stands in, which is enough to hold the space. */
.h3d {
    position: relative;
    margin: 0;
    user-select: none;
}

.h3d__stage {
    position: relative;
    aspect-ratio: 5 / 4;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    /* The model has no frame: it fades out at every edge into the hero. */
    mask-image:
        linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
        linear-gradient(to bottom, transparent, #000 8%, #000 72%, transparent);
    mask-composite: intersect;
}

/* Light under the model. */
.h3d__stage::before {
    content: "";
    position: absolute;
    inset: 18% 4% 6%;
    z-index: -1;
    background:
        radial-gradient(50% 42% at 50% 62%, rgba(var(--rg-red-rgb), 0.14), transparent 70%),
        radial-gradient(70% 50% at 50% 70%, rgba(var(--rg-tint), 0.05), transparent 72%);
    filter: blur(8px);
}

.h3d__stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.h3d.is-live canvas { opacity: 1; }

.h3d__tags {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.h3d__tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 9px;
    border: 1px solid rgba(var(--rg-tint), 0.16);
    border-radius: 999px;
    background: color-mix(in srgb, var(--rg-surface) 78%, transparent);
    backdrop-filter: blur(8px);
    color: var(--rg-text);
    font: 600 11px/1 var(--rg-mono);
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: transform;
}

.h3d__tag:is([data-layer="a"], [data-layer="c"], [data-layer="e"]) { border-color: rgba(var(--rg-red-rgb), 0.45); }
.h3d__tag[data-layer="n"] { border-color: color-mix(in srgb, var(--rg-net) 50%, transparent); }

/* The layers, which are the trades: chips that say what lights up, and switch it. */
.h3d__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rg-s-2);
    margin-top: var(--rg-s-3);
}

.h3d__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 999px;
    background: rgba(var(--rg-tint), 0.03);
    color: var(--rg-text-2);
    font: 600 12px/1 var(--rg-font);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}

.h3d__chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}

.h3d__chip:hover { color: var(--rg-text); border-color: rgba(var(--rg-tint), 0.3); }
.h3d__chip:focus-visible { outline: 2px solid var(--rg-red-ink); outline-offset: 2px; }

.h3d__chip[aria-pressed="true"] {
    color: var(--rg-text);
    border-color: rgba(var(--rg-red-rgb), 0.6);
    background: var(--rg-red-soft);
}

.h3d__chip[aria-pressed="true"]::before {
    background: var(--rg-red);
    opacity: 1;
    box-shadow: 0 0 10px var(--rg-red-glow);
}

.h3d__chip[data-layer="2"][aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--rg-net) 60%, transparent);
    background: color-mix(in srgb, var(--rg-net) 10%, transparent);
}

.h3d__chip[data-layer="2"][aria-pressed="true"]::before { background: var(--rg-net); box-shadow: 0 0 10px var(--rg-net); }

@media (max-width: 639px) {
    .h3d__stage { aspect-ratio: 6 / 5; }
    .h3d__tag { font-size: 10px; padding: 4px 7px; }
    .h3d__chip { min-height: 32px; padding: 0 11px; font-size: 11px; }
}

/* ── The hero's showcase: a model and four films (SiteShowcaseFilm, cine/) ─ */

/* The stage is a transparent canvas in the hero itself: no frame, no card. The
   model's ground fades into the page (cine/kit.js) and the canvas fades out at
   every edge, so a close-up dissolves into the hero's light instead of ending
   at a border. Before the module runs (and without JavaScript) the stage holds
   its space and the caption under it says what it would show. */
.cine {
    position: relative;
    margin: 0;
    --cine-plate: color-mix(in srgb, var(--rg-surface) 88%, transparent);
}

.cine__stage {
    position: relative;
    aspect-ratio: 5 / 4;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y;
    cursor: grab;
}

.cine.is-exploring .cine__stage { cursor: grabbing; }

.cine__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.1s var(--rg-ease);
    /* No edge: an ellipse inscribed in the stage, fully opaque only at its heart
       and eased to nothing exactly at the stage's sides — the corners, outside
       it, are already gone. Wherever the stage ends, the picture has ended first. */
    -webkit-mask-image: var(--cine-mask);
    mask-image: var(--cine-mask);
}

.cine.is-live .cine__canvas { opacity: 1; }

/* The opening frame as a still, so the stage is never empty while the film loads.
   It is the film's own first frame at this stage's aspect (stage.js poster()),
   under the canvas; it goes the moment the canvas has finished fading in over
   it. A background image, so only the one for this width and theme is fetched.
   Changing the opening shot means rendering these again (ADR 004). */
.cine__poster {
    position: absolute;
    inset: 0;
    background: url("cine/poster/tablet-dark.webp") center / cover no-repeat;
    transition: opacity 0.3s linear 1.1s;
    -webkit-mask-image: var(--cine-mask);
    mask-image: var(--cine-mask);
}

:root[data-theme="light"] .cine__poster { background-image: url("cine/poster/tablet-light.webp"); }

.cine.is-live .cine__poster,
.cine.is-fallback .cine__poster { opacity: 0; }

/* The film lost its GPU context (a tab long in the background): the still stands in
   until a fresh film is live (rg-cine.js). */
.cine.is-live.is-lost .cine__poster { opacity: 1; transition: none; }

/* The last frame of the chapter left behind, dissolving into the next one. */
.cine__dissolve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-mask-image: var(--cine-mask);
    mask-image: var(--cine-mask);
}

.cine__dissolve.is-on { opacity: 1; transition: none; }
.cine__dissolve.is-fading { transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1); }

/* Mobile first: the stage runs to the edges of the screen, past the page's
   gutter, so the picture fades into the page and not into a margin. The
   caption and the buttons come up into its faded foot. */
.cine__stage {
    --cine-zoom: 1.08;
    --cine-mask: radial-gradient(50% 50% at 50% 50%, #000 0%, #000 40%, rgba(0, 0, 0, 0.96) 47%, rgba(0, 0, 0, 0.88) 54%, rgba(0, 0, 0, 0.75) 61%, rgba(0, 0, 0, 0.58) 68%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.24) 82%, rgba(0, 0, 0, 0.11) 89%, rgba(0, 0, 0, 0.03) 95%, transparent 100%);
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.cine__bar {
    position: relative;
    z-index: 3;
}

/* Where the hero has its two columns the stage takes the room it has: up
   towards the header, out to the hero's right edge, under the end of the
   headline and a little below — and fades into all of it. The copy stays above. */
@media (min-width: 1100px) {
    .rg-hero__copy { position: relative; z-index: 2; }

    /* Out under the headline on the left, to the window's edge on the right. The
       picture is drawn off-centre to match (stage.js, --cine-shift), so the house
       stays where the column is; the mask follows it, and the right-hand side
       gets its own fade where the stage meets the window. */
    .cine__stage {
        --cine-shift: 0.085;
        --cine-zoom: 1.16;
        --cine-mask: radial-gradient(58.5% 50% at 58.5% 50%, #000 0%, #000 40%, rgba(0, 0, 0, 0.96) 47%, rgba(0, 0, 0, 0.88) 54%, rgba(0, 0, 0, 0.75) 61%, rgba(0, 0, 0, 0.58) 68%, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.24) 82%, rgba(0, 0, 0, 0.11) 89%, rgba(0, 0, 0, 0.03) 95%, transparent 100%), linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 30%);
        aspect-ratio: 1.15 / 1;
        width: calc(100% + 56%);
        margin: -16% -14% -12% -42%;
    }

    .cine__canvas,
    .cine__dissolve,
    .cine__poster {
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    .cine__poster { background-image: url("cine/poster/desktop-dark.webp"); }
    :root[data-theme="light"] .cine__poster { background-image: url("cine/poster/desktop-light.webp"); }


    .cine-phone { right: 18%; bottom: 17%; }
}

@media (min-width: 1500px) {
    .cine__stage {
        --cine-shift: 0.09;
        width: calc(100% + 66%);
        margin: -20% -18% -14% -48%;
    }

    .cine-phone { right: 21%; bottom: 19%; }
}
.cine.is-lost .cine__canvas { opacity: 0; }

/* Callouts: a dot on the thing, a hairline to a plate with its name and one fact. */
.cine__tags {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cine-tag {
    --side: 1;
    --lift: -28px;
    --dot: var(--rg-red);
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    will-change: transform, opacity;
}

.cine-tag[data-kind="ok"] { --dot: #22b573; }
.cine-tag[data-kind="energy"] { --dot: #f29a2e; }
.cine-tag[data-kind="data"] { --dot: var(--rg-net); }
.cine-tag[data-kind="neutral"] { --dot: var(--rg-text-3); }

.cine-tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: hypot(14px, var(--lift));
    height: 1px;
    background: color-mix(in srgb, var(--dot) 70%, transparent);
    transform-origin: 0 50%;
    transform: rotate(atan2(var(--lift), calc(var(--side) * 14px)));
}

.cine-tag__dot {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--rg-surface);
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dot) 45%, transparent), 0 0 12px color-mix(in srgb, var(--dot) calc(var(--rg-glow-k) * 60%), transparent);
}

.cine-tag[data-kind="event"] .cine-tag__dot { animation: cine-ping 1.1s var(--rg-ease) infinite; }

.cine-tag__plate {
    position: absolute;
    top: var(--lift);
    left: 0;
    display: grid;
    gap: 2px;
    padding: 6px 10px 6px 9px;
    border: 1px solid var(--rg-line-strong);
    border-left: 2px solid var(--dot);
    border-radius: var(--rg-radius-sm);
    background: var(--cine-plate);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, calc(0.25 + 0.4 * var(--rg-shadow-k)));
    white-space: nowrap;
    transform: translate(calc((var(--side) - 1) * 50% + var(--side) * 14px), -50%);
}

.cine-tag__plate b {
    color: var(--rg-text);
    font: 600 12px/1.15 var(--rg-font);
    letter-spacing: 0.005em;
}

.cine-tag__plate em {
    color: var(--rg-text-2);
    font: 500 10.5px/1.2 var(--rg-mono);
    font-style: normal;
    letter-spacing: 0.02em;
}

/* The owner's phone, a detail in the corner: the RG ONE phone of this page
   (rg-phone, rg-mini-*) at its own size, scaled by the stage (--k, stage.js) so
   its type is set exactly as the phones further down are. It floats in from
   below, over the part of the picture that is already fading into the page. */
.cine-phone {
    --k: 0.4;
    --py: 40;
    position: absolute;
    right: 3%;
    bottom: 5%;
    z-index: 2;
    width: 250px;
    height: 528px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(var(--py) * 1px), 0) scale(var(--k));
    transform-origin: 100% 100%;
    will-change: transform, opacity;
}

.cine-phone__device.rg-phone {
    --ph: 250px;
    top: 0;
    left: 0;
    z-index: 1;
    transform: none;
    box-shadow:
        inset 0 0 0 1px rgba(var(--rg-on-dark-rgb), 0.12),
        inset 0 0 0 4px var(--rg-device-edge),
        0 60px 90px -40px rgba(var(--rg-shade), calc(0.9 * var(--rg-shadow-k) + 0.15)),
        0 24px 60px -30px rgba(var(--rg-red-rgb), 0.4);
}

/* The three screens; the film shows one. */
.cine-app { display: none; flex-direction: column; gap: 9px; }
.cine-phone[data-screen="camera"] .cine-app[data-for="camera"],
.cine-phone[data-screen="alarm"] .cine-app[data-for="alarm"],
.cine-phone[data-screen="project"] .cine-app[data-for="project"] { display: flex; }

.cine-app__tab { display: none; }
.cine-phone[data-screen="camera"] .cine-app__tab[data-for="camera"],
.cine-phone[data-screen="alarm"] .cine-app__tab[data-for="alarm"],
.cine-phone[data-screen="project"] .cine-app__tab[data-for="project"] { display: inline-block; }

.cine-app__notice {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border-radius: 14px;
    background: var(--rg-app-card);
    box-shadow: 0 10px 24px -16px var(--rg-app-shadow);
}

.cine-app__notice > span:last-child { display: grid; gap: 1px; }
.cine-app__notice b { font-size: 11.5px; font-weight: 700; }
.cine-app__notice small { color: var(--rg-app-muted); font-size: 9.5px; }

.cine-app__notice-dot {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--rg-red);
    box-shadow: inset 0 0 0 7px var(--rg-red), inset 0 0 0 9px rgba(255, 255, 255, 0.85);
}

/* The camera's picture: the security camera's own render, copied in by stage.js. */
.cine__feed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #101112;
}

.cine__feed-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cine__feed-head {
    position: absolute;
    top: 7px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font: 600 8px/1 var(--rg-mono);
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.cine__feed-head > i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ff3b30;
    animation: rg-blink 1.6s steps(2, jump-none) infinite;
}

.cine__feed-box {
    position: absolute;
    border: 1.5px solid #ff3b30;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(255, 59, 48, 0.25);
    opacity: 0;
}

.cine__feed-box > b {
    position: absolute;
    bottom: 100%;
    left: -1.5px;
    margin-bottom: 2px;
    padding: 1px 4px;
    border-radius: 2px;
    background: #ff3b30;
    color: #fff;
    font: 700 7px/1.3 var(--rg-mono);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* The dog: recognised, and not an alert — white, not red. */
.cine__feed-box--dog { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.cine__feed-box--dog > b { background: rgba(255, 255, 255, 0.92); color: #1a1a1a; }

.cine-app__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.cine-app__actions > span {
    padding: 9px 6px;
    border-radius: 10px;
    background: var(--rg-app-card);
    color: var(--rg-app-ink-2);
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
}

.cine-app__actions > .is-primary { background: var(--rg-red); color: #fff; }

.cine-app__list {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border-radius: 14px;
    background: var(--rg-app-track);
}

.cine-app__list > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--rg-app-card);
    font-size: 10px;
}

.cine-app__list > li > i {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rg-app-track);
}

.cine-app__list > li > i.is-red { background: var(--rg-red); }
.cine-app__list > li > i.is-ok { background: var(--rg-app-done); }
.cine-app__list > li > span { flex: 1; font-weight: 600; }
.cine-app__list > li > time { color: var(--rg-app-muted); font-size: 9px; }

/* The alarm's second zone arrives when the window breaks: a different alarm, so
   the card says so, its row comes in on top, and a notification drops in first. */
.cine-app__list > li.cine-app__late { display: none; }
.cine-phone[data-step="2"] .cine-app__list > li.cine-app__late { display: flex; animation: cine-rise 0.5s var(--rg-ease) 0.5s both; }

.cine-app__two { display: none; }
.cine-phone[data-step="2"] .cine-app__one { display: none; }
.cine-phone[data-step="2"] .cine-app__two { display: inline; animation: cine-rise 0.45s var(--rg-ease) 0.45s both; }
.cine-phone[data-step="2"] .cine-app__alarm { animation: cine-app-alert 1.4s var(--rg-ease) 0.4s both; }

@keyframes cine-app-alert {
    0% { box-shadow: 0 0 0 0 rgba(var(--rg-red-rgb), 0); }
    20% { box-shadow: 0 0 0 3px rgba(var(--rg-red-rgb), 0.85), 0 0 26px 4px rgba(var(--rg-red-rgb), 0.55); }
    100% { box-shadow: 0 0 0 1px rgba(var(--rg-red-rgb), 0.5); }
}

.cine-app__push {
    position: absolute;
    top: 30px;
    left: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(28, 26, 24, 0.92);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.55);
    color: #fff;
    opacity: 0;
    transform: translateY(-140%);
}

.cine-app__push > span:last-child { display: grid; gap: 1px; }
.cine-app__push b { font-size: 10.5px; font-weight: 700; }
.cine-app__push small { color: rgba(255, 255, 255, 0.66); font-size: 9px; }
.cine-phone[data-step="2"] .cine-app__push { animation: cine-app-push 3.4s var(--rg-ease) both; }

@keyframes cine-app-push {
    0% { opacity: 0; transform: translateY(-140%); }
    12% { opacity: 1; transform: translateY(0); }
    82% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-140%); }
}

.cine-app__alarm {
    background:
        radial-gradient(160px 100px at 100% 0%, rgba(var(--rg-red-rgb), 0.45), transparent 70%),
        linear-gradient(165deg, var(--rg-app-night-from), var(--rg-app-night-to));
}

.cine-app__live { background: var(--rg-red) !important; box-shadow: 0 0 0 3px rgba(var(--rg-red-rgb), 0.35) !important; }
.cine-app__alarm-text { color: var(--rg-app-night-ink-2); font-size: 10px; }
.cine-app__steps { margin-top: 6px; }

.cine-app__photos i { background-size: cover; background-position: center; }

/* The photograph before the plaster. */
.cine__flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.cine__flash.is-on { animation: cine-flash 0.7s ease-out; }

/* The viewfinder: four corners, what is being photographed and for which job. The
   film sets its opacity (stage.js frame()). */
.cine__frame {
    --c: rgba(255, 255, 255, 0.92);
    position: absolute;
    inset: 16% 18% 22%;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) top left / 26px 2px,
        linear-gradient(var(--c), var(--c)) top left / 2px 26px,
        linear-gradient(var(--c), var(--c)) top right / 26px 2px,
        linear-gradient(var(--c), var(--c)) top right / 2px 26px,
        linear-gradient(var(--c), var(--c)) bottom left / 26px 2px,
        linear-gradient(var(--c), var(--c)) bottom left / 2px 26px,
        linear-gradient(var(--c), var(--c)) bottom right / 26px 2px,
        linear-gradient(var(--c), var(--c)) bottom right / 2px 26px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.cine__frame-label,
.cine__frame-meta {
    position: absolute;
    color: #fff;
    font: 600 10.5px/1.2 var(--rg-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cine__frame-label { top: 10px; left: 12px; display: inline-flex; align-items: center; gap: 6px; }
.cine__frame-label > i { width: 7px; height: 7px; border-radius: 50%; background: var(--rg-red); }
.cine__frame-meta { right: 12px; bottom: 10px; opacity: 0.8; }

@media (max-width: 639px) {
    .cine__frame { inset: 14% 8% 26%; }
    .cine__frame-label,
    .cine__frame-meta { font-size: 9px; }
}

/* Under the stage: what is happening, in a sentence, and the four chapters. */
.cine__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
    margin-top: var(--rg-s-3);
}

.cine__caption {
    display: grid;
    /* The rows sit at the top of the room kept for the longest sentence; stretched,
       the one-line step took the spare height and pushed the sentence down. */
    align-content: start;
    gap: 6px;
    min-height: calc(1.2em + 3 * 1.5em + 6px);
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
}

.cine__caption-step {
    color: var(--rg-red-ink);
    font: 600 11px/1.2 var(--rg-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cine__caption-text {
    color: var(--rg-text-2);
    font-size: var(--rg-fs-sm);
    line-height: 1.5;
    text-wrap: pretty;
}

.cine__caption.is-in > * { animation: cine-rise 0.6s var(--rg-ease) both; }
.cine__caption.is-in > .cine__caption-text { animation-delay: 0.06s; }

.cine__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rg-s-2);
}

.cine__chapters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    flex: 0 1 460px;
}

.cine__chapter {
    --p: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid var(--rg-line-strong);
    border-radius: 999px;
    background: rgba(var(--rg-tint), 0.03);
    color: var(--rg-text-2);
    font: 600 12.5px/1 var(--rg-font);
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}

.cine__chapter-num {
    color: var(--rg-text-3);
    font: 600 10px/1 var(--rg-mono);
    letter-spacing: 0.04em;
}

.cine__chapter-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chapter's progress runs along the bottom of its own button. */
.cine__chapter::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--rg-red);
    transform: scaleX(var(--p));
    transform-origin: 0 50%;
    opacity: 0;
}

.cine__chapter:hover { color: var(--rg-text); border-color: rgba(var(--rg-tint), 0.3); }
.cine__chapter:focus-visible,
.cine__play:focus-visible { outline: 2px solid var(--rg-red-ink); outline-offset: 2px; }

.cine__chapter[aria-pressed="true"] {
    border-color: var(--rg-red-line);
    background: var(--rg-red-soft);
    color: var(--rg-text);
}

.cine__chapter[aria-pressed="true"] .cine__chapter-num { color: var(--rg-red-ink); }
.cine__chapter[aria-pressed="true"]::after { opacity: 1; }

.cine__play {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 50%;
    background: rgba(var(--rg-tint), 0.03);
    color: var(--rg-text);
    cursor: pointer;
}

.cine__play svg { fill: currentColor; }
.cine__play[data-state="playing"] .cine__play-icon--play,
.cine__play[data-state="paused"] .cine__play-icon--pause { display: none; }
.cine__play:hover { border-color: rgba(var(--rg-tint), 0.3); }
.cine__play[hidden] { display: none; }

.cine.is-fallback .cine__stage,
.cine.is-fallback .cine__bar { display: none; }

@keyframes cine-ping {
    0% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.55); }
    100% { box-shadow: 0 0 0 12px rgba(225, 6, 0, 0); }
}

@keyframes cine-flash {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

@keyframes cine-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* A phone: a taller stage, so the house and its callouts have room; the feed
   and the notification move out of each other's way. */
@media (max-width: 639px) {
    .cine__stage { aspect-ratio: 4 / 5; }
    .cine__poster { background-image: url("cine/poster/phone-dark.webp"); }
    :root[data-theme="light"] .cine__poster { background-image: url("cine/poster/phone-light.webp"); }
    .cine-phone { right: 8%; bottom: 12%; }
    .cine-tag__plate { padding: 5px 8px 5px 7px; }
    .cine-tag__plate b { font-size: 11px; }
    .cine-tag__plate em { font-size: 9.5px; }
    .cine__caption { min-height: calc(1.2em + 4 * 1.5em + 6px); }
    .cine__chapter { height: 44px; padding: 0 6px; gap: 5px; font-size: 12px; }
    .cine__chapter-num { display: none; }
    .cine__play { width: 44px; height: 44px; }
}

/* ── The six trades in the first screen ────────────────────────────────── */

.rg-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rg-rail a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(var(--rg-tint), 0.12);
    border-radius: 999px;
    background: rgba(var(--rg-tint), 0.04);
    color: var(--rg-text);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color var(--rg-fast) var(--rg-ease), background var(--rg-fast) var(--rg-ease);
}

.rg-rail a:hover { border-color: var(--rg-red-line); background: var(--rg-red-soft); }
.rg-rail .rg-icon { color: var(--rg-red-ink); }

/* ── The bento of trades ───────────────────────────────────────────────── */

.rg-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Six tiles, always in full rows: two by three on a tablet and a laptop of 14–15",
   three by two from a large screen up, one under another on a phone (a 3D scene
   at half a phone's width is a thumbnail nobody can read). */
@media (min-width: 600px) {
    .rg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .rg-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rg-bento__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 28px;
    background:
        linear-gradient(180deg, var(--rg-sheen), transparent 60%) padding-box,
        var(--rg-surface) padding-box,
        var(--rg-edge) border-box;
    color: var(--rg-text);
    isolation: isolate;
    transition: transform 420ms var(--rg-ease), box-shadow 420ms var(--rg-ease);
}

.rg-bento__tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 40px 70px -40px rgba(var(--rg-red-rgb), 0.5), 0 30px 60px -40px rgba(var(--rg-shade), calc(0.9 * var(--rg-shadow-k)));
}

.rg-bento__tile:focus-visible { outline: 2px solid var(--rg-red-ink); outline-offset: 3px; }

.rg-bento__scene {
    position: relative;
    display: block;
    height: 200px;
    border-bottom: 1px solid var(--rg-line);
    background:
        radial-gradient(70% 90% at 72% 0%, rgba(var(--rg-red-rgb), 0.12), transparent 70%),
        linear-gradient(180deg, var(--rg-scene-top), var(--rg-scene-bottom));
    overflow: hidden;
}

/* A drafting grid behind the drawing, fading out from the middle. */
.rg-bento__scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--rg-tint), 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--rg-tint), 0.035) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 78%);
}

.rg-bento__scene canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s var(--rg-ease);
}

.rg-bento__scene.is-live canvas { opacity: 1; }

@media (min-width: 1100px) {
    .rg-bento__scene { height: 220px; }
}

.rg-bento__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--rg-s-2);
    padding: var(--rg-s-5);
}

.rg-bento__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 1;
    margin-top: -44px;
    margin-bottom: 4px;
    border-radius: 13px;
    background: linear-gradient(180deg, var(--rg-red-top), var(--rg-red) 60%, var(--rg-red-bottom));
    color: var(--rg-on-red);
    box-shadow: 0 10px 24px -10px var(--rg-red-glow), 0 0 0 4px var(--rg-surface);
}

.rg-bento__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; }
.rg-bento__text { color: var(--rg-text-2); font-size: var(--rg-fs-sm); line-height: 1.55; }

.rg-bento__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--rg-s-3);
    color: var(--rg-red-ink);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
}

.rg-bento__tile:hover .rg-bento__more .rg-icon { transform: translateX(3px); }
.rg-bento__more .rg-icon { transition: transform var(--rg-fast) var(--rg-ease); }

/* ── What is at stake ──────────────────────────────────────────────────── */

.rg-stakes__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rg-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .rg-stakes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rg-stake {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--rg-s-3);
    padding: var(--rg-s-6) var(--rg-s-5) var(--rg-s-5);
    border: 1px solid transparent;
    border-radius: 24px;
    background: var(--rg-panel) padding-box, var(--rg-edge) border-box;
}

.rg-stake__time {
    font-family: var(--rg-mono);
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--rg-red-ink);
    line-height: 1;
}

.rg-stake p { margin: 0; font-size: var(--rg-fs-sm); line-height: 1.55; }
.rg-stake b { display: block; margin-bottom: 2px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.rg-stake__without { color: var(--rg-text-3); }
.rg-stake__without b { color: var(--rg-text-3); }

.rg-stake__with {
    padding: var(--rg-s-3) var(--rg-s-4);
    border-radius: 14px;
    background: var(--rg-red-soft);
    color: var(--rg-text);
}

.rg-stake__with b { color: var(--rg-red-ink); }
.rg-stakes__actions { margin-top: var(--rg-s-6); }

/* ── The phone's quick contact ─────────────────────────────────────────── */

.rg-mobile-cta {
    position: fixed;
    inset: auto 0 0;
    z-index: 55;
    display: flex;
    gap: 8px;
    padding: 10px var(--rg-gutter) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(var(--rg-tint), 0.08);
    background: color-mix(in srgb, var(--rg-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    backdrop-filter: saturate(170%) blur(18px);
}

.rg-mobile-cta .rg-btn { flex: 1 1 0; min-height: 48px; padding-inline: 12px; }
.rg-mobile-cta .rg-btn--ghost { flex: 0 0 auto; }

@media (max-width: 767px) {
    .rg:has(.rg-mobile-cta) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {
    .rg-mobile-cta { display: none; }
}

/* ── Rising into view ──────────────────────────────────────────────────── */

/* Where a browser can tie an animation to an element's way across the
   viewport, the blocks of each section rise as they arrive. No script and no
   observer: a browser without scroll-driven animations shows everything as
   it is, and reduced motion (below) switches it off everywhere. */
@supports (animation-timeline: view()) {
    @keyframes rg-rise {
        from { opacity: 0; transform: translateY(28px); }
        to { opacity: 1; transform: none; }
    }

    .rg-section :is(.rg-section__head, .rg-cards > *, .rg-bento > *, .rg-stakes__list > *, .rg-layers > *, .rg-audience > *, .rg-steps > *, .rg-teaser, .rg-one__copy, .rg-one__devices) {
        animation: rg-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

/* Under the system preference — unless the visitor chose full motion in the
   system's appearance panel — and under Forge's explicit "reduced", nothing
   on the site moves: no scan line, no blinking, no grain, no hover lift.
   `!important` because this is the one rule that must beat every animation
   and transition above, whatever their specificity. */
@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) .rg *,
    :root:not([data-motion="full"]) .rg *::before,
    :root:not([data-motion="full"]) .rg *::after {
        animation: none !important;
        transition: none !important;
    }

    :root:not([data-motion="full"]) .rg-vf__scan {
        display: none;
    }
}

:root[data-motion="reduced"] .rg *,
:root[data-motion="reduced"] .rg *::before,
:root[data-motion="reduced"] .rg *::after {
    animation: none !important;
    transition: none !important;
}

:root[data-motion="reduced"] .rg-vf__scan {
    display: none;
}

/* ── Light or dark: the switch in the bar, and the logo for each ──────── */

.rg-theme {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--rg-line-strong);
    border-radius: 999px;
    background: rgba(var(--rg-tint), 0.03);
    color: var(--rg-text-2);
    cursor: pointer;
    transition: color var(--rg-fast) var(--rg-ease), border-color var(--rg-fast) var(--rg-ease), background-color var(--rg-fast) var(--rg-ease);
}

.rg-theme:hover { color: var(--rg-text); border-color: rgba(var(--rg-tint), 0.3); background: rgba(var(--rg-tint), 0.06); }
.rg-theme:focus-visible { outline: 2px solid var(--rg-red-ink); outline-offset: 2px; }

/* A phone: the same height as the menu button beside it (rule 13). */
@media (max-width: 639px) {
    .rg-theme { width: 42px; height: 42px; }
}

/* The icon shows what the press gives: the sun on the dark page, the moon on paper. */
.rg-theme__moon { display: none; }
:root[data-theme="light"] .rg-theme__sun { display: none; }
:root[data-theme="light"] .rg-theme__moon { display: block; }

.rg-logo--day { display: none; }
:root[data-theme="light"] .rg-logo--night { display: none; }
:root[data-theme="light"] .rg-logo--day { display: block; }

/* ── Seams: how one section hands over to the next ─────────────────────── */

/* The page is wired like the house it sells. Between two sections runs a cable
   in the column's width — a hairline that fades out at both ends — with a
   junction box at its centre, its LED lit, a short drop into the next section,
   and the sheet number of the drawing beside it ("02 · Co když"). As the seam
   scrolls into view the cable is drawn out from the box to both sides and a
   pulse of current runs along it once in a while.

   The seam has no height of its own: it sits ON the boundary, so it changes
   no section's spacing (rule 4) and needs no background to match. It is
   decoration (aria-hidden); the headings already say where the reader is. */
.rg-seam {
    position: relative;
    z-index: 2;
    height: 0;
    pointer-events: none;
}

.rg-seam__inner {
    position: absolute;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-s-3);
    transform: translateY(-50%);
}

.rg-seam__line {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: linear-gradient(to right, transparent, var(--rg-line-strong) 30%, var(--rg-line-strong));
}

.rg-seam__line--after {
    background: linear-gradient(to left, transparent, var(--rg-line-strong) 30%, var(--rg-line-strong));
}

/* The pulse of current: a short bright run that crosses the cable now and then. */
.rg-seam__line::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    background: linear-gradient(to right, transparent, var(--rg-red), transparent);
    opacity: 0;
    animation: rg-seam-pulse 7s var(--rg-ease) infinite;
}

.rg-seam__line--after::after {
    animation-name: rg-seam-pulse-back;
    animation-delay: 0.6s;
}

@keyframes rg-seam-pulse {
    0%, 62% { transform: translateX(-100%); opacity: 0; }
    66% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translateX(460%); opacity: 0; }
}

@keyframes rg-seam-pulse-back {
    0%, 62% { transform: translateX(460%); opacity: 0; }
    66% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}

/* The junction box: a rounded square with its screws, the LED inside. */
.rg-seam__box {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--rg-line-strong);
    border-radius: 9px;
    background: var(--rg-bg);
    box-shadow: 0 0 0 5px var(--rg-bg);
}

.rg-seam__box::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rg-red);
    box-shadow: 0 0 0 3px var(--rg-red-soft), 0 0 14px var(--rg-red-glow);
    animation: rg-seam-led 3.2s ease-in-out infinite;
}

/* The drop: a short cable from the box down into the next section. */
.rg-seam__box::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, var(--rg-line-strong), transparent);
}

@keyframes rg-seam-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.rg-seam__label {
    position: absolute;
    right: var(--rg-gutter);
    bottom: 10px;
    color: var(--rg-text-3);
    font: 600 10px/1 var(--rg-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.rg-seam__label b { color: var(--rg-red-ink); font-weight: 700; }

/* Drawn out from the box as it comes into view, where the browser can tie an
   animation to the scroll; everywhere else the cable is simply there. */
@supports (animation-timeline: view()) {
    .rg-seam__line {
        transform-origin: right center;
        animation: rg-seam-draw linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
    }

    .rg-seam__line--after { transform-origin: left center; }
    .rg-seam__label { animation: rg-seam-label linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
}

@keyframes rg-seam-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rg-seam-label { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* The alternate band no longer ends in a hard edge: it fades in from the page
   and back out, so the seam's cable is what marks the boundary. */
.rg-section--alt {
    border-block: 0;
    background:
        radial-gradient(70% 60% at 50% 0%, var(--rg-sheen-soft), transparent 70%),
        linear-gradient(180deg, var(--rg-bg) 0, var(--rg-bg-2) var(--rg-s-9), var(--rg-bg-2) calc(100% - var(--rg-s-9)), var(--rg-bg) 100%);
}

@media (prefers-reduced-motion: reduce) {
    :root:not([data-motion="full"]) :is(.rg-seam__line, .rg-seam__line::after, .rg-seam__box::before, .rg-seam__label) { animation: none; }
}

:root[data-motion="reduced"] :is(.rg-seam__line, .rg-seam__line::after, .rg-seam__box::before, .rg-seam__label) { animation: none; }