/* =====================================================================
 * RAISE NEXT — SHARED DESIGN SYSTEM
 * =====================================================================
 * Single source of truth for the whole site. Loaded by all three
 * layouts (public, members, admin) so the admin panel and the public
 * site can never drift apart visually.
 *
 * Load order matters:  bootstrap.min.css  →  raise-next.css
 * The <html> element must carry  data-bs-theme="dark".
 *
 * ---------------------------------------------------------------------
 * HOW TO RE-THEME THE ENTIRE SITE
 * ---------------------------------------------------------------------
 * Everything below is driven by the :root custom properties in §1.
 *
 *   --rn-bg / --rn-surface   backgrounds (page, cards)
 *   --rn-violet … --rn-teal  the brand colour ramp
 *   --rn-grad-cta            primary buttons + CTA banner gradient
 *   --rn-grad-warm           the accent word inside big headings
 *   --rn-tier-1/2/3          ticket tier accents
 *   --rn-font-heading/body   typefaces (also update the <link> in layouts)
 *   --rn-radius, --rn-section-py   shape and rhythm
 *
 * Colour values were sampled pixel-by-pixel from the client mockups in
 * req_docs/sceenshots/ — do not "tidy" them to round numbers.
 *
 * ACCESSIBILITY NOTES
 *   - .rn-grad-text is for 32px+ only. Violet on near-black is ~4.3:1,
 *     which passes for large text but NOT for body copy.
 *   - --rn-text-muted (#9AA6BF) on --rn-bg is 7.4:1 — safe anywhere.
 *   - --rn-text-dim is a deliberate deviation from the sampled mockup
 *     value #6B7690, which fails WCAG AA on the card surfaces (3.6–4.3:1).
 *     #8A96B2 holds 5.5:1+ everywhere up to --rn-surface-3. Keep any
 *     replacement at ≥4.5:1 against --rn-surface-3, the lightest surface
 *     dim text ever sits on.
 *   - --rn-border-control exists because --rn-border composites to ~1.2:1
 *     over the surfaces — fine as a decorative card edge, invisible as a
 *     form-control boundary (WCAG 1.4.11 wants ≥3:1). It holds ≥3:1 on
 *     every surface; inputs, selects, textareas and checkboxes use it.
 *   - Every animation here is inside a prefers-reduced-motion guard.
 * ===================================================================== */


/* =====================================================================
 * §1  TOKENS
 * ===================================================================== */
