/* ═══════════════════════════════════════════════════════════════
   ROXETTA STONE — dedicated page stylesheet (cache-bust 2026-05-29)
   ═══════════════════════════════════════════════════════════════
   All rules below are scoped via .rxs-* class prefix or under
   .rxs-body to avoid touching the rest of the site.

   Design principles applied (from research):
   - Background base #0B0716 (not pure black, with violet undertone)
   - Body text rgba(255,255,255,0.94) (not pure white, less halation)
   - WCAG AA contrast verified for every text/bg pair
   - No magenta-on-violet vibration in small text (only in headlines)
   - Single dramatic gradient per block (not everywhere)
   - Inter for body (legibility), Cormorant Garamond for display
*/

/* ── Cormorant removed: page now uses Inter for everything,
   matching the rest of the site. Self-hosted woff2 files in
   /assets/fonts/cormorant-* can be deleted if not used elsewhere. */

/* ── Roxetta Stone tokens ───────────────────────────────────── */
.rxs-body {
    /* Backgrounds: depth ladder. Deepest at base, lighter as you elevate. */
    --rxs-bg-base:        #0B0716;
    --rxs-bg-card:        #16102B;
    --rxs-bg-card-hi:     #1F1838;

    /* Borders */
    --rxs-border:         rgba(255, 255, 255, 0.08);
    --rxs-border-warm:    rgba(180, 140, 255, 0.18);

    /* Accents */
    --rxs-violet:         #B49BE8;
    --rxs-violet-strong:  #9D7FE5;
    --rxs-magenta-soft:   #E66BB1;
    --rxs-violet-glow:    rgba(157, 127, 229, 0.28);

    /* Text. Verified contrast vs all backgrounds (--rxs-bg-base/card/card-hi):
       text:    17.8:1 (AAA)
       text-2:   9.5:1 (AAA)
       text-3:   ≥4.88:1 on bg-card-hi worst case (AA body, AAA large)
       text-4:   3.5:1 (AA large only — for decorative captions) */
    --rxs-text:           rgba(255, 255, 255, 0.94);
    --rxs-text-2:         rgba(220, 210, 255, 0.78);
    --rxs-text-3:         rgba(180, 165, 230, 0.75);
    --rxs-text-4:         rgba(180, 165, 230, 0.55);
    --rxs-text-link:      #D4B8FF;

    /* Status */
    --rxs-success:        #88E8B4;
    --rxs-danger:         #FF6E8A;

    /* Type families: Inter only, matching the rest of the site */
    --rxs-font-display:   'Inter', system-ui, -apple-system, sans-serif;
    --rxs-font-body:      'Inter', system-ui, -apple-system, sans-serif;

    /* Easing */
    --rxs-ease:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --rxs-ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

    /* Apply these tokens */
    background: var(--rxs-bg-base);
    color: var(--rxs-text);
}

/* ── prefers-contrast: more ─────────────────────────────────────
   Bumps tertiary and quaternary text to higher-contrast values
   for users who request increased contrast (Windows High Contrast,
   macOS Increase Contrast accessibility toggle). text and text-2
   already pass AAA so they don't need bumping. */
@media (prefers-contrast: more) {
    .rxs-body {
        --rxs-text-3: rgba(220, 200, 255, 0.95);
        --rxs-text-4: rgba(210, 195, 250, 0.82);
        --rxs-border:      rgba(255, 255, 255, 0.20);
        --rxs-border-warm: rgba(180, 140, 255, 0.45);
    }
}

/* ── Main content area ──────────────────────────────────────── */
.rxs-main {
    position: relative;
    z-index: 1;
    /* min-width: 0 + width: 100% prevents flex children with wide
       content (deep grids, tables) from forcing the container wider
       than the viewport on phones. */
    width: 100%;
    min-width: 0;
    max-width: 880px;
    margin: 0 auto;
    padding: 1.5rem 0 4rem;
}

/* ── Page header (eyebrow + H1 + subtitle) ──────────────────── */
.rxs-page-header {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
    position: relative;
}

.rxs-eyebrow {
    font-family: var(--rxs-font-body);
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.5;
    color: var(--rxs-text-2);
    max-width: 640px;
    margin: 0 auto 1.4rem;
}

.rxs-page-h1 {
    font-family: var(--rxs-font-display);
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 auto 1.2rem;
    /* "The" gets the same lavender-to-magenta gradient as "etta Stone" */
    background: linear-gradient(135deg, #B49BE8 0%, #E66BB1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rxs-page-h1 em {
    font-style: normal;
    font-weight: 800;
}

/* "Rox" — anchored in the brand indigo, echoing the ROXCULT logo */
.rxs-page-h1 .rxs-h1-rox {
    background: linear-gradient(135deg, #5B4FE8 0%, #8060E8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 26px rgba(91, 79, 232, 0.55));
}

/* "etta Stone" — softer lavender to magenta, supporting role */
.rxs-page-h1 .rxs-h1-rest {
    background: linear-gradient(135deg, #B49BE8 0%, #E66BB1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(232, 79, 160, 0.4));
}

.rxs-page-subtitle {
    font-family: var(--rxs-font-body);
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 450;
    line-height: 1.45;
    color: var(--rxs-text-2);
    max-width: 580px;
    margin: 0 auto 1.3rem;
}

.rxs-page-meta {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--rxs-text-4);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rxs-meta-dot {
    width: 3px;
    height: 3px;
    background: var(--rxs-text-4);
    border-radius: 50%;
}

/* ── Hero figure ────────────────────────────────────────────── */
.rxs-page-hero {
    margin: 1rem 0 2.4rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--rxs-border-warm);
    background: var(--rxs-bg-card);
    /* Soft glow underneath, gives a "floating" feel */
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.02),
        0 20px 60px -20px var(--rxs-violet-glow);
    /* Position context for the hover magnify badge */
    position: relative;
}

.rxs-page-hero img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s var(--rxs-ease-out-expo), filter 0.5s var(--rxs-ease-out-expo);
}

/* Marker class on the trigger image; styling handled by parent figure rules.
   The class exists so the JS can identify the zoomable image and so the
   class audit stays clean. */
.rxs-hero-img-zoomable {
    cursor: zoom-in;
}

.rxs-page-hero:hover img {
    transform: scale(1.015);
    filter: brightness(1.06);
}

/* Magnify badge that appears on hover. Hidden on touch (no hover state). */
.rxs-hero-magnify {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem 0.55rem 0.65rem;
    background: rgba(11, 7, 22, 0.78);
    border: 1px solid rgba(212, 184, 255, 0.35);
    border-radius: 999px;
    color: var(--rxs-text-link);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s var(--rxs-ease), transform 0.25s var(--rxs-ease);
    box-shadow: 0 6px 20px -6px rgba(91, 79, 232, 0.4);
}

.rxs-page-hero:hover .rxs-hero-magnify {
    opacity: 1;
    transform: translateY(0);
}

.rxs-hero-magnify svg {
    flex-shrink: 0;
    color: var(--rxs-violet-strong);
}

.rxs-hero-magnify-label {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
}

/* Hide the magnify badge on touch devices (no real hover) */
@media (hover: none) {
    .rxs-hero-magnify { display: none; }
    .rxs-page-hero:hover img {
        transform: none;
        filter: none;
    }
}

.rxs-page-hero figcaption {
    font-family: var(--rxs-font-body);
    font-size: 0.82rem;
    color: var(--rxs-text-3);
    text-align: center;
    padding: 0.8rem 1rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
    border-top: 1px solid var(--rxs-border);
    line-height: 1.5;
    font-style: italic;
}

/* ── Intro paragraphs ───────────────────────────────────────── */
.rxs-page-intro {
    padding: 0 0.5rem;
    margin-bottom: 3rem;
}

.rxs-page-intro p {
    font-family: var(--rxs-font-body);
    font-size: 1.02rem;
    font-weight: 450;
    line-height: 1.75;
    color: var(--rxs-text);
    margin: 0 0 1.2rem;
}

.rxs-page-intro p strong {
    color: var(--rxs-text);
    font-weight: 600;
}

/* ── Decoder / accordion section ────────────────────────────── */
.rxs-decoder {
    margin-top: 3.5rem;
}

.rxs-decoder-intro {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.rxs-decoder-intro::before {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    margin: 0 auto 1.6rem;
    background: linear-gradient(90deg, transparent, var(--rxs-violet-strong), transparent);
    opacity: 0.6;
}

.rxs-decoder-title {
    font-family: var(--rxs-font-display);
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--rxs-text);
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
}

.rxs-decoder-sub {
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    font-weight: 450;
    color: var(--rxs-text-3);
    max-width: 520px;
    margin: 0 auto 1.2rem;
    line-height: 1.55;
}

.rxs-expand-all {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rxs-text-link);
    background: transparent;
    border: 1px solid var(--rxs-border-warm);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s var(--rxs-ease);
}

.rxs-expand-all:hover,
.rxs-expand-all:focus-visible {
    border-color: var(--rxs-violet-strong);
    background: rgba(157, 127, 229, 0.08);
    color: #fff;
    outline: none;
}

.rxs-expand-all:focus-visible {
    box-shadow: 0 0 0 3px rgba(157, 127, 229, 0.35);
}

/* ── Accordion sections ─────────────────────────────────────── */
.rxs-sections {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.rxs-section {
    background: var(--rxs-bg-card);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s var(--rxs-ease), background 0.3s var(--rxs-ease);
}

.rxs-section:hover {
    border-color: var(--rxs-border-warm);
}

.rxs-section[data-open="true"] {
    background: var(--rxs-bg-card-hi);
    border-color: var(--rxs-border-warm);
    box-shadow: 0 8px 32px -12px var(--rxs-violet-glow);
}

.rxs-section-header {
    display: grid;
    grid-template-columns: 56px 1fr 28px;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
}

.rxs-section-header:focus-visible {
    outline: 2px solid var(--rxs-violet-strong);
    outline-offset: 2px;
}

.rxs-section-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    color: #fff;
    font-family: var(--rxs-font-body);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -4px var(--rxs-violet-glow);
    flex-shrink: 0;
}

.rxs-section-titles {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.rxs-section-title {
    font-family: var(--rxs-font-display);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--rxs-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}

.rxs-section-question {
    font-family: var(--rxs-font-body);
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--rxs-text-3);
    line-height: 1.4;
    margin: 0;
}

.rxs-section-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rxs-violet-strong);
    flex-shrink: 0;
    transition: transform 0.3s var(--rxs-ease-out-expo);
}

.rxs-section[data-open="true"] .rxs-section-toggle {
    transform: rotate(90deg);
}

.rxs-section-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.rxs-section-body {
    /* Hidden state */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--rxs-ease-out-expo);
}

.rxs-section[data-open="true"] .rxs-section-body {
    /* Will be set inline by JS to the actual content height */
    max-height: var(--rxs-section-body-h, 4000px);
}

.rxs-section-body-inner {
    padding: 0.4rem 1.4rem 1.6rem;
    border-top: 1px solid var(--rxs-border);
    margin-top: 0.4rem;
}

.rxs-section-body-inner p {
    font-family: var(--rxs-font-body);
    font-size: 0.96rem;
    font-weight: 450;
    line-height: 1.7;
    color: var(--rxs-text);
    margin: 0 0 1rem;
}

/* Breathing room between a chart / data block and the paragraph that
   follows it. Several Section 5/6/7 visualisations sit in non-figure
   wrappers (rxs-capsules, rxs-rarity, rxs-stress, etc.), so the
   paragraph that comes right after them used to butt up against the
   table without space. */
