/* Homepage styling. Dark/red theme on the brand accent
   site's visual language, own layout. Real design pass (imagery, final
   brand identity) still pending Dustin's background images. */

/* One display face, one weight, self-hosted: headings and the big numbers.
   Body text stays on the system stack. */
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/assets/fonts/inter-tight-800.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1, h2, h3,
.site-stat-num,
.site-testimonial-figure,
.pv-stat-num {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* These map onto the funnel tokens rather than restating them. That is what
   keeps these pages on the site theme and the brand accent: a second hard-coded
   palette here is exactly how the old orange survived unnoticed. The literals
   are fallbacks for the case where funnel.css is not on the page. */
:root {
    --site-bg: var(--fn-surface, #ffffff);
    --site-bg-alt: var(--fn-bg, #f4f5f7);
    --site-bg-alt-2: var(--fn-surface-alt, #e9eaee);
    --site-dark: var(--fn-brand-bar, #0d0e11);
    --site-dark-alt: #16181d;
    --site-text: var(--fn-text, #1a1d23);
    --site-text-muted: var(--fn-text-muted, #6b7280);
    --site-text-on-dark: #f4f5f7;
    --site-text-on-dark-muted: #9aa1ac;
    --site-accent: var(--fn-accent, #d60a12);
    --site-accent-hover: var(--fn-accent-hover, #0aa3c7);
    --site-border: var(--fn-border, #e2e4e9);
    --site-border-on-dark: #2a2d34;
    /* Semantic colours used by the dashboard illustration and the footer. */
    --site-on-accent: var(--fn-on-accent, #14161a);
    --site-success: #10b981;
    --site-success-soft: #e8f8f0;
    --site-highlight-soft: var(--fn-accent-tint, #e6f4f8);
    --site-link-on-dark: #d7dae0;
}

/* ── Drop-in reveal ──────────────────────────────────────────────── */

html.rq-anim .reveal-group > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

html.rq-anim .reveal-group > :nth-child(2) { transition-delay: 0.12s; }
html.rq-anim .reveal-group > :nth-child(3) { transition-delay: 0.24s; }
html.rq-anim .reveal-group > :nth-child(4) { transition-delay: 0.36s; }
html.rq-anim .reveal-group > :nth-child(5) { transition-delay: 0.48s; }
html.rq-anim .reveal-group > :nth-child(6) { transition-delay: 0.58s; }
html.rq-anim .reveal-group > :nth-child(7) { transition-delay: 0.66s; }
html.rq-anim .reveal-group > :nth-child(n+8) { transition-delay: 0.72s; }

html.rq-anim .reveal-group.is-visible > * {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.rq-anim .reveal-group > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--site-text);
    background: var(--site-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    line-height: 1.2;
}

/* ── Nav ─────────────────────────────────────────────────────────── */

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 40px;
    background: var(--site-dark);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

/* Solid until the bar's own slot has scrolled out of view, then frosted.
   Going translucent any earlier shows the light page background through
   the bar for the first 80px of scroll. */
.site-nav.is-scrolled {
    background: color-mix(in srgb, var(--site-dark) 86%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.site-logo {
    font-weight: 800;
    font-size: 21px;
    text-decoration: none;
    color: #fff;
    letter-spacing: -0.02em;
    display: inline-block;
}

.site-logo-img {
    height: 44px;
    width: auto;
    display: block;
}

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

.site-nav nav a {
    color: var(--site-text-on-dark-muted);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.15s ease;
}

.site-nav nav a:hover {
    color: #fff;
}

.site-nav-minimal {
    justify-content: center;
}

/* Long pages get a call to action in the sticky bar: logo left, button
   right. Pages mid-flow (schedule, apply, contact) keep the centered logo. */
.site-nav-cta-short {
    display: none;
}

@media (max-width: 640px) {
    .site-nav-cta-full {
        display: none;
    }

    .site-nav-cta-short {
        display: inline;
    }

    .site-nav-minimal.has-cta .site-btn {
        white-space: nowrap;
    }
}

.site-nav-minimal.has-cta {
    justify-content: space-between;
}

/* The faint accent stitch between dark sections on the two long pages,
   where every seam is dark meeting dark. Not on the seam under the hero. */
.pv-section,
.pv-stats-section,
.pv-final-cta,
.ac-section,
.ac-cta-section {
    position: relative;
}

.pv-section::before,
.pv-final-cta::before,
.ac-section::before,
.ac-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--site-accent) 55%, transparent) 50%, transparent);
}

.pv-hero + *::before,
.ac-hero + *::before {
    display: none;
}

@media (max-width: 640px) {
    .site-nav {
        padding: 14px 20px;
    }

    .site-nav nav {
        display: none;
    }

    .site-nav .site-btn {
        padding: 8px 14px;
        font-size: 13px;
    }
}

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

.site-btn {
    display: inline-block;
    padding: 12px 22px;
    background: var(--site-accent);
    color: var(--site-on-accent);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--site-accent) 35%, transparent);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* The shadow grows with the lift, so the button reads as coming off the
   page rather than nudging. Press snaps it back down. */
.site-btn:hover {
    background: var(--site-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--site-accent) 45%, transparent);
}

.site-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--site-accent) 35%, transparent);
    transition-duration: 0.06s;
}

.site-btn:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 3px;
}

/* Only the hero button carries an arrow: it is the one that starts the
   funnel, so it gets the extra signal and the section buttons stay plain. */
.site-btn-arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.15s ease;
}

.site-btn:hover .site-btn-arrow {
    transform: translateX(3px);
}

.site-btn-large {
    padding: 16px 32px;
    font-size: 16px;
}

.site-btn-on-accent {
    background: var(--site-dark);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.site-btn-on-accent:hover {
    background: var(--site-dark-alt);
}

/* ── Hero ────────────────────────────────────────────────────────── */

.site-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    text-align: left;
    padding: 90px 40px;
    width: 100%;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(13, 14, 17, 0.88), rgba(13, 14, 17, 0.94));
    color: var(--site-text-on-dark);
}

/* Four numbers in a slim strip under the
   hero so the homepage has its proof above the fold. */
.site-stats {
    background: var(--site-dark-alt);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 26px 40px;
    color: var(--site-text-on-dark);
}

.site-stats-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.site-stat {
    text-align: center;
}

.site-stat-num {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--site-accent);
}

.site-stat-label {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--site-text-on-dark-muted);
}

