/* ==========================================================================
   THEME — 05 pages
   --------------------------------------------------------------------------
   Page-level compositions: the marketing hero with its mesh background and
   glass payout card, the stat band, the earning-method grid, the payout proof
   strip, the app/inner-page layout and the game hub.
   ========================================================================== */

/* --------------------------------------------------------------------- Hero */
.p-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-16) var(--sp-20);
    isolation: isolate;
}

/* Soft blurred colour blobs, as on the reference. Purely decorative, so the
   whole layer is hidden from assistive tech and skipped under reduced motion. */
.p-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.p-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Lighter touch in light mode: full-strength blobs over a near-white body
       smear colour across the headline. Dark mode overrides below. */
    opacity: .38;
    animation: p-float 10s var(--ease-in-out) infinite alternate;
}

.p-hero__blob--1 {
    width: 34rem;
    height: 34rem;
    top: -12rem;
    right: -6rem;
    background: var(--c-blue-300);
}

.p-hero__blob--2 {
    width: 28rem;
    height: 28rem;
    top: 8%;
    left: -10rem;
    background: var(--c-violet-300, #c4b5fd);
    animation-delay: -3s;
}

.p-hero__blob--3 {
    width: 24rem;
    height: 24rem;
    bottom: -10rem;
    right: 22%;
    background: var(--c-pink-300, #f9a8d4);
    animation-delay: -6s;
}

[data-theme="dark"] .p-hero__blob { opacity: .22; }

@keyframes p-float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-24px, 32px) scale(1.08); }
}

.p-hero__inner {
    display: grid;
    gap: var(--sp-12);
    align-items: center;
}

@media (min-width: 992px) {
    .p-hero__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-16);
    }
}

.p-hero__title {
    margin-bottom: var(--sp-5);
    font-size: clamp(2.25rem, 5.6vw, 3.5rem);
    line-height: 1.08;
}

.p-hero__lead {
    max-width: 32rem;
    margin-bottom: var(--sp-8);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: var(--lh-relaxed);
    color: var(--text-body);
}

.p-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
}

.p-hero__proof {
    /* Two fixed tracks, not auto-width flex children: the counters animate from
       0, so with flex the first block's width changes mid-count and shoves the
       second one sideways (CLS). 1fr columns absorb the change inside the
       track. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-6);
    align-items: center;
    margin-top: var(--sp-8);
    max-width: 26rem;
}

.p-hero__proof-value {
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.1;
}

.p-hero__proof-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Live status pill --------------------------------------------------------- */
.p-hero__status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: var(--bg-surface);
    backdrop-filter: blur(12px);
    box-shadow: var(--sh-sm);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-body);
}

.p-hero__dot {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--c-emerald-500);
    flex: none;
}

.p-hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c-emerald-400);
    animation: p-ping 1.8s var(--ease-out) infinite;
}

@keyframes p-ping {
    0%   { transform: scale(1);   opacity: .75; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Glass payout card -------------------------------------------------------- */
.p-hero__panel {
    position: relative;
    padding: var(--sp-8);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 2.5rem;
    backdrop-filter: blur(24px);
    box-shadow: var(--sh-xl);
    transition: transform var(--dur-slow) var(--ease-out);
}

.p-hero__panel:hover {
    transform: rotate(.5deg);
}

.p-hero__panel-tag {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid rgba(16, 185, 129, .3);
    border-radius: var(--r-pill);
    background: rgba(16, 185, 129, .1);
    color: var(--success-text);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.p-hero__panel-label {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-hero__panel-value {
    margin-bottom: var(--sp-6);
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.p-hero__panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.p-hero__panel-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    transition: box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.p-hero__panel-row:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}

.p-hero__panel-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--grad-brand);
    color: #fff;
    font-size: .8rem;
}

.p-hero__panel-row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-strong);
    font-weight: 600;
}

.p-hero__panel-row-amount {
    font-weight: 800;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Stat band */
.p-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
}

.p-stats__cell {
    padding: var(--sp-5);
    text-align: center;
    background: var(--bg-surface);
}