:root {
    /* --- Base surfaces --- */
    --rn-bg: #05070F;
    --rn-bg-alt: #090C18;
    --rn-surface: #0F1322;
    --rn-surface-2: #141824;
    --rn-surface-3: #1A1F30;

    /* --- Borders --- */
    --rn-border: rgba(139, 124, 246, .14);
    --rn-border-strong: rgba(160, 140, 255, .30);
    --rn-border-plain: rgba(255, 255, 255, .08);
    /* Form-control boundaries only — ≥3:1 on every surface (see header) */
    --rn-border-control: rgba(160, 140, 255, .60);

    /* --- Text --- */
    --rn-text: #F5F6FA;
    --rn-text-muted: #9AA6BF;
    --rn-text-dim: #8A96B2; /* raised from sampled #6B7690 for AA — see header */

    /* --- Brand ramp --- */
    --rn-violet: #8B31E8;
    --rn-indigo: #4B3AE0;
    --rn-blue: #1E86DE;
    --rn-cyan: #06C4E4;
    --rn-pink: #EC3F87;
    --rn-coral: #F04E23;
    --rn-teal: #12A3B4;

    /* --- Gradients (the "fading / merging" colours) --- */
    --rn-grad-cta: linear-gradient(90deg, #8B31E8 0%, #4B3AE0 38%, #1E86DE 72%, #06C4E4 100%);
    --rn-grad-cta-hover: linear-gradient(90deg, #9B41F8 0%, #5B4AF0 38%, #2E96EE 72%, #16D4F4 100%);
    --rn-grad-warm: linear-gradient(90deg, #F04E23 0%, #EC3F87 55%, #8B31E8 100%);
    --rn-grad-cool: linear-gradient(90deg, #8B31E8 0%, #4B3AE0 45%, #06C4E4 100%);
    --rn-grad-surface: linear-gradient(160deg, rgba(139, 49, 232, .10), rgba(6, 196, 228, .04) 60%, transparent);
    --rn-grad-border: linear-gradient(135deg, rgba(139, 49, 232, .55), rgba(6, 196, 228, .35));

    /* --- Glows --- */
    --rn-glow: 0 0 60px rgba(139, 49, 232, .35);
    --rn-glow-sm: 0 0 24px rgba(139, 49, 232, .28);
    --rn-shadow-card: 0 18px 50px rgba(0, 0, 0, .55);

    /* --- Ticket tier accents --- */
    --rn-tier-1: #7C3AED;
    --rn-tier-2: #F04E23;
    --rn-tier-3: #0EA5B7;

    /* --- Type --- */
    --rn-font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --rn-font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --rn-fs-display: clamp(2.5rem, 6.5vw, 4.5rem);
    --rn-fs-h1: clamp(2rem, 5vw, 3.5rem);
    --rn-fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
    --rn-fs-h3: clamp(1.25rem, 2vw, 1.5rem);
    --rn-fs-body: clamp(1rem, 1.15vw, 1.125rem);
    --rn-fs-sm: .875rem;
    --rn-fs-eyebrow: .75rem;

    /* --- Shape & rhythm --- */
    --rn-radius-sm: 8px;
    --rn-radius: 14px;
    --rn-radius-lg: 20px;
    --rn-radius-pill: 999px;
    --rn-section-py: clamp(3.5rem, 8vw, 7rem);
    --rn-header-h: 68px;

    --rn-ease: cubic-bezier(.22, .61, .36, 1);
    --rn-dur: 220ms;
}

/* Bootstrap 5.3 dark-theme variable mapping — makes native Bootstrap
 * components (offcanvas, accordion, dropdown, form controls, tables)
 * inherit the Raise Next palette without per-component overrides. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--rn-bg);
    --bs-body-color: var(--rn-text);
    --bs-body-font-family: var(--rn-font-body);
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--rn-text-muted);
    --bs-tertiary-color: var(--rn-text-dim);
    --bs-border-color: var(--rn-border);
    --bs-border-color-translucent: var(--rn-border);
    --bs-primary: var(--rn-violet);
    --bs-primary-rgb: 139, 49, 232;
    --bs-link-color: var(--rn-cyan);
    --bs-link-color-rgb: 6, 196, 228;
    --bs-link-hover-color: #58DEF5;
    --bs-code-color: var(--rn-pink);
    --bs-heading-color: var(--rn-text);
}


/* =====================================================================
 * §2  BASE
 * ===================================================================== */
html {
    scroll-behavior: smooth;
    /* Fixed header offset for anchor links */
    scroll-padding-top: calc(var(--rn-header-h) + 16px);
}

body {
    background: var(--rn-bg);
    color: var(--rn-text);
    font-family: var(--rn-font-body);
    font-size: var(--rn-fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Never allow a stray wide element to scroll the page sideways */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .rn-display {
    font-family: var(--rn-font-heading);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--rn-text);
}

.rn-display { font-size: var(--rn-fs-display); }
h1, .rn-h1 { font-size: var(--rn-fs-h1); }
h2, .rn-h2 { font-size: var(--rn-fs-h2); }
h3, .rn-h3 { font-size: var(--rn-fs-h3); letter-spacing: -.02em; }

p { color: var(--rn-text-muted); }
.rn-lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--rn-text-muted); max-width: 56ch; }
.rn-muted { color: var(--rn-text-muted); }
.rn-dim { color: var(--rn-text-dim); }

a { text-decoration: none; transition: color var(--rn-dur) var(--rn-ease); }

/* Visible focus for keyboard users on every interactive element */
:focus-visible {
    outline: 2px solid var(--rn-cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: rgba(139, 49, 232, .45); color: #fff; }

/* Skip link — first focusable element in every layout */
.rn-skip-link {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -120%);
    z-index: 2000;
    padding: .75rem 1.25rem;
    background: var(--rn-violet);
    color: #fff;
    border-radius: 0 0 var(--rn-radius-sm) var(--rn-radius-sm);
    transition: transform var(--rn-dur) var(--rn-ease);
}
.rn-skip-link:focus { transform: translate(-50%, 0); color: #fff; }


/* =====================================================================
 * §3  GRADIENT TEXT & EYEBROWS
 * ===================================================================== */

/* Large headings only — see accessibility note at the top of this file.
 *
 * ALWAYS set the gradient with background-image here, NEVER the `background`
 * shorthand. The shorthand resets background-clip to border-box, so the
 * gradient paints as a solid rectangle over transparent text instead of
 * filling the glyphs. Same applies to every modifier below. */
.rn-grad-text {
    color: var(--rn-violet);              /* solid fallback */
    background-image: var(--rn-grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .rn-grad-text { color: transparent; }
}
.rn-grad-text--cool { background-image: var(--rn-grad-cool); }

.rn-eyebrow {
    display: inline-block;
    font-family: var(--rn-font-body);
    font-size: var(--rn-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rn-violet);
    margin-bottom: .875rem;
}
.rn-eyebrow--cyan { color: var(--rn-cyan); }
.rn-eyebrow--muted { color: var(--rn-text-dim); }

/* Pill badge, e.g. "CANADA'S PREMIER STARTUP CAPITAL SUMMIT" */
.rn-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .875rem;
    font-size: var(--rn-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rn-text);
    background: rgba(139, 49, 232, .10);
    border: 1px solid var(--rn-border-strong);
    border-radius: var(--rn-radius-pill);
}
.rn-pill .rn-pill-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rn-cyan);
    box-shadow: 0 0 10px var(--rn-cyan);
    flex: 0 0 auto;
}


/* =====================================================================
 * §4  SECTIONS & LAYOUT
 * ===================================================================== */
.rn-section { padding: var(--rn-section-py) 0; position: relative; }
.rn-section--alt { background: var(--rn-bg-alt); }
.rn-section--tight { padding: clamp(2rem, 5vw, 4rem) 0; }

/* Full-width page layout.
 * The client's mockup runs content to ~85% of the canvas, so a fixed centred
 * column left large margins on anything wider than ~1440px. This drops the
 * cap entirely: content spans the viewport minus a gutter that grows with it.
 *
 * Written as .container.rn-container (specificity 0,2,0) so it beats
 * Bootstrap's per-breakpoint .container max-widths without !important.
 *
 * To go back to a centred column, set a max-width here — that single
 * declaration is the whole switch. */
.container.rn-container {
    max-width: none;
    width: 100%;
    padding-inline: clamp(1.25rem, 3.5vw, 4.5rem);
}

/* Edge-to-edge means prose columns can get extremely wide on large monitors
 * — a paragraph at 2560px would run ~200 characters against a readable range
 * of 65–75. Anything carrying flowing body copy gets .rn-measure, which caps
 * the line length without narrowing the layout around it. */
.rn-measure { max-width: 68ch; }

.rn-section-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.rn-section-head--center { margin-inline: auto; text-align: center; }

/* Thin gradient rule used under headings in the mockups */
.rn-rule {
    width: 56px; height: 3px;
    background: var(--rn-grad-cta);
    border-radius: 2px;
    margin: 1rem 0 1.5rem;
}
.rn-section-head--center .rn-rule { margin-inline: auto; }

/* Decorative background motifs (generated PNGs) */
.rn-motif {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.rn-motif--blocks { top: 0; left: 0; width: min(320px, 30vw); opacity: .35; }
.rn-motif--mesh { right: 0; bottom: 0; width: min(460px, 45vw); opacity: .5; }
.rn-motif--waves { left: 0; bottom: 0; width: 100%; opacity: .5; }
@media (max-width: 767.98px) {
    /* Motifs are decoration — drop them on phones to save bandwidth
     * and keep text areas clean */
    .rn-motif { display: none; }
}


/* =====================================================================
 * §5  BUTTONS
 * ===================================================================== */
.rn-btn {
    --rn-btn-bg: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 48px;                     /* touch target */
    padding: .75rem 1.5rem;
    font-family: var(--rn-font-body);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    color: var(--rn-text);
    background: var(--rn-btn-bg);
    border: 1px solid transparent;
    border-radius: var(--rn-radius-sm);
    cursor: pointer;
    text-align: center;
    transition: transform var(--rn-dur) var(--rn-ease),
                box-shadow var(--rn-dur) var(--rn-ease),
                background-color var(--rn-dur) var(--rn-ease),
                border-color var(--rn-dur) var(--rn-ease),
                opacity var(--rn-dur) var(--rn-ease);
}
.rn-btn:hover { color: var(--rn-text); }
.rn-btn:active { transform: translateY(1px); }
.rn-btn:disabled,
.rn-btn.disabled { opacity: .45; pointer-events: none; }

/* Primary — the brand gradient. Two stacked layers so the hover ramp
 * cross-fades instead of snapping (gradients aren't interpolatable). */
.rn-btn--primary {
    position: relative;
    background: var(--rn-grad-cta);
    color: #fff;
    box-shadow: 0 6px 24px rgba(75, 58, 224, .35);
    overflow: hidden;
    isolation: isolate;
}
.rn-btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rn-grad-cta-hover);
    opacity: 0;
    transition: opacity var(--rn-dur) var(--rn-ease);
    z-index: -1;
}
.rn-btn--primary:hover { color: #fff; box-shadow: 0 10px 34px rgba(75, 58, 224, .5); }
.rn-btn--primary:hover::before { opacity: 1; }

/* Outline — the "BUY TICKETS" style from the mockups */
.rn-btn--outline {
    background: transparent;
    border-color: var(--rn-border-strong);
    color: var(--rn-text);
}
.rn-btn--outline:hover {
    border-color: var(--rn-cyan);
    background: rgba(6, 196, 228, .08);
}

.rn-btn--ghost { background: transparent; color: var(--rn-text-muted); }
.rn-btn--ghost:hover { color: var(--rn-text); background: rgba(255, 255, 255, .05); }

.rn-btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .8125rem; }
.rn-btn--lg { min-height: 56px; padding: 1rem 2rem; font-size: 1rem; }
.rn-btn--block { width: 100%; }

/* Tier-accented buttons on the tickets page */
.rn-btn--tier { color: #fff; }
.rn-btn--tier-1 { background: linear-gradient(90deg, #6D28D9, #8B5CF6); }
.rn-btn--tier-2 { background: linear-gradient(90deg, #DC3B18, #F4703E); }
.rn-btn--tier-3 { background: linear-gradient(90deg, #087E93, #14B8CC); }
.rn-btn--tier:hover { color: #fff; filter: brightness(1.12); }

/* Trailing arrow that nudges on hover */
.rn-btn .rn-btn-arrow { transition: transform var(--rn-dur) var(--rn-ease); }
.rn-btn:hover .rn-btn-arrow { transform: translateX(3px); }


/* =====================================================================
 * §6  CARDS
 * ===================================================================== */
.rn-card {
    position: relative;
    background: var(--rn-surface);
    background-image: var(--rn-grad-surface);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    /* NO height: 100% here. It used to be the default, which broke any column
     * holding more than one card: the first card claimed the full column
     * height and pushed its siblings out of the row and over the footer.
     * Cards that want to match a neighbour's height say so with Bootstrap's
     * .h-100 utility — see the ticket tiers below, which set it themselves. */
    transition: transform var(--rn-dur) var(--rn-ease),
                border-color var(--rn-dur) var(--rn-ease),
                box-shadow var(--rn-dur) var(--rn-ease);
}
.rn-card--hover:hover {
    transform: translateY(-4px);
    border-color: var(--rn-border-strong);
    box-shadow: var(--rn-shadow-card);
}
.rn-card--flat { background-image: none; }
.rn-card--plain { background: var(--rn-surface-2); border-color: var(--rn-border-plain); }

/* Photo sitting beside copy inside a card (About section).
 * Stretches to the height of the text column on wide screens; falls back to
 * a fixed 4:3 block once the card stacks. */
/* <picture> wrapper needs to fill the flex column so the image inside can */
.rn-about-figure { display: block; width: 100%; }
.rn-about-media {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: var(--rn-radius);
    /* Visible while the photo loads, and if it is missing entirely */
    background: linear-gradient(135deg, #1A0B2E, #05070F 55%, #052538);
}
@media (max-width: 991.98px) {
    .rn-about-media { height: auto; aspect-ratio: 4 / 3; }
}

/* Pillar row — centred, separated by hairlines, as in the mockup */
.rn-pillars {
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
    border-top: 1px solid var(--rn-border);
}
.rn-pillar { position: relative; text-align: center; }
/* Divider sits on the column's padding edge, i.e. the middle of the gutter.
 * Only between items, and only once they are side by side. */
@media (min-width: 768px) {
    .rn-pillar + .rn-pillar::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8%;
        bottom: 8%;
        width: 1px;
        background: var(--rn-border);
    }
}
.rn-pillar-icon {
    display: block;
    font-size: 1.875rem;
    line-height: 1;
    margin-bottom: .875rem;
}
.rn-pillar-title {
    font-family: var(--rn-font-body);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .375rem;
}
.rn-pillar-desc {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--rn-text-dim);
    margin: 0;
    /* Keeps the four descriptions from running edge to edge on wide cards */
    max-width: 22ch;
    margin-inline: auto;
}

/* =====================================================================
 * Feature row — a set of icon/title/description items separated by
 * hairlines, as in the accelerator's "What you get" band.
 *
 * A CSS grid rather than Bootstrap columns so the dividers can be handled
 * with nth-child: the border sits on every item's left edge and is removed
 * for whichever item starts a row at each breakpoint. Set --rn-cols to the
 * wide-screen column count.
 * ===================================================================== */
.rn-featurerow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0;
}
.rn-feature { text-align: center; padding: 0 1rem; border-left: 1px solid var(--rn-border); }
.rn-feature:nth-child(2n + 1) { border-left: 0; }

@media (min-width: 768px) {
    .rn-featurerow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rn-feature:nth-child(2n + 1) { border-left: 1px solid var(--rn-border); }
    .rn-feature:nth-child(3n + 1) { border-left: 0; }
}
/* nth-child() cannot take a custom property, so the wide layout is a fixed
 * 6 columns — the count the design uses. A different count needs its own
 * modifier with matching nth-child rules. */
@media (min-width: 1200px) {
    .rn-featurerow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
    .rn-feature:nth-child(3n + 1) { border-left: 1px solid var(--rn-border); }
    .rn-feature:nth-child(6n + 1) { border-left: 0; }
}
.rn-feature-icon { display: block; font-size: 1.75rem; line-height: 1; margin-bottom: .875rem; }
.rn-feature-title {
    font-family: var(--rn-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.rn-feature-desc { font-size: .8125rem; line-height: 1.55; color: var(--rn-text-dim); margin: 0; }

/* Icon-left list — "Who should apply" */
.rn-icon-list { list-style: none; padding: 0; margin: 0; }
.rn-icon-list > li { display: flex; gap: 1rem; }
.rn-icon-list > li + li { margin-top: 1.5rem; }
.rn-icon-list i { flex: 0 0 auto; font-size: 1.375rem; line-height: 1.4; }
.rn-icon-list-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.rn-icon-list-desc { font-size: .875rem; color: var(--rn-text-muted); margin: 0; }

/* Vertical KPI stack — the accelerator's numbers column */
.rn-kpi { list-style: none; padding: 0; margin: 0; }
.rn-kpi > li + li { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rn-border); }
.rn-kpi-value {
    font-family: var(--rn-font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rn-kpi-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
    margin: .375rem 0 0;
}

/* Program journey — numbered steps, horizontal from md, stacked below */
.rn-journey { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 768px) {
    .rn-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
}
.rn-journey-step { position: relative; text-align: center; }
/* Connector arrow, centred in the 1rem grid gap */
@media (min-width: 768px) {
    .rn-journey-step + .rn-journey-step::before {
        content: '→';
        position: absolute;
        left: -.5rem;
        top: 1.5rem;
        transform: translateX(-50%);
        color: var(--rn-text-dim);
        font-size: 1rem;
        line-height: 1;
    }
}
.rn-journey-icon {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    border: 1px solid var(--rn-border-strong);
    border-radius: 50%;
}
.rn-journey-title {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .375rem;
}
.rn-journey-desc { font-size: .8125rem; line-height: 1.5; color: var(--rn-text-dim); margin: 0; }

/* Speaker card — photo, name, role, opens a bio modal */
.rn-speaker {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}
.rn-speaker-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--rn-radius);
    background: var(--rn-surface-2);
    margin-bottom: .875rem;
}
.rn-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms var(--rn-ease);
}
.rn-speaker:hover .rn-speaker-photo img,
.rn-speaker:focus-visible .rn-speaker-photo img { transform: scale(1.04); }
/* Gradient veil so white type stays readable over any portrait */
.rn-speaker-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(5, 7, 15, .75) 100%);
}
.rn-speaker-name { font-family: var(--rn-font-heading); font-size: 1.0625rem; margin-bottom: .1875rem; }
.rn-speaker-role { font-size: .8125rem; color: var(--rn-text-dim); margin: 0; }

/* News card — cover, date, title, excerpt */
.rn-post { display: flex; flex-direction: column; height: 100%; color: inherit; }
.rn-post-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--rn-radius);
    background: var(--rn-surface-2);
    margin-bottom: 1rem;
    transition: transform 400ms var(--rn-ease);
}
.rn-post:hover .rn-post-cover,
.rn-post:focus-visible .rn-post-cover { transform: translateY(-3px); }
.rn-post-date {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
    margin-bottom: .5rem;
}
.rn-post-title { font-size: 1.125rem; line-height: 1.3; margin-bottom: .5rem; }
.rn-post:hover .rn-post-title { color: var(--rn-cyan); }
.rn-post-excerpt { font-size: .9375rem; color: var(--rn-text-muted); margin: 0; }

/* Article body — plain text rendered as paragraphs */
.rn-article-body > p {
    font-size: clamp(1rem, 1.2vw, 1.0625rem);
    line-height: 1.75;
    color: var(--rn-text-muted);
    max-width: 68ch;
}
.rn-article-body > p + p { margin-top: 1.25rem; }
.rn-article-body a { color: var(--rn-cyan); text-decoration: underline; text-underline-offset: 2px; }

/* Inline "change attendee" form inside the tickets table */
.rn-holder-row > td { border-top: 0 !important; }
.rn-holder-form {
    padding: 1rem 1rem 1.25rem;
    background: color-mix(in srgb, var(--rn-surface) 70%, transparent);
    border-radius: var(--rn-radius-sm, .5rem);
}

/* Notify-the-applicant block, set apart because ticking it emails a founder */
.rn-notify-block {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm);
    background: color-mix(in srgb, var(--rn-surface) 60%, transparent);
}

/* Admission code with its QR */
.rn-ticket-code { display: flex; align-items: center; gap: .75rem; }
.rn-qr {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    /* The PNG is black-on-white; keep it that way so scanners cope, even
       though the surrounding panel is dark. */
    background: #fff;
    padding: 2px;
    flex: none;
}

/* Door check-in verdict card — colour carries the answer at arm's length,
   but the wording says it too (never colour alone). */
.rn-checkin-result { border-left: 4px solid var(--rn-border); }
.rn-checkin-result--ok   { border-left-color: #7BD88F; }
.rn-checkin-result--warn { border-left-color: #FFC46B; }
.rn-checkin-result--bad  { border-left-color: #FF8A6B; }
.rn-checkin-verdict { font-size: 1.0625rem; margin-bottom: 1rem; }
.rn-checkin-result--warn .rn-checkin-verdict { color: #FFC46B; }
.rn-checkin-result--bad .rn-checkin-verdict  { color: #FF8A6B; }

/* Off-site link marker */
.rn-link-out { font-size: .75em; margin-left: .3em; opacity: .7; vertical-align: baseline; }

/* Framed policy document (GetTerms). The frame is cross-origin so it cannot
   report its height — it scrolls internally at a height that fills most of
   the viewport without swallowing the page furniture. The light background is
   set here too, so it does not flash dark before the document paints. */
.rn-legal-card { padding: .5rem; }
.rn-legal-frame {
    display: block;
    width: 100%;
    height: clamp(30rem, 78vh, 60rem);
    border: 0;
    border-radius: calc(var(--rn-radius) - .25rem);
    background: #fff;
}
@media (max-width: 575.98px) {
    .rn-legal-card { padding: .25rem; }
    .rn-legal-frame { height: clamp(26rem, 70vh, 40rem); }
}

/* Simple prev/next pager */
.rn-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.rn-pager-status { font-size: .875rem; color: var(--rn-text-dim); font-variant-numeric: tabular-nums; }

/* Partner logo tile — falls back to the name when no logo is uploaded */
.rn-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 1rem 1.25rem;
    text-align: center;
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    color: var(--rn-text-muted);
    font-weight: 600;
    letter-spacing: .04em;
    transition: border-color var(--rn-dur) var(--rn-ease), color var(--rn-dur) var(--rn-ease);
}
a.rn-partner:hover { border-color: var(--rn-border-strong); color: var(--rn-text); }
.rn-partner img { max-width: 100%; max-height: 56px; object-fit: contain; }
.rn-partner--headline { min-height: 116px; }
.rn-partner--headline img { max-height: 76px; }

/* Agenda row — time on the left, session on the right */
.rn-agenda { list-style: none; padding: 0; margin: 0; }
.rn-agenda > li { padding: 1.25rem 0; border-top: 1px solid var(--rn-border); }
.rn-agenda > li:first-child { border-top: 0; padding-top: 0; }
.rn-agenda-time {
    font-family: var(--rn-font-heading);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    color: var(--rn-cyan);
    white-space: nowrap;
}
.rn-agenda-title { font-size: 1.0625rem; margin-bottom: .375rem; }
.rn-agenda-desc { font-size: .875rem; color: var(--rn-text-muted); margin: 0 0 .5rem; }
.rn-agenda-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; color: var(--rn-text-dim); }
/* Breaks are structural, not programming — visually quieter */
.rn-agenda > li.is-break .rn-agenda-title { font-size: .9375rem; color: var(--rn-text-muted); font-weight: 500; }
.rn-agenda > li.is-break .rn-agenda-time { color: var(--rn-text-dim); }
/* The members toggle redirects to #session-{id}; keep the anchor clear of the
   fixed panel top bar (fallback covers the public page, outside that scope). */
.rn-agenda > li { scroll-margin-top: calc(var(--rn-topnav-h, 60px) + 1rem); }

/* Favorite star on the members schedule (amber matches .rn-chip--pending) */
.rn-fav {
    padding: .375rem;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--rn-text-dim);
    background: transparent;
    border: 0;
    border-radius: 50%;
    transition: color var(--rn-dur) var(--rn-ease);
}
.rn-fav:hover { color: var(--rn-cyan); }
.rn-fav.is-active { color: #F5B54A; }

/* Day switcher on the event page */
.rn-daytabs { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--rn-surface-2); border: 1px solid var(--rn-border); border-radius: var(--rn-radius-pill); }
.rn-daytabs button {
    min-height: 40px;
    padding: .5rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--rn-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--rn-radius-pill);
    transition: all var(--rn-dur) var(--rn-ease);
}
.rn-daytabs button.active { color: #fff; background: var(--rn-grad-cta); }

/* "Powered by" badge floating over a hero photo */
.rn-badge-card {
    position: absolute;
    right: clamp(.75rem, 2vw, 1.5rem);
    bottom: clamp(.75rem, 2vw, 1.5rem);
    z-index: 2;
    padding: .875rem 1.25rem;
    text-align: center;
    background: rgba(5, 7, 15, .82);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
}
@supports (backdrop-filter: blur(8px)) {
    .rn-badge-card { backdrop-filter: blur(10px); }
}
.rn-badge-card-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
    margin: 0 0 .25rem;
}
.rn-badge-card-name {
    font-family: var(--rn-font-heading);
    font-size: 1rem;
    letter-spacing: .06em;
    margin: 0;
}
@media (max-width: 575.98px) {
    /* Too cramped over a small photo — the footer states it anyway */
    .rn-badge-card { display: none; }
}

/* Icon chip inside feature cards */
.rn-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    font-size: 1.375rem;
    color: var(--rn-violet);
    background: rgba(139, 49, 232, .12);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    margin-bottom: 1.125rem;
}
.rn-icon-chip--cyan { color: var(--rn-cyan); background: rgba(6, 196, 228, .12); }
.rn-icon-chip--coral { color: var(--rn-coral); background: rgba(240, 78, 35, .12); }
.rn-icon-chip--pink { color: var(--rn-pink); background: rgba(236, 63, 135, .12); }
.rn-icon-chip--round { border-radius: 50%; }


/* =====================================================================
 * §7  STAT STRIP
 * ===================================================================== */
.rn-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2×2 on phones */
    gap: 1.25rem 1rem;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    border-top: 1px solid var(--rn-border);
}
@media (min-width: 768px) {
    .rn-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
.rn-stat { display: flex; align-items: center; gap: .75rem; }
.rn-stat + .rn-stat { position: relative; }
@media (min-width: 768px) {
    .rn-stat + .rn-stat::before {
        content: '';
        position: absolute;
        left: -.75rem; top: 15%;
        height: 70%; width: 1px;
        background: var(--rn-border);
    }
}
.rn-stat-icon { font-size: 1.5rem; color: var(--rn-violet); flex: 0 0 auto; }
.rn-stat-value {
    font-family: var(--rn-font-heading);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    /* Keeps counting animations from reflowing the layout */
    font-variant-numeric: tabular-nums;
}
.rn-stat-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
}


/* =====================================================================
 * §8  HEADER / NAVIGATION
 * ===================================================================== */
.rn-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--rn-header-h);
    background: rgba(5, 7, 15, .78);
    border-bottom: 1px solid transparent;
    transition: background-color var(--rn-dur) var(--rn-ease),
                border-color var(--rn-dur) var(--rn-ease);
}
@supports (backdrop-filter: blur(12px)) {
    .rn-header { backdrop-filter: blur(14px) saturate(140%); }
}
/* .is-scrolled is toggled by raise-next.js past 24px */
.rn-header.is-scrolled {
    background: rgba(5, 7, 15, .94);
    border-bottom-color: var(--rn-border);
}