@media (max-width: 640px) {
    .site-stats {
        padding: 22px 20px;
    }

    .site-stats-inner {
        grid-template-columns: 1fr 1fr;
        gap: 18px 12px;
    }

    .site-stat-num {
        font-size: 26px;
    }
}

/* Two atmosphere layers over the photo: a warm light from the ceiling,
   matching the lamp in the warehouse image, and a faint dot field that
   fades out toward the fold. */
.site-hero::before,
.site-hero::after,
.pv-hero::before,
.pv-hero::after,
.ac-hero::before,
.ac-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pv-hero,
.ac-hero {
    position: relative;
}

.pv-hero > *,
.ac-hero > * {
    position: relative;
    z-index: 1;
}

.site-hero::before,
.pv-hero::before,
.ac-hero::before {
    background: radial-gradient(
        ellipse 820px 560px at 40% -8%,
        color-mix(in srgb, var(--site-accent) 18%, transparent),
        color-mix(in srgb, var(--site-accent) 6%, transparent) 42%,
        transparent 70%
    );
}

.site-hero::after,
.pv-hero::after,
.ac-hero::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 92%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 92%);
}

.site-hero-text,
.site-hero-image {
    position: relative;
    z-index: 1;
}

.site-hero-text {
    max-width: 620px;
}

.site-hero h1 {
    font-size: 58px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.04;
    margin: 0 0 24px;
    color: #fff;
}

.site-hero h1 .site-accent-text {
    color: var(--site-accent);
}

/* Warm left-to-right sheen on every hero's accent phrase, so the three
   heroes read as siblings. It lifts to a lighter accent and stops before
   it turns pale, so the last word is still the brand color. Defined once
   here rather than per page: the same phrase class is reused for
   testimonial figures, which stay flat, so the treatment is keyed on the
   hero context instead. The plain color is set first and remains the
   answer wherever background-clip: text is unsupported. */
