/* ============================================================
   Zizq Website - Shared Styles
   This file is used by both the Yew SPA and mdBook themes.
   ============================================================ */

:root {
    /* Backgrounds */
    --zizq-bg-light: #F9F9F9;
    --zizq-bg-dark: #050065;
    --zizq-bg-dark-accent: #034070;
    --zizq-bg-darker: #030047;

    /* Text on light background */
    --zizq-text-primary: #252432;
    --zizq-text-secondary: #777691;
    --zizq-text-inverted-on-light: #050065;

    /* Text on dark background */
    --zizq-text-on-dark-primary: #EAEAF6;
    --zizq-text-on-dark-secondary: #B1B0C7;
    --zizq-text-inverted-on-dark: #F9F9F9;

    /* Accent colors */
    --zizq-bright-blue: #00D4FF;
    --zizq-bright-cyan: #00CC88;
    --zizq-bright-magenta: #D000D4;

    /* Semantic aliases */
    --zizq-bg: var(--zizq-bg-light);
    --zizq-bg-alt: #ECECEC;
    --zizq-text: var(--zizq-text-primary);
    --zizq-text-muted: var(--zizq-text-secondary);
    --zizq-link: #1D8965;
    --zizq-header-bg: var(--zizq-bg-dark);
    --zizq-header-bg-accent: var(--zizq-bg-dark-accent);
    --zizq-header-text: var(--zizq-text-on-dark-primary);
    --zizq-header-text-muted: var(--zizq-text-on-dark-secondary);
    --zizq-header-text-active: var(--zizq-text-on-dark-primary);
    --zizq-border: #E0E0E0;

    /* Fonts */
    --zizq-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --zizq-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas,
        monospace;
    --zizq-code-font-size: 1.4rem;
    --zizq-code-background: #eeeeee;
    --zizq-table-header-bg: #e0e0e0;
    --zizq-table-alternate-bg: #f3f3f3;

    /* Layout */
    --zizq-max-width: 1000px;
    --zizq-page-padding: 24px;
    --zizq-header-height: 64px;
}

/* ---- Reset (scoped to avoid breaking mdBook) ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* Only reset margin/padding on the site header and SPA content,
   not on mdBook which manages its own spacing. */
.site-header,
.site-header *,
.site-footer,
.site-footer * {
    margin: 0;
    padding: 0;
}

html {
    /* 62.5% of browser default 16px = 10px, so 1rem = 10px.
       This matches mdBook's convention so rem values are consistent
       between the Yew SPA and the documentation pages. */
    font-size: 62.5%;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Body covers this during normal viewing; only visible in the
       overscroll/rubber-band area on mobile. Matches the footer so the
       bounce doesn't reveal white. */
    background-color: var(--zizq-bg-darker);
}

body {
    /* 1.6rem × 10px = 16px body text. */
    font-size: 1.6rem;
    font-family: var(--zizq-font-sans);
    color: var(--zizq-text);
    /* Match the footer so iOS Safari's translucent address bar and the
       overscroll/rubber-band area both render dark. Legacy pages keep
       their light content area via the `.content-page` wrapper below.
       !important because mdBook's own CSS loads after ours and would
       otherwise set body bg to its theme's light color. */
    background: var(--zizq-bg-darker) !important;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--zizq-link);
}

code,
pre {
    font-family: var(--zizq-font-mono);
    font-size: var(--zizq-code-font-size);
}

pre {
    color: var(--zizq-text-secondary);
}

/* ---- Site Header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--zizq-header-bg);
    color: var(--zizq-header-text);
    height: var(--zizq-header-height);
}

.site-header-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-header .site-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    height: 100%;
}

.site-header .site-logo img {
    height: 48px !important;
    width: auto !important;
}

.site-header .site-nav {
    display: flex;
    gap: 24px;
}

.site-header .nav-link-right {
    margin-left: 32px;
}

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--zizq-header-text);
    font-size: 2rem;
    cursor: pointer;
    padding: 0.4rem;
}

.site-header .nav-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.9rem 1.6rem;
    font-family: var(--zizq-font-sans) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: var(--zizq-bright-magenta);
    color: var(--zizq-text-on-dark-primary) !important;
    border: 1px solid var(--zizq-bright-magenta);
    border-radius: 0;
    transition: background-color 120ms ease, border-color 120ms ease,
        color 120ms ease;
}

.site-header .nav-cta:hover {
    background: var(--zizq-accent-pink);
    border-color: var(--zizq-accent-pink);
    color: var(--zizq-bg-dark) !important;
}

.site-header .nav-link {
    color: var(--zizq-header-text-muted) !important;
    text-decoration: none !important;
    font-family: var(--zizq-font-sans) !important;
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    transition: color 0.15s;
}

.site-header .nav-link:hover {
    color: var(--zizq-header-text) !important;
}

.site-header .nav-link.active {
    color: var(--zizq-header-text-active) !important;
}

@media (max-width: 900px) {
    .nav-hamburger {
        display: block;
    }

    .site-header-inner {
        padding: 0 2.4rem;
    }

    .site-header .nav-cta {
        padding: 0.7rem 1.2rem;
        font-size: 1.4rem !important;
    }

    .site-header .site-nav {
        flex-direction: column;
        position: absolute;
        top: var(--zizq-header-height);
        left: 0;
        right: 0;
        background: var(--zizq-header-bg);
        padding: 0 2.4rem;
        gap: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease, padding 0.25s ease;
    }

    .site-header .site-nav.site-nav-open {
        max-height: 300px;
        padding: 1.6rem var(--zizq-page-padding);
    }

    .site-header .site-nav .nav-link {
        padding: 1.2rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .site-header .site-nav .nav-link:last-child {
        border-bottom: none;
    }

    .site-header .nav-link-right {
        margin-left: 0;
    }
}

/* ---- Prose (body text) ---- */
.prose {
    max-width: var(--zizq-max-width);
    margin: 0 auto;
    padding: 4rem 0 6.4rem;
    line-height: 1.7;
    color: var(--zizq-text-secondary);
}

.prose h1 {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
    color: var(--zizq-text);
}

.prose h2 {
    font-size: 1.8em;
    font-weight: 700;
    margin-top: 3.2rem;
    margin-bottom: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--zizq-text);
}