.rn-brand { display: inline-flex; align-items: center; gap: .625rem; }
/* The mark is a <picture>; its size comes from the width/height attributes
 * the component renders, so no fixed dimensions here. */
.rn-brand picture { display: inline-flex; flex: 0 0 auto; }
.rn-brand-mark { display: block; height: auto; flex: 0 0 auto; }
.rn-brand-text {
    font-family: var(--rn-font-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--rn-text);
    white-space: nowrap;
}
/* "RAISE" solid + "NEXT" gradient — live text, not an image.
 * Deliberately NOT scoped to .rn-brand-text: the hero lockup renders the
 * wordmark without that wrapper, and used to lose the gradient entirely.
 * background-image, not the shorthand — see the note in §3. */
.rn-brand-next {
    background-image: var(--rn-grad-cool);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--rn-cyan);                /* solid fallback */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .rn-brand-next { color: transparent; }
}
.rn-brand-tagline {
    display: block;
    font-family: var(--rn-font-body);
    font-size: .5rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
}

.rn-nav-link {
    display: block;
    padding: .625rem .875rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rn-text-muted);
    position: relative;
}
.rn-nav-link:hover { color: var(--rn-text); }
.rn-nav-link.is-active { color: var(--rn-text); }
.rn-nav-link.is-active::after {
    content: '';
    position: absolute;
    left: .875rem; right: .875rem; bottom: 2px;
    height: 2px;
    background: var(--rn-grad-cta);
    border-radius: 2px;
}