.p-stats__value {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.p-stats__label {
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
}

/* ------------------------------------------------------------ Earning methods */
.p-methods {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.p-method {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.p-method:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: var(--brand);
}

.p-method__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.p-method__text {
    color: var(--text-body);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.p-method__foot { margin-top: auto; }

/* --------------------------------------------------------------- Payout proof */
.p-proof {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.p-proof__card {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
}

.p-proof__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.p-proof__ref {
    padding: .2rem .55rem;
    border-radius: var(--r-xs);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.p-proof__amount {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.p-proof__meta {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ------------------------------------------------------------------ CTA band */
.p-cta {
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
    border-radius: var(--r-2xl);
    background: var(--grad-brand);
    background-size: 180% 180%;
    animation: grad-pan 14s var(--ease-in-out) infinite;
    box-shadow: var(--sh-xl);
}

.p-cta h2 { color: #fff; margin-bottom: var(--sp-3); }

.p-cta p {
    max-width: 34rem;
    margin: 0 auto var(--sp-6);
    color: rgba(255, 255, 255, .92);
}

/* --------------------------------------------------------- Announcement bar */
.p-announce {
    background: var(--grad-cta);
    color: #fff;
    font-size: var(--fs-sm);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* The bar renders visible, so a visitor without JavaScript still gets the
   message. The parser-blocking script below it adds .is-dismissed in the same
   task when this exact text was already dismissed, so it never flashes in, and
   the decision does not depend on app.js loading. */
.p-announce.is-dismissed { display: none; }

.p-announce__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 2.75rem;
    padding-block: var(--sp-2);
}

.p-announce__icon {
    flex: none;
    opacity: .9;
}

.p-announce__text { flex: 1; min-width: 0; }

/* The sanitizer allows block-level tags, so pasted copy can arrive wrapped in
   a <p>; that must not push the bar's padding around. */
.p-announce__text > :first-child { margin-top: 0; }
.p-announce__text > :last-child { margin-bottom: 0; }
.p-announce__text a { color: #fff; text-decoration: underline; }

.p-announce__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-pill);
    color: #fff;
    opacity: .85;
    transition: background-color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.p-announce__close:hover {
    background: rgba(255, 255, 255, .18);
    opacity: 1;
}

.p-announce__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ------------------------------------------------------- Featured method */
.p-spotlight {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    margin-top: var(--sp-10);
    padding: var(--sp-6) var(--sp-8);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-glow-brand);
}

.p-spotlight__icon {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.4rem;
}

.p-spotlight__body { flex: 1; min-width: 0; }

.p-spotlight__title {
    margin: var(--sp-2) 0 var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.p-spotlight__body p {
    margin: 0;
    color: var(--text-body);
    font-size: var(--fs-sm);
    max-width: 46rem;
}

.p-spotlight .t-btn { flex: none; }

@media (max-width: 767.98px) {
    .p-spotlight {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
        padding: var(--sp-6);
    }
    .p-spotlight .t-btn { width: 100%; }
}

/* ------------------------------------------------------- Revenue shares */
/* The "How it works" sub-head sits between the stat band and the cards. */
.p-shares__heading {
    margin: var(--sp-12) 0 var(--sp-6);
    text-align: center;
}

.p-shares {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* --------------------------------------------------------- Payout marquee */
.p-marquee {
    overflow: hidden;
    /* Fade the ends so cards enter and leave instead of being cut off. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    padding-block: var(--sp-2);
}

/* No gap on the track: the two groups must be exactly the same width for the
   -50% keyframe to land back on the seam. Spacing lives inside each group. */
.p-marquee__track {
    display: flex;
    width: max-content;
    animation: p-marquee-x var(--marquee-duration, 48s) linear infinite;
}

.p-marquee__group {
    display: flex;
    gap: var(--sp-5);
    padding-right: var(--sp-5);
}

.p-marquee .p-proof__card {
    flex: 0 0 auto;
    width: 17rem;
}

/* Hover or keyboard focus stops the rail, so a payout can be read (or a link
   followed) without chasing it. app.js adds .is-paused off-screen. */
.p-marquee:hover .p-marquee__track,
.p-marquee:focus-within .p-marquee__track,
.p-marquee.is-paused .p-marquee__track {
    animation-play-state: paused;
}

@keyframes p-marquee-x {
    to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------ Testimonials */
.p-quotes {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.p-quote {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin: 0;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.p-quote:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-accent);
    border-color: var(--brand);
}

.p-quote__mark {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--brand);
}

.p-quote__text {
    flex: 1;
    margin: 0;
    color: var(--text-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.p-quote__who {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.p-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 800;
}

.p-quote__name,
.p-quote__role {
    display: block;
    line-height: 1.35;
}

.p-quote__name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-strong);
}

.p-quote__role {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ------------------------------------------------------------- App layout */
.p-app {
    display: grid;
    gap: var(--sp-8);
    padding-block: var(--sp-8) var(--sp-12);
}

@media (min-width: 992px) {
    .p-app--sidebar {
        grid-template-columns: 17rem 1fr;
        gap: var(--sp-10);
    }
}

.p-app__aside { min-width: 0; }

.p-app__main { min-width: 0; }

/* Fixed sidebar + fluid main column. Collapses to a single column below the
   tablet breakpoint. */
.p-split {
    display: grid;
    gap: var(--sp-8);
    align-items: start;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

@media (max-width: 991.98px) {
    .p-split {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
    }
}

.p-panel {
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.p-panel + .p-panel { margin-top: var(--sp-6); }

.p-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.p-panel__title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 700;
}

/* Reward display used by the faucet pages */
.p-reward {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.p-reward__meta {
    margin-top: var(--sp-1);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.p-timer {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface-2);
}

.p-timer__label {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-timer__value {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
}

/* Progress ----------------------------------------------------------------- */
.p-progress {
    height: .5rem;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--bg-surface-3);
}

.p-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
    transition: width var(--dur-slow) var(--ease-out);
}

.p-progress__label {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ------------------------------------------------------------------ Games hub */
.p-game {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.p-game:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: var(--brand);
}

.p-game__head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}

.p-game__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
    margin: var(--sp-4) 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

.p-game__facts dt {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-game__facts dd {
    margin: 0;
    font-weight: 700;
    color: var(--text-strong);
}

.p-game .t-btn { margin-top: auto; }

/* --------------------------------------------------- Withdrawal estimate readout */
.t-estimate {
    display: grid;
    gap: 1px;
    margin: 0;
    overflow: hidden;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
}

.t-estimate > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
}

.t-estimate dt {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.t-estimate dd {
    margin: 0;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.t-estimate__total { background: var(--bg-surface-2); }
.t-estimate__total dt { color: var(--text-strong); font-weight: 600; }
.t-estimate__total dd { color: var(--brand); font-size: var(--fs-md); }

/* --------------------------------------------------------------- Ticket thread */
.ticket-msg {
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-left-width: 3px;
    border-radius: var(--r-sm);
}

.ticket-msg--user  { border-left-color: var(--brand); }

.ticket-msg--admin {
    border-left-color: var(--info);
    background: var(--info-soft);
}

.ticket-msg__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.ticket-msg__body {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-body);
}

.ticket-msg__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------- FAQ */
.p-faq {
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.faq-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--r-lg);
    border: 1px solid rgba(37, 99, 235, .25);
    background: var(--grad-surface);
}

.faq-support > div:first-child { flex: 1 1 20rem; }

.p-faq__list { display: flex; flex-direction: column; gap: var(--sp-3); }

.p-faq__links {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.p-faq__links a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-strong);
    font-weight: 600;
}

.p-faq__links i { color: var(--brand); }

.p-faq__links a:hover { color: var(--brand); }

/* ---- FAQ filter + search tools (enhancement only: revealed by initFaq) ---- */
.p-faq-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background: var(--grad-surface);
}

.p-faq-tools[hidden] { display: none; }

.p-faq-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.p-faq-chip {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: var(--bg-surface);
    color: var(--text-body);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast),
                background-color var(--dur-fast), transform var(--dur-fast);
}

.p-faq-chip:hover {
    color: var(--brand);
    border-color: var(--brand);
    transform: translateY(-1px);
}

.p-faq-chip.is-active {
    color: var(--text-on-brand);
    border-color: transparent;
    background: var(--grad-brand);
}

.p-faq-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-left: auto;
}

.p-faq-search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    color: var(--text-muted);
    transition: border-color var(--dur-fast);
}

.p-faq-search:focus-within { border-color: var(--brand); }

.p-faq-search input {
    min-width: 11rem;
    padding: var(--sp-2) 0;
    border: 0;
    background: transparent;
    color: var(--text-strong);
    font: inherit;
    outline: none;
}

.p-faq-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-6);
    border: 1px dashed var(--border-default);
    border-radius: var(--r-md);
    color: var(--text-muted);
}

.p-faq-empty[hidden] { display: none; }

/* The flex gap on .p-faq__list replaces the sibling margin, so hiding the
   first questions with a filter cannot leave a gap at the top of the list. */
.p-faq__list .t-details + .t-details { margin-top: 0; }

/* ---- Payout methods block ---- */
.p-faq-payouts {
    margin-top: var(--sp-8);
    padding: var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background: var(--bg-surface);
}

.p-faq-payouts__head { margin-bottom: var(--sp-5); }
.p-faq-payouts__head h2 { margin-bottom: var(--sp-2); }

/* Smooth accordion open/close. ::details-content is progressive: engines that
   do not support it keep the native instant toggle, and the open state is
   still correct because block-size:auto wins over the closed 0. */
@supports selector(::details-content) {
    @supports (interpolate-size: allow-keywords) {
        .t-details { interpolate-size: allow-keywords; }
    }

    .t-details::details-content {
        block-size: 0;
        overflow: hidden;
        transition: content-visibility var(--dur-base) allow-discrete,
                    block-size var(--dur-base) var(--ease-out);
    }

    .t-details[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------- CMS content */
.p-prose {
    color: var(--text-body);
    line-height: var(--lh-relaxed);
    /* CMS content is operator-authored and regularly contains long URLs and
       paste-from-Word markup. Break rather than let it push the page wide. */
    overflow-wrap: break-word;
    max-width: 100%;
}

.p-prose > :first-child { margin-top: 0; }
.p-prose > :last-child { margin-bottom: 0; }
.p-prose p { margin-bottom: var(--sp-4); }
.p-prose h2 { margin: var(--sp-8) 0 var(--sp-3); font-size: var(--fs-2xl); }
.p-prose h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-xl); }
.p-prose ul,
.p-prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.p-prose li { margin-bottom: var(--sp-2); }
.p-prose img { border-radius: var(--r-md); }
.p-prose a { font-weight: 600; text-decoration: underline; }
.p-prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); display: block; overflow-x: auto; }
.p-prose th,
.p-prose td { padding: var(--sp-3); border: 1px solid var(--border-subtle); text-align: left; }
.p-prose blockquote {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-left: 3px solid var(--brand);
    background: var(--bg-surface-2);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* -------------------------------------------------------- Legal / CMS page */
.p-legal {
    display: grid;
    gap: var(--sp-8);
    max-width: 72rem;
    margin-inline: auto;
}

.p-legal__main { max-width: 46rem; margin-inline: auto; }

.p-legal__rail {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
}

.p-legal__rail[hidden] { display: none; }

@media (min-width: 1100px) {
    .p-legal.has-rail {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        gap: var(--sp-10);
        align-items: start;
    }

    .p-legal.has-rail .p-legal__main { margin-inline: 0; }

    /* Stays in view for the length of a long policy without pinning it to the
       very top, which would sit under the sticky header. */
    .p-legal.has-rail .p-legal__rail {
        position: sticky;
        top: calc(var(--header-h) + var(--sp-6));
    }
}

.p-legal__card {
    padding: var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-surface);
}

.p-legal__rail-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-legal__toc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1);
}

.p-legal__toc-item--h3 { padding-left: var(--sp-4); }

.p-legal__toc-link {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: color var(--dur-fast), border-color var(--dur-fast),
                background-color var(--dur-fast);
}

.p-legal__toc-link:hover {
    color: var(--brand);
    background: var(--bg-surface-2);
}

.p-legal__toc-link.is-active {
    color: var(--brand);
    border-left-color: var(--brand);
    background: var(--brand-soft);
}

.p-legal__siblings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-1);
    font-size: var(--fs-sm);
}