.prose h3 {
    font-size: 1.6em;
    font-weight: 600;
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;
    color: var(--zizq-text);
}

.prose h4 {
    font-size: 1.44em;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    color: var(--zizq-text);
}

.prose h5 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    color: var(--zizq-text-muted);
}

.prose p {
    margin-bottom: 1.6rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1.6rem;
    padding-left: 2.4rem;
}

.prose li {
    margin-bottom: 0.4rem;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--zizq-border);
    margin: 3.2rem auto;
    width: 50%;
}

.prose code {
    background: var(--zizq-bg-alt);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
}

.prose strong {
    font-weight: 600;
    color: var(--zizq-text);
}

.prose a {
    color: var(--zizq-link);
}

@media (max-width: 768px) {
    .prose h1 {
        font-size: 1.5em;
    }

    .prose h2 {
        font-size: 1.3em;
    }

    .prose h3 {
        font-size: 1.15em;
    }

    .prose h4 {
        font-size: 1.05em;
    }
}

/* ---- Site Footer ---- */
.site-footer {
    background: var(--zizq-bg-darker);
    color: var(--zizq-text-on-dark-primary);
    padding: 5.6rem 0 4.8rem;
}

.site-footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
}

.footer-brand .footer-logo {
    display: inline-block;
    margin-bottom: 2rem;
}

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

.footer-brand p {
    margin: 0 0 0.6rem;
    font-size: 1.36rem;
    line-height: 1.5;
    color: var(--zizq-text-on-dark-secondary);
}

.footer-abn {
    color: var(--zizq-text-on-dark-secondary);
    opacity: 0.7;
    font-size: 1.28rem;
}

.footer-column h4 {
    color: var(--zizq-text-on-dark-primary);
    font-size: 1.36rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1.6rem;
}

.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li {
    margin: 0 0 0.8rem;
}

.footer-column a {
    color: var(--zizq-text-on-dark-secondary);
    text-decoration: none;
    font-size: 1.44rem;
    transition: color 0.15s;
}

.footer-column a:hover {
    color: var(--zizq-text-on-dark-primary);
}

@media (max-width: 900px) {
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 3.2rem;
    }
    .site-footer-inner {
        padding: 0 2.4rem;
    }
}

/* ============================================================
   Redesign (technical-brutalism direction)
   Prefix: .r-*  — scoped so existing pages are unaffected.
   ============================================================ */

:root {
    --zizq-accent-pink: #FF80F0;
    --zizq-divider: rgba(234, 234, 246, 0.08);
    --zizq-divider-glow-cyan: rgba(0, 212, 255, 0.65);
    --zizq-divider-glow-magenta: rgba(208, 0, 212, 0.65);
}

.r-home,
.r-home *,
.r-docs,
.r-docs *,
.r-pricing,
.r-pricing *,
.r-buy,
.r-buy *,
.r-buy-success,
.r-buy-success *,
.r-contact,
.r-contact *,
.r-legal,
.r-legal *,
.r-about,
.r-about *,
.r-account,
.r-account *,
.r-account-manage,
.r-account-manage *,
.r-not-found,
.r-not-found * {
    margin: 0;
    padding: 0;
}

.r-home,
.r-docs,
.r-pricing,
.r-buy,
.r-buy-success,
.r-contact,
.r-legal,
.r-about,
.r-account,
.r-account-manage,
.r-not-found {
    background: var(--zizq-bg-dark);
    color: var(--zizq-text-on-dark-primary);
    font-family: var(--zizq-font-sans);
    width: 100%;
    min-height: 100vh;
}

/* 6-column logical grid, near full-width on desktop */
.r-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.r-col-1 { grid-column: span 1; }
.r-col-2 { grid-column: span 2; }
.r-col-3 { grid-column: span 3; }
.r-col-4 { grid-column: span 4; }
.r-col-5 { grid-column: span 5; }
.r-col-6 { grid-column: span 6; }

/* Allow grid items to shrink below their intrinsic content width so
   internal `overflow-x: auto` (terminals, pre lines) can scroll inside
   instead of pushing the grid wider. */
.r-grid > * {
    min-width: 0;
}

/* Card-internal grids get a column gap automatically — the page-level grid
   stays gapless so divider lines can sit on column boundaries. The row gap
   only kicks in when the grid collapses to a single column on mobile. */
.r-card .r-grid {
    column-gap: 4rem;
    row-gap: 4rem;
}

/* Terminals as direct children of a card get top breathing room from the
   preceding text. Nested terminals (e.g. inside a card's inner grid cell)
   handle their own spacing via the grid's row-gap when collapsed. */
.r-card > .r-terminal {
    margin-top: 2.4rem;
}

/* ---- Dividers ---- */

/* Vertical divider on the LEFT edge of a column.
   ::before is the faint static line, ::after is the cyan comet highlight
   that mirrors the magenta horizontal comet. */
.r-col-left-divider {
    position: relative;
}

/* Non-card containers get overflow: hidden so the 300%-tall animated
   ::after (below) can be cleanly clipped to the intended divider
   region. Cards deliberately opt out — their divider is meant to
   extend 2rem past the card into the surrounding row space, and
   overflow:hidden would swallow that overhang. Cards use a different
   animation approach — see the .r-card override further down. */
.r-col-left-divider:not(.r-card) {
    overflow: hidden;
}
.r-col-left-divider::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.5px;
    width: 1px;
    background-color: var(--zizq-divider);
    pointer-events: none;
}
/* ::after is the animated comet layer. It's 3× the container height
   so the gradient can traverse the visible area entirely via a
   translate transform — which is GPU-composited by the browser and
   costs no per-frame paint. The parent's `overflow: hidden` handles
   the clipping. */