/* Language switcher */
.rn-lang { display: inline-flex; border: 1px solid var(--rn-border); border-radius: var(--rn-radius-sm); overflow: hidden; }
.rn-lang a {
    min-width: 44px;                       /* touch target */
    padding: .5rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    color: var(--rn-text-muted);
}
.rn-lang a:hover { color: var(--rn-text); background: rgba(255, 255, 255, .05); }
.rn-lang a.is-active { color: #fff; background: rgba(139, 49, 232, .35); }

/* Mobile menu trigger */
.rn-nav-toggle {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm);
    color: var(--rn-text);
    font-size: 1.25rem;
}

/* Offcanvas mobile menu */
.rn-offcanvas {
    background: var(--rn-bg);
    border-left: 1px solid var(--rn-border);
    width: min(88vw, 360px);
}
.rn-offcanvas .rn-nav-link {
    padding: .875rem 0;
    font-size: 1rem;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--rn-border);
}
.rn-offcanvas .rn-nav-link.is-active::after { display: none; }
.rn-offcanvas .rn-nav-link.is-active { color: var(--rn-cyan); }
/* CTA pinned to the bottom of the sheet */
.rn-offcanvas-footer { margin-top: auto; padding-top: 1.5rem; }


/* =====================================================================
 * §9  HERO
 * ===================================================================== */