.rxs-section-body-inner figure + p,
.rxs-section-body-inner figure + h3,
.rxs-section-body-inner [role="table"] + p,
.rxs-section-body-inner [role="table"] + h3,
.rxs-section-body-inner .rxs-capsules + p,
.rxs-section-body-inner .rxs-rarity + p,
.rxs-section-body-inner .rxs-rarity-note + h3,
.rxs-section-body-inner .rxs-stress + p,
.rxs-section-body-inner .rxs-odds-grid + p,
.rxs-section-body-inner .rxs-kpi-grid + h3,
.rxs-section-body-inner .rxs-trade-stats + p,
.rxs-section-body-inner .rxs-pulled + p,
.rxs-section-body-inner .rxs-unapplied + p,
.rxs-section-body-inner .rxs-opened + h3,
.rxs-section-body-inner .rxs-answers + h3,
.rxs-section-body-inner .rxs-summary + h3 {
    margin-top: 1.4rem;
}

.rxs-section-body-inner p strong {
    color: var(--rxs-text);
    font-weight: 600;
}

.rxs-section-body-inner h3 {
    font-family: var(--rxs-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--rxs-text);
    margin: 1.6rem 0 0.7rem;
    letter-spacing: -0.01em;
}

.rxs-section-body-inner h4 {
    font-family: var(--rxs-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--rxs-text);
    margin: 1.2rem 0 0.4rem;
    letter-spacing: 0.005em;
}

.rxs-section-body-inner a {
    color: var(--rxs-text-link);
    text-decoration: underline;
    text-decoration-color: rgba(212, 184, 255, 0.35);
    text-underline-offset: 2px;
    transition: color 0.2s var(--rxs-ease), text-decoration-color 0.2s var(--rxs-ease);
}

.rxs-section-body-inner a:hover {
    color: #fff;
    text-decoration-color: var(--rxs-magenta-soft);
}

/* The closing CTA reuses the blog .article-cta pattern, which has its
   own button styling. Override the underlined link defaults so the
   buttons render exactly like in the blog: solid white text, no
   underline, gradient pill. */
.rxs-section-body-inner .article-cta-btn,
.rxs-section-body-inner .article-cta-btn:hover {
    color: #fff;
    text-decoration: none;
}

.rxs-section-body-inner ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
}

.rxs-section-body-inner ul li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.5rem;
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--rxs-text);
}

.rxs-section-body-inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
}

/* ── In-section visual elements ───────────────────────────────
   All the components that live INSIDE accordion panels: screenshots,
   hero stats, split bars, source callouts. Built with restraint:
   each component has one purpose, one accent color where useful,
   and never combines violet+magenta on small text. */

/* Screenshot card. For the Valve blog screenshot, leak shots, etc. */
.rxs-shot {
    margin: 1.4rem auto;
    max-width: 540px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rxs-border);
    background: var(--rxs-bg-base);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}
.rxs-shot img {
    display: block;
    width: 100%;
    height: auto;
}
.rxs-shot figcaption {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    color: var(--rxs-text-3);
    text-align: center;
    padding: 0.65rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid var(--rxs-border);
    line-height: 1.5;
    font-style: italic;
}

/* Hero stat: the big number that anchors the section */
.rxs-stat-hero {
    margin: 1.2rem 0 1.8rem;
    padding: 1.6rem 1.2rem 1.4rem;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(157, 127, 229, 0.08), transparent 60%),
        var(--rxs-bg-base);
    border: 1px solid var(--rxs-border-warm);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
/* Decorative top border line */
.rxs-stat-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rxs-violet-strong), transparent);
    opacity: 0.7;
}
.rxs-stat-hero-num {
    font-family: var(--rxs-font-body);
    font-size: clamp(3rem, 7vw, 4.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #5B4FE8 0%, #8060E8 50%, var(--rxs-magenta-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(157, 127, 229, 0.35));
    margin-bottom: 0.55rem;
}
.rxs-stat-hero-label {
    font-family: var(--rxs-font-body);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
    margin-bottom: 0.7rem;
}
.rxs-stat-hero-sub {
    font-family: var(--rxs-font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--rxs-text-3);
    max-width: 460px;
    margin: 0 auto;
    font-style: italic;
}

/* 50/50 split bar: shows how teams' cut maps to total gross sales */
.rxs-split {
    margin: 1.4rem 0 1.6rem;
}
.rxs-split-bar {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    height: 88px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rxs-border);
    background: var(--rxs-bg-base);
}
.rxs-split-half {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    position: relative;
    overflow: hidden;
}
.rxs-split-teams {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(157, 127, 229, 0.16), transparent 70%),
        rgba(91, 79, 232, 0.06);
}
.rxs-split-valve {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.14), transparent 70%),
        rgba(232, 79, 160, 0.05);
}
.rxs-split-label {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}
.rxs-split-teams .rxs-split-label { color: rgba(180, 155, 232, 0.8); }
.rxs-split-valve .rxs-split-label { color: rgba(230, 140, 195, 0.85); }

.rxs-split-amount {
    font-family: var(--rxs-font-body);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.rxs-split-divider {
    background: linear-gradient(180deg, transparent, var(--rxs-border-warm), transparent);
    height: 100%;
}

/* Total row below the split */
.rxs-split-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.7rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(157, 127, 229, 0.08);
    border: 1px solid var(--rxs-border-warm);
}
.rxs-split-total-label {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rxs-text-2);
    text-transform: uppercase;
}
.rxs-split-total-num {
    font-family: var(--rxs-font-body);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Source / "Pro" callout: a subtle attribution box */
.rxs-callout-pro {
    margin: 1.6rem 0 0.4rem;
    padding: 0.9rem 1.1rem;
    background: rgba(11, 7, 22, 0.6);
    border: 1px solid var(--rxs-border);
    border-left: 3px solid var(--rxs-violet-strong);
    border-radius: 0 10px 10px 0;
}
.rxs-callout-pro .rxs-callout-tag {
    display: inline-block;
    font-family: var(--rxs-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rxs-violet-strong);
    background: rgba(157, 127, 229, 0.14);
    padding: 0.18em 0.7em;
    border-radius: 999px;
    margin-bottom: 0.45rem;
}
.rxs-callout-pro p {
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    color: var(--rxs-text-2) !important;
}

/* Sources callout: subdivided into headed sub-blocks. Same outer
   container as .rxs-callout-pro, but each sub-section gets its own
   small heading and paragraph spacing so the wall of links breaks
   into something readable. */
.rxs-callout-sources {
    padding: 1rem 1.2rem 1.05rem;
}
.rxs-callout-sources p + .rxs-sources-h,
.rxs-callout-sources .rxs-callout-tag + .rxs-sources-h {
    margin-top: 0.85rem;
}
.rxs-sources-h {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rxs-text);
    margin: 0 0 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px dashed var(--rxs-border);
}
.rxs-callout-sources p + p {
    margin-top: 0.75rem !important;
}

/* ─── Budget bar (section 3) ───────────────────────────────────
   Two coordinated visualisations that compare a "fits" case with
   an "overflows" case. Both bars fill 100% of their frame, but
   the verdict badge below differentiates success from failure
   through THREE independent channels: color (green vs coral),
   icon (check vs alert triangle), and text label. This avoids
   relying solely on color for accessibility per WCAG 1.4.1.

   Visual language matches Section 2's flow1 split bar: the bar
   itself is the dark base panel, segments are radial-gradient
   tints (not saturated fills), color is used as accent. */
.rxs-budget-card {
    margin: 1.4rem 0;
    padding: 1rem 1.1rem 0.9rem;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 14px;
}
.rxs-budget-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
    text-align: center;
    margin-bottom: 0.85rem;
}
.rxs-budget-frame2 {
    position: relative;
    width: 100%;
    margin-bottom: 0.9rem;
    overflow: visible;
}
.rxs-budget-bar2 {
    display: flex;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    width: 100%;
    position: relative;
}
.rxs-budget-seg2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0.3rem;
    color: var(--rxs-text);
    overflow: hidden;
    transition: background 0.25s var(--rxs-ease);
    position: relative;
    /* Lock segment widths to the exact percentages set inline so the
       budget line lands precisely at the AW caps / AW over boundary
       on every viewport. Without this the flexbox shrinks segments
       proportionally and the line drifts left. */
    flex-shrink: 0;
}
/* Subtle vertical dividers between segments using a right border */
.rxs-budget-seg2 + .rxs-budget-seg2 {
    box-shadow: inset 1px 0 0 0 var(--rxs-border-warm);
}
.rxs-seg-name {
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}
.rxs-seg-num {
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
/* Segment fills: dark base + soft radial-gradient accent.
   Same family as Section 2 (.rxs-flow1-souvenirs etc.) so the
   visual language stays unified across all sections.

   Color logic:
   - Souvenir + Pass: cyan-leaning blue. Distinct hue from the
     two capsule colors so the reader does not confuse it with
     Stockholm's purple.
   - Stockholm capsules: cool violet (lighter end of the brand
     palette).
   - Antwerp capsules: warm magenta (the brand accent color).
   - Overflow: red diagonal stripes plus warning color. */
.rxs-seg-souvenir {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(86, 184, 232, 0.22), transparent 70%),
        rgba(86, 184, 232, 0.06);
}
.rxs-seg-souvenir .rxs-seg-name { color: rgba(150, 210, 240, 0.95); }

.rxs-seg-stockholm {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(128, 96, 232, 0.22), transparent 70%),
        rgba(128, 96, 232, 0.07);
}
.rxs-seg-stockholm .rxs-seg-name { color: rgba(195, 165, 245, 0.92); }

.rxs-seg-antwerp {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.22), transparent 70%),
        rgba(232, 107, 177, 0.06);
}
.rxs-seg-antwerp .rxs-seg-name { color: rgba(232, 140, 195, 0.95); }

.rxs-seg-overflow {
    /* Diagonal stripes + alert color, three visual signals so the
       overflow reads even without color perception. Kept saturated
       intentionally because this segment IS the warning. */
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 110, 138, 0.85),
            rgba(255, 110, 138, 0.85) 6px,
            rgba(220, 70, 100, 0.85) 6px,
            rgba(220, 70, 100, 0.85) 12px
        );
    color: #fff;
}
.rxs-seg-overflow .rxs-seg-name { color: rgba(255, 255, 255, 0.95); }
.rxs-seg-overflow .rxs-seg-num  { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); }

/* Vertical dashed line at the $140m mark of the hypothetical bar.
   Position: 80.92% (= 140/173), exactly the boundary between
   AW caps in-budget ($37m, ends at 49.71 + 9.83 + 21.39 = 80.93%) and
   AW over ($33m, the striped overflow). */
.rxs-budget-line {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 80.92%;
    width: 0;
    border-right: 2px dashed rgba(255, 255, 255, 0.7);
    pointer-events: none;
    z-index: 2;
}
/* Variant: budget line in the FIT case sits at the right edge (100%)
   and is recoloured success-green so the same visual element communicates
   "the bar reaches the budget exactly" instead of "the bar overflows it". */
.rxs-budget-line-fit {
    left: 100%;
    border-right-color: var(--rxs-success);
    border-right-style: solid;
}
.rxs-budget-line-fit .rxs-budget-line-tag {
    transform: translateX(-100%);
    border-color: rgba(136, 232, 180, 0.45);
    color: var(--rxs-success);
}
.rxs-budget-line-tag {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    background: var(--rxs-bg-base);
    padding: 0.16em 0.55em;
    border-radius: 4px;
    border: 1px solid var(--rxs-border-warm);
}