.r-col-left-divider::after {
    content: "";
    position: absolute;
    top: 0;
    left: -0.5px;
    width: 1px;
    height: 300%;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 30%,
        rgba(0, 212, 255, 0.05) 38%,
        rgba(0, 212, 255, 0.20) 45%,
        rgba(0, 212, 255, 0.45) 49%,
        var(--zizq-divider-glow-cyan) 50%,
        rgba(0, 212, 255, 0.35) 52%,
        rgba(0, 212, 255, 0.10) 56%,
        transparent 65%,
        transparent 100%
    );
    animation: r-comet-v 9s linear infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes r-comet-v {
    0%   { transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.r-col-left-divider.r-flow-reverse::after {
    animation-direction: reverse;
}

/* When the divider host is a card, its 2rem margin shifts the card 2rem inward
   from the grid column boundary. Push the divider back out to the boundary and
   extend past the margin so it spans the full grid row.
   The ::after for cards reverts to background-position animation because the
   transform approach relies on `overflow: hidden` to clip a 300%-tall element,
   which would swallow the intended extend-past-margin overhang. CPU cost of
   this fallback is small — few cards use it. */
.r-card.r-col-left-divider::before {
    top: -2rem;
    bottom: -2rem;
    left: calc(-2rem - 0.5px);
}
.r-card.r-col-left-divider::after {
    top: -2rem;
    bottom: -2rem;
    left: calc(-2rem - 0.5px);
    height: auto;
    background-size: 100% 300%;
    background-repeat: no-repeat;
    animation-name: r-comet-v-card;
    will-change: auto;
}

@keyframes r-comet-v-card {
    0%   { background-position: 0 100%; }
    100% { background-position: 0 -200%; }
}

/* Standalone horizontal divider row */
.r-divider-h {
    height: 1px;
    background-color: var(--zizq-divider);
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
}
/* ::after is the animated comet layer. 3× container width, gradient
   fills it, translated via transform for GPU-composited motion. Parent
   already has `overflow: hidden` so the off-container portion is
   clipped without paint cost. */
.r-divider-h::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 300%;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        transparent 30%,
        rgba(208, 0, 212, 0.05) 38%,
        rgba(208, 0, 212, 0.20) 45%,
        rgba(208, 0, 212, 0.45) 49%,
        var(--zizq-divider-glow-magenta) 50%,
        rgba(208, 0, 212, 0.35) 52%,
        rgba(208, 0, 212, 0.10) 56%,
        transparent 65%,
        transparent 100%
    );
    animation: r-comet-h 11s linear infinite;
    will-change: transform;
    pointer-events: none;
}

.r-divider-h.r-flow-reverse::after {
    animation-direction: reverse;
}

@keyframes r-comet-h {
    0%   { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* ---- Introspection animation ----
   Narrow vertical "queue" of thin slices. A scan line drifts down;
   matched slices pulse as the scan reaches them; ALL slices shift to
   their post-shuffle positions (compact queue: matched at top, others
   filling the rest in order); held, then everything returns to baseline.

   ~11s loop: ~4s active, ~7s rest. Each <rect> carries a `--target-y`
   (the translation needed to reach its post-shuffle row) via inline
   style. Matched rects also get a per-block `animation-delay` so the
   pulse syncs with the scan passing each one. */

/* Side-by-side container: code example on the left, animation on the
   right. Single-line URL in the example will overflow horizontally with
   a scroll bar — we accept that rather than wrap mid-URL. */
.r-introspect-row {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    margin: 3rem 0;
}

.r-introspect-example {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--zizq-text-on-dark-secondary);
    overflow-x: hidden;
    white-space: pre;
}

/* Animation column inside the row. flex-shrink: 0 so its SVG can use
   its full max-width without being squeezed by the <pre>. */
.r-introspect {
    flex-shrink: 0;
}

.r-introspect-svg {
    display: block;
    width: 100%;
    max-width: 2rem;
    height: auto;
}

.r-introspect-block {
    fill: var(--zizq-bright-blue);
    opacity: 0.22;
    animation: r-introspect-shuffle 11s infinite ease-in-out;
}

/* Matched blocks layer a pulse animation on top of the shuffle. The
   per-block animation-delay (set inline) only applies to the second
   animation in the list — the first stays at 0 so all blocks shift
   together. */
.r-introspect-block-matched {
    animation:
        r-introspect-shuffle 11s infinite ease-in-out,
        r-introspect-pulse 11s infinite ease-in-out;
}

/* Shuffle: at rest during the scan, slide to target after, hold,
   slide back, rest until next cycle.
     0–9%:   scan phase (1s), at rest
     9–16%:  shuffle out to target  (~0.8s)
     16–29%: held at target          (~1.4s)
     29–36%: shuffle back to rest   (~0.8s)
     36–100%: rest                   (~7s) */
@keyframes r-introspect-shuffle {
    0%, 9%, 36%, 100% { transform: translateY(0); }
    16%, 29%          { transform: translateY(var(--target-y, 0px)); }
}

/* Pulse: handles brightness for matched blocks. Starts at 0% = bright
   (delayed per-block so 0% lines up with scan-reach). Stays bright
   through rise and hold, fades during fall-back, dim through rest. */
@keyframes r-introspect-pulse {
    0%, 22%   { opacity: 1; }
    30%       { opacity: 0.5; }
    40%, 100% { opacity: 0.22; }
}

.r-introspect-scan {
    fill: #ffffff;
    opacity: 0;
    animation: r-introspect-scan 11s infinite linear;
}

@keyframes r-introspect-scan {
    0%   { transform: translateY(-2px);  opacity: 0; }
    1%   { opacity: 0.6; }
    9%   { transform: translateY(120px); opacity: 0.6; }
    10%  { transform: translateY(120px); opacity: 0; }
    100% { transform: translateY(-2px);  opacity: 0; }
}

/* ---- Hero ---- */

.r-hero {
    min-height: 60vh;
    align-items: stretch;
}

.r-hero-text {
    padding: 8rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.r-headline {
    font-family: var(--zizq-font-sans);
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.r-accent {
    color: var(--zizq-accent-pink);
}

.r-lede {
    margin-top: 2.4rem;
    font-size: 1.7rem;
    line-height: 1.55;
    color: var(--zizq-text-on-dark-secondary);
    max-width: 52rem;
}

.r-hero-cta {
    margin-top: 3.6rem;
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.r-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.3rem 2.2rem;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--zizq-font-sans);
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 0;
    transition: background-color 120ms ease, color 120ms ease,
        border-color 120ms ease;
    cursor: pointer;
}

.r-btn-primary {
    background: var(--zizq-bright-magenta);
    color: var(--zizq-text-on-dark-primary);
    border-color: var(--zizq-bright-magenta);
}
.r-btn-primary:hover {
    background: var(--zizq-accent-pink);
    border-color: var(--zizq-accent-pink);
    color: var(--zizq-bg-dark);
}

.r-btn-ghost {
    color: var(--zizq-text-on-dark-primary);
    background: transparent;
    border-color: rgba(234, 234, 246, 0.35);
}
.r-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--zizq-text-on-dark-primary);
}