.rn-hero {
    position: relative;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
    overflow: hidden;
}
.rn-hero-media {
    position: relative;
    border-radius: var(--rn-radius-lg);
    overflow: hidden;

    /* Container queries let the logo lockup below scale with the photo
     * rather than the viewport, so it stays locked to the LED screen at
     * every breakpoint. */
    container-type: inline-size;

    /* --- Tuning knobs for the hero photo ---------------------------------
     * Aspect ratio must match the source image or object-fit: cover crops
     * the sides and the lockup drifts off the screen.
     * The screen coordinates were measured from hero-stage.jpg: the LED wall
     * spans 51.5–86.5% horizontally and 25–69% vertically.
     * Re-measure and update these three values if the photo is regenerated. */
    --rn-hero-ratio: 1584 / 672;
    --rn-screen-x: 69%;
    --rn-screen-y: 45%;
    --rn-screen-w: 19cqw;
}
/* Generated photos are not all the same shape. Give each hero the modifier
 * matching its asset, or object-fit: cover silently crops it. */
.rn-hero-media--43 { --rn-hero-ratio: 1408 / 768; }
/* Direct-child selectors on purpose: the brand lockup below nests its own
 * <picture>, and a descendant selector here would force the square logo into
 * this 2.36:1 box with object-fit: cover — cropping it to a horizontal slice. */
.rn-hero-media > picture,
.rn-hero-media > img { display: block; aspect-ratio: var(--rn-hero-ratio); }
.rn-hero-media > picture > img,
.rn-hero-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fades the photo into the page background on its left edge (desktop)
 * or bottom edge (mobile), as in the mockups */
.rn-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, var(--rn-bg) 100%);
}
@media (min-width: 992px) {
    .rn-hero-media::after {
        background: linear-gradient(90deg, var(--rn-bg) 0%, rgba(5, 7, 15, .55) 22%, transparent 60%);
    }
}

/* --- Logo lockup composited onto the LED screen ------------------------
 * The hero photo is generated with a deliberately blank screen (see
 * req_docs/IMAGE_PROMPTS.md) and the brand lockup is laid over it here, so
 * it stays crisp at any density, translatable, and re-themeable — instead
 * of being baked into a JPEG that would have to be regenerated to change.
 * Sizes are in cqw (% of the photo's width), so the lockup scales with the
 * image and never drifts. */
.rn-hero-screen {
    position: absolute;
    left: var(--rn-screen-x);
    top: var(--rn-screen-y);
    transform: translate(-50%, -50%);
    width: var(--rn-screen-w);
    z-index: 1;
    text-align: center;
    line-height: 1.05;
    pointer-events: none;
    /* The screen behind is mid-violet; a soft shadow keeps the white type
     * readable wherever the beams fall. */
    text-shadow: 0 2px 12px rgba(5, 7, 15, .45);
}

/* Dark scrim behind the lockup.
 * Not decoration — the logo's R runs violet → blue → cyan and the lit screen
 * behind it is #6C51F1, which puts the violet end at 1.1:1. Without this the
 * R is genuinely invisible and only the coral arrow survives. Real event
 * screens show a logo on a dark backdrop for the same reason. */
.rn-hero-screen::before {
    content: '';
    position: absolute;
    left: 46%;
    top: 50%;
    width: 172%;
    height: 168%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center,
        rgba(5, 7, 15, .92) 0%,
        rgba(5, 7, 15, .86) 38%,
        rgba(5, 7, 15, .55) 68%,
        transparent 100%);
    z-index: -1;
    pointer-events: none;
}

.rn-hero-screen picture { display: block; width: 30%; margin: 0 auto .8cqw; }
.rn-hero-screen-mark { display: block; width: 100%; height: auto; }
.rn-hero-screen-word {
    font-family: var(--rn-font-heading);
    font-weight: 700;
    font-size: 2.6cqw;
    letter-spacing: .05em;
    color: #fff;
    margin: 0;
}
.rn-hero-screen-tag {
    font-size: .8cqw;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
    margin: .7cqw 0 0;
}
.rn-hero-screen-sub {
    font-size: .9cqw;
    font-weight: 500;
    letter-spacing: .4em;
    text-transform: uppercase;
    /* letter-spacing pads the right edge; pull it back to stay centred */
    text-indent: .4em;
    color: rgba(255, 255, 255, .7);
    margin: .9cqw 0 0;
}
/* On a narrow photo the two small lines stop being legible; the mark and
 * wordmark stay, scaled up a little, still locked to the screen. */
@container (max-width: 520px) {
    .rn-hero-screen { width: 24cqw; }
    .rn-hero-screen-word { font-size: 3.2cqw; }
    .rn-hero-screen-tag,
    .rn-hero-screen-sub { display: none; }
}
/* No container query support → the photo simply keeps its blank screen */
@supports not (container-type: inline-size) {
    .rn-hero-screen { display: none; }
}


/* =====================================================================
 * §10  TICKET CARDS & INCLUSION MATRIX
 * ===================================================================== */