.p-legal__siblings a { color: var(--text-body); font-weight: 600; }
.p-legal__siblings a:hover { color: var(--brand); }
.p-legal__siblings [aria-current="page"] { color: var(--text-muted); font-weight: 700; }

.p-legal__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
}

/* Heading hierarchy, table rhythm and anchor links, scoped to the legal
   article so the home-page prose blocks are left untouched. */
.p-legal .p-prose h2 {
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}

.p-legal .p-prose tbody tr:nth-child(even) { background: var(--bg-surface-2); }

.p-prose__heading {
    position: relative;
    scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.p-prose__anchor {
    margin-left: var(--sp-2);
    color: var(--text-muted);
    font-size: .8em;
    opacity: 0;
    text-decoration: none;
    transition: opacity var(--dur-fast), color var(--dur-fast);
}

.p-legal .p-prose .p-prose__anchor { text-decoration: none; }

.p-prose__heading:hover .p-prose__anchor,
.p-prose__anchor:focus-visible { opacity: 1; }

.p-prose__anchor:hover { color: var(--brand); }

@media (max-width: 575.98px) {
    .p-hero { padding-block: var(--sp-10) var(--sp-12); }
    .p-hero__panel { padding: var(--sp-5); border-radius: var(--r-xl); }
    .p-hero__actions { flex-direction: column; align-items: stretch; }
    .p-hero__actions .t-btn { width: 100%; }
    .p-hero__panel-tag { position: static; display: inline-block; margin-bottom: var(--sp-4); }
    .p-cta { padding: var(--sp-10) var(--sp-5); }
    .p-panel { padding: var(--sp-5); }
    .faq-support { padding: var(--sp-5); }
}
/* ========================================================================== */
/* Premium home upgrades                                                      */
/* ========================================================================== */

.p-hero__stage {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    /* Aurora wash sits under the poster so the section still has brand colour
       while the poster decodes, and if it is ever missing entirely. */
    background: var(--grad-hero);
}

.p-hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The poster is a dark image: at full strength it turns the light theme's
       near-white hero into a murky wash. It reads best as a faint texture in
       light mode and as the main backdrop in dark mode (overridden below). */
    opacity: .3;
    transform: scale(1.02);
    filter: saturate(1.05);
}