/* Verdict pill below the bar. Three visual channels: color, icon, label */
.rxs-budget-verdict {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-family: var(--rxs-font-body);
    font-size: 0.85rem;
    line-height: 1.4;
}
.rxs-verdict-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rxs-verdict-text {
    color: var(--rxs-text);
}
.rxs-verdict-text strong {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}
.rxs-verdict-ok {
    background: rgba(136, 232, 180, 0.10);
    border: 1px solid rgba(136, 232, 180, 0.35);
}
.rxs-verdict-ok .rxs-verdict-icon { color: var(--rxs-success); }
.rxs-verdict-ok .rxs-verdict-text strong { color: var(--rxs-success); }

.rxs-verdict-bad {
    background: rgba(255, 110, 138, 0.10);
    border: 1px solid rgba(255, 110, 138, 0.35);
}
.rxs-verdict-bad .rxs-verdict-icon { color: var(--rxs-danger); }
.rxs-verdict-bad .rxs-verdict-text strong { color: var(--rxs-danger); }

/* ─── Stress test table (section 2) ────────────────────────────
   Highlight-table pattern: only the row that matters (120m fits)
   is marked. Other rows stay neutral. The fit row gets THREE
   signals: pink-violet border, brand color tint, and a check icon
   in the verdict pill. Numbers are tabular-nums for column align. */
.rxs-stress {
    margin: 1.3rem 0 1.1rem;
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--rxs-bg-card);
}
.rxs-stress-header {
    display: grid;
    grid-template-columns: 90px 100px 100px 90px 1fr;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--rxs-border);
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}
/* Header cells: semantic markers only, all styling inherits from
   .rxs-stress-header. Listed so the class audit stays clean. */
.rxs-stress-h-supply,
.rxs-stress-h-verdict { /* see comment above */ }
.rxs-stress-h-rev,
.rxs-stress-h-other,
.rxs-stress-h-total {
    text-align: right;
}
.rxs-stress-row {
    display: grid;
    grid-template-columns: 90px 100px 100px 90px 1fr;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    align-items: center;
    border-bottom: 1px solid var(--rxs-border);
    font-family: var(--rxs-font-body);
    font-size: 0.86rem;
    transition: background 0.2s var(--rxs-ease);
}
.rxs-stress-row:last-child { border-bottom: none; }
.rxs-stress-row:hover { background: rgba(255, 255, 255, 0.025); }

.rxs-stress-supply {
    font-weight: 700;
    color: var(--rxs-text);
    font-variant-numeric: tabular-nums;
}
.rxs-stress-rev,
.rxs-stress-other,
.rxs-stress-total {
    text-align: right;
    color: var(--rxs-text-2);
    font-variant-numeric: tabular-nums;
}
/* The "Souvenirs + SH + Pass" column shows the same number on every row.
   It's there for arithmetic transparency, not as the comparison axis.
   Reduce its visual weight so the eye flows past it to the AW caps and
   Total columns where the actual variation lives. */
.rxs-stress-other {
    color: var(--rxs-text-4);
    font-weight: 400;
}
.rxs-stress-total {
    color: var(--rxs-text);
    font-weight: 700;
}
.rxs-stress-verdict {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rxs-text-3);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.rxs-stress-verdict-short {
    color: rgba(180, 165, 230, 0.85);
}
.rxs-stress-verdict-over {
    color: var(--rxs-danger);
}
.rxs-stress-verdict-fit {
    color: var(--rxs-success);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}
/* The winner row — marked with brand gradient tint + left border */
.rxs-stress-row-fit {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.10), rgba(157, 127, 229, 0.04));
    box-shadow: inset 3px 0 0 0 var(--rxs-magenta-soft);
}
.rxs-stress-row-fit:hover {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.16), rgba(157, 127, 229, 0.08));
}
.rxs-stress-row-fit .rxs-stress-supply,
.rxs-stress-row-fit .rxs-stress-total {
    color: #fff;
}

/* Capsule comparison table.
   Same anatomy as the listings table in Section 3 (proportional
   bars, highlighted target row), but bars are scaled to the
   largest capsule (Team Legends 28m = 100%). Auto Contenders
   row gets the same triple highlight: brand-tint background +
   inset border + 'rox holo source' pill. */
.rxs-capsules {
    margin: 1.3rem 0 0.4rem;
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--rxs-bg-card);
}
.rxs-capsules-header {
    display: grid;
    grid-template-columns: 200px 1fr 70px 60px;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--rxs-border);
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
    align-items: center;
}
/* Header cell: semantic marker only, styling inherits from
   .rxs-capsules-header. */
.rxs-capsules-h-name { /* see comment above */ }
.rxs-capsules-h-supply,
.rxs-capsules-h-share {
    text-align: right;
}
.rxs-capsule-row {
    display: grid;
    grid-template-columns: 200px 1fr 70px 60px;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    align-items: center;
    border-bottom: 1px solid var(--rxs-border);
    font-family: var(--rxs-font-body);
    font-size: 0.84rem;
    transition: background 0.2s var(--rxs-ease);
}
.rxs-capsule-row:last-child { border-bottom: none; }
.rxs-capsule-row:hover { background: rgba(255, 255, 255, 0.025); }
.rxs-capsule-name {
    font-weight: 700;
    color: var(--rxs-text);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.2;
}
.rxs-capsule-type {
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--rxs-text-3);
    letter-spacing: 0.02em;
}
/* Anchor / Validation pills for the cross-major implied-supply table.
   Sit alongside the bigger .rxs-capsule-tag-key magenta pill but use
   a cooler, lower-contrast palette so they do not compete with the
   "our target" highlight on the AW row. */
.rxs-capsule-tag-anchor,
.rxs-capsule-tag-validation {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text);
    background: rgba(157, 127, 229, 0.18);
    border: 1px solid var(--rxs-border-warm);
    padding: 0.16em 0.55em;
    border-radius: 4px;
}
.rxs-capsule-tag-validation {
    background: rgba(91, 79, 232, 0.18);
}
.rxs-capsule-tag-key {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(232, 107, 177, 0.18);
    border: 1px solid rgba(232, 107, 177, 0.42);
    padding: 0.16em 0.55em;
    border-radius: 999px;
    align-self: flex-start;
    margin-top: 0.15rem;
}
.rxs-capsule-bar {
    width: 100%;
    height: 18px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.rxs-capsule-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(91, 79, 232, 0.55), rgba(157, 127, 229, 0.78));
    border-radius: 4px;
    transition: filter 0.2s var(--rxs-ease);
}
.rxs-capsule-row:hover .rxs-capsule-fill { filter: brightness(1.15); }
.rxs-capsule-fill-key {
    background: linear-gradient(90deg, rgba(157, 127, 229, 0.85), var(--rxs-magenta-soft));
}
.rxs-capsule-supply,
.rxs-capsule-share {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--rxs-text-2);
    font-weight: 700;
}
.rxs-capsule-row-key {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.08), rgba(157, 127, 229, 0.04));
    box-shadow: inset 3px 0 0 0 var(--rxs-magenta-soft);
}
.rxs-capsule-row-key:hover {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.14), rgba(157, 127, 229, 0.08));
}
.rxs-capsule-row-key .rxs-capsule-name,
.rxs-capsule-row-key .rxs-capsule-supply,
.rxs-capsule-row-key .rxs-capsule-share {
    color: #fff;
}
/* Total row: visually distinct, no bar */
.rxs-capsule-row-total {
    background: rgba(157, 127, 229, 0.08);
    border-top: 1px solid var(--rxs-border-warm);
    font-weight: 800;
}
.rxs-capsule-row-total:hover { background: rgba(157, 127, 229, 0.10); }
.rxs-capsule-row-total .rxs-capsule-name {
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--rxs-text-2);
}
.rxs-capsule-row-total .rxs-capsule-supply,
.rxs-capsule-row-total .rxs-capsule-share {
    color: #fff;
    font-size: 0.94rem;
}
.rxs-capsule-row-total .rxs-capsule-bar { background: transparent; }

/* ─── Section 5: Drop rate ladder ──────────────────────────────
   Four tiers spanning two orders of magnitude (Paper 2% → Gold
   0.016%). Linear bars would make the rare tiers vanish, so we
   show the odds and percentage as the primary signal and use a
   small color swatch for tier identity. The Holo row (our tier)
   gets the standard triple highlight. */
.rxs-rarity {
    margin: 1.2rem 0 0.6rem;
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--rxs-bg-card);
}
.rxs-rarity-row {
    display: grid;
    grid-template-columns: 14px 1fr 110px 100px 70px;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    align-items: center;
    border-bottom: 1px solid var(--rxs-border);
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    transition: background 0.2s var(--rxs-ease);
}
.rxs-rarity-row:last-child { border-bottom: none; }
.rxs-rarity-row:hover { background: rgba(255, 255, 255, 0.025); }

/* Log-scale chip column. Communicates the order-of-magnitude gap
   between tiers without making the rare ones disappear. Each chip's
   width is roughly log10(odds-ratio-vs-Paper). The multiplier
   ('5x', '26x', '125x') is the actual rarity ratio shown as text. */
.rxs-rarity-scale {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.rxs-rarity-chip {
    display: inline-block;
    height: 8px;
    border-radius: 4px;
    flex: 0 0 auto;
    /* Width is set inline per-row (100% / 71% / 51% / 30%) */
}
.rxs-rarity-paper   .rxs-rarity-chip { background: linear-gradient(90deg, rgba(75, 105, 255, 0.65), rgba(111, 140, 255, 0.85)); }
.rxs-rarity-glitter .rxs-rarity-chip { background: linear-gradient(90deg, rgba(136, 71, 255, 0.65), rgba(167, 116, 255, 0.85)); }
.rxs-rarity-holo    .rxs-rarity-chip { background: linear-gradient(90deg, rgba(211, 44, 230, 0.85), var(--rxs-magenta-soft)); }
.rxs-rarity-gold    .rxs-rarity-chip { background: linear-gradient(90deg, rgba(255, 215, 0, 0.85), rgba(255, 184, 77, 0.85)); }
.rxs-rarity-mult {
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rxs-text-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: auto;
}
.rxs-rarity-row-key .rxs-rarity-mult { color: var(--rxs-text-2); }
.rxs-rarity-scale-note {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--rxs-text-3);
    margin: 0.55rem 0.4rem 1rem;
    font-style: italic;
}

/* Tier swatch: a small filled square that picks up the canonical
   CS rarity color, kept subtle so it does not vibrate. */