.rn-ticket {
    display: flex;
    flex-direction: column;
    /* Tier cards always sit in a grid, so they fill their column to keep the
     * three of them level regardless of how many inclusions each lists. */
    height: 100%;
    text-align: center;
    border-width: 1px;
    border-color: var(--rn-border);
}
.rn-ticket-badge {
    position: absolute;
    top: -.75rem; left: 50%;
    transform: translateX(-50%);
    padding: .3125rem .875rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    border-radius: var(--rn-radius-pill);
    white-space: nowrap;
}
.rn-ticket-icon {
    width: 58px; height: 58px;
    margin: 0 auto 1.25rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    border-radius: 50%;
}
.rn-ticket-name {
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.rn-ticket-price {
    font-family: var(--rn-font-heading);
    font-size: clamp(2.5rem, 6vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: .5rem 0 .25rem;
}
.rn-ticket-currency { font-size: .8125rem; font-weight: 500; color: var(--rn-text-dim); letter-spacing: .04em; }
.rn-ticket-desc { font-size: .9375rem; color: var(--rn-text-muted); min-height: 3rem; }
.rn-ticket-list { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.rn-ticket-list li {
    display: flex; align-items: flex-start; gap: .625rem;
    padding: .4375rem 0;
    font-size: .9375rem;
    color: var(--rn-text-muted);
}
.rn-ticket-list li i { flex: 0 0 auto; margin-top: .2rem; }
.rn-ticket-cta { margin-top: auto; }

/* Tier accents */
.rn-ticket--1 .rn-ticket-icon { background: linear-gradient(135deg, #6D28D9, #A78BFA); }
.rn-ticket--2 .rn-ticket-icon { background: linear-gradient(135deg, #DC3B18, #FB923C); }
.rn-ticket--3 .rn-ticket-icon { background: linear-gradient(135deg, #087E93, #22D3EE); }
.rn-ticket--1 .rn-ticket-name, .rn-ticket--1 .rn-ticket-price, .rn-ticket--1 .rn-ticket-list i { color: #A78BFA; }
.rn-ticket--2 .rn-ticket-name, .rn-ticket--2 .rn-ticket-price, .rn-ticket--2 .rn-ticket-list i { color: #FB7A4A; }
.rn-ticket--3 .rn-ticket-name, .rn-ticket--3 .rn-ticket-price, .rn-ticket--3 .rn-ticket-list i { color: #22D3EE; }
.rn-ticket--1 .rn-ticket-badge { background: var(--rn-tier-1); }
.rn-ticket--2 .rn-ticket-badge { background: var(--rn-tier-2); }
.rn-ticket--3 .rn-ticket-badge { background: var(--rn-tier-3); }

/* Featured tier keeps its coloured border on every screen size but only
 * scales up on desktop, where there's room for it */
.rn-ticket.is-featured { border-color: var(--rn-tier-2); box-shadow: 0 0 40px rgba(240, 78, 35, .18); }
@media (min-width: 992px) {
    .rn-ticket.is-featured { transform: scale(1.03); }
    .rn-ticket.is-featured.rn-card--hover:hover { transform: scale(1.03) translateY(-4px); }
}

/* Quantity stepper */
.rn-qty { display: inline-flex; align-items: center; gap: .5rem; }
.rn-qty button {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm);
    color: var(--rn-text);
    font-size: 1.125rem;
}
.rn-qty button:hover:not(:disabled) { border-color: var(--rn-border-strong); background: var(--rn-surface-3); }
.rn-qty button:disabled { opacity: .4; cursor: not-allowed; }
.rn-qty input {
    width: 56px; height: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    background: var(--rn-bg);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm);
    color: var(--rn-text);
    /* Hide native spinners — we provide our own 44px buttons */
    -moz-appearance: textfield;
}
.rn-qty input::-webkit-outer-spin-button,
.rn-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Comparison matrix — a real table on desktop, stacked cards on mobile.
 * Never a horizontally scrolling table. */
.rn-matrix { width: 100%; border-collapse: collapse; }
.rn-matrix th, .rn-matrix td {
    padding: .875rem 1rem;
    font-size: .875rem;
    text-align: center;
    border-bottom: 1px solid var(--rn-border);
}
.rn-matrix thead th { background: var(--rn-bg-alt); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.rn-matrix tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--rn-text-muted);
    display: flex; align-items: center; gap: .625rem;
}
.rn-matrix .rn-matrix-yes { color: var(--rn-cyan); }
.rn-matrix .rn-matrix-no { color: var(--rn-text-dim); }
@media (max-width: 991.98px) { .rn-matrix-wrap { display: none; } }
@media (min-width: 992px) { .rn-matrix-stack { display: none; } }


/* =====================================================================
 * §11  FORMS
 * ===================================================================== */
.rn-label {
    display: block;
    margin-bottom: .4375rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rn-text-muted);
}
.rn-label .rn-required { color: var(--rn-coral); margin-left: .125rem; }

.rn-input,
.rn-select,
.rn-textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem;
    /* 16px minimum stops iOS Safari zooming on focus */
    font-size: 1rem;
    font-family: var(--rn-font-body);
    color: var(--rn-text);
    background: var(--rn-bg);
    border: 1px solid var(--rn-border-control);
    border-radius: var(--rn-radius-sm);
    transition: border-color var(--rn-dur) var(--rn-ease), box-shadow var(--rn-dur) var(--rn-ease);
}
.rn-textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.rn-input::placeholder, .rn-textarea::placeholder { color: var(--rn-text-dim); }
.rn-input:focus, .rn-select:focus, .rn-textarea:focus {
    outline: none;
    border-color: var(--rn-violet);
    box-shadow: 0 0 0 3px rgba(139, 49, 232, .22);
}
.rn-input.is-invalid, .rn-select.is-invalid, .rn-textarea.is-invalid { border-color: var(--rn-coral); }
.rn-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239AA6BF'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
    padding-right: 2.5rem;
}
.rn-help { margin-top: .375rem; font-size: .8125rem; color: var(--rn-text-dim); }
.rn-error { margin-top: .375rem; font-size: .8125rem; color: #FF8A6B; }

/* Drag-and-drop file field */
.rn-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 2rem 1rem;
    text-align: center;
    background: var(--rn-bg);
    border: 1.5px dashed var(--rn-border-control);
    border-radius: var(--rn-radius);
    color: var(--rn-text-muted);
    cursor: pointer;
    transition: border-color var(--rn-dur) var(--rn-ease), background-color var(--rn-dur) var(--rn-ease);
}
.rn-dropzone:hover, .rn-dropzone.is-dragover { border-color: var(--rn-cyan); background: rgba(6, 196, 228, .05); }
.rn-dropzone i { font-size: 1.75rem; color: var(--rn-violet); }

.rn-counter { font-size: .75rem; color: var(--rn-text-dim); font-variant-numeric: tabular-nums; }

/* Bootstrap checkboxes (bulk selection, etc.). The compiled defaults are
 * invisible on this palette: the fill matches the page background and the
 * border maps to --rn-border (~1.2:1 composited); checked/indeterminate are
 * hardcoded Bootstrap blue, off-palette. The violet fill is 3.1:1+ against
 * every surface and Bootstrap's white glyph on it is 5.7:1. */
.form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0;
    flex-shrink: 0;
    background-color: var(--rn-surface-3);
    border: 1px solid var(--rn-border-control);
}
.form-check-input:focus {
    border-color: var(--rn-violet);
    box-shadow: 0 0 0 3px rgba(139, 49, 232, .22);
}
.form-check-input:checked,
.form-check-input:indeterminate {
    background-color: var(--rn-violet);
    border-color: var(--rn-violet);
}

/* Bare checkboxes/radios (the edit forms' Active / Featured ticks) keep the
 * native control but tick in palette violet. */
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) { accent-color: var(--rn-violet); }

/* Newsletter inline form */
.rn-newsletter { display: flex; flex-direction: column; gap: .625rem; }
@media (min-width: 576px) and (max-width: 991.98px) {
    .rn-newsletter { flex-direction: row; }
    .rn-newsletter .rn-input { flex: 1 1 auto; }
}


/* =====================================================================
 * §12  STEPS, FAQ, CTA BANNER
 * ===================================================================== */
.rn-steps { list-style: none; padding: 0; margin: 0; }
.rn-step { display: flex; gap: 1rem; padding-bottom: 1.5rem; position: relative; }
.rn-step:last-child { padding-bottom: 0; }
.rn-step-num {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--rn-font-heading);
    font-size: .875rem; font-weight: 700;
    color: #fff;
    background: var(--rn-grad-cta);
    border-radius: 50%;
}
/* Connector line between steps */
.rn-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px; top: 40px; bottom: 8px;
    width: 1px;
    background: var(--rn-border);
}
.rn-step-title { font-size: .9375rem; font-weight: 600; margin-bottom: .1875rem; }
.rn-step-desc { font-size: .875rem; color: var(--rn-text-muted); margin: 0; }

/* FAQ accordion (Bootstrap accordion, restyled) */
.rn-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--rn-border); }
.rn-faq .accordion-button {
    padding: 1.125rem 0;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--rn-text);
    background: transparent;
    box-shadow: none;
}
.rn-faq .accordion-button:not(.collapsed) { color: var(--rn-cyan); background: transparent; }
.rn-faq .accordion-button::after {
    /* Plus/minus rather than a chevron, matching the mockup */
    content: '+';
    background-image: none;
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    font-size: 1.25rem;
    color: var(--rn-text-muted);
    transform: none;
    transition: transform var(--rn-dur) var(--rn-ease);
}
.rn-faq .accordion-button:not(.collapsed)::after { content: '−'; color: var(--rn-cyan); }
.rn-faq .accordion-body { padding: 0 0 1.125rem; font-size: .9375rem; color: var(--rn-text-muted); }