.r-btn:disabled,
.r-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Forms ----
   Shared primitives for /buy, /contact, and /account. Sit on dark
   technical-brutalism panels: thin 1px borders, no radius, monospace
   input font, focus highlight in bright cyan, error state in bright
   magenta. Native select/checkbox styling is replaced so they look
   at home in the same visual system. */

.r-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2.4rem;
}

.r-form-label {
    font-family: var(--zizq-font-mono);
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zizq-text-on-dark-secondary);
}

.r-input,
.r-select {
    font-family: var(--zizq-font-mono);
    font-size: 1.5rem;
    line-height: 1.4;
    padding: 1.1rem 1.4rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(234, 234, 246, 0.15);
    border-radius: 0;
    color: var(--zizq-text-on-dark-primary);
    width: 100%;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.r-input::placeholder {
    color: rgba(177, 176, 199, 0.4);
}

.r-input:focus,
.r-select:focus {
    outline: none;
    border-color: var(--zizq-bright-blue);
    background: rgba(0, 0, 0, 0.35);
}

/* Textareas share .r-input styling but need extra height and sane resize. */
textarea.r-input {
    min-height: 12rem;
    resize: vertical;
    line-height: 1.5;
}

/* Row of two half-width fields (e.g. Company / Role on /contact). Row
   provides the bottom margin instead of each field. */
.r-form-row {
    display: flex;
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}
.r-form-row .r-form-field {
    flex: 1;
    margin-bottom: 0;
}

/* Small, dim, mixed-case suffix on a label (e.g. "(optional)"). */
.r-form-label-hint {
    color: rgba(177, 176, 199, 0.55);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.4em;
}

/* Visually-hidden but still submitted, so bots that fill in every field
   flag themselves without breaking accessibility for real users. */
.r-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.r-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 3.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B1B0C7' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4rem center;
    background-size: 1.2rem;
    cursor: pointer;
}

/* Native option elements can't be styled much, but setting a dark bg
   at least stops the browser rendering white boxes over a dark page. */
.r-select option {
    background: var(--zizq-bg-darker);
    color: var(--zizq-text-on-dark-primary);
}

.r-form-field-error .r-input,
.r-form-field-error .r-select {
    border-color: var(--zizq-bright-magenta);
}

.r-form-error {
    font-family: var(--zizq-font-mono);
    font-size: 1.2rem;
    color: var(--zizq-accent-pink);
    margin-top: 0.2rem;
}

/* Checkbox — the native input is drawn as a small square via
   appearance:none, then a rotated-border ::after draws the checkmark
   when checked. Wrapped in a flex label so the caption sits alongside. */
.r-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--zizq-text-on-dark-secondary);
}

.r-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(234, 234, 246, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    top: 0.1rem;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.r-checkbox input[type="checkbox"]:hover {
    border-color: var(--zizq-text-on-dark-primary);
}

.r-checkbox input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--zizq-bright-blue);
}

.r-checkbox input[type="checkbox"]:checked {
    background: var(--zizq-bright-magenta);
    border-color: var(--zizq-bright-magenta);
}

.r-checkbox input[type="checkbox"]:checked::after {
    content: "";
    width: 0.5rem;
    height: 0.9rem;
    border: solid var(--zizq-text-on-dark-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
}

.r-checkbox a {
    color: var(--zizq-bright-blue);
}

.r-checkbox a:hover {
    color: var(--zizq-bright-cyan);
}

.r-form-actions {
    display: flex;
    gap: 1.6rem;
    margin-top: 2.4rem;
    flex-wrap: wrap;
}

/* Hero visual / terminal slot */
.r-hero-visual {
    padding: 8rem 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Hero signal canvas ----
   Canvas 2D "network of comets" background. Width fills the container;
   aspect-ratio gives it an initial 800:500 shape but the drawing code
   handles any aspect via uniform scale + centred origin, so this is
   really just a hint to the browser for initial layout. */
.r-hero-signal-canvas {
    width: 100%;
    max-height: 36rem;
    display: block;
    aspect-ratio: 800 / 500;
    cursor: default;
}

/* ---- Terminal ---- */
.r-terminal {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--zizq-divider);
    display: flex;
    flex-direction: column;
    font-family: var(--zizq-font-mono);
    color: var(--zizq-text-on-dark-primary);
}

.r-terminal-chrome {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1.6rem;
    min-height: 3.6rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--zizq-divider);
}

.r-terminal-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.r-terminal-title {
    margin-left: 0.8rem;
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    color: var(--zizq-text-on-dark-secondary);
}

.r-terminal-footer {
    padding: 0.8rem 2rem;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid var(--zizq-divider);
    font-family: var(--zizq-font-mono);
    font-size: 1.2rem;
    color: var(--zizq-text-on-dark-secondary);
}

.r-terminal-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 -1.6rem;
    height: 3.6rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.r-terminal-tabs::-webkit-scrollbar {
    height: 3px;
}
.r-terminal-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.r-terminal-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.r-terminal-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1.6rem;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--zizq-divider);
    color: var(--zizq-text-on-dark-secondary);
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.r-terminal-tab:hover {
    color: var(--zizq-text-on-dark-primary);
    background: rgba(255, 255, 255, 0.03);
}

.r-terminal-tab.is-active {
    color: var(--zizq-text-on-dark-primary);
    background: rgba(0, 0, 0, 0.25);
    position: relative;
}

.r-terminal-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(0, 0, 0, 0.25);
}