[data-theme="dark"] .p-hero__poster {
    opacity: .55;
}

/* Light-mode scrim: keeps the headline and lead legible over the poster and
   blobs by fading the page background in from the text side. The dark theme
   does not want it - there the backdrop *is* the feature. */
.p-hero__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        var(--bg-body) 0%,
        color-mix(in srgb, var(--bg-body) 70%, transparent) 34%,
        transparent 62%);
    pointer-events: none;
}

[data-theme="dark"] .p-hero__stage::after {
    display: none;
}

.p-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--dur-hero) var(--ease-cinematic);
    /* `screen` over a near-white backdrop pushes every particle to white, so
       the scene vanished in light mode. Multiply darkens instead, which keeps
       the blue-violet points visible on a light page; dark mode keeps the
       additive glow. */
    mix-blend-mode: multiply;
}

[data-theme="dark"] .p-hero__canvas {
    mix-blend-mode: screen;
}

.p-hero__canvas.is-ready {
    opacity: .85;
}

/* Dark mode only needs a touch more presence once the scene is up. Scoped to
   :not(.is-ready) on purpose: an unscoped opacity here has the same
   specificity as .is-ready but comes later, which pins the canvas at full
   opacity and kills the fade-in. */
[data-theme="dark"] .p-hero__canvas:not(.is-ready) {
    opacity: 0;
}