.rxs-rarity-tier {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.rxs-rarity-paper   .rxs-rarity-tier { background: linear-gradient(135deg, #4B69FF, #6f8cff); }
.rxs-rarity-glitter .rxs-rarity-tier { background: linear-gradient(135deg, #8847FF, #a774ff); }
.rxs-rarity-holo    .rxs-rarity-tier { background: linear-gradient(135deg, #D32CE6, #E66BB1); }
.rxs-rarity-gold    .rxs-rarity-tier { background: linear-gradient(135deg, #FFD700, #ffb84d); }

.rxs-rarity-name {
    font-weight: 700;
    color: var(--rxs-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.rxs-rarity-cat {
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--rxs-text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rxs-rarity-tag-key {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(232, 107, 177, 0.18);
    border: 1px solid rgba(232, 107, 177, 0.42);
    padding: 0.16em 0.55em;
    border-radius: 999px;
}
.rxs-rarity-odds,
.rxs-rarity-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--rxs-text);
}
.rxs-rarity-pct {
    color: var(--rxs-text-2);
    font-size: 0.86rem;
}
.rxs-rarity-row.rxs-rarity-row-key {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.10), rgba(157, 127, 229, 0.04));
    box-shadow: inset 3px 0 0 0 var(--rxs-magenta-soft);
}
.rxs-rarity-row.rxs-rarity-row-key:hover {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.16), rgba(157, 127, 229, 0.08));
}
.rxs-rarity-row.rxs-rarity-row-key .rxs-rarity-odds,
.rxs-rarity-row.rxs-rarity-row-key .rxs-rarity-pct,
.rxs-rarity-row.rxs-rarity-row-key .rxs-rarity-name { color: #fff; }
.rxs-rarity-note {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem !important;
    line-height: 1.55 !important;
    color: var(--rxs-text-3) !important;
    font-style: italic;
    margin: 0.4rem 0 1.2rem !important;
    padding: 0 0.2rem;
}

/* ─── Section 5: Equation cards ────────────────────────────────
   Two equation blocks: the per-player divisor (1/1281 ÷ 25) and
   the final ceiling formula (11M × 1/1248 = 8,814). Same dark
   base + radial-gradient family as the rest of the page. */
.rxs-equation-card {
    margin: 1.3rem 0;
    padding: 1.1rem 1.2rem 0.95rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(157, 127, 229, 0.10), transparent 65%),
        var(--rxs-bg-base);
    border: 1px solid var(--rxs-border-warm);
    border-radius: 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rxs-equation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rxs-violet-strong), transparent);
    opacity: 0.6;
}
.rxs-equation-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: center;
}
.rxs-eq-piece {
    font-family: var(--rxs-font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rxs-text);
    font-variant-numeric: tabular-nums;
}
.rxs-eq-divide { color: var(--rxs-text-2); }
.rxs-eq-arrow {
    color: var(--rxs-violet-strong);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}
.rxs-eq-result {
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.rxs-equation-pct {
    margin-top: 0.5rem;
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--rxs-text-2);
    font-variant-numeric: tabular-nums;
}
.rxs-equation-note {
    margin-top: 0.45rem;
    font-family: var(--rxs-font-body);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--rxs-text-3);
    font-style: italic;
}
.rxs-equation-note a { color: var(--rxs-text-link); }

/* Final ceiling equation: bigger, hero-stat treatment */
.rxs-equation-card-final {
    padding: 1.4rem 1.2rem 1.1rem;
}
.rxs-equation-final {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: center;
}
.rxs-final-term {
    font-family: var(--rxs-font-body);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 800;
    color: var(--rxs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}
.rxs-final-term small {
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--rxs-text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 0.05rem;
}
.rxs-final-frac {
    color: var(--rxs-text-3);
    margin: 0 0.05rem;
}
.rxs-final-op {
    font-family: var(--rxs-font-body);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--rxs-violet-strong);
    line-height: 1;
}
.rxs-final-result {
    font-family: var(--rxs-font-body);
    font-size: clamp(2rem, 5.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #5B4FE8 0%, #8060E8 50%, var(--rxs-magenta-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(157, 127, 229, 0.32));
}
.rxs-equation-final-label {
    margin-top: 0.7rem;
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}

/* ─── Section 5: Odds grid (3 cards showing same number 3 ways) */
.rxs-odds-grid {
    margin: 1.1rem 0 1.4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}
.rxs-odds-card {
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 10px;
    padding: 0.85rem 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s var(--rxs-ease);
}
.rxs-odds-card:hover { border-color: var(--rxs-border-warm); }
.rxs-odds-num {
    font-family: var(--rxs-font-body);
    font-size: clamp(1.15rem, 3vw, 1.4rem);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    line-height: 1;
}
.rxs-odds-sep {
    color: var(--rxs-text-3);
    font-weight: 600;
    margin: 0 0.05em;
}
.rxs-odds-label {
    font-family: var(--rxs-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}

/* ─── Section 6: KPI grid (3 cards: applied, ceiling, % reached) ──
   Same anatomy as the .rxs-odds-card but a notch larger because
   these are headline numbers. The "63% reached" card gets the
   triple-highlight treatment because it is the one new datum
   the section introduces. */
.rxs-kpi-grid {
    margin: 1.2rem 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.rxs-kpi-card {
    background:
        radial-gradient(circle at 50% 0%, rgba(157, 127, 229, 0.06), transparent 65%),
        var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    padding: 1.1rem 0.85rem 0.95rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    transition: border-color 0.25s var(--rxs-ease), background 0.25s var(--rxs-ease);
}
.rxs-kpi-card:hover { border-color: var(--rxs-border-warm); }
.rxs-kpi-num {
    font-family: var(--rxs-font-body);
    font-size: clamp(1.8rem, 4.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rxs-kpi-label {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
}
.rxs-kpi-sub {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    color: var(--rxs-text-3);
    font-style: italic;
    line-height: 1.4;
}
.rxs-kpi-card-key {
    background:
        radial-gradient(circle at 50% 0%, rgba(232, 107, 177, 0.12), transparent 65%),
        rgba(232, 107, 177, 0.04);
    border-color: rgba(232, 107, 177, 0.32);
    box-shadow: inset 0 -2px 0 0 rgba(232, 107, 177, 0.5);
}
.rxs-kpi-card-key .rxs-kpi-num {
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Section 6: Trade stats (2 cards: total trades, avg per craft) */
.rxs-trade-stats {
    margin: 1.1rem 0 1.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.rxs-trade-card {
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    padding: 1rem 0.95rem 0.9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    transition: border-color 0.25s var(--rxs-ease);
}
.rxs-trade-card:hover { border-color: var(--rxs-border-warm); }
.rxs-trade-num {
    font-family: var(--rxs-font-body);
    font-size: clamp(1.7rem, 4.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rxs-trade-label {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
}
.rxs-trade-sub {
    font-family: var(--rxs-font-body);
    font-size: 0.72rem;
    color: var(--rxs-text-3);
    font-style: italic;
    line-height: 1.45;
}
.rxs-trade-card-key {
    background:
        radial-gradient(circle at 50% 0%, rgba(232, 107, 177, 0.10), transparent 65%),
        var(--rxs-bg-base);
    border-color: rgba(232, 107, 177, 0.32);
}
.rxs-trade-card-key .rxs-trade-num {
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Section 6: Owners chain (9 dots showing CSFloat DB scan path) ──
   CSS-only owner chain. Eight scanned owners (violet) and one
   private owner (magenta) on a horizontal track. Replaces the
   inline SVG version from the blog so it inherits the page tokens
   and scales cleanly on mobile. */
.rxs-owners {
    margin: 1.4rem 0 1.6rem;
    padding: 1rem 0.5rem 0.4rem;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
}
.rxs-owners-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 1.4rem 0.8rem 0.4rem;
}
.rxs-owners-line {
    position: absolute;
    left: 1.6rem;
    right: 1.6rem;
    top: 50%;
    /* Centred on the row of dots. The line was previously 1px tall
       with a 1.5px dashed border at 12% alpha which made it almost
       invisible. Bumped to a thicker dashed segment using a CSS
       gradient for crisp dashes plus a subtle violet glow so the
       chain reads at a glance, even on dense screens. */
    height: 0;
    border: 0;
    background-image: linear-gradient(
        to right,
        rgba(180, 140, 255, 0.55) 0,
        rgba(180, 140, 255, 0.55) 8px,
        transparent 8px,
        transparent 14px
    );
    background-size: 14px 2px;
    background-repeat: repeat-x;
    background-position: 0 center;
    height: 2px;
    margin-top: -1px;
    pointer-events: none;
}
.rxs-owners-cap {
    flex-shrink: 0;
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
    position: relative;
    z-index: 1;
    background: var(--rxs-bg-base);
    padding: 0 0.35em;
}
.rxs-owners-dots {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 0.2rem;
    position: relative;
    z-index: 1;
}
.rxs-owner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.rxs-owner-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--rxs-bg-base);
}
.rxs-owner-state {
    font-family: var(--rxs-font-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rxs-owner-scanned .rxs-owner-num {
    border: 2px solid var(--rxs-violet-strong);
    color: var(--rxs-violet-strong);
    box-shadow: 0 0 0 2px var(--rxs-bg-base);
}
.rxs-owner-scanned .rxs-owner-state { color: var(--rxs-success); }
.rxs-owner-private .rxs-owner-num {
    border: 2px solid var(--rxs-magenta-soft);
    color: var(--rxs-magenta-soft);
    background:
        radial-gradient(circle, rgba(232, 107, 177, 0.18), var(--rxs-bg-base) 70%);
    box-shadow: 0 0 0 2px var(--rxs-bg-base);
}
.rxs-owner-private .rxs-owner-state { color: var(--rxs-magenta-soft); }
.rxs-owners figcaption {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    color: var(--rxs-text-3);
    font-style: italic;
    line-height: 1.55;
    text-align: center;
    padding: 0.6rem 0.4rem 0.4rem;
}

/* ─── Section 6: Pulled bar (applied vs unapplied stacked split) ──
   Two-segment proportional bar with subtle radial-gradient tints.
   Same visual family as the Section 2 flow1 bar. */
.rxs-pulled {
    margin: 1.3rem 0 1.5rem;
}
.rxs-pulled-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
    text-align: center;
    margin-bottom: 0.7rem;
}
.rxs-pulled-bar {
    display: flex;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    position: relative;
}
.rxs-pulled-bar::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 70%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--rxs-border-warm), transparent);
    pointer-events: none;
}
.rxs-pulled-seg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
    text-align: center;
    transition: background 0.25s var(--rxs-ease);
}
.rxs-pulled-applied {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(91, 79, 232, 0.22), transparent 70%),
        rgba(91, 79, 232, 0.05);
}
.rxs-pulled-unapplied {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.18), transparent 70%),
        rgba(232, 107, 177, 0.05);
}
.rxs-pulled-applied:hover {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(91, 79, 232, 0.32), transparent 70%),
        rgba(91, 79, 232, 0.08);
}
.rxs-pulled-unapplied:hover {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.26), transparent 70%),
        rgba(232, 107, 177, 0.08);
}
.rxs-pulled-num {
    font-family: var(--rxs-font-body);
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rxs-pulled-label {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rxs-pulled-applied   .rxs-pulled-label { color: rgba(180, 155, 232, 0.92); }
.rxs-pulled-unapplied .rxs-pulled-label { color: rgba(230, 140, 195, 0.92); }
.rxs-pulled-pct {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--rxs-text-3);
    margin-top: 0.05rem;
}
.rxs-pulled-total {
    margin-top: 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(157, 127, 229, 0.08);
    border: 1px solid var(--rxs-border-warm);
}
.rxs-pulled-total-label {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rxs-text-2);
    text-transform: uppercase;
}
.rxs-pulled-total-num {
    font-family: var(--rxs-font-body);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

/* ─── Section 6: Unapplied composition (3-segment bar + legend) ──
   The bar segments are tiny for Steam (0.7%) and third-party
   (3.7%) so we ALSO duplicate the data in a legend table below
   the bar. The bar gives the visual proportion, the legend gives
   the readable numbers. Two channels, no information loss. */
.rxs-unapplied {
    margin: 1.4rem 0 1.5rem;
    padding: 1rem 1rem 0.85rem;
    background: var(--rxs-bg-card);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
}
.rxs-unapplied-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
    text-align: center;
    margin-bottom: 0.7rem;
}
.rxs-unapplied-bar {
    display: flex;
    height: 22px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 0.85rem;
}
.rxs-unapplied-seg {
    height: 100%;
    transition: filter 0.2s var(--rxs-ease);
}
.rxs-unapplied-seg:hover { filter: brightness(1.15); }
/* Color encoding: visible (cool) -> hidden (warm magenta).
   Steam Market gets the brand indigo for "the most visible". */