.r-terminal-tab-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.r-terminal-body {
    flex: 1;
    padding: 1.6rem 2rem;
    font-size: 1.4rem;
    line-height: 1.4;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.r-terminal-body.r-scroll-manual,
.r-terminal-body.r-scroll-auto {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.r-terminal-body.r-scroll-manual::-webkit-scrollbar,
.r-terminal-body.r-scroll-auto::-webkit-scrollbar {
    width: 3px;
}
.r-terminal-body.r-scroll-manual::-webkit-scrollbar-track,
.r-terminal-body.r-scroll-auto::-webkit-scrollbar-track {
    background: transparent;
}
.r-terminal-body.r-scroll-manual::-webkit-scrollbar-thumb,
.r-terminal-body.r-scroll-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.r-terminal-line {
    white-space: pre;
    min-height: 1.4em;
}

.r-terminal-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--zizq-accent-pink);
    vertical-align: text-bottom;
    margin-left: 0.05em;
    animation: r-cursor-blink 0.55s steps(1) infinite alternate;
}

@keyframes r-cursor-blink {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ---- ResponsiveTerminal wrapper ---- */
.r-responsive-terminal {
    position: relative;
}

/* Hidden measurement span — mirrors the body's monospace font + size so
   getBoundingClientRect() yields accurate char advance and line-height
   for the JS-side cols/rows calculation. */
.r-terminal-measure {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    line-height: 1.4;
    white-space: pre;
}

@media (max-width: 600px) {
    .r-terminal-measure {
        font-size: 1.3rem;
    }
}

/* ---- Terminal color tokens ---- */
.r-term-color-default  { color: var(--zizq-text-on-dark-primary); }
.r-term-color-dim      { color: var(--zizq-text-on-dark-secondary); opacity: 0.75; }
.r-term-color-dark     { color: var(--zizq-bg-dark); }
.r-term-color-light    { color: var(--zizq-text-on-dark-primary); }
.r-term-color-cyan     { color: var(--zizq-bright-blue); }
.r-term-color-magenta  { color: var(--zizq-bright-magenta); }
.r-term-color-pink     { color: var(--zizq-accent-pink); }
.r-term-color-green    { color: var(--zizq-bright-cyan); }
.r-term-color-yellow   { color: #FFD166; }
.r-term-color-red      { color: #FF6B7A; }
.r-term-color-blue     { color: #5A9BFF; }

/* Background variants — reuse the palette so per-char `typed_bg` chunks
   render as a contiguous band. Default/Dim deliberately have no bg
   counterpart (foreground-only concepts).

   Vertical padding extends the bg paint into the line-box leading so
   adjacent lines with bg chunks stack flush. Inline padding doesn't
   reflow the line, so this is purely a paint extension. Tuned by eye
   in dev tools rather than computed, since the actual strut height
   depends on the font's metrics. */
.r-term-bg-dark,
.r-term-bg-light,
.r-term-bg-cyan,
.r-term-bg-magenta,
.r-term-bg-pink,
.r-term-bg-green,
.r-term-bg-yellow,
.r-term-bg-red,
.r-term-bg-blue        { padding: 0.2rem 0; }

.r-term-bg-dark        { background: var(--zizq-bg-dark); }
.r-term-bg-light       { background: var(--zizq-text-on-dark-primary); }
.r-term-bg-cyan        { background: var(--zizq-bright-blue); }
.r-term-bg-magenta     { background: var(--zizq-bright-magenta); }
.r-term-bg-pink        { background: var(--zizq-accent-pink); }
.r-term-bg-green       { background: var(--zizq-bright-cyan); }
.r-term-bg-yellow      { background: #FFD166; }
.r-term-bg-red         { background: #FF6B7A; }
.r-term-bg-blue        { background: #5A9BFF; }

@media (max-width: 600px) {
    .r-terminal {
        aspect-ratio: 4 / 5;
    }
    .r-terminal-body {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        font-size: 1.3rem;
    }
    .r-terminal-footer {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

/* ---- Card ---- */
.r-card {
    background: rgba(255, 255, 255, 0.07);
    margin: 2rem;
    padding: 4rem;
    color: var(--zizq-text-on-dark-primary);
}

/* Flat variant — no background, tighter padding. For compact feature
   blurbs in a grid where filled cards would feel repetitive. */
.r-card-flat {
    background: transparent;
    padding: 2.4rem;
}

.r-card-flat .r-card-headline {
    font-size: 1.9rem;
    line-height: 1.25;
    margin: 0 0 1rem;
}

.r-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--zizq-text-on-dark-secondary);
    margin: 0;
}

.r-card-headline {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 2.4rem 0 3.2rem;
    color: var(--zizq-text-on-dark-primary);
}

.r-card p {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--zizq-text-on-dark-secondary);
    margin: 0 0 1.4rem;
}

.r-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .r-card {
        margin: 1.6rem;
        padding: 2.8rem 2.4rem;
    }
    .r-card-headline {
        font-size: 2.2rem;
        margin: 2rem 0 2.4rem;
    }
}

/* ---- Placeholder rows ---- */
.r-row {
    min-height: 24rem;
}
.r-placeholder {
    padding: 4rem;
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    color: var(--zizq-text-on-dark-secondary);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .r-headline {
        font-size: 4.2rem;
    }
}

@media (max-width: 900px) {
    .r-hero,
    .r-row,
    .r-card .r-grid {
        grid-template-columns: 1fr;
    }
    .r-hero-text,
    .r-hero-visual,
    .r-row > *,
    .r-card .r-grid > * {
        grid-column: 1 / -1;
    }
    .r-hero-text,
    .r-hero-visual,
    .r-row > * {
        padding: 4rem 2.4rem;
    }
    .r-headline {
        font-size: 3.6rem;
    }
    .r-col-left-divider::before,
    .r-col-left-divider::after {
        display: none;
    }
}

/* ---- Docs landing ---- */

/* Docs uses several vertical dividers close together (hero split +
   entrypoint row of 3 cards), and the stacked cyan comets read as noisy.
   Silence the vertical animation just on this page — verticals elsewhere
   keep the default comet. */
.r-docs .r-col-left-divider::after {
    display: none;
}

/* Hero: headline on the left, two intro paragraphs on the right.
   No terminal — left intentionally airy with a static vertical divider. */
.r-docs-hero {
    min-height: 28rem;
    align-items: stretch;
}

.r-docs-hero-text,
.r-docs-hero-intro {
    padding: 6rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.r-docs-hero-intro .r-lede {
    max-width: none;
}

/* About page and 404 are short single-hero layouts — the shared
   min-height: 100vh would push the footer below the fold. Drop it so
   content dictates height; the body bg beneath (--zizq-bg-darker) fills
   any remaining viewport space with the same dark palette. */
.r-about,
.r-not-found {
    min-height: 0;
}

.r-about-hero .r-docs-hero-intro .r-lede + .r-lede {
    margin-top: 2rem;
}

.r-docs-hero-intro .r-lede + .r-lede {
    margin-top: 1.8rem;
}

/* Entrypoint cards: each whole cell is a link. Flat (no fill) so the
   2+2+2 row reads as a single divided strip rather than three tiles,
   with the comet dividers carrying the visual rhythm. */
.r-doc-card {
    display: flex;
    flex-direction: column;
    padding: 4rem;
    min-height: 26rem;
    text-decoration: none;
    color: var(--zizq-text-on-dark-primary);
    background: transparent;
    transition: background-color 120ms ease;
}

.r-doc-card:hover {
    background: rgba(255, 255, 255, 0.04);
}

.r-doc-card-icon {
    font-size: 2.2rem;
    color: var(--zizq-text-on-dark-primary);
    margin-bottom: 2rem;
}

.r-doc-card .r-card-title {
    margin-bottom: 1.2rem;
}

.r-doc-card .r-card-headline {
    font-size: 2.4rem;
    margin: 0 0 1.4rem;
}

.r-doc-card p {
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--zizq-text-on-dark-secondary);
    margin: 0;
    flex-grow: 1;
}

.r-doc-card code {
    font-family: var(--zizq-font-mono);
    font-size: 0.95em;
    color: var(--zizq-text-on-dark-primary);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1em 0.4em;
}

.r-doc-card-link {
    display: inline-block;
    margin-top: 2.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--zizq-bright-blue);
    letter-spacing: 0.02em;
    text-decoration: none;
}

.r-doc-card:hover .r-doc-card-link {
    color: var(--zizq-bright-cyan);
}

/* Generic full-row sections — clients pill list and "need help" block. */
.r-docs-clients,
.r-docs-help {
    padding: 4rem;
}

.r-docs-clients .r-card-headline,
.r-docs-help .r-card-headline {
    margin: 1.2rem 0 2.4rem;
}

.r-docs-help p {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--zizq-text-on-dark-secondary);
}

.r-docs-help a {
    color: var(--zizq-bright-blue);
}

/* Dark pill list — designed to scale past 6 clients (Python, Go, PHP, ...) */
.r-doc-pill-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.r-doc-pill-list li a {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(234, 234, 246, 0.85);
    color: var(--zizq-text);
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.r-doc-pill-list li a:hover {
    background: var(--zizq-bright-blue);
    color: var(--zizq-bg-dark);
}

.r-doc-pill-logo {
    height: 1.8rem;
    width: auto;
    margin-right: 0.8rem;
}

/* ---- Clients landing ---- */

/* Per-client row: text on the left, enqueue terminal on the right. Padding
   matches .r-doc-card so the whole strip reads with the same rhythm as the
   docs entrypoint row. Terminal cell is a flex container so the terminal
   itself can hug the top and stretch vertically. */
.r-client-cell {
    padding: 4rem;
    display: flex;
    flex-direction: column;
}

.r-client-cell .r-card-headline {
    font-size: 2.8rem;
    margin: 1.2rem 0 2rem;
}

.r-client-name {
    color: inherit;
    text-decoration: none;
    transition: color 120ms ease;
}

.r-client-name:hover {
    color: var(--zizq-bright-cyan);
}

.r-client-blurb {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--zizq-text-on-dark-secondary);
    margin: 0;
    flex-grow: 1;
}

.r-client-blurb code {
    font-family: var(--zizq-font-mono);
    font-size: 0.95em;
    color: var(--zizq-text-on-dark-primary);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1em 0.4em;
}

.r-client-links {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    margin-top: 2.4rem;
}

/* .r-doc-card-link brings its own margin-top for the docs entrypoint card
   layout; strip it here so it sits on the flex baseline with the GitHub link. */
.r-client-links .r-doc-card-link {
    margin-top: 0;
}

.r-client-gh {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--zizq-text-on-dark-secondary);
    text-decoration: none;
    transition: color 120ms ease;
}

.r-client-gh:hover {
    color: var(--zizq-bright-cyan);
}

.r-client-gh .fa-brands {
    margin-right: 0.4em;
}

/* ---- Pricing ---- */

/* Each tier fills a grid cell as a flex column so the currency line + CTA
   pin to the bottom regardless of feature-list length. */
.r-pricing-card {
    padding: 4rem;
    display: flex;
    flex-direction: column;
}

/* Recommended tier gets the same inset tint as .r-card so the palette stays
   consistent across the redesign. No border, no shadow. */
.r-pricing-card-highlighted {
    background: rgba(255, 255, 255, 0.07);
}

/* Narrower tier row for 1- or 2-tier layouts, so cards don't sprawl across
   the full 1600px page grid and leave a hollow vertical channel. Horizontal
   dividers above/below stay at full width as page-level rhythm. */
.r-pricing-row-narrow {
    max-width: 1200px;
}

.r-pricing-name {
    font-family: var(--zizq-font-sans);
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.05;
    margin: 1.2rem 0 1rem;
    color: var(--zizq-text-on-dark-primary);
}

.r-pricing-description {
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--zizq-text-on-dark-secondary);
    margin: 0 0 2.4rem;
    min-height: 4.6rem;
}

.r-pricing-price {
    margin-bottom: 2rem;
}

.r-pricing-amount {
    font-family: var(--zizq-font-sans);
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--zizq-text-on-dark-primary);
}