.site-hero h1 .site-accent-text,
.pv-hero h1 .site-accent-text,
.ac-hero h1 .site-accent-text {
    color: var(--site-accent);
    background: linear-gradient(100deg, var(--site-accent) 0%, var(--site-accent-hover) 60%, #ffcf6b 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .site-hero h1 .site-accent-text,
    .pv-hero h1 .site-accent-text,
    .ac-hero h1 .site-accent-text {
        color: transparent;
    }
}

.site-hero p {
    color: var(--site-text-on-dark-muted);
    font-size: 20px;
    margin-bottom: 28px;
}

.site-trustpilot-badge {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 4px 0 30px;
}

.site-hero-image {
    max-width: 420px;
    width: 100%;
    height: auto;
    align-self: flex-end;
    margin-bottom: -90px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
    /* The wrist fades into the hero instead of stopping flat against the
       stat strip below, which exposed the image's hard crop. */
    -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
}

/* ── Video + Why Choose Us ───────────────────────────────────────── */

.site-video-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    max-width: 100%;
    padding: 0 40px 90px;
    flex-wrap: wrap;
    text-align: left;
    background: var(--site-dark);
    color: var(--site-text-on-dark);
}

.site-video-embed {
    flex: 1 1 560px;
    max-width: 680px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.site-video-copy {
    flex: 1 1 320px;
    max-width: 400px;
    text-align: left;
}

.site-video-copy h2 {
    text-align: left;
    color: #fff;
    font-size: 34px;
    margin: 0 0 20px;
}

.site-video-copy p {
    color: var(--site-text-on-dark-muted);
    font-size: 18px;
    margin-bottom: 0;
}

/* The paragraph's bottom margin and the section button's top margin were
   stacking to 52px, which left the button floating in the column. */
.site-video-copy a.site-btn {
    margin-top: 24px;
}

.site-owners-strip {
    max-width: 340px;
    width: 100%;
    height: auto;
    margin: 0 0 22px;
    display: block;
}

@media (max-width: 640px) {
    .site-hero,
    .site-video-section {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }

    .site-hero-text,
    .site-video-copy {
        text-align: center;
        margin: 0 auto;
    }

    .site-hero h1 {
        font-size: 28px;
    }

    .site-hero p {
        font-size: 15px;
    }

    .site-owners-strip,
    .site-trustpilot-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .site-video-copy h2 {
        text-align: center;
        font-size: 26px;
    }
}

/* ── As Seen On ──────────────────────────────────────────────────── */

.site-as-seen-on {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 200px;
    text-align: center;
    padding: 40px 24px;
    background: var(--site-bg);
}

.site-as-seen-on > p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--site-text-muted);
    margin: 0;
}

.site-logo-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 28px;
}

.site-logo-strip img {
    height: 28px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    opacity: 0.7;
    filter: grayscale(1);
    transition: opacity 0.15s ease;
}

.site-logo-strip img:hover {
    opacity: 1;
}

/* ── Apply form section ──────────────────────────────────────────── */

/* Specific enough to beat the generic section padding that follows it;
   the extra bottom room is for the dashboard's floating cards. */
.site-section.site-apply-section {
    max-width: 820px;
    padding: 70px 24px 130px;
}

/* ── Generic sections ────────────────────────────────────────────── */

.site-section {
    padding: 80px 24px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.site-section > *:first-child,
.site-section-alt > *:first-child {
    margin-top: 0;
}

.site-section > *:last-child,
.site-section-alt > *:last-child {
    margin-bottom: 0;
}

.site-section-alt {
    background: var(--site-dark);
    color: var(--site-text-on-dark);
    max-width: 100%;
}

.site-section-shade {
    background: var(--site-bg-alt-2);
    max-width: 100%;
}

.site-team-intro {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.site-section-alt h2 {
    color: #fff;
}

.site-section-alt > p {
    color: var(--site-text-on-dark-muted);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.site-section h2 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
}

/* Accent rule under each section's own heading (not the quiz questions,
   which sit deeper in the card). Centered, since every direct section
   heading on the homepage is. */
.site-section > h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--site-accent);
    margin: 14px auto 0;
}