/* Wide gradient call-to-action banner */
.rn-cta-banner {
    position: relative;
    background: var(--rn-grad-cta);
    border-radius: var(--rn-radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    overflow: hidden;
}
.rn-cta-banner h2, .rn-cta-banner p { color: #fff; }
.rn-cta-banner p { opacity: .88; }
.rn-cta-banner .rn-btn--dark { background: #05070F; color: #fff; }
.rn-cta-banner .rn-btn--dark:hover { background: #12162A; }


/* =====================================================================
 * §13  FOOTER
 * ===================================================================== */
.rn-footer { background: var(--rn-bg-alt); border-top: 1px solid var(--rn-border); padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; }
.rn-footer-title {
    font-family: var(--rn-font-body);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rn-text);
    margin-bottom: 1.125rem;
}
.rn-footer-links { list-style: none; padding: 0; margin: 0; }
.rn-footer-links li { margin-bottom: .625rem; }
.rn-footer-links a { font-size: .875rem; color: var(--rn-text-muted); }
.rn-footer-links a:hover { color: var(--rn-cyan); }
.rn-social { display: flex; gap: .625rem; flex-wrap: wrap; }
.rn-social a {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--rn-text-muted);
    border: 1px solid var(--rn-border);
    border-radius: 50%;
    transition: all var(--rn-dur) var(--rn-ease);
}
.rn-social a:hover { color: #fff; border-color: var(--rn-violet); background: rgba(139, 49, 232, .18); }
.rn-footer-bottom {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--rn-border);
    font-size: .8125rem;
    color: var(--rn-text-dim);
}


/* =====================================================================
 * §14  ALERTS / FLASH MESSAGES
 * ===================================================================== */
.rn-alert {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--rn-border);
    border-left-width: 3px;
    border-radius: var(--rn-radius-sm);
    background: var(--rn-surface);
    font-size: .9375rem;
}
.rn-alert--success { border-left-color: #22C58A; color: #7FE3BC; }
.rn-alert--error { border-left-color: var(--rn-coral); color: #FF9E82; }
.rn-alert--info { border-left-color: var(--rn-cyan); color: #7DE4F7; }
.rn-alert ul { margin: 0; padding-left: 1.125rem; }


/* =====================================================================
 * §15  MOTION
 * ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .rn-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 500ms var(--rn-ease), transform 500ms var(--rn-ease);
    }
    .rn-reveal.is-visible { opacity: 1; transform: none; }
    /* Stagger children by index — set --i in the markup */
    .rn-reveal[style*="--i"] { transition-delay: calc(var(--i) * 60ms); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* =====================================================================
 * §16  MEMBERS / ADMIN PANEL
 * ---------------------------------------------------------------------
 * The panel shares the public palette. Layout-specific dimensions stay
 * overridable per layout via --rn-sidebar-w / --rn-topnav-h.
 * ===================================================================== */
:root {
    --rn-sidebar-w: 250px;
    --rn-topnav-h: 60px;
}

.rn-panel-topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: var(--rn-topnav-h);
    display: flex;
    align-items: center;
    background: rgba(5, 7, 15, .92);
    border-bottom: 1px solid var(--rn-border);
}
@supports (backdrop-filter: blur(12px)) {
    .rn-panel-topnav { backdrop-filter: blur(14px) saturate(140%); }
}

.rn-panel-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1020;
    width: var(--rn-sidebar-w);
    padding-top: var(--rn-topnav-h);
    background: #0B0E1A;
    border-right: 1px solid var(--rn-border);
    overflow-y: auto;
}
.rn-panel-sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1.25rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--rn-text-muted);
    border-radius: 0;
}
.rn-panel-sidebar .nav-link:hover { color: var(--rn-text); background: rgba(255, 255, 255, .04); }
.rn-panel-sidebar .nav-link.active { color: #fff; background: rgba(139, 49, 232, .14); }
/* Gradient indicator bar on the active item */
.rn-panel-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--rn-grad-cta);
}
.rn-panel-heading {
    padding: 1.25rem 1.25rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
}

.rn-panel-main { padding-top: var(--rn-topnav-h); }
@media (min-width: 992px) {
    .rn-panel-main { margin-left: var(--rn-sidebar-w); }
}
/* Below lg the sidebar becomes an offcanvas, so no content offset */
@media (max-width: 991.98px) {
    .rn-panel-sidebar { transform: translateX(-100%); transition: transform var(--rn-dur) var(--rn-ease); }
    .rn-panel-sidebar.is-open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .7); }
}

/* Panel data tables */
.rn-table { width: 100%; font-size: .875rem; }
.rn-table th {
    padding: .75rem 1rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* muted, not dim: 11px uppercase needs the headroom (7.9:1 on bg-alt) */
    color: var(--rn-text-muted);
    background: var(--rn-bg-alt);
    white-space: nowrap;
}
.rn-table td { padding: .875rem 1rem; border-top: 1px solid var(--rn-border); vertical-align: middle; }
.rn-table tbody tr:hover td { background: rgba(255, 255, 255, .02); }
/* Tables are the one place a horizontal scroll is acceptable — wrap
 * them in .rn-table-wrap so the page body itself never scrolls */
.rn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Drag-to-reorder rows (raise-next.js §12) */
.rn-drag-handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 6px; background: transparent;
    color: var(--rn-text-dim); cursor: grab;
}
.rn-drag-handle:hover,
.rn-drag-handle:focus-visible { color: var(--rn-text); background: rgba(255, 255, 255, .06); }
.rn-drag-handle:active { cursor: grabbing; }
.rn-table tr.is-dragging { opacity: .45; }
.rn-table tr.is-dragging td { background: rgba(255, 255, 255, .04); }

/* Status chips */
.rn-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .625rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--rn-radius-pill);
    border: 1px solid currentColor;
    white-space: nowrap;
}
.rn-chip--draft { color: var(--rn-text-dim); }
.rn-chip--pending { color: #F5B54A; }
.rn-chip--success { color: #34D399; }
.rn-chip--danger { color: #FF8A6B; }
.rn-chip--info { color: var(--rn-cyan); }
.rn-chip--violet { color: #A78BFA; }

/* EN | FR tab pair used on every translatable admin field.
 * Below lg the two languages are tabbed (JS toggles [hidden]); from lg both
 * panes show side by side, so the hidden attribute is overridden. */
@media (min-width: 992px) {
    [data-rn-lang-pane][hidden] { display: block !important; }
}
.rn-lang-tabs { display: inline-flex; gap: .25rem; margin-bottom: .5rem; }
.rn-lang-tabs button {
    padding: .25rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rn-text-dim);
    background: transparent;
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-sm);
}
.rn-lang-tabs button.is-active { color: #fff; background: rgba(139, 49, 232, .30); border-color: var(--rn-border-strong); }


/* =====================================================================
 * §17  UTILITIES
 * ===================================================================== */
.rn-stack-sm > * + * { margin-top: .5rem; }
.rn-stack > * + * { margin-top: 1rem; }
.rn-stack-lg > * + * { margin-top: 1.75rem; }
.rn-tabular { font-variant-numeric: tabular-nums; }
.rn-nowrap { white-space: nowrap; }
.rn-z1 { position: relative; z-index: 1; }
.rn-divider { height: 1px; background: var(--rn-border); border: 0; margin: 0; }
.rn-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Honeypot trap container (Config\Honeypot::$containerId) on /apply and
   /contact. Hidden here rather than by the framework's <style nonce="…">
   injection: a nonce in style-src-elem switches 'unsafe-inline' off, which
   blocked the GetTerms banner's own <style> elements. See App\Honeypot\Honeypot. */
#hpc { display: none !important; }


/* =====================================================================
 * §18  AUTH SHELL
 * ---------------------------------------------------------------------
 * Split-screen chrome for the auth pages (login, register, 2FA, password
 * reset), rendered by layouts/auth.php only: branding panel on the left
 * (hidden under 992px, replaced by .rn-auth-mobile-brand above the card),
 * form panel on the right with the language switcher pinned top-right.
 * The tab switcher (.rn-auth-tabs) and the social sign-in placeholders
 * (.rn-social) appear on login/register only.
 * ===================================================================== */
.rn-auth {
    display: flex;
    min-height: 100dvh;
}

/* --- Left branding panel --------------------------------------------- */
.rn-auth-brand {
    position: relative;
    flex: 0 0 44%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
    background: linear-gradient(160deg, var(--rn-bg-alt) 0%, var(--rn-bg) 100%);
}
/* Decorative glow blobs, clipped by the panel */
.rn-auth-brand::before,
.rn-auth-brand::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.rn-auth-brand::before {
    top: -30%; right: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(139, 49, 232, .16), transparent 70%);
}
.rn-auth-brand::after {
    bottom: -20%; left: -15%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(6, 196, 228, .10), transparent 70%);
}
.rn-auth-brand-content {
    position: relative;
    z-index: 1;
    max-width: 24rem;
    text-align: center;
}
.rn-auth-brand-content .rn-brand { margin-bottom: 2.25rem; }
.rn-auth-brand-content .rn-brand-text { font-size: 1.5rem; }
.rn-auth-tagline {
    font-family: var(--rn-font-heading);
    font-size: 2rem;               /* keeps the .rn-grad-text span at 32px+ */
    font-weight: 700;
    line-height: 1.25;
    color: var(--rn-text);
    margin-bottom: .875rem;
}
.rn-auth-brand-sub {
    margin-bottom: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--rn-text-muted);
}
/* Static decoration (dot 1 "active") — nothing rotates these */
.rn-auth-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.5rem;
}
.rn-auth-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}
.rn-auth-dots span.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--rn-violet);
}