[data-theme="dark"] .p-hero__canvas.is-ready {
    opacity: .95;
}

.p-glass {
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.p-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    font-weight: 600;
}

.p-hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.p-hero__trust i {
    color: var(--brand);
}

.p-steps {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.p-step {
    position: relative;
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--sh-sm);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.p-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-brand);
    border-color: var(--brand);
}

.p-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--sp-4);
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    font-weight: 800;
    font-size: var(--fs-sm);
    box-shadow: var(--sh-brand);
}

.p-steps .p-step:nth-child(2) .p-step__num {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
}

.p-steps .p-step:nth-child(3) .p-step__num {
    background: linear-gradient(135deg, #10b981 0%, #2563eb 100%);
}

.p-method--interactive {
    position: relative;
    overflow: hidden;
}

/* The lift itself is already on .p-method:hover; only the glow is new here. */
.p-method--interactive:hover {
    box-shadow: var(--shadow-glow-brand);
}

.p-method__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.p-method__badge {
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--brand-soft-text);
    background: var(--brand-soft);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
}

.p-method__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-2) 0 var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.p-method--interactive:hover .p-method__details,
.p-method--interactive:focus-within .p-method__details,
.p-method--interactive.is-expanded .p-method__details {
    max-height: 4rem;
    opacity: 1;
    transform: none;
}

.p-method--interactive .t-card__icon {
    transition: transform var(--dur-base) var(--ease-spring);
}

.p-method--interactive:hover .t-card__icon {
    transform: scale(1.08) rotate(-4deg);
}