.site-eyebrow {
    color: var(--site-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

/* A heading under an eyebrow drops its default top margin, or the label
   floats 30px above the title it belongs to. */
.site-eyebrow + h2 {
    margin-top: 0;
}

/* Re-asserted here: .site-section's max-width would otherwise win the
   cascade over these earlier rules (same specificity, later wins). */
.site-apply-section {
    max-width: 820px;
}

.site-video-section {
    max-width: 100%;
}

.site-apply-lead {
    color: var(--site-text-muted);
    margin-bottom: 28px;
}

/* ── Testimonials ────────────────────────────────────────────────── */

.site-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 36px 0;
}

.site-card {
    background: #fff;
    border: 1px solid var(--site-border);
    border-radius: 14px;
    padding: 28px;
    max-width: 340px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.site-section-alt .site-card {
    background: var(--site-dark-alt);
    border-color: var(--site-border-on-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Result first, quote second, person last: the number is the headline,
   the quote is clamped with an in-place expander so it stays verbatim,
   and the photo signs the card at the bottom. */
.site-testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px 24px;
}

.site-testimonial-mark {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 44px;
    height: 44px;
    color: var(--site-accent);
    opacity: 0.18;
    pointer-events: none;
}

.site-testimonial-figure {
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--site-accent);
}

.site-testimonial-label {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--site-text-on-dark-muted);
}

.site-testimonial-quote {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--site-text-on-dark-muted);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-testimonial.is-open .site-testimonial-quote {
    display: block;
    -webkit-line-clamp: unset;
}

.site-testimonial-more {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--site-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.site-testimonial-more:hover,
.site-testimonial-more:focus-visible {
    text-decoration: underline;
    outline: none;
}

.site-testimonial-more[hidden] {
    display: none;
}

.site-testimonial-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--site-border-on-dark);
}

.site-testimonial-photo {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--site-accent);
}

.site-testimonial-name {
    font-weight: 700;
    font-size: 15px;
}

.site-testimonial-role {
    font-size: 13px;
    color: var(--site-text-on-dark-muted);
}

/* Outranks the section's own paragraph width so the two lines balance. */
.site-section-alt > .site-disclaimer {
    font-size: 15px;
    color: var(--site-text-on-dark-muted);
    max-width: 540px;
    margin: 20px auto;
    text-wrap: balance;
}

/* Cards keep their own height, so opening one quote does not stretch the
   other two into empty space. The four-line clamp keeps them level when
   closed. */
#results .site-cards {
    align-items: flex-start;
}

/* ── Chart / team section ────────────────────────────────────────── */

/* Our own chart, drawn in the page: crisp at any size and recolors with
   the accent token. Hatched bars mark the projected years. */
.site-chart {
    max-width: 700px;
    width: 100%;
    margin: 20px auto 8px;
    overflow-x: auto;
}

/* Eleven bars with values need about 560px to stay readable; below that
   the chart scrolls sideways instead of shrinking its labels to nothing. */
.site-chart-svg {
    display: block;
    width: 100%;
    min-width: 560px;
    height: auto;
}

.site-chart-grid {
    stroke: rgba(20, 22, 26, 0.08);
}

.site-chart-value {
    font-size: 13px;
    font-weight: 700;
    fill: var(--site-text);
}

.site-chart-year {
    font-size: 12px;
    fill: var(--site-text-muted);
}

.site-chart figcaption {
    margin-top: 6px;
    font-size: 13px;
    color: var(--site-text-muted);
    text-align: center;
    text-wrap: balance;
}

/* Caption, takeaway sentence, button: three distinct beats, not one block. */
.site-chart + p {
    margin: 28px auto 0;
}

.site-section .site-chart + p + a.site-btn {
    margin-top: 32px;
}

/* Our own dashboard under the quiz, drawn in the page instead of a PNG:
   crisp at any size, recolors with the accent token, and the eBay clone
   inherits it. Sample figures, captioned on the page. */
.site-dash-wrap {
    position: relative;
    max-width: 820px;
    margin: 56px auto 0;
    text-align: left;
}