.rxs-unapplied-seg.rxs-unapplied-steam {
    background: linear-gradient(135deg, #5B4FE8, #8060E8);
}
.rxs-unapplied-seg.rxs-unapplied-third {
    background: linear-gradient(135deg, #8060E8, var(--rxs-violet));
}
.rxs-unapplied-seg.rxs-unapplied-hidden {
    background: linear-gradient(135deg, var(--rxs-violet), var(--rxs-magenta-soft));
    opacity: 0.65;
}
.rxs-unapplied-legend {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
}
.rxs-unapplied-row {
    display: grid;
    grid-template-columns: 18px 1fr 70px 60px;
    gap: 0.7rem;
    align-items: center;
    font-family: var(--rxs-font-body);
    font-size: 0.84rem;
}
.rxs-unapplied-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.rxs-unapplied-swatch.rxs-unapplied-steam {
    background: linear-gradient(135deg, #5B4FE8, #8060E8);
}
.rxs-unapplied-swatch.rxs-unapplied-third {
    background: linear-gradient(135deg, #8060E8, var(--rxs-violet));
}
.rxs-unapplied-swatch.rxs-unapplied-hidden {
    background: linear-gradient(135deg, var(--rxs-violet), var(--rxs-magenta-soft));
    opacity: 0.65;
}
.rxs-unapplied-label {
    color: var(--rxs-text);
    line-height: 1.35;
}
.rxs-unapplied-count,
.rxs-unapplied-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--rxs-text-2);
}
.rxs-unapplied-count { color: var(--rxs-text); }
.rxs-unapplied-total {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--rxs-text-3);
    border-top: 1px solid var(--rxs-border);
    padding-top: 0.7rem;
    text-align: center;
    font-style: italic;
}
.rxs-unapplied-total strong {
    color: #fff;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

/* ─── Soft callout (working assumption / caveat) ─────────────────
   Lighter than .rxs-callout-pro: marks data with widest error bar.
   Uses warm-tone tag instead of brand violet. */
.rxs-callout-soft {
    margin: 1rem 0 1.2rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 110, 138, 0.04);
    border: 1px solid rgba(255, 110, 138, 0.18);
    border-left: 3px solid var(--rxs-magenta-soft);
    border-radius: 0 10px 10px 0;
}
/* "Warning" variant. Foreground bumped to a brighter magenta (#F89BD3)
   for 6.55 contrast on the tinted bg, vs 4.38 with the original color. */
.rxs-callout-tag-warn {
    color: #F89BD3 !important;
    background: rgba(232, 107, 177, 0.14) !important;
}
.rxs-callout-soft p {
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.6 !important;
    color: var(--rxs-text-2) !important;
}

/* ─── Section 7: Final-step list (3 numbered chain steps) ─────
   Ordered list rendered as a vertical sequence of cards. Each
   card has a circular brand-gradient number, a title, the
   equation in tabular numerals, and a one-line note. */
.rxs-final-steps {
    list-style: none;
    margin: 1.2rem 0 1.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rxs-final-steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    transition: border-color 0.25s var(--rxs-ease), background 0.25s var(--rxs-ease);
    align-items: flex-start;
}
.rxs-final-steps li:hover {
    border-color: var(--rxs-border-warm);
    background: rgba(157, 127, 229, 0.04);
}
.rxs-final-steps li::before { content: none; }
.rxs-final-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    color: #fff;
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 12px -4px var(--rxs-violet-glow);
    margin-top: 0.1rem;
}
.rxs-final-step-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.rxs-final-step-title {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}
.rxs-final-step-eq {
    font-family: var(--rxs-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--rxs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.rxs-final-step-eq strong {
    font-weight: 800;
    color: #fff;
}
.rxs-final-step-note {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    color: var(--rxs-text-3);
    line-height: 1.55;
    font-style: italic;
}

/* ─── Section 7: Opened bar (capsules opened vs left) ─────────
   Two-segment proportional bar showing the 95/5 split. The
   ~10.42m segment dominates visually because that's the point. */
.rxs-opened {
    margin: 1.3rem 0 1.5rem;
}
.rxs-opened-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
    text-align: center;
    margin-bottom: 0.7rem;
}
.rxs-opened-bar {
    display: flex;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    position: relative;
}
.rxs-opened-seg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    text-align: center;
    overflow: hidden;
    transition: background 0.25s var(--rxs-ease);
}
.rxs-opened-done {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(91, 79, 232, 0.20), transparent 70%),
        rgba(91, 79, 232, 0.06);
}
.rxs-opened-left {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.22), transparent 70%),
        rgba(232, 107, 177, 0.07);
}
.rxs-opened-num {
    font-family: var(--rxs-font-body);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rxs-opened-left .rxs-opened-num { font-size: 1.05rem; }
.rxs-opened-label {
    font-family: var(--rxs-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rxs-opened-done .rxs-opened-label { color: rgba(180, 155, 232, 0.92); }
.rxs-opened-left .rxs-opened-label { color: rgba(230, 140, 195, 0.92); }
.rxs-opened-pct {
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rxs-text-3);
}
.rxs-opened-meta {
    margin-top: 0.55rem;
    text-align: center;
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    color: var(--rxs-text-3);
    font-style: italic;
}

/* ─── Section 7: Three headline-answer cards ───────────────────
   The three questions the page started with, answered in big
   typography. Same hero treatment as .rxs-stat-hero from
   Section 1: subtle radial-gradient + brand-gradient number. */
.rxs-answers {
    margin: 1.2rem 0 1.6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}
.rxs-answer-card {
    padding: 1.2rem 0.95rem 1rem;
    background:
        radial-gradient(circle at 50% 0%, rgba(157, 127, 229, 0.10), transparent 65%),
        var(--rxs-bg-base);
    border: 1px solid var(--rxs-border-warm);
    border-radius: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s var(--rxs-ease);
}
.rxs-answer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rxs-violet-strong), transparent);
    opacity: 0.55;
}
.rxs-answer-card:hover { border-color: var(--rxs-magenta-soft); }
.rxs-answer-q {
    font-family: var(--rxs-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rxs-text-3);
    line-height: 1.45;
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rxs-answer-num {
    font-family: var(--rxs-font-body);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #5B4FE8 0%, #8060E8 50%, var(--rxs-magenta-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(157, 127, 229, 0.32));
    font-variant-numeric: tabular-nums;
}
.rxs-answer-sub {
    font-family: var(--rxs-font-body);
    font-size: 0.76rem;
    color: var(--rxs-text-3);
    line-height: 1.5;
    font-style: italic;
    max-width: 22ch;
}

/* ─── Section 7: Sparkline cards (applications + capsule price) ──
   Compact time-series viz. The SVG fills the card width with a
   subtle area-fill gradient + a 2px accent stroke. Beneath the
   chart, three markers highlight the meaningful points: start,
   peak, current. The peak and current markers get a colored dot. */
.rxs-spark-card {
    margin: 1.2rem 0 1.5rem;
    padding: 1rem 1.1rem 1rem;
    background: var(--rxs-bg-card);
    border: 1px solid var(--rxs-border);
    border-radius: 14px;
    transition: border-color 0.25s var(--rxs-ease);
}
.rxs-spark-card:hover { border-color: var(--rxs-border-warm); }
.rxs-spark-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-2);
    text-align: center;
    margin-bottom: 0.7rem;
}
.rxs-spark-svg-wrap {
    width: 100%;
    height: 130px;
    margin-bottom: 0.5rem;
}
.rxs-spark-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.rxs-spark-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rxs-border);
}
.rxs-spark-marker {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
}
.rxs-spark-marker-label {
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}
.rxs-spark-marker-val {
    font-family: var(--rxs-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--rxs-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}
.rxs-spark-marker-peak .rxs-spark-marker-val { color: var(--rxs-violet); }
.rxs-spark-marker-now .rxs-spark-marker-val { color: var(--rxs-magenta-soft); }

/* ─── Section 7: Final summary (5 KPI cards) ───────────────────
   Row of 5 anchor numbers with a label and a source line each.
   Two cards highlighted to mark the rox-specific numbers. */
.rxs-summary {
    margin: 1.2rem 0 1.6rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.55rem;
}
.rxs-summary-card {
    padding: 1rem 0.8rem 0.85rem;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 0.25s var(--rxs-ease);
}
.rxs-summary-card:hover { border-color: var(--rxs-border-warm); }
.rxs-summary-num {
    font-family: var(--rxs-font-body);
    font-size: clamp(1.3rem, 3.5vw, 1.7rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.rxs-summary-label {
    font-family: var(--rxs-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rxs-text-2);
    line-height: 1.4;
    text-transform: uppercase;
}
.rxs-summary-source {
    font-family: var(--rxs-font-body);
    font-size: 0.68rem;
    color: var(--rxs-text-3);
    line-height: 1.45;
    font-style: italic;
    margin-top: auto;
}
.rxs-summary-card-key {
    background:
        radial-gradient(circle at 50% 0%, rgba(232, 107, 177, 0.10), transparent 65%),
        rgba(232, 107, 177, 0.04);
    border-color: rgba(232, 107, 177, 0.32);
    box-shadow: inset 0 -2px 0 0 rgba(232, 107, 177, 0.5);
}
.rxs-summary-card-key .rxs-summary-num {
    background: linear-gradient(135deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Section 2: Step 1 — Souvenirs vs Capsules split bar ─────
   Two-segment bar with the SAME subtle styling as the section 1
   split bar: dark base, soft tinted radial, color used as accent
   not as fill. Keeps unity across all section visuals. */
.rxs-flow1 {
    margin: 1.4rem 0 1.6rem;
}
.rxs-flow1-bar {
    display: flex;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    position: relative;
}
/* Subtle vertical divider between the two segments */
.rxs-flow1-bar::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 58.6%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--rxs-border-warm), transparent);
    pointer-events: none;
}
.rxs-flow1-seg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: background 0.25s var(--rxs-ease);
}
.rxs-flow1-souvenirs {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(91, 79, 232, 0.18), transparent 70%),
        rgba(91, 79, 232, 0.05);
}
.rxs-flow1-capsules {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.16), transparent 70%),
        rgba(232, 107, 177, 0.05);
}
.rxs-flow1-souvenirs:hover {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(91, 79, 232, 0.26), transparent 70%),
        rgba(91, 79, 232, 0.08);
}
.rxs-flow1-capsules:hover {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.24), transparent 70%),
        rgba(232, 107, 177, 0.08);
}
.rxs-flow1-num {
    font-family: var(--rxs-font-body);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
.rxs-flow1-label {
    font-family: var(--rxs-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rxs-flow1-souvenirs .rxs-flow1-label { color: rgba(180, 155, 232, 0.85); }
.rxs-flow1-capsules  .rxs-flow1-label { color: rgba(230, 140, 195, 0.9); }
.rxs-flow1-detail {
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--rxs-text-3);
    margin-top: 0.05rem;
}

.rxs-flow1-total {
    margin-top: 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: rgba(157, 127, 229, 0.08);
    border: 1px solid var(--rxs-border-warm);
}
.rxs-flow1-total-label {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--rxs-text-2);
    text-transform: uppercase;
}
.rxs-flow1-total-num {
    font-family: var(--rxs-font-body);
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ─── Section 2: Souvenir-opens heatmap ────────────────────────
   Two stacked matrices (SH 10 months, AW 3 months × 7 maps each).
   Color encodes magnitude on a perceptually-scaled saturation axis,
   independent across cells via CSS custom property --rxs-souv-sat.

   Visual decisions, traced to the AUDIT (Tufte/NN-g/Brewer):
   - Single-hue sequential (violet) for ordered magnitude. Avoids the
     red/green colorblind trap and matches the page palette.
   - Log-scaled saturation in the JS-generated --rxs-souv-sat values
     so the smallest cells stay legible without burying the largest.
   - Mirage column gets a secondary accent (magenta tint) to pre-flag
     the headline pattern: Mirage dominates every single row.
   - Row totals at far right + column totals at the bottom create a
     2-D sumtable: any single cell can be triangulated visually.
   - Tabular numerals so digits align across cells.
   - Discrete legend bar below grounds the saturation→value mapping.
   - "Peak" row (highest single month) gets a soft outline to mark
     the natural reference point Nov 2021 = 3.29M for SH, May 2022
     = 1.48M for AW. */
.rxs-souv-heatmap {
    margin: 1.4rem 0 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background:
        radial-gradient(circle at 50% -20%, rgba(157, 127, 229, 0.06), transparent 60%),
        var(--rxs-bg-base);
    border: 1px solid var(--rxs-border-warm);
    border-radius: 14px;
    padding: 1.2rem 1.1rem 0.9rem;
    box-shadow: 0 16px 50px -22px var(--rxs-violet-glow);
}
.rxs-souv-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rxs-souv-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1rem;
    padding: 0 0.15rem 0.55rem;
    border-bottom: 1px solid var(--rxs-border);
}
.rxs-souv-major {
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--rxs-text);
}
.rxs-souv-period {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}
.rxs-souv-block-total {
    margin-left: auto;
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rxs-violet);
    background: rgba(157, 127, 229, 0.10);
    border: 1px solid var(--rxs-border-warm);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.rxs-souv-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rxs-souv-header,