.p-proof__card {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.p-proof__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow-accent);
    border-color: var(--brand);
}

.p-cta {
    background: var(--grad-cta);
    background-size: 180% 180%;
}

@media (max-width: 767.98px) {
    .p-hero__proof {
        max-width: none;
    }
    .p-hero__poster {
        opacity: .25;
    }
    [data-theme="dark"] .p-hero__poster {
        opacity: .45;
    }
    .p-method__details {
        max-height: 4rem;
        opacity: 1;
        transform: none;
    }
    .p-steps {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p-hero__canvas,
    .p-hero__poster {
        animation: none !important;
    }
    .js .p-method__details {
        max-height: 4rem;
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* The rail becomes a plain scrollable row. `!important` and the class
       selector are both load-bearing: motion.css sets animation-duration to
       .001ms on *everything* later in the cascade, which would otherwise snap
       the track to the end of its translate and park it on the duplicate copy. */
    .p-marquee__track {
        animation: none !important;
    }
    .p-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
        scroll-snap-type: x proximity;
    }
    .p-marquee__group { scroll-snap-align: start; }
    .p-marquee__group[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------- Payout trust strip
   Plan §8.2 item 3. A thin, honest band under the hero naming the payment
   methods this site really sends, sourced from withdraw_option. It reads as a
   quiet credibility marker rather than another call to action. */
.p-trust {
    padding-block: var(--sp-6);
}

.p-trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4) var(--sp-6);
    padding: var(--sp-5) var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    background-color: var(--bg-surface);
    background-image: var(--grad-glass);
}

.p-trust__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
    flex: none;
}

.p-trust__label i { color: var(--brand); }

.p-trust__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-trust__item {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: 6px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: var(--bg-surface-2);
}

.p-trust__name {
    font-weight: 700;
    color: var(--text-strong);
    font-size: var(--fs-sm);
}

.p-trust__meta {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.p-trust__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand);
    white-space: nowrap;
}

.p-trust__link:hover { color: var(--brand-hover); }

.p-trust__link i {
    font-size: .7rem;
    transition: transform var(--dur-fast) var(--ease-out);
}

.p-trust__link:hover i { transform: translateX(3px); }

@media (max-width: 767.98px) {
    .p-trust__link { margin-left: 0; }
}

/* ------------------------------------------------------- Live payouts (§8.4)
   The public proof page is the trust centrepiece, so it leads with real
   aggregates, offers an enhancement-only filter, and collapses the table into
   read-along cards on small screens instead of a sideways scroll. */

.p-payout-summary {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin-bottom: var(--sp-6);
}

.p-payout-summary__stat {
    padding: var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background-color: var(--bg-surface);
    background-image: var(--grad-glass);
    box-shadow: var(--sh-sm);
}

.p-payout-summary__value {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.p-payout-summary__value--text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--text-strong);
}

.p-payout-summary__label {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* `display: flex` above would beat the UA `[hidden]` rule, so the bar would
   show even before app.js enables it. Keep it genuinely hidden until then. */
.p-filters[hidden] { display: none; }

.p-filters__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.p-filters__label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-filters__control {
    min-width: 12rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--bg-surface);
    color: var(--text-body);
    font: inherit;
    font-size: var(--fs-sm);
}

.p-filters__control:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-color: var(--brand);
}

.p-filters__count {
    margin: 0 0 0.5rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.p-filters__reset { margin-bottom: 0.1rem; }

.p-payout__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--brand);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
}

.p-payout:hover .p-payout__verified,
.p-payout:focus-within .p-payout__verified { opacity: 1; }