.r-pricing-period {
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    color: var(--zizq-text-on-dark-secondary);
    margin-left: 0.4rem;
}

.r-pricing-instance-limit,
.r-pricing-renewal {
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    color: var(--zizq-text-on-dark-secondary);
    margin: 0.6rem 0 0;
    min-height: 1.8rem;
}

.r-pricing-instance-limit.is-empty,
.r-pricing-renewal.is-empty,
.r-pricing-currency.is-empty {
    visibility: hidden;
}

/* Period tabs — same visual dialect as the terminal tabs so the whole page
   speaks the same language. Inline-flex row with a bottom border on the
   active tab. */
.r-pricing-period-tabs {
    display: inline-flex;
    margin-bottom: 2rem;
    border: 1px solid rgba(234, 234, 246, 0.35);
    align-self: flex-start;
}

.r-pricing-period-tabs.is-empty {
    visibility: hidden;
    min-height: 3.6rem;
}

.r-pricing-period-tab {
    padding: 0.9rem 1.6rem;
    background: transparent;
    border: 0;
    color: var(--zizq-text-on-dark-secondary);
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.r-pricing-period-tab + .r-pricing-period-tab {
    border-left: 1px solid rgba(234, 234, 246, 0.35);
}

.r-pricing-period-tab:hover {
    color: var(--zizq-text-on-dark-primary);
    background: rgba(255, 255, 255, 0.03);
}

.r-pricing-period-tab.is-active {
    color: var(--zizq-bg-dark);
    background: var(--zizq-bright-blue);
}

/* Feature list — own features get →, inherited features get a dim ↳. */
.r-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2.4rem;
    flex-grow: 1;
}