.rxs-souv-row,
.rxs-souv-coltotals {
    display: grid;
    grid-template-columns: 80px repeat(7, minmax(0, 1fr)) 84px;
    gap: 2px;
    align-items: stretch;
    min-width: 720px;
}
.rxs-souv-h-month,
.rxs-souv-h-map,
.rxs-souv-h-rowtotal {
    font-family: var(--rxs-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
    text-align: center;
    padding: 0.5rem 0.2rem 0.55rem;
    line-height: 1.2;
}
.rxs-souv-h-month {
    text-align: left;
    padding-left: 0.4rem;
}
.rxs-souv-h-rowtotal {
    color: var(--rxs-text-2);
}
.rxs-souv-h-mirage {
    color: var(--rxs-magenta-soft);
}
.rxs-souv-month {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--rxs-text-2);
    padding: 0.55rem 0.4rem;
    display: flex;
    align-items: center;
    background: rgba(11, 7, 22, 0.4);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.rxs-souv-cell {
    --rxs-souv-sat: 50%;
    /* Single-hue sequential fill: violet at low end, brighter violet
       at high end. The alpha scales with --rxs-souv-sat so the cell
       feels denser as the count grows. */
    background:
        linear-gradient(135deg,
            hsla(258, 70%, 62%, calc((var(--rxs-souv-sat) - 8%) / 100%)),
            hsla(268, 75%, 56%, calc((var(--rxs-souv-sat)) / 100%))
        );
    color: var(--rxs-text);
    font-family: var(--rxs-font-body);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-align: center;
    padding: 0.6rem 0.2rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s var(--rxs-ease);
}
.rxs-souv-cell:hover {
    transform: translateY(-1px);
    z-index: 1;
}
.rxs-souv-cell-mirage {
    /* Mirage column: secondary accent overlay so the eye picks up
       the dominance pattern at first glance. */
    background:
        linear-gradient(135deg,
            hsla(330, 70%, 62%, calc((var(--rxs-souv-sat) - 8%) / 100%)),
            hsla(258, 75%, 56%, calc((var(--rxs-souv-sat)) / 100%))
        );
    box-shadow: inset 0 0 0 1px rgba(232, 107, 177, 0.25);
}
.rxs-souv-rowtotal {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--rxs-text);
    text-align: right;
    padding: 0.6rem 0.6rem 0.6rem 0.4rem;
    background: rgba(157, 127, 229, 0.08);
    border: 1px solid var(--rxs-border-warm);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}
.rxs-souv-row-peak .rxs-souv-rowtotal {
    background: rgba(232, 107, 177, 0.14);
    border-color: rgba(232, 107, 177, 0.45);
    color: #fff;
}
.rxs-souv-coltotals {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--rxs-border);
}
.rxs-souv-coltotals .rxs-souv-month {
    background: transparent;
    color: var(--rxs-text-3);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rxs-souv-coltotal {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--rxs-text-2);
    text-align: center;
    padding: 0.5rem 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    border-top: 2px solid transparent;
}
.rxs-souv-coltotal.rxs-souv-cell-mirage {
    background: transparent;
    box-shadow: none;
    color: var(--rxs-magenta-soft);
}
.rxs-souv-coltotal-grand {
    color: var(--rxs-text);
    font-weight: 800;
    font-size: 0.84rem;
    background: rgba(157, 127, 229, 0.10);
    border: 1px solid var(--rxs-border-warm);
    border-radius: 4px;
    padding: 0.5rem 0.4rem;
}
.rxs-souv-legend {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.4rem 0.2rem;
    border-top: 1px solid var(--rxs-border);
}
.rxs-souv-legend-label {
    font-family: var(--rxs-font-body);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
    text-align: center;
}
.rxs-souv-legend-bar {
    position: relative;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        hsla(258, 70%, 62%, 0.10),
        hsla(263, 73%, 58%, 0.30),
        hsla(268, 75%, 56%, 0.55),
        hsla(273, 78%, 54%, 0.80),
        hsla(278, 80%, 52%, 1.00)
    );
    margin: 0 auto;
    max-width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 18px;
}
.rxs-souv-legend-tick {
    font-family: var(--rxs-font-body);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--rxs-text-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: -34px;
    font-variant-numeric: tabular-nums;
}
.rxs-souv-caption {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-style: italic;
    color: var(--rxs-text-3);
    text-align: center;
    line-height: 1.5;
    padding: 0.7rem 0.6rem 0.2rem;
    border-top: 1px solid var(--rxs-border);
    margin-top: 0.4rem;
}

/* ─── Section 2: Step 2 — Stockholm vs Antwerp side-by-side cards ─
   Two equal-width cards, but the visual numbers (~60m vs ~120m)
   communicate the 1:2 split through a vertical bar inside each card.
   We choose card layout instead of a stacked bar so the reader
   reads them as two separate Majors, not one continuous quantity.

   Two stacked blocks: capsules (leans Antwerp 1:2) and souvenirs
   (leans Stockholm 2:1). The grid columns flip between them so the
   width itself encodes the asymmetry, before the reader even hits
   the numbers. */
.rxs-flow2 {
    margin: 1.4rem 0 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.rxs-flow2-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rxs-flow2-block-label {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0 0.15rem;
}
.rxs-flow2-block-tag {
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rxs-text);
    padding: 0.18em 0.7em;
    border-radius: 999px;
    background: rgba(157, 127, 229, 0.14);
    border: 1px solid var(--rxs-border-warm);
}
.rxs-flow2-block-meta {
    font-family: var(--rxs-font-body);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--rxs-text-3);
    font-style: italic;
}
.rxs-flow2-row {
    display: grid;
    gap: 0.7rem;
    align-items: stretch;
}
/* Capsules: leans Antwerp 2:1, so Antwerp card is wider */
.rxs-flow2-row-caps {
    grid-template-columns: 1fr 2fr;
}
/* Souvenirs: leans Stockholm 2:1, mirrored (Stockholm card wider) */
.rxs-flow2-row-souvs {
    grid-template-columns: 2fr 1fr;
}
.rxs-flow2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.2rem 0.9rem;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Top border accent that picks up the brand gradient */
.rxs-flow2-card::before {
    content: '';
    position: absolute;
    top: 0; left: 12%; right: 12%;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.7;
}
.rxs-flow2-stockholm {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(91, 79, 232, 0.16), transparent 70%),
        rgba(91, 79, 232, 0.04);
    border: 1px solid rgba(91, 79, 232, 0.28);
    color: #B49BE8;
}
.rxs-flow2-antwerp {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(232, 107, 177, 0.14), transparent 70%),
        rgba(232, 107, 177, 0.04);
    border: 1px solid rgba(232, 107, 177, 0.28);
    color: var(--rxs-magenta-soft);
}
.rxs-flow2-major {
    font-family: var(--rxs-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rxs-text-3);
}
.rxs-flow2-num {
    font-family: var(--rxs-font-body);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
    margin: 0.1rem 0;
}
.rxs-flow2-stockholm .rxs-flow2-num {
    background: linear-gradient(135deg, #5B4FE8 0%, #8060E8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rxs-flow2-antwerp .rxs-flow2-num {
    background: linear-gradient(135deg, var(--rxs-magenta-soft) 0%, #B49BE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.rxs-flow2-sub {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rxs-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: -0.15rem;
}
.rxs-flow2-share {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rxs-text-2);
    margin-top: 0.5rem;
}

/* ─── Section 2: 4 reasons grid (2x2 cards) ─────────────────────
   "Drop block card" pattern: number badge, title, paragraph.
   Same anatomy in all four so the reader perceives them as a set. */
.rxs-reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin: 1.2rem 0 1.4rem;
}
.rxs-reason {
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    padding: 1rem 1rem 0.95rem;
    position: relative;
    transition: border-color 0.25s var(--rxs-ease), background 0.25s var(--rxs-ease);
}
.rxs-reason:hover {
    border-color: var(--rxs-border-warm);
    background: rgba(157, 127, 229, 0.04);
}
.rxs-reason-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8060E8, var(--rxs-magenta-soft));
    color: #fff;
    font-family: var(--rxs-font-body);
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    box-shadow: 0 2px 10px -4px rgba(157, 127, 229, 0.5);
}
.rxs-reason-title {
    font-family: var(--rxs-font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--rxs-text);
    line-height: 1.35;
    margin: 0 0 0.4rem;
    letter-spacing: -0.005em;
}
.rxs-reason p {
    font-family: var(--rxs-font-body);
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--rxs-text-2);
    margin: 0;
}