.site-dash {
    position: relative;
    overflow: hidden;
    background: var(--site-dark);
    color: var(--site-text-on-dark);
    border-radius: 18px;
    padding: 26px 28px 24px;
    box-shadow: 0 30px 80px rgba(13, 14, 17, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.04);
}

.site-dash::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 520px 260px at 18% 0%, color-mix(in srgb, var(--site-accent) 14%, transparent), transparent 70%);
}

.site-dash-top,
.site-dash-grid {
    position: relative;
}

.site-dash-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.site-dash-store {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-dash-store b {
    display: block;
    font-size: 15px;
}

.site-dash-store small {
    display: block;
    font-size: 12px;
    color: var(--site-text-on-dark-muted);
}

.site-dash-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--site-dark-alt);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
    color: var(--site-accent);
    flex: 0 0 auto;
}

.site-dash-mark svg {
    width: 20px;
    height: 20px;
}

.site-dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--site-text-on-dark-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 12px;
}

.site-dash-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--site-success);
}

.site-dash-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
}

.site-dash-card {
    background: var(--site-dark-alt);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 18px 20px;
}

.site-dash-card--tight {
    padding: 14px 16px;
}

.site-dash-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--site-text-on-dark-muted);
}

.site-dash-big {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 6px 0 2px;
}

.site-dash-delta {
    font-size: 13px;
    font-weight: 600;
    color: var(--site-success);
}

.site-dash-chart {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 14px;
}

.site-dash-gridlines line {
    stroke: rgba(255, 255, 255, 0.06);
}

.site-dash-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--site-text-on-dark-muted);
}

.site-dash-kpis {
    display: grid;
    gap: 12px;
}

.site-dash-kpi {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 14px;
    background: var(--site-dark-alt);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.site-dash-kpi span {
    font-size: 13px;
    color: var(--site-text-on-dark-muted);
}

.site-dash-kpi b {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.site-dash-accent {
    color: var(--site-accent);
}

.site-dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 46px;
    margin-top: 12px;
}

.site-dash-bars i {
    flex: 1;
    display: block;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--site-accent) 55%, transparent), var(--site-accent));
}

.site-dash-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--site-text);
    box-shadow: 0 18px 40px rgba(13, 14, 17, 0.22);
}

.site-dash-float--chip {
    left: -22px;
    bottom: -30px;
    padding: 10px 14px;
    border-radius: 12px;
    gap: 10px;
    font-size: 12px;
}

.site-dash-float--chip b {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--site-accent);
}

.site-dash-float--card {
    right: -18px;
    bottom: -38px;
    width: 250px;
    padding: 14px 16px;
    border-radius: 14px;
}

.site-dash-float--card b {
    display: block;
    font-size: 14px;
}

.site-dash-float--card small {
    display: block;
    font-size: 12px;
    color: var(--site-text-muted);
}

.site-dash-badge {
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex: 0 0 auto;
}

.site-dash-badge svg {
    width: 15px;
    height: 15px;
}

.site-dash-badge--up {
    width: 28px;
    height: 28px;
    background: var(--site-highlight-soft);
    color: var(--site-accent);
}

.site-dash-badge--ok {
    width: 34px;
    height: 34px;
    background: var(--site-success-soft);
    color: var(--site-success);
}

.site-dash-badge--ok svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .site-dash-wrap {
        margin-top: 40px;
    }

    .site-dash {
        padding: 20px 18px;
    }

    .site-dash-grid {
        grid-template-columns: 1fr;
    }

    .site-dash-big {
        font-size: 32px;
    }

    .site-dash-float {
        display: none;
    }
}

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

.site-section details {
    text-align: left;
    max-width: 620px;
    margin: 0 auto 12px;
    border: 1px solid var(--site-border);
    border-radius: 14px;
    padding: 18px 22px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-section details[open] {
    border-color: var(--site-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--site-accent) 12%, transparent);
}

.site-section summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    list-style: none;
}

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

/* Stroke icon like every other icon on the site, not a text glyph. */
.site-section summary::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 14px;
    vertical-align: -1px;
    background-color: var(--site-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") left center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") left center / 14px 14px no-repeat;
}