.r-pricing-feature {
    font-family: var(--zizq-font-mono);
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--zizq-text-on-dark-primary);
    padding: 0.6rem 0 0.6rem 2rem;
    position: relative;
}

.r-pricing-feature::before {
    content: "\2192";
    position: absolute;
    left: 0;
    color: var(--zizq-bright-cyan);
}

.r-pricing-feature.is-inherited {
    color: var(--zizq-text-on-dark-secondary);
}

.r-pricing-feature.is-inherited::before {
    content: "\21B3";
    color: var(--zizq-text-on-dark-secondary);
    opacity: 0.5;
}

/* Card footer pinned to the bottom — currency line + CTA (or the
   "No license required" placeholder on the free tier). */
.r-pricing-card-footer {
    margin-top: auto;
    padding-top: 2rem;
}

.r-pricing-currency {
    font-family: var(--zizq-font-mono);
    font-size: 1.2rem;
    color: var(--zizq-text-on-dark-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 1.4rem;
}

.r-pricing-cta {
    width: 100%;
    justify-content: center;
}

.r-pricing-no-license {
    display: inline-block;
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    color: var(--zizq-text-on-dark-secondary);
    padding: 1.3rem 0;
}

.r-pricing-loading {
    padding: 6rem 4rem;
    font-family: var(--zizq-font-mono);
    color: var(--zizq-text-on-dark-secondary);
    text-align: center;
}

/* ---- Buy ---- */

/* Two-column split: license summary on the left, contact form on the right.
   Each cell is a flex column so the price summary on the left can be pinned
   to the bottom via margin-top:auto, ending up aligned with the "Continue"
   button on the right. */
.r-buy-cell {
    padding: 4rem;
    display: flex;
    flex-direction: column;
}

.r-buy-headline {
    font-family: var(--zizq-font-sans);
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1.1;
    margin: 1.2rem 0 2.4rem;
    color: var(--zizq-text-on-dark-primary);
}

/* Vertical strip of period options — bigger, more affirmative than the
   compact tab strip on the pricing page, since this is the final choice. */
.r-buy-period-options {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(234, 234, 246, 0.35);
}

.r-buy-period-option {
    padding: 1.4rem 1.8rem;
    background: transparent;
    border: 0;
    color: var(--zizq-text-on-dark-secondary);
    font-family: var(--zizq-font-mono);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 120ms ease, background-color 120ms ease;
}

.r-buy-period-option + .r-buy-period-option {
    border-top: 1px solid rgba(234, 234, 246, 0.35);
}

.r-buy-period-option:hover {
    color: var(--zizq-text-on-dark-primary);
    background: rgba(255, 255, 255, 0.03);
}

.r-buy-period-option.is-active {
    color: var(--zizq-bg-dark);
    background: var(--zizq-bright-blue);
}

.r-buy-period-label {
    font-size: 1.4rem;
}

.r-buy-period-price {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Price summary pinned to the bottom of the left column so it lines up
   with the Continue button on the right. */
.r-buy-price-summary {
    margin-top: auto;
    padding-top: 2.4rem;
    border-top: 1px solid var(--zizq-divider);
}

.r-buy-price-summary .r-form-label {
    margin-bottom: 1.2rem;
}

.r-buy-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.6rem;
    padding: 0.4rem 0;
}

.r-buy-price-label {
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    color: var(--zizq-text-on-dark-secondary);
}

.r-buy-price-amount {
    font-family: var(--zizq-font-sans);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--zizq-text-on-dark-primary);
}

.r-buy-price-renewal-amount {
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    color: var(--zizq-text-on-dark-secondary);
}

.r-buy-actions {
    margin-top: auto;
    padding-top: 2.4rem;
}

.r-buy-continue {
    width: 100%;
    justify-content: center;
}

/* ---- Buy success ---- */

/* Order details as a label/value list on the left column. Mono labels
   share the .r-form-label look for consistency with the /buy form. */
.r-buy-success-details {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.r-buy-success-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--zizq-divider);
}

.r-buy-success-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.r-buy-success-detail-value {
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    color: var(--zizq-text-on-dark-primary);
    text-align: right;
    word-break: break-word;
}

/* License key block — dark inset panel, header row with the label and a
   pill copy button, textarea below with the JWT. Textarea is read-only
   but selectable/keyboard-copyable for accessibility. */
.r-buy-success-key {
    border: 1px solid rgba(234, 234, 246, 0.15);
    background: rgba(0, 0, 0, 0.25);
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
}

.r-buy-success-key-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--zizq-divider);
}

.r-buy-success-key-body {
    display: block;
    width: 100%;
    min-height: 12rem;
    padding: 1.4rem;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--zizq-text-on-dark-primary);
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    line-height: 1.5;
    resize: vertical;
    word-break: break-all;
}

.r-buy-success-copy {
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid rgba(234, 234, 246, 0.35);
    color: var(--zizq-text-on-dark-primary);
    font-family: var(--zizq-font-mono);
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.r-buy-success-copy:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--zizq-text-on-dark-primary);
}

/* ---- Contact ---- */

/* Vertical list of "reach us elsewhere" links (email, GitHub). Bordered
   pill-ish rows with icons — quieter than the primary CTA so the enquiry
   form still leads. */
.r-contact-channels {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 2rem;
}