/* ── Mobile and tablet ──────────────────────────────────────── */
@media (max-width: 720px) {
    .rxs-main {
        padding: 1rem 0 2.5rem;
    }
    .rxs-page-header {
        padding: 1.4rem 0.5rem 2rem;
    }
    .rxs-page-h1 {
        font-size: clamp(2.4rem, 11vw, 3.6rem);
    }
    .rxs-eyebrow {
        font-size: 1rem;
    }
    .rxs-page-intro p {
        font-size: 0.96rem;
    }
    .rxs-section-header {
        grid-template-columns: 44px 1fr 24px;
        gap: 0.8rem;
        padding: 0.95rem 1rem;
    }
    .rxs-section-num {
        width: 32px;
        height: 32px;
        font-size: 0.88rem;
    }
    .rxs-section-title {
        font-size: 1.15rem;
    }
    .rxs-section-question {
        font-size: 0.78rem;
    }
    .rxs-section-body-inner {
        padding: 0.3rem 1rem 1.3rem;
    }
    /* In-section visuals: scale down on small screens */
    .rxs-stat-hero {
        padding: 1.2rem 0.9rem 1rem;
    }
    .rxs-stat-hero-num {
        font-size: clamp(2.4rem, 14vw, 3.4rem);
    }
    .rxs-stat-hero-label { font-size: 0.78rem; }
    .rxs-stat-hero-sub  { font-size: 0.78rem; }
    .rxs-split-bar {
        height: 80px;
    }
    .rxs-split-amount { font-size: 1.25rem; }
    .rxs-split-label  { font-size: 0.66rem; }
    .rxs-split-total {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.25rem;
    }
    .rxs-split-total-num { font-size: 1.35rem; }
    .rxs-shot { max-width: 100%; }
    .rxs-shot figcaption { font-size: 0.74rem; }
    .rxs-callout-pro p { font-size: 0.8rem !important; }

    /* Section 3: budget bars + stress table on small screens */
    .rxs-budget-card {
        padding: 0.85rem 0.7rem 0.75rem;
    }
    .rxs-budget-bar2 {
        height: 70px;
        border-radius: 8px;
    }
    .rxs-seg-num { font-size: 0.78rem; }
    .rxs-seg-name { font-size: 0.55rem; }
    .rxs-budget-line-tag { font-size: 0.56rem; }
    .rxs-budget-verdict {
        font-size: 0.78rem;
        padding: 0.5rem 0.7rem;
    }
    .rxs-stress-header,
    .rxs-stress-row {
        grid-template-columns: 60px 1fr 80px;
        font-size: 0.78rem;
    }
    /* Hide the AW caps revenue and souvenirs+SH columns on phones,
       keep supply / total / verdict. The reader still sees the
       essential triangle: Antwerp size → total → does it fit. */
    .rxs-stress-h-rev,
    .rxs-stress-h-other,
    .rxs-stress-rev,
    .rxs-stress-other {
        display: none;
    }
    .rxs-stress-h-total,
    .rxs-stress-total {
        text-align: right;
    }
    .rxs-stress-verdict {
        font-size: 0.7rem;
        text-align: right;
        justify-content: flex-end;
    }
    .rxs-stress-verdict-fit { font-size: 0.66rem; }

    /* Section 3 — anchor / listings table / triangulate on small screens */
    /* Listings table: collapse to two columns + bar */


    /* Triangulate: stack vertically */

    /* Section 5 — capsules + rarity + equations on small screens */
    .rxs-capsules-header,
    .rxs-capsule-row {
        grid-template-columns: 1fr 70px;
        gap: 0.5rem;
        padding: 0.65rem 0.7rem;
        font-size: 0.78rem;
    }
    .rxs-capsules-h-bar,
    .rxs-capsule-bar,
    .rxs-capsules-h-share,
    .rxs-capsule-share {
        display: none;
    }
    .rxs-capsule-name { font-size: 0.78rem; }
    .rxs-capsule-type { font-size: 0.66rem; }
    .rxs-capsule-tag-key { font-size: 0.52rem; }
    .rxs-capsule-row-total .rxs-capsule-supply { font-size: 0.86rem; }

    /* Rarity ladder */
    .rxs-rarity-row {
        grid-template-columns: 12px 1fr 80px;
        gap: 0.55rem;
        padding: 0.7rem 0.7rem;
        font-size: 0.84rem;
    }
    .rxs-rarity-pct { display: none; }
    .rxs-rarity-cat { font-size: 0.62rem; }
    .rxs-rarity-tag-key { font-size: 0.5rem; }

    /* Equation cards */
    .rxs-eq-piece { font-size: 0.92rem; }
    .rxs-equation-pct { font-size: 0.84rem; }
    .rxs-equation-note { font-size: 0.7rem; }
    .rxs-final-op { font-size: 1.1rem; }
    .rxs-final-term { font-size: 0.92rem; }

    /* Odds grid: collapse to single column on phones */
    .rxs-odds-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .rxs-odds-card { padding: 0.65rem 0.6rem; }
    .rxs-odds-num { font-size: 1.15rem; }
    .rxs-odds-label { font-size: 0.6rem; }

    /* Section 6 — KPI grid + trade stats + owners chain on small screens */
    .rxs-kpi-grid { grid-template-columns: 1fr; gap: 0.55rem; }
    .rxs-kpi-num { font-size: 1.7rem; }
    .rxs-kpi-label { font-size: 0.7rem; }
    .rxs-kpi-sub { font-size: 0.68rem; }
    .rxs-trade-stats { grid-template-columns: 1fr; gap: 0.55rem; }
    .rxs-trade-num { font-size: 1.6rem; }
    .rxs-trade-label { font-size: 0.66rem; }
    .rxs-trade-sub { font-size: 0.66rem; }

    /* Owners chain: tighter dots and smaller labels */
    .rxs-owners-track {
        padding: 1.2rem 0.4rem 0.3rem;
        gap: 0.2rem;
    }
    .rxs-owners-line { left: 0.9rem; right: 0.9rem; }
    .rxs-owners-cap { font-size: 0.54rem; padding: 0 0.2em; }
    .rxs-owners-dots {
        gap: 0.1rem;
        min-width: 0;
    }
    .rxs-owner {
        min-width: 0;
        flex-shrink: 1;
    }
    .rxs-owner-num {
        width: 22px;
        height: 22px;
        font-size: 0.62rem;
    }
    .rxs-owner-state {
        font-size: 0.5rem;
        letter-spacing: 0.02em;
    }
    .rxs-owners figcaption { font-size: 0.7rem; }

    /* Pulled bar */
    .rxs-pulled-bar { height: 90px; }
    .rxs-pulled-num { font-size: 1.25rem; }
    .rxs-pulled-label { font-size: 0.62rem; }
    .rxs-pulled-pct { font-size: 0.66rem; }
    .rxs-pulled-total {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.25rem;
    }
    .rxs-pulled-total-num { font-size: 1.25rem; }

    /* Unapplied composition: stack the legend rows tighter */
    .rxs-unapplied { padding: 0.85rem 0.7rem 0.7rem; }
    .rxs-unapplied-bar { height: 18px; }
    .rxs-unapplied-row {
        grid-template-columns: 14px 1fr 60px;
        font-size: 0.76rem;
    }
    .rxs-unapplied-pct { display: none; }
    .rxs-unapplied-total { font-size: 0.72rem; }

    /* Soft callout */
    .rxs-callout-soft p { font-size: 0.78rem !important; }

    /* Section 7 — final-step list, opened bar, answers, sparkline cards, summary, CTA */
    .rxs-final-steps li {
        grid-template-columns: 28px 1fr;
        gap: 0.65rem;
        padding: 0.7rem 0.8rem;
    }
    .rxs-final-step-num {
        width: 26px;
        height: 26px;
        font-size: 0.78rem;
    }
    .rxs-final-step-title { font-size: 0.66rem; }
    .rxs-final-step-eq { font-size: 0.86rem; }
    .rxs-final-step-note { font-size: 0.7rem; }

    /* Opened bar: smaller numbers, stacked meta below */
    .rxs-opened-bar { height: 76px; }
    .rxs-opened-num { font-size: 1.2rem; }
    .rxs-opened-left .rxs-opened-num { font-size: 0.86rem; }
    .rxs-opened-label { font-size: 0.6rem; }
    .rxs-opened-pct { font-size: 0.62rem; }
    .rxs-opened-meta { font-size: 0.7rem; }

    /* Answers: stack vertically */
    .rxs-answers {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }
    .rxs-answer-card {
        padding: 1rem 0.85rem 0.85rem;
    }
    .rxs-answer-q {
        min-height: auto;
        font-size: 0.7rem;
    }
    .rxs-answer-num { font-size: 1.9rem; }
    .rxs-answer-sub { font-size: 0.72rem; }

    /* Sparkline cards: smaller chart and meta */
    .rxs-spark-card { padding: 0.85rem 0.85rem 0.9rem; }
    .rxs-spark-svg-wrap { height: 110px; }
    .rxs-spark-marker-label { font-size: 0.55rem; }
    .rxs-spark-marker-val { font-size: 0.72rem; }

    /* Summary: 5-column grid wraps to 2 columns + last centered */
    .rxs-summary {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .rxs-summary-card { padding: 0.85rem 0.7rem 0.7rem; }
    .rxs-summary-num { font-size: 1.3rem; }
    .rxs-summary-label { font-size: 0.62rem; }
    .rxs-summary-source { font-size: 0.62rem; }

    /* Section 2 — flow1 / flow2 / reasons on small screens */
    .rxs-flow1-bar { height: 90px; }
    .rxs-flow1-num { font-size: 1.2rem; }
    .rxs-flow1-label { font-size: 0.66rem; }
    .rxs-flow1-detail { font-size: 0.62rem; }
    .rxs-flow1-total {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 0.25rem;
    }
    .rxs-flow1-total-num { font-size: 1.2rem; }
    .rxs-flow2-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .rxs-flow2-row-caps,
    .rxs-flow2-row-souvs {
        grid-template-columns: 1fr 1fr;
    }
    .rxs-flow2-block-tag { font-size: 0.66rem; }
    .rxs-flow2-block-meta { font-size: 0.7rem; }
    .rxs-flow2-card {
        padding: 0.85rem 0.5rem;
    }
    .rxs-flow2-num { font-size: 2rem; }
    .rxs-flow2-major { font-size: 0.66rem; }
    .rxs-flow2-sub { font-size: 0.66rem; }
    .rxs-flow2-share { font-size: 0.7rem; }

    /* Section 2 — souvenir heatmap on small screens */
    .rxs-souv-heatmap { padding: 0.85rem 0.55rem 0.7rem; gap: 1rem; }
    .rxs-souv-heatmap .rxs-souv-block-head { gap: 0.4rem 0.7rem; padding-bottom: 0.45rem; }
    .rxs-souv-major { font-size: 0.84rem; }
    .rxs-souv-period { font-size: 0.62rem; }
    .rxs-souv-block-total { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
    .rxs-souv-grid {
        /* Horizontal scroll on small screens — keep grid intact rather
           than collapsing the matrix into a list which would break the
           cross-row/column reading the design depends on. */
        overflow-x: auto;
    }
    .rxs-souv-header,
    .rxs-souv-row,
    .rxs-souv-coltotals { grid-template-columns: 64px repeat(7, minmax(54px, 1fr)) 64px; }
    .rxs-souv-h-month, .rxs-souv-h-map, .rxs-souv-h-rowtotal { font-size: 0.6rem; padding: 0.4rem 0.15rem; }
    .rxs-souv-month { font-size: 0.66rem; padding: 0.45rem 0.3rem; }
    .rxs-souv-cell { font-size: 0.66rem; padding: 0.45rem 0.15rem; }
    .rxs-souv-rowtotal { font-size: 0.7rem; padding: 0.45rem 0.4rem; }
    .rxs-souv-coltotal { font-size: 0.66rem; padding: 0.4rem 0.15rem; }
    .rxs-souv-coltotal-grand { font-size: 0.74rem; }
    .rxs-souv-legend-label { font-size: 0.6rem; }
    .rxs-souv-legend-tick { font-size: 0.55rem; }
    .rxs-souv-caption { font-size: 0.68rem; padding: 0.55rem 0.5rem 0.1rem; }
    .rxs-reasons {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .rxs-reason { padding: 0.85rem 0.85rem 0.8rem; }
    .rxs-reason-title { font-size: 0.86rem; }
    .rxs-reason p { font-size: 0.78rem; }

    /* Section 3 V2 — capsule listings table on small screens */
    .rxs-caps-row {
        grid-template-columns: 110px 1fr 60px;
        gap: 0.45rem;
        padding: 0.36rem 0.4rem;
        font-size: 0.76rem;
    }
    .rxs-caps-name { font-size: 0.76rem; }
    .rxs-caps-tag-key { font-size: 0.5rem; padding: 0.12rem 0.34rem; }
    .rxs-caps-bar { height: 14px; }
    .rxs-caps-count { font-size: 0.72rem; }

    /* Section 3 V2 — AW vs SH side-by-side */
    .rxs-aw-sh-bar {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        padding: 0.7rem 0.85rem;
    }
    .rxs-aw-sh-num { font-size: 1.05rem; }
    .rxs-aw-sh-supply { font-size: 0.72rem; }
    .rxs-aw-sh-ratio {
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.65rem 0.75rem;
    }
    .rxs-aw-sh-ratio-num { font-size: 1.25rem; }

    /* Sparkline marker meta: 3 cols too tight on phones — stack */
    .rxs-spark-meta {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding-top: 0.55rem;
    }
    .rxs-spark-marker {
        flex-direction: row;
        gap: 0.5rem;
        text-align: left;
        align-items: baseline;
        justify-content: space-between;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .rxs-section,
    .rxs-section-toggle,
    .rxs-section-body,
    .rxs-expand-all {
        transition: none !important;
    }
}


/* ======================================================================
 * Section 3 (V2): post-sale capsule listings cross-major
 * Added in v165 to replace the obsolete paper-listings yardstick.
 * Matches the visual language of the listings tables (palette + spacing).
 * ====================================================================== */

.rxs-caps-listings {
    margin: 1.4rem 0 1rem;
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    background: var(--rxs-bg-card);
    padding: 1rem 0.9rem 0.85rem;
}

.rxs-caps-listings-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rxs-text-3);
    text-align: center;
    line-height: 1.45;
    margin: 0 0 0.85rem;
    padding: 0 0.4rem;
}

/* Axis tick row above the bars: gives the eye numeric anchors at
   25/50/75/100% so users can compare bars without reading every label.
   Aligned to the bar column (skips the 130px name column on the left
   and the 70px count column on the right). The .rxs-caps-listings-axis
   itself is a grid that mirrors the row grid; its 2nd column hosts the
   actual tick wrapper, which is position:relative so the absolutely-
   positioned ticks anchor inside it. */
.rxs-caps-listings-axis {
    display: grid;
    grid-template-columns: 130px 1fr 70px;
    gap: 0.85rem;
    align-items: center;
    margin: 0 0 0.55rem;
    padding: 0 0.85rem 0.4rem;
    border-bottom: 1px dashed var(--rxs-border);
}
.rxs-caps-listings-axis::before {
    content: "";
    grid-column: 1;
}
.rxs-caps-listings-axis::after  {
    content: "";
    grid-column: 3;
}
/* The track column. position:relative so children with left:X% align
   to the bar column, not to the page. */
.rxs-caps-listings-axis-track {
    grid-column: 2;
    position: relative;
    height: 18px;
}
.rxs-caps-axis-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 6px;
    background: var(--rxs-border);
    transform: translateX(-50%);
}
.rxs-caps-axis-label {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--rxs-font-body);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--rxs-text-4);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rxs-caps-listings-rows {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.rxs-caps-row {
    display: grid;
    grid-template-columns: 130px 1fr 70px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    transition: background 0.2s var(--rxs-ease);
}

.rxs-caps-row:hover {
    background: rgba(255, 255, 255, 0.025);
}

.rxs-caps-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--rxs-text);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rxs-caps-tag-key {
    font-family: var(--rxs-font-body);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    /* Darker magenta variant: #A0307B gives 6.56 contrast vs white at 8.8px bold,
       comfortably above WCAG AA 4.5 minimum. The magenta-soft (#E66BB1) base
       only reaches 2.96 — too low for small bold text. */
    background: #A0307B;
    padding: 0.16rem 0.42rem;
    border-radius: 4px;
}