.site-section details[open] summary::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.site-section details p {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--site-text-muted);
    font-size: 14px;
}

.site-section a.site-btn {
    margin-top: 28px;
}

/* ── Media mentions ──────────────────────────────────────────────── */

.site-media-grid {
    column-count: 2;
    column-gap: 20px;
    max-width: 760px;
    margin: 36px auto 0;
    text-align: left;
}

.site-media-tile {
    display: block;
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid var(--site-border-on-dark);
    overflow: hidden;
}

.site-media-tile img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .site-media-grid {
        column-count: 1;
    }
}

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

.site-footer {
    position: relative;
    overflow: hidden;
    padding: 64px 40px 32px;
    color: var(--site-text-on-dark-muted);
    background: var(--site-dark);
    border-top: 1px solid var(--site-border-on-dark);
    text-align: left;
}

/* The hero's light source, mirrored: warm light rising from the bottom
   edge and the dot field fading upward, so the page opens and closes the
   same way. */
.site-footer::before,
.site-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-footer::before {
    background: radial-gradient(
        ellipse 900px 420px at 50% 108%,
        color-mix(in srgb, var(--site-accent) 16%, transparent),
        color-mix(in srgb, var(--site-accent) 5%, transparent) 45%,
        transparent 72%
    );
}

.site-footer::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 92%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 92%);
}

.site-footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1096px;
    margin: 0 auto;
}

.site-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.site-footer-logo {
    height: 40px;
    width: auto;
    display: block;
}

.site-footer-tagline {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.55;
    max-width: 300px;
}

.site-footer-cta {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--site-accent);
    text-decoration: none;
}

.site-footer-cta:hover {
    text-decoration: underline;
}

.site-footer-col h4 {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-accent);
}

.site-footer-col a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: var(--site-link-on-dark);
    text-decoration: none;
}

.site-footer-col a:hover {
    color: #fff;
}

/* Equal space on both sides, so the rule reads as a boundary between the
   two halves rather than the legal block's own top border. */
.site-footer-rule {
    height: 1px;
    margin: 36px 0;
    background: var(--site-border-on-dark);
}

.site-footer-legal {
    columns: 2;
    column-gap: 40px;
    font-size: 12px;
    line-height: 1.6;
}

.site-legal {
    margin: 0 0 12px;
    break-inside: avoid;
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--site-border-on-dark);
    font-size: 13px;
}

.site-footer-bottom a {
    color: var(--site-link-on-dark);
    text-decoration: none;
}

.site-footer-bottom a:hover {
    color: #fff;
}

@media (max-width: 760px) {
    .site-footer {
        padding: 48px 24px 28px;
    }

    .site-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }

    .site-footer-legal {
        columns: 1;
    }

    .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Utility classes: the CSP forbids inline style attributes, so one-off layout hints live here. */
.u-cell { padding: 8px 4px; }
.u-cell--actions { padding: 8px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.u-w-auto { width: auto; }
.u-w-full { width: 100%; }
.u-check { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.u-check--tight { margin-bottom: 0; }
.u-offscreen { position: absolute; left: -9999px; }
.u-inline { display: inline; }
.u-fw-normal { font-weight: normal; }
.u-th { text-align: left; border-bottom: 1px solid var(--rq-border); }
.u-row { border-bottom: 1px solid var(--rq-border); }
.u-btn-xs { padding: 2px 8px; font-size: 13px; }
.u-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.u-table--mb { margin-bottom: 16px; }
.u-fs-13 { font-size: 13px; }
.u-fs-95 { font-size: 0.95rem; }
.u-mono { font-family: monospace; }
.u-mt-10 { margin-top: 10px; }
.u-mt-18 { margin-top: 18px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-0 { margin-bottom: 0; }
.u-pull-up { margin: -6px 0 14px; }
.u-muted-14 { font-size: 14px; color: var(--rq-text-muted); }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-6 { display: flex; gap: 6px; align-items: center; }
.u-inline-block-center { display: inline-block; text-align: center; text-decoration: none; }
.u-inline-block-mt { display: inline-block; margin-top: 12px; }