.r-contact-channel {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    border: 1px solid rgba(234, 234, 246, 0.15);
    color: var(--zizq-text-on-dark-primary);
    font-family: var(--zizq-font-mono);
    font-size: 1.4rem;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.r-contact-channel:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(234, 234, 246, 0.35);
}

.r-contact-channel i {
    color: var(--zizq-bright-blue);
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
}

.r-contact-submit,
.r-account-submit,
.r-account-manage-btn,
.r-account-resend-btn {
    width: 100%;
    justify-content: center;
}

/* Dim an expired purchase row so active ones lead the eye. */
.r-account-purchase-expired {
    opacity: 0.55;
}

/* Non-interactive confirmation replacing the Resend button on the row
   that just got a resend request. Sized to the same footprint as the
   ghost button — and matches the 2.4rem margin-top that the button gets
   from its `.r-form-actions` wrapper — so swapping it in doesn't shift
   the layout. Green cyan reads as "done". */
.r-account-resent-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.3rem 2.2rem;
    margin-top: 2.4rem;
    justify-content: center;
    width: 100%;
    font-family: var(--zizq-font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--zizq-bright-cyan);
    background: rgba(0, 204, 136, 0.08);
    border: 1px solid rgba(0, 204, 136, 0.4);
}

/* Small mono meta line — used for the "Issued …" line under the org
   on the left column and the "Auto-renews …" line under the expiry
   on the right. Same visual weight so both sides balance. */
.r-account-meta {
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    color: var(--zizq-text-on-dark-secondary);
    margin-top: 1.2rem;
    letter-spacing: 0.02em;
}

/* Quiet the vertical comets on this page — the licence rows have their
   own visual rhythm from the horizontal comet dividers between them. */
.r-account-manage .r-col-left-divider::after {
    display: none;
}

/* ---- Legal (License Agreement / Terms of Service / Privacy Policy) ----

   Dark hero + light content band + dark footer. The light band gives
   legal text the readability convention it needs; the hero + comet keep
   the visual family with the rest of the redesigned site. The hero
   markdown H1 is hidden because the hero above already has the title. */

.r-legal-content {
    background: var(--zizq-bg);
    color: var(--zizq-text);
    width: 100%;
    padding: 6rem 0;
}

.r-legal-column {
    max-width: 72ch;
    margin: 0 auto;
    padding: 0 4rem;
    font-family: var(--zizq-font-sans);
    font-size: 1.6rem;
    line-height: 1.65;
    color: var(--zizq-text);
}

/* Hidden — hero above has the title. */
.r-legal-column .prose h1 {
    display: none;
}

.r-legal-column .prose h2 {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 3rem 0 1.2rem;
    color: var(--zizq-text);
}

.r-legal-column .prose h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 2.4rem 0 1rem;
    color: var(--zizq-text);
}

.r-legal-column .prose p {
    margin: 0 0 1.4rem;
}

.r-legal-column .prose ul,
.r-legal-column .prose ol {
    margin: 0 0 1.6rem;
    padding-left: 2.4rem;
}

.r-legal-column .prose li {
    margin: 0.4rem 0;
}

.r-legal-column .prose a {
    color: var(--zizq-bg-dark);
    text-decoration: none;
    transition: color 120ms ease;
}

.r-legal-column .prose a:hover {
    color: var(--zizq-bright-cyan);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.r-legal-column .prose hr {
    border: 0;
    border-top: 1px solid var(--zizq-border);
    margin: 3rem 0;
}

.r-legal-column .prose strong {
    font-weight: 700;
    color: var(--zizq-text);
}

.r-legal-column .prose code {
    font-family: var(--zizq-font-mono);
    font-size: 0.9em;
    background: var(--zizq-bg-alt);
    padding: 0.15em 0.4em;
}

/* First paragraph is the "**Last updated:** DATE" line. Style it as a
   dim mono meta strip so it reads as document metadata, not body text. */
.r-legal-column .prose > p:first-of-type {
    font-family: var(--zizq-font-mono);
    font-size: 1.3rem;
    color: var(--zizq-text-muted);
    letter-spacing: 0.03em;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--zizq-border);
    margin-bottom: 2.4rem;
}

.r-legal-column .prose > p:first-of-type strong {
    color: var(--zizq-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5em;
}

/* Fine print — footnotes at the bottom of pricing and other pages that
   need mono, dim reference text. */
.r-fine-print {
    padding: 3rem 4rem;
    font-family: var(--zizq-font-mono);
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--zizq-text-on-dark-secondary);
}

.r-fine-print p {
    display: flex;
    gap: 1rem;
    margin: 0 0 1.4rem;
}

.r-fine-print p:last-child {
    margin-bottom: 0;
}

.r-fine-print-marker {
    flex-shrink: 0;
    color: var(--zizq-text-on-dark-primary);
    min-width: 1rem;
}

.r-fine-print a {
    color: var(--zizq-bright-blue);
    text-decoration: none;
}

.r-fine-print a:hover {
    color: var(--zizq-bright-cyan);
}

@media (max-width: 900px) {
    .r-docs-hero {
        grid-template-columns: 1fr;
    }
    .r-docs-hero-text,
    .r-docs-hero-intro {
        padding: 4rem 2.4rem;
        grid-column: 1 / -1;
    }
    .r-doc-card {
        padding: 3rem 2.4rem;
        min-height: 0;
    }
    .r-doc-card .r-card-headline {
        font-size: 2rem;
    }
    .r-docs-clients,
    .r-docs-help {
        padding: 4rem 2.4rem;
    }
    .r-client-cell {
        padding: 3rem 2.4rem;
    }
    .r-client-cell .r-card-headline {
        font-size: 2.2rem;
    }
    .r-pricing-card {
        padding: 3rem 2.4rem;
    }
    .r-buy-cell {
        padding: 3rem 2.4rem;
    }
    .r-buy-headline {
        font-size: 2.2rem;
    }
    .r-form-row {
        flex-direction: column;
        gap: 0;
    }
    .r-form-row .r-form-field {
        margin-bottom: 2.4rem;
    }
    .r-legal-content {
        padding: 3rem 0;
    }
    .r-legal-column {
        padding: 0 2.4rem;
    }
    .r-fine-print {
        padding: 3rem 2.4rem;
    }
}