/* Anchor / Validation pill for the cross-major chart row labels.
   Same shape as .rxs-caps-tag-key but neutral palette so it does not
   compete with the magenta highlight reserved for the AW row. */
.rxs-caps-tag-anchor,
.rxs-caps-tag-validation {
    font-family: var(--rxs-font-body);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rxs-text);
    background: rgba(157, 127, 229, 0.18);
    border: 1px solid var(--rxs-border-warm);
    padding: 0.14rem 0.42rem;
    border-radius: 4px;
}
.rxs-caps-tag-validation {
    /* Validation row uses a subtly cooler tint so the eye reads
       "anchor + validation" as two related-but-distinct things. */
    background: rgba(91, 79, 232, 0.18);
}

.rxs-caps-bar {
    width: 100%;
    height: 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.rxs-caps-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(91, 79, 232, 0.65), rgba(157, 127, 229, 0.85));
    border-radius: 4px;
    transition: filter 0.2s var(--rxs-ease);
}

.rxs-caps-row:hover .rxs-caps-fill {
    filter: brightness(1.15);
}

.rxs-caps-fill-key {
    background: linear-gradient(90deg, rgba(157, 127, 229, 0.85), var(--rxs-magenta-soft));
}

.rxs-caps-count {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rxs-text);
    text-align: right;
    letter-spacing: -0.01em;
}

.rxs-caps-row-key {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.08), rgba(157, 127, 229, 0.04));
    box-shadow: inset 3px 0 0 0 var(--rxs-magenta-soft);
}

.rxs-caps-row-key:hover {
    background:
        linear-gradient(90deg, rgba(232, 107, 177, 0.14), rgba(157, 127, 229, 0.08));
}

.rxs-caps-row-key .rxs-caps-name,
.rxs-caps-row-key .rxs-caps-count {
    color: #fff;
}

.rxs-caps-listings-source {
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    color: var(--rxs-text-3);
    text-align: right;
    margin-top: 0.7rem;
    font-style: italic;
}

/* ======================================================================
 * Section 3 (V2): direct AW vs SH side-by-side comparison block
 * Two horizontal bars with the listings counts, plus a ratio plate below.
 * ====================================================================== */

.rxs-aw-sh {
    margin: 1.4rem 0 0.6rem;
    padding: 1rem 0.95rem;
    border: 1px solid var(--rxs-border);
    border-radius: 12px;
    background: var(--rxs-bg-card);
}

.rxs-aw-sh-track {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rxs-aw-sh-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.018);
}

.rxs-aw-sh-sh {
    border-left: 4px solid rgba(91, 79, 232, 0.7);
}

.rxs-aw-sh-aw {
    border-left: 4px solid var(--rxs-magenta-soft);
    background: rgba(232, 107, 177, 0.04);
}

.rxs-aw-sh-major {
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rxs-text-3);
}

.rxs-aw-sh-num {
    font-family: var(--rxs-font-body);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rxs-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.rxs-aw-sh-supply {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    color: var(--rxs-text-3);
}

.rxs-aw-sh-aw .rxs-aw-sh-num {
    color: #fff;
}

.rxs-aw-sh-ratio {
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(232, 107, 177, 0.12) 0%, transparent 70%),
        rgba(255, 255, 255, 0.025);
    border-radius: 8px;
    border: 1px solid rgba(232, 107, 177, 0.2);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rxs-aw-sh-ratio-label {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    color: var(--rxs-text-3);
    font-weight: 500;
}

.rxs-aw-sh-ratio-num {
    font-family: var(--rxs-font-body);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--rxs-magenta-soft);
    letter-spacing: -0.02em;
    line-height: 1;
}


/* "Info" variant of the callout tag (used in section 3 confirmation block).
   Foreground bumped to text-link (#D4B8FF) which gives 7.5 contrast on the
   tinted bg, vs 4.1 with the original violet-strong. */
.rxs-callout-tag-info {
    color: var(--rxs-text-link) !important;
    background: rgba(157, 127, 229, 0.14) !important;
}


/* ─── Section 7: Supply funnel (the 5-stage chain $140m → 5,564) ───
   Vertical funnel that compresses the entire model into one image.
   Each step is a horizontal bar at decreasing width, followed by a
   small arrow card explaining the conversion factor. The last two
   steps (Auto Contenders + final) get the magenta accent because
   they are the rox-specific numbers. */
.rxs-funnel {
    margin: 1.4rem 0 1.8rem;
    padding: 1.1rem 1rem 0.9rem;
    border: 1px solid var(--rxs-border);
    border-radius: 14px;
    background: var(--rxs-bg-card);
}
.rxs-funnel-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}
.rxs-funnel-step {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: filter 0.2s var(--rxs-ease);
}
.rxs-funnel-step:hover { filter: brightness(1.10); }
.rxs-funnel-bar {
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(91, 79, 232, 0.45), rgba(157, 127, 229, 0.75));
    box-shadow: 0 0 0 1px rgba(157, 127, 229, 0.18);
}
.rxs-funnel-step-key .rxs-funnel-bar {
    background: linear-gradient(90deg, rgba(157, 127, 229, 0.85), var(--rxs-magenta-soft));
    box-shadow: 0 0 0 1px rgba(232, 107, 177, 0.32);
}
.rxs-funnel-step-final .rxs-funnel-bar {
    height: 18px;
    background: linear-gradient(90deg, var(--rxs-violet-strong), var(--rxs-magenta-soft));
    box-shadow:
        0 0 0 1px rgba(232, 107, 177, 0.42),
        0 0 22px rgba(232, 107, 177, 0.20);
}
.rxs-funnel-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.4rem 0.2rem 0;
    flex-wrap: wrap;
}
.rxs-funnel-num {
    font-family: var(--rxs-font-body);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--rxs-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.rxs-funnel-step-final .rxs-funnel-num {
    font-size: 1.65rem;
    color: #fff;
    text-shadow: 0 1px 14px rgba(232, 107, 177, 0.20);
}
.rxs-funnel-label {
    font-family: var(--rxs-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rxs-text-2);
    letter-spacing: 0.005em;
    line-height: 1.4;
    text-align: right;
    flex: 0 1 auto;
}
.rxs-funnel-tag-key {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(232, 107, 177, 0.22);
    border: 1px solid rgba(232, 107, 177, 0.45);
    padding: 0.16em 0.55em;
    border-radius: 999px;
    vertical-align: middle;
}
/* Arrow card between funnel steps: small chevron + label explaining
   the conversion factor (e.g., "×5.3% are Auto Contenders"). */
.rxs-funnel-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.18rem 0.7rem 0.18rem 0.85rem;
    border-radius: 999px;
    background: var(--rxs-bg-base);
    border: 1px solid var(--rxs-border);
    font-family: var(--rxs-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rxs-text-3);
    margin: 0.15rem 0;
}
.rxs-funnel-arrow svg {
    color: var(--rxs-violet);
    flex-shrink: 0;
}
.rxs-funnel-arrow-tag {
    font-variant-numeric: tabular-nums;
}
.rxs-funnel-cap {
    font-family: var(--rxs-font-body);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--rxs-text-3);
    text-align: center;
    line-height: 1.45;
    margin: 1rem 0.3rem 0;
    padding: 0 0.4rem;
    font-style: italic;
}

/* Mobile: tighten the funnel and stack the meta block under the bar. */
@media (max-width: 600px) {
    .rxs-funnel { padding: 0.9rem 0.7rem; }
    .rxs-funnel-num { font-size: 1.25rem; }
    .rxs-funnel-step-final .rxs-funnel-num { font-size: 1.4rem; }
    .rxs-funnel-label { font-size: 0.72rem; text-align: left; flex-basis: 100%; }
    .rxs-funnel-arrow { font-size: 0.66rem; padding: 0.12rem 0.5rem 0.12rem 0.65rem; }
}