.p-payout-note {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.p-payout-note i { color: var(--brand); }

.p-payout-empty { margin-top: var(--sp-5); }

/* Below md a data table reflows into stacked cards. One DOM either way - the
   desktop table stays a real table, and each cell carries its own label via
   data-label. Reusable: add .p-cards to any .t-table-wrap. */
@media (max-width: 767.98px) {
    .p-cards { border: 0; background: none; }

    .p-cards .t-table,
    .p-cards .t-table tbody,
    .p-cards .t-table tr,
    .p-cards .t-table td,
    .p-cards .t-table tbody th {
        display: block;
        width: 100%;
    }

    .p-cards .t-table thead { display: none; }

    .p-cards .t-table tr {
        margin-bottom: var(--sp-4);
        border: 1px solid var(--border-subtle);
        border-radius: var(--r-lg);
        background: var(--bg-surface);
        box-shadow: var(--sh-sm);
        overflow: hidden;
    }

    .p-cards .t-table td,
    .p-cards .t-table tbody th {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--sp-4);
        padding: var(--sp-3) var(--sp-4);
        text-align: right;
    }

    .p-cards .t-table td::before,
    .p-cards .t-table tbody th::before {
        content: attr(data-label);
        flex: none;
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color: var(--text-muted);
        text-align: left;
    }

    .p-cards .t-table td:first-child,
    .p-cards .t-table tbody th:first-child { padding-top: var(--sp-4); }

    .p-cards .t-table td:last-child,
    .p-cards .t-table tbody th:last-child { padding-bottom: var(--sp-4); }

    .p-payout__verified { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .p-payout__verified { transition: none; opacity: 1; }
}

/* ------------------------------------------------------- Leaderboard (§8.5)
   The top three get a podium so the board has a focal point; everyone else
   stays in a plain, scannable table. Metals: gold for first (the --gold
   token), neutral greys for second and third - no invented brand colours. */

.p-podium {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-podium__place {
    position: relative;
    flex: 1 1 15rem;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--metal, var(--border-subtle));
    border-radius: var(--r-xl);
    background-color: var(--bg-surface);
    background-image: var(--grad-glass);
    box-shadow: var(--sh-md);
    text-align: center;
}

/* Visual order 2-1-3 on wide screens; DOM order stays 1-2-3 for assistive tech. */
.p-podium__place--1 { order: 2; --metal: var(--gold); }
.p-podium__place--2 { order: 1; --metal: var(--border-default); }
.p-podium__place--3 { order: 3; --metal: var(--border-default); }

.p-podium__place--1 {
    box-shadow: var(--sh-md), var(--shadow-glow-gold);
}

.p-podium__rank {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--r-pill);
    background: var(--metal, var(--bg-surface-2));
    color: var(--text-on-brand);
    font-size: var(--fs-xs);
    font-weight: 800;
}

.p-podium__place--2 .p-podium__rank,
.p-podium__place--3 .p-podium__rank { color: var(--text-strong); }

.p-podium__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--r-pill);
    background: var(--grad-brand);
    color: #fff;
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: var(--shadow-glow-brand);
}

.p-podium__place--1 .p-podium__avatar {
    width: 4.75rem;
    height: 4.75rem;
    font-size: var(--fs-2xl);
}

.p-podium__name {
    margin-top: var(--sp-2);
    font-size: var(--fs-lg);
    font-weight: 800;
    color: var(--text-strong);
    word-break: break-word;
}

.p-podium__meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.p-podium__earned {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--bg-surface-2);
    font-weight: 800;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.p-podium__earned i { color: var(--gold); }

.p-leaderboard-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

.p-leaderboard-rest { margin-top: var(--sp-8); }

/* --------------------------------------------------------- Contests (§8.6)
   One block per contest: schedule + live countdown, prizes and standings in
   the same place, rather than a card grid separated from a tabbed board. */

.p-contests {
    display: grid;
    gap: var(--sp-8);
}

.p-contest {
    padding: var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-2xl);
    background-color: var(--bg-surface);
    background-image: var(--grad-glass);
    box-shadow: var(--sh-lg);
}

.p-contest__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-6);
}

.p-contest__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-xl);
    color: var(--text-strong);
}

.p-contest__title i { color: var(--brand); }

.p-contest__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.p-contest__timer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.p-contest__timer-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-contest__empty { border: 1px dashed var(--border-subtle); border-radius: var(--r-lg); }

.p-contest__rest { margin-top: var(--sp-6); }

.t-countdown {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: var(--bg-surface-2);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.t-countdown--pending {
    color: var(--text-muted);
    font-weight: 700;
}

/* Compact variant of the podium used inside contest blocks. */
.p-podium--contest .p-podium__place { padding: var(--sp-5) var(--sp-3); }

.p-podium__unit {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.p-podium__prize {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: 2px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--gold-text);
}

.p-podium__prize i { color: var(--gold); }

@media (max-width: 767.98px) {
    /* Stack in rank order 1-2-3 once the podium is a single column. */
    .p-podium__place--1,
    .p-podium__place--2,
    .p-podium__place--3 { order: 0; }
    .p-podium__place { max-width: none; }
}