/* --- Right form panel ------------------------------------------------ */
.rn-auth-panel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 1.25rem 3rem;   /* top clears the absolute topbar */
}
.rn-auth-topbar {
    position: absolute;
    top: 1.25rem; right: 1.5rem;
    z-index: 2;
}

/* Single column the card, alerts and footer microcopy all share */
.rn-auth-card { width: min(100%, 28.5rem); }
.rn-auth-card .rn-card { box-shadow: var(--rn-shadow-card), var(--rn-glow-sm); }

/* Compact lockup shown above the card once the panel is hidden */
.rn-auth-mobile-brand {
    display: none;
    margin-bottom: 1.5rem;
    text-align: center;
}

.rn-auth-home { margin: 1.75rem 0 0; text-align: center; }
.rn-auth-home a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--rn-text-dim);
}
.rn-auth-home a:hover { color: var(--rn-text); }

/* --- Login | Register switcher (links; active set server-side) ------- */
.rn-auth-tabs {
    display: flex;
    padding: 4px;
    margin-bottom: 1.5rem;
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius-pill);
}
.rn-auth-tabs a {
    flex: 1;
    padding: .55rem 1rem;
    border-radius: var(--rn-radius-pill);
    font-size: .875rem;
    font-weight: 600;
    text-align: center;
    color: var(--rn-text-muted);
    transition: color var(--rn-dur) var(--rn-ease),
                background-color var(--rn-dur) var(--rn-ease);
}
.rn-auth-tabs a:hover { color: var(--rn-text); }
/* Same fill as .rn-lang-tabs — the contrast-checked combo */
.rn-auth-tabs a.is-active { color: #fff; background: rgba(139, 49, 232, .30); }

/* --- Social sign-in placeholders — raise-next.js §13 ------------------ */
.rn-social { display: flex; gap: .75rem; margin-bottom: 1.25rem; }
.rn-social-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;                      /* touch target */
    padding: .55rem .75rem;
    border: 1px solid var(--rn-border-control);
    border-radius: var(--rn-radius);
    background: var(--rn-surface-2);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--rn-text);
    transition: border-color var(--rn-dur) var(--rn-ease),
                box-shadow var(--rn-dur) var(--rn-ease);
}
.rn-social-btn:hover,
.rn-social-btn:focus-visible {
    border-color: var(--rn-border-strong);
    box-shadow: var(--rn-glow-sm);
}
.rn-social-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.rn-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: .78rem;
    color: var(--rn-text-dim);
}
.rn-auth-divider::before,
.rn-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rn-border-plain);
}

/* --- Live password checklist — raise-next.js §14 ---------------------- */
.rn-pw-checklist {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem .75rem;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .8125rem;
    color: var(--rn-text-dim);
}
.rn-pw-checklist li {
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: color var(--rn-dur) var(--rn-ease);
}
.rn-pw-checklist li.ok { color: var(--rn-cyan); }

.rn-auth-footer {
    margin: 1.25rem 0 0;
    font-size: .875rem;
    text-align: center;
    color: var(--rn-text-dim);
}

/* Label + inline action ("Forgot password?") on one line */
.rn-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .4375rem;
}
.rn-label-row .rn-label { margin-bottom: 0; }
.rn-label-row a { font-size: .8125rem; }

/* One-time-code entry */
.rn-input--otp {
    text-align: center;
    letter-spacing: .5em;
    font-weight: 700;
    font-size: 1.25rem;
}

/* Password field with a visibility toggle — raise-next.js §10 */
.rn-input-group { position: relative; }
.rn-input-group .rn-input { padding-right: 3rem; }
.rn-input-toggle {
    position: absolute;
    top: 50%; right: .375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border: 0;
    border-radius: var(--rn-radius-sm);
    background: transparent;
    color: var(--rn-text-dim);
    font-size: 1.05rem;
}
.rn-input-toggle:hover,
.rn-input-toggle:focus-visible { color: var(--rn-text); }

/* --- Auth shell responsive ------------------------------------------- */
@media (max-width: 991.98px) {
    .rn-auth-brand { display: none; }
    .rn-auth-mobile-brand { display: block; }
    .rn-auth-panel { padding: 4.5rem 1.25rem 2.5rem; }
}
@media (max-width: 575.98px) {
    .rn-social { flex-direction: column; }
    .rn-auth-topbar { top: .875rem; right: 1rem; }
    .rn-pw-checklist { grid-template-columns: 1fr; }
}


/* =====================================================================
 * §19  SALES COUNTDOWN BANNER
 * ---------------------------------------------------------------------
 * Full-width strip under the sticky header on home, tickets and
 * speakers while ticket sales are upcoming. Digits are ticked by
 * initCountdown() (raise-next.js §15); at zero the JS unhides the
 * pre-rendered .rn-cd-open state. Digit cells ride .rn-tabular so the
 * once-a-second updates never reflow the row.
 * ===================================================================== */
.rn-countdown {
    position: relative;
    background:
        linear-gradient(90deg, rgba(139, 49, 232, .12), rgba(30, 134, 222, .06) 55%, rgba(6, 196, 228, .10)),
        var(--rn-bg-alt);
    border-bottom: 1px solid var(--rn-border-strong);
    padding: 1rem 0;
    overflow: hidden;
}
/* Gradient hairline along the top edge, echoing the CTA ramp */
.rn-countdown::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--rn-grad-cta);
}

.rn-cd-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}
.rn-cd-info { min-width: 0; }
.rn-cd-opens {
    font-size: var(--rn-fs-sm);
    color: var(--rn-text-muted);
}

.rn-cd-timer {
    display: flex;
    gap: .5rem;
}
.rn-cd-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.375rem;
    padding: .5rem .375rem .4375rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--rn-border-strong);
    border-radius: var(--rn-radius);
    box-shadow: var(--rn-glow-sm);
}
.rn-cd-num {
    display: block;
    font-family: var(--rn-font-heading);
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--rn-text);
}
.rn-cd-lbl {
    margin-top: .125rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rn-text-dim);
}

.rn-cd-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    flex: 1 1 100%;
}
.rn-cd-blurb {
    flex-basis: 100%;
    font-size: var(--rn-fs-sm);
    color: var(--rn-text-muted);
}
.rn-cd-form .rn-input { flex: 1 1 220px; min-width: 0; }

.rn-cd-open {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .75rem 1.25rem;
    padding: .25rem 0;
}
.rn-cd-open-msg {
    font-family: var(--rn-font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
}

/* From lg the three blocks share one row; the form stops full-bleeding */
@media (min-width: 992px) {
    .rn-cd-form { flex: 0 1 420px; }
}
/* On phones the four tiles spread evenly across the row */
@media (max-width: 575.98px) {
    .rn-cd-timer { width: 100%; }
    .rn-cd-tile { flex: 1 1 0; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Live pulse on the pill dot — modifier only: the plain .rn-pill-dot
       is shared with the home hero pill and must stay still there. */
    @keyframes rn-cd-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50%      { transform: scale(1.35); opacity: .55; }
    }
    .rn-pill-dot--pulse { animation: rn-cd-pulse 2s var(--rn-ease) infinite; }

    /* Digit change — retriggered by JS via .is-tick */
    @keyframes rn-cd-tick {
        from { transform: translateY(-5px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
    .rn-cd-num.is-tick { animation: rn-cd-tick 260ms var(--rn-ease); }
}