/* ══════════════════════════════════════════════════════════════════════════
   A1BRAINY THEME REDESIGN v2.0
   Design system based on the redesign mockup.
   Fonts: Anybody (display) + Onest (body)
   Color palette: warm amber gold (#B8860B family) on deep blue-black
   ══════════════════════════════════════════════════════════════════════════ */

/* Webfonts are enqueued in functions.php — an @import here would block
   rendering until this file had been fetched and parsed. */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --a1b-bg:            #080a0f;
    --a1b-bg-2:          #0d1015;
    --a1b-surface:       #101319;
    --a1b-surface-2:     #151920;
    --a1b-border:        rgba(184, 134, 11, 0.12);
    --a1b-border-2:      rgba(255, 255, 255, 0.06);

    /* Text */
    --a1b-text:          #f5f5f7;
    --a1b-text-2:        #a1a5ad;
    --a1b-text-3:        #6b7280;
    --a1b-text-4:        #4b5563;

    /* Accents */
    --a1b-gold:          #B8860B;
    --a1b-gold-light:    #d9a11f;
    --a1b-gold-dark:     #8B6914;
    --a1b-green:         #22c55e;
    --a1b-glow-blue:     rgba(59, 130, 246, 0.08);
    --a1b-glow-gold:     rgba(184, 134, 11, 0.06);

    /* Fonts */
    --a1b-font-display:  'Anybody', system-ui, -apple-system, sans-serif;
    --a1b-font-body:     'Onest', system-ui, -apple-system, sans-serif;

    /* Layout */
    --a1b-container:     1200px;
    --a1b-header-h:      72px;
    --a1b-radius:        12px;
    --a1b-radius-lg:     16px;
}

/* ── RESET / BASE ──────────────────────────────────────────────────────── */
body.a1brainy {
    background: var(--a1b-bg) !important;
    color: var(--a1b-text) !important;
    font-family: var(--a1b-font-body) !important;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.a1brainy h1, body.a1brainy h2, body.a1brainy h3,
body.a1brainy h4, body.a1brainy h5, body.a1brainy h6 {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    color: var(--a1b-text);
    letter-spacing: -0.02em;
    margin: 0;
}

.a1b-container {
    max-width: var(--a1b-container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ── ANIMATIONS ────────────────────────────────────────────────────────── */
@keyframes a1b-pulse    { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes a1b-fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes a1b-scrollX  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes a1b-float    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes a1b-glow     { 0%,100% { opacity: 0.08; } 50% { opacity: 0.18; } }
@keyframes a1b-shimmer  { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }

/* ── ACCENT UTILITY ────────────────────────────────────────────────────── */
.a1b-accent {
    color: var(--a1b-gold);
    display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════════════ */
.a1b-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 24px 80px;
    overflow: hidden;
    background: var(--a1b-bg);
}

.a1b-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(184, 134, 11, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 134, 11, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}

.a1b-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(0);
    pointer-events: none;
    animation: a1b-glow 6s ease-in-out infinite;
}
.a1b-hero__glow--top    { top: -300px; right: -200px; width: 800px; height: 800px; background: radial-gradient(circle, var(--a1b-glow-blue), transparent 60%); }
.a1b-hero__glow--bottom { bottom: -200px; left: -200px; width: 600px; height: 600px; background: radial-gradient(circle, var(--a1b-glow-gold), transparent 60%); animation-delay: 2s; }

#na-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

.a1b-hero__inner {
    position: relative;
    z-index: 1;
    animation: a1b-fadeInUp 0.8s ease-out both;
}

/* Live badge */
.a1b-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-green);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 28px;
}
.a1b-live-dot {
    width: 8px; height: 8px;
    background: var(--a1b-green);
    border-radius: 50%;
    animation: a1b-pulse 2s ease-in-out infinite;
}

/* Hero title */
.a1b-hero__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(56px, 8vw, 120px);
    line-height: 0.92;
    letter-spacing: -3px;
    margin: 0 0 36px;
    max-width: 850px;
}

.a1b-hero__desc {
    font-family: var(--a1b-font-body);
    font-size: 19px;
    line-height: 1.65;
    color: var(--a1b-text-2);
    max-width: 560px;
    margin: 0 0 48px;
}

.a1b-hero__actions {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

/* Stats bar */
.a1b-hero__stats {
    display: flex;
    gap: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}
.a1b-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.a1b-stat__value {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 40px;
    color: var(--a1b-text);
    letter-spacing: -1.5px;
    line-height: 1;
}
.a1b-stat__label {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════════════════ */
.a1b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 15px 34px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}
.a1b-btn--lg { padding: 17px 40px; font-size: 16px; }
.a1b-btn--xl { padding: 20px 48px; font-size: 17px; }

.a1b-btn--primary {
    background: var(--a1b-gold);
    color: #0a0a0a;
    border-color: var(--a1b-gold);
}
.a1b-btn--primary:hover {
    background: var(--a1b-gold-light);
    color: #0a0a0a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.35);
}

.a1b-btn--outline {
    background: transparent;
    color: var(--a1b-gold);
    border-color: rgba(184, 134, 11, 0.35);
}
.a1b-btn--outline:hover {
    border-color: rgba(184, 134, 11, 0.7);
    background: rgba(184, 134, 11, 0.06);
    color: var(--a1b-gold-light);
}

/* ══════════════════════════════════════════════════════════════════════
   TICKER
════════════════════════════════════════════════════════════════════════ */
.a1b-ticker {
    background: var(--a1b-bg-2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 0;
    overflow: hidden;
}
.a1b-ticker__track {
    display: flex;
    gap: 64px;
    animation: a1b-scrollX 40s linear infinite;
    width: max-content;
    align-items: center;
}
.a1b-ticker__item {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
}
.a1b-ticker__star {
    color: var(--a1b-gold);
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS
════════════════════════════════════════════════════════════════════════ */
.a1b-section {
    padding: 100px 24px;
    position: relative;
}

.a1b-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.a1b-section__eyebrow {
    display: inline-block;
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--a1b-gold);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
}

.a1b-section__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 20px;
}

.a1b-section__desc {
    font-family: var(--a1b-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--a1b-text-2);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   FEATURES
════════════════════════════════════════════════════════════════════════ */
.a1b-features {
    background: var(--a1b-bg-2);
    border-top: 1px solid var(--a1b-border-2);
    border-bottom: 1px solid var(--a1b-border-2);
}

.a1b-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.a1b-feature-card {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: var(--a1b-radius-lg);
    padding: 32px 28px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.a1b-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(184, 134, 11, 0.02) 100%);
    pointer-events: none;
}
.a1b-feature-card:hover {
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.a1b-feature-card__icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 24px;
    display: inline-block;
    filter: drop-shadow(0 4px 12px rgba(184, 134, 11, 0.3));
}
.a1b-feature-card__title {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--a1b-text);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.a1b-feature-card__desc {
    font-family: var(--a1b-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--a1b-text-2);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   RANKS
════════════════════════════════════════════════════════════════════════ */
.a1b-ranks {
    background: var(--a1b-bg);
}
.a1b-ranks__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.a1b-ranks__intro {
    text-align: left;
}
.a1b-ranks__intro .a1b-section__title,
.a1b-ranks__intro .a1b-section__desc { text-align: left; }

.a1b-ranks__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.a1b-rank-pill {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: var(--a1b-radius);
    transition: all 0.2s ease;
}
.a1b-rank-pill:hover {
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateX(4px);
}
.a1b-rank-pill__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}
.a1b-rank-pill__name {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--a1b-text);
    grid-column: 2;
    grid-row: 1;
}
.a1b-rank-pill__desc {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    color: var(--a1b-text-3);
    grid-column: 2;
    grid-row: 2;
    line-height: 1;
    margin-top: 2px;
}
.a1b-rank-pill__pts {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--a1b-gold);
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════════════
   CTA
════════════════════════════════════════════════════════════════════════ */
.a1b-cta {
    padding: 120px 24px;
    background: linear-gradient(180deg, var(--a1b-bg-2) 0%, var(--a1b-bg) 100%);
    border-top: 1px solid var(--a1b-border-2);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.a1b-cta::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, var(--a1b-glow-gold), transparent 60%);
    pointer-events: none;
    animation: a1b-glow 6s ease-in-out infinite;
}
.a1b-cta__inner { position: relative; z-index: 1; }
.a1b-cta__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: -2px;
    margin: 0 0 20px;
}
.a1b-cta__desc {
    font-family: var(--a1b-font-body);
    font-size: 18px;
    color: var(--a1b-text-2);
    margin: 0 0 40px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .a1b-ranks__inner { grid-template-columns: 1fr; gap: 40px; }
    .a1b-hero__stats  { gap: 32px; }
    .a1b-stat__value  { font-size: 32px; }
    .a1b-section      { padding: 60px 24px; }
    .a1b-cta          { padding: 80px 24px; }
}

@media (max-width: 600px) {
    .a1b-hero            { padding: 100px 20px 60px; min-height: 90vh; }
    .a1b-hero__actions   { flex-direction: column; align-items: stretch; }
    .a1b-hero__actions .a1b-btn { width: 100%; }
    .a1b-hero__stats     { gap: 24px; }
    .a1b-stat__value     { font-size: 28px; }
    .a1b-features__grid  { grid-template-columns: 1fr; }
    .a1b-rank-pill       { grid-template-columns: auto 1fr; }
    .a1b-rank-pill__pts  { grid-column: 2; grid-row: 3; margin-top: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HEADER — Layered overrides for the redesign
   Keeps existing .na-header structure, updates visual language.
════════════════════════════════════════════════════════════════════════ */
body.a1brainy .na-header {
    background: rgba(8, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--a1b-border-2);
    height: var(--a1b-header-h);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
}
body.a1brainy .na-header__inner {
    height: var(--a1b-header-h);
    display: flex;
    align-items: center;
    gap: 32px;
}
body.a1brainy .na-header__logo {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.5px;
}
body.a1brainy .na-header__logo a { color: var(--a1b-text); text-decoration: none; }
body.a1brainy .na-header__logo .custom-logo { max-height: 40px; width: auto; }

/* Nav pills */
body.a1brainy .na-nav__list {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    justify-content: center;
}
body.a1brainy .na-nav__link {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--a1b-text-2);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}
body.a1brainy .na-nav__link:hover,
body.a1brainy .na-nav__item.current-menu-item .na-nav__link,
body.a1brainy .na-nav__item.current_page_item .na-nav__link {
    color: var(--a1b-text);
    background: rgba(255, 255, 255, 0.05);
}

/* Header CTA button */
body.a1brainy .na-header__actions .na-btn--primary,
body.a1brainy .na-header__actions .na-btn--outline {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
body.a1brainy .na-header__actions .na-btn--primary {
    background: var(--a1b-gold);
    color: #0a0a0a;
}
body.a1brainy .na-header__actions .na-btn--primary:hover {
    background: var(--a1b-gold-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(184, 134, 11, 0.3);
}
body.a1brainy .na-header__actions .na-btn--outline {
    background: transparent;
    color: var(--a1b-gold);
    border-color: rgba(184, 134, 11, 0.35);
}
body.a1brainy .na-header__actions .na-btn--outline:hover {
    border-color: rgba(184, 134, 11, 0.7);
    background: rgba(184, 134, 11, 0.06);
}

/* Hamburger — desktop hidden */
body.a1brainy .na-hamburger {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
body.a1brainy .na-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--a1b-text);
    transition: all 0.2s;
}

/* Mobile menu */
@media (max-width: 900px) {
    body.a1brainy .na-nav { display: none; }
    body.a1brainy .na-hamburger { display: inline-flex; }
    body.a1brainy .na-header__inner { justify-content: space-between; gap: 12px; }
}

/* Push content below fixed header */
body.a1brainy #content,
body.a1brainy .a1b-hero { padding-top: 0; }
body.a1brainy .a1b-hero { padding-top: 140px; }

/* ══════════════════════════════════════════════════════════════════════
   FOOTER — Adjust to match new dark aesthetic
════════════════════════════════════════════════════════════════════════ */
body.a1brainy .na-footer {
    background: var(--a1b-bg);
    border-top: 1px solid var(--a1b-border-2);
    font-family: var(--a1b-font-body);
}
body.a1brainy .na-footer__top { padding: 60px 0 40px; }
body.a1brainy .na-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 48px;
}
body.a1brainy .na-footer__brand {
    max-width: 340px;
}
body.a1brainy .na-footer__tagline {
    font-size: 14px;
    color: var(--a1b-text-3);
    line-height: 1.6;
    margin: 16px 0;
}
body.a1brainy .na-footer__col h3,
body.a1brainy .na-footer__col .na-widget__title {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--a1b-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px;
}
body.a1brainy .na-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
body.a1brainy .na-footer__col li { margin-bottom: 10px; }
body.a1brainy .na-footer__col a {
    color: var(--a1b-text-2);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
body.a1brainy .na-footer__col a:hover { color: var(--a1b-gold); }
body.a1brainy .na-footer__bottom {
    padding: 24px 0;
    border-top: 1px solid var(--a1b-border-2);
}
body.a1brainy .na-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
body.a1brainy .na-footer__copy {
    font-size: 13px;
    color: var(--a1b-text-3);
    margin: 0;
}
body.a1brainy .na-footer__nav {
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
body.a1brainy .na-footer__nav a {
    color: var(--a1b-text-3);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}
body.a1brainy .na-footer__nav a:hover { color: var(--a1b-gold); }

@media (max-width: 800px) {
    body.a1brainy .na-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 500px) {
    body.a1brainy .na-footer__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   MOTION POLISH — one language: cubic-bezier(.2,.7,.2,1)
   entries 400-500ms, controls 160-200ms, transform+opacity only
════════════════════════════════════════════════════════════════════════ */

/* Shared easing token */
:root {
    --a1b-ease: cubic-bezier(.2, .7, .2, 1);
    --a1b-ease-out: cubic-bezier(0, 0, .2, 1);
}

/* Refined pulse — slower, quieter than before */
@keyframes a1b-pulse    { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes a1b-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes a1b-fadeIn   { from { opacity: 0; } to { opacity: 1; } }

/* ── HERO ENTRY STAGGER ────────────────────────────────────────────────
   Small group only — 5 children, fast cadence
──────────────────────────────────────────────────────────────────────── */
.a1b-hero__inner > * {
    animation: a1b-fadeInUp 0.5s var(--a1b-ease) both;
}
.a1b-hero__eyebrow  { animation-delay: 0.05s; }
.a1b-hero__title    { animation-delay: 0.15s; }
.a1b-hero__desc     { animation-delay: 0.25s; }
.a1b-hero__actions  { animation-delay: 0.35s; }
.a1b-hero__stats    { animation-delay: 0.45s; }

/* Hero background glows — hold them still, only fade in */
.a1b-hero__glow {
    opacity: 0;
    animation: a1b-fadeIn 1.2s var(--a1b-ease-out) 0.2s forwards;
}
.a1b-hero__grid {
    opacity: 0;
    animation: a1b-fadeIn 1.5s var(--a1b-ease-out) 0.1s forwards;
}

/* ── SCROLL REVEAL — added by JS via .a1b-reveal / .in-view ──────────── */
.a1b-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--a1b-ease), transform 0.5s var(--a1b-ease);
    will-change: transform, opacity;
}
.a1b-reveal.in-view {
    opacity: 1;
    transform: none;
}
/* Small stagger for grouped items */
.a1b-features__grid .a1b-reveal:nth-child(1) { transition-delay: 0s; }
.a1b-features__grid .a1b-reveal:nth-child(2) { transition-delay: 0.06s; }
.a1b-features__grid .a1b-reveal:nth-child(3) { transition-delay: 0.12s; }
.a1b-features__grid .a1b-reveal:nth-child(4) { transition-delay: 0.18s; }

.a1b-ranks__list .a1b-reveal:nth-child(1) { transition-delay: 0s; }
.a1b-ranks__list .a1b-reveal:nth-child(2) { transition-delay: 0.05s; }
.a1b-ranks__list .a1b-reveal:nth-child(3) { transition-delay: 0.10s; }
.a1b-ranks__list .a1b-reveal:nth-child(4) { transition-delay: 0.15s; }
.a1b-ranks__list .a1b-reveal:nth-child(5) { transition-delay: 0.20s; }
.a1b-ranks__list .a1b-reveal:nth-child(6) { transition-delay: 0.25s; }
.a1b-ranks__list .a1b-reveal:nth-child(7) { transition-delay: 0.30s; }

/* ── BUTTON REFINEMENTS ───────────────────────────────────────────────
   Quick feedback (160-180ms), press state adds tactility
──────────────────────────────────────────────────────────────────────── */
.a1b-btn {
    transition: transform 0.18s var(--a1b-ease), box-shadow 0.18s var(--a1b-ease), background 0.18s var(--a1b-ease), border-color 0.18s var(--a1b-ease), color 0.18s var(--a1b-ease);
    will-change: transform;
}
.a1b-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.08s;
}
.a1b-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(184, 134, 11, 0.4), 0 0 0 1px rgba(184, 134, 11, 0.2);
}
.a1b-btn--outline:hover {
    transform: translateY(-1px);
}

/* ── FEATURE CARD — softer lift, icon lifts subtly too ───────────────── */
.a1b-feature-card {
    transition: transform 0.28s var(--a1b-ease), border-color 0.28s var(--a1b-ease), box-shadow 0.28s var(--a1b-ease);
}
.a1b-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(184, 134, 11, 0.15);
}
.a1b-feature-card__icon {
    transition: transform 0.32s var(--a1b-ease);
}
.a1b-feature-card:hover .a1b-feature-card__icon {
    transform: translateY(-3px) scale(1.05);
}

/* ── RANK PILL — refined slide + gold underglow on hover ─────────────── */
.a1b-rank-pill {
    transition: transform 0.2s var(--a1b-ease), border-color 0.2s var(--a1b-ease), background 0.2s var(--a1b-ease);
}
.a1b-rank-pill:hover {
    transform: translateX(6px);
    background: rgba(184, 134, 11, 0.04);
}
.a1b-rank-pill__dot {
    transition: transform 0.2s var(--a1b-ease), box-shadow 0.2s var(--a1b-ease);
}
.a1b-rank-pill:hover .a1b-rank-pill__dot {
    transform: scale(1.4);
}

/* ── HEADER NAV — subtle underline growth on hover ───────────────────── */
body.a1brainy .na-nav__link {
    position: relative;
    transition: color 0.18s var(--a1b-ease), background 0.18s var(--a1b-ease);
}
body.a1brainy .na-nav__link::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 1px;
    background: var(--a1b-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s var(--a1b-ease);
}
body.a1brainy .na-nav__link:hover::after,
body.a1brainy .na-nav__item.current-menu-item .na-nav__link::after {
    transform: scaleX(1);
}

/* ── CTA GLOW — breathe slower, quieter, and never distract ──────────── */
.a1b-cta::before {
    animation: a1b-cta-breathe 8s ease-in-out infinite;
}
@keyframes a1b-cta-breathe {
    0%, 100% { opacity: 0.08; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.16; transform: translate(-50%, -50%) scale(1.05); }
}

/* Same for hero glows — quieter than the pulsing they had */
.a1b-hero__glow {
    animation: a1b-hero-glow 10s ease-in-out infinite, a1b-fadeIn 1.2s var(--a1b-ease-out) 0.2s both;
}
@keyframes a1b-hero-glow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.9; }
}

/* Ticker — slow it slightly for less visual noise */
.a1b-ticker__track { animation: a1b-scrollX 60s linear infinite; }

/* ── REDUCED MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .a1b-hero__inner > *,
    .a1b-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .a1b-ticker__track { animation: none !important; }
    .a1b-live-dot,
    .a1b-hero__glow,
    .a1b-cta::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   PREMIUM MOTION LAYER
════════════════════════════════════════════════════════════════════════ */
:root {
    --a1b-spring: cubic-bezier(.32, .72, 0, 1);   /* expressive spring */
    --a1b-snap:   cubic-bezier(.5, 0, .1, 1);     /* punchy snap */
}

/* ── HERO TITLE — split word reveal with slight rotate ────────────────── */
.a1b-hero__title .a1b-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotate(3deg);
    animation: a1b-word-in 0.9s var(--a1b-spring) both;
    transform-origin: 0 100%;
}
@keyframes a1b-word-in {
    to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ── GOLD ACCENT — shimmer that sweeps once on load ──────────────────── */
.a1b-accent {
    background: linear-gradient(90deg,
        var(--a1b-gold) 0%,
        #f4d787 50%,
        var(--a1b-gold) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: a1b-shimmer-sweep 2.4s var(--a1b-ease) 0.8s both;
}
@keyframes a1b-shimmer-sweep {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ── STATS — subtle rise + will-change hint for JS count-up ──────────── */
.a1b-stat__value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    will-change: contents;
}

/* ── BUTTONS — magnetic follow via CSS custom props (JS sets --mx/--my) ── */
.a1b-btn {
    position: relative;
    transform: translate3d(var(--mx, 0), var(--my, 0), 0);
    transition: transform 0.4s var(--a1b-spring), box-shadow 0.3s var(--a1b-ease), background 0.2s var(--a1b-ease), color 0.2s var(--a1b-ease), border-color 0.2s var(--a1b-ease);
}
.a1b-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,0.15), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--a1b-ease);
    pointer-events: none;
}
.a1b-btn:hover::before { opacity: 1; }
.a1b-btn:active {
    transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(0.97);
    transition-duration: 0.1s;
}

/* ── FEATURE CARDS — cursor-follow spotlight glow ────────────────────── */
.a1b-feature-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--a1b-spring), border-color 0.3s var(--a1b-ease), box-shadow 0.4s var(--a1b-ease);
}
.a1b-feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        600px circle at var(--mx, 0px) var(--my, 0px),
        rgba(184, 134, 11, 0.12),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s var(--a1b-ease);
    pointer-events: none;
    z-index: 0;
}
.a1b-feature-card:hover::after { opacity: 1; }
.a1b-feature-card > * { position: relative; z-index: 1; }
.a1b-feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 134, 11, 0.25);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(184, 134, 11, 0.1);
}

/* ── RANK PILL — smoother slide + dot glow ───────────────────────────── */
.a1b-rank-pill {
    transition: transform 0.3s var(--a1b-spring), border-color 0.3s var(--a1b-ease), background 0.3s var(--a1b-ease);
}
.a1b-rank-pill:hover {
    transform: translateX(8px);
    border-color: rgba(184, 134, 11, 0.2);
}
.a1b-rank-pill__dot {
    transition: transform 0.3s var(--a1b-spring), box-shadow 0.3s var(--a1b-ease);
}
.a1b-rank-pill:hover .a1b-rank-pill__dot {
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(184, 134, 11, 0.08), 0 0 12px currentColor;
}

/* ── TICKER — fade edges for premium feel ────────────────────────────── */
.a1b-ticker {
    position: relative;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* ── SECTION REVEAL — refined easing ─────────────────────────────────── */
.a1b-reveal {
    transition: opacity 0.6s var(--a1b-spring), transform 0.6s var(--a1b-spring);
}

/* ── CTA — subtle scale on button that matches the breathing glow ────── */
.a1b-cta .a1b-btn--primary {
    animation: a1b-cta-btn-breathe 4s ease-in-out infinite;
}
@keyframes a1b-cta-btn-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}
.a1b-cta .a1b-btn--primary:hover { animation: none; transform: translateY(-2px) scale(1.03); }

/* ── REDUCED MOTION — kill everything expressive ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .a1b-hero__title .a1b-word,
    .a1b-accent { animation: none !important; opacity: 1 !important; transform: none !important; -webkit-text-fill-color: currentColor !important; color: var(--a1b-gold) !important; background: none !important; }
    .a1b-btn, .a1b-feature-card, .a1b-rank-pill,
    .a1b-cta .a1b-btn--primary { animation: none !important; }
    .a1b-btn::before, .a1b-feature-card::after { display: none !important; }
    .a1b-ticker { mask-image: none !important; -webkit-mask-image: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — INNER PAGE COMPONENTS
   Shared page chrome + About page. Follows the v2.0 convention: mockup
   oklch() values map onto the --a1b-* tokens declared at the top of this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO — shared by every inner page ───────────────────────────── */
.a1b-page-hero {
    background: var(--a1b-bg);
    padding: calc(var(--a1b-header-h) + 56px) 24px 56px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.a1b-page-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(184, 134, 11, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 134, 11, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}

.a1b-page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    animation: a1b-fadeInUp 0.6s ease-out both;
}

.a1b-page-hero__eyebrow {
    display: inline-block;
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.a1b-page-hero__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 0.95;
    letter-spacing: -2px;
    margin: 12px 0 20px;
}

.a1b-page-hero__desc {
    font-family: var(--a1b-font-body);
    font-size: 18px;
    color: var(--a1b-text-2);
    margin: 0;
}

/* ── MISSION — copy beside a stat trio ────────────────────────────────── */
.a1b-mission {
    background: var(--a1b-bg-2);
    border-top: 1px solid var(--a1b-border-2);
}

.a1b-mission__grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
    max-width: var(--a1b-container);
    margin: 0 auto;
}

.a1b-mission__copy p {
    font-family: var(--a1b-font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--a1b-text-2);
    margin: 0 0 16px;
}

.a1b-mission__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.a1b-statcard {
    background: var(--a1b-surface-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    transition: border-color .3s var(--a1b-ease, cubic-bezier(.2, .7, .2, 1));
}
.a1b-statcard:hover { border-color: rgba(184, 134, 11, 0.3); }

.a1b-statcard__value {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 36px;
    color: var(--a1b-gold);
    letter-spacing: -1px;
    line-height: 1;
}

.a1b-statcard__label {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    color: var(--a1b-text-3);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.a1b-steps__head { margin-bottom: 16px; }
.a1b-faq__head   { margin-bottom: 28px; }
.a1b-steps__head .a1b-section__title,
.a1b-faq__head   .a1b-section__title { margin-bottom: 0; }

/* ── STEPS — numbered "how it works" rows ─────────────────────────────── */
.a1b-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.a1b-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 36px;
    transition: border-color .3s cubic-bezier(.2, .7, .2, 1),
                transform .3s cubic-bezier(.2, .7, .2, 1);
}
.a1b-step:hover {
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateY(-2px);
}

.a1b-step__icon {
    width: 56px;
    height: 56px;
    background: rgba(184, 134, 11, 0.1);
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
}

.a1b-step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.a1b-step__num {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 14px;
    color: var(--a1b-gold);
}

.a1b-step__title {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 20px;
    margin: 0;
}

.a1b-step__desc {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--a1b-text-2);
    margin: 0 0 14px;
}

.a1b-step__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.a1b-step__chip {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-green);
}

/* ── FAQ — real accordion via <details> ───────────────────────────────── */
.a1b-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 800px;
    margin: 0 auto;
}

.a1b-faq__item {
    background: var(--a1b-surface-2);
    border: 1px solid transparent;
    border-radius: 12px;
    transition: border-color .3s cubic-bezier(.2, .7, .2, 1);
}
.a1b-faq__item[open] { border-color: rgba(184, 134, 11, 0.22); }

.a1b-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 28px;
    cursor: pointer;
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--a1b-text);
    list-style: none;
}
.a1b-faq__q::-webkit-details-marker { display: none; }
.a1b-faq__q:focus-visible {
    outline: 2px solid var(--a1b-gold);
    outline-offset: -2px;
    border-radius: 12px;
}

.a1b-faq__q::after {
    content: '+';
    font-size: 18px;
    line-height: 1;
    color: var(--a1b-text-2);
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), color .3s;
}
.a1b-faq__item[open] .a1b-faq__q::after {
    transform: rotate(45deg);
    color: var(--a1b-gold);
}

.a1b-faq__a {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--a1b-text-2);
    margin: 0;
    padding: 0 28px 24px;
}

/* ── v2.1 RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .a1b-mission__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 640px) {
    .a1b-page-hero { padding: calc(var(--a1b-header-h) + 36px) 20px 40px; }
    .a1b-mission__stats { grid-template-columns: 1fr; }
    .a1b-step { grid-template-columns: 1fr; gap: 16px; padding: 26px; }
    .a1b-step__chips { gap: 10px; }
    .a1b-faq__q { padding: 20px; font-size: 14px; }
    .a1b-faq__a { padding: 0 20px 20px; }
}

/* ── v2.1 REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .a1b-page-hero__inner { animation: none; }
    .a1b-step:hover { transform: none; }
    .a1b-faq__q::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — CONTACT
   ══════════════════════════════════════════════════════════════════════════ */
.a1b-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    animation: a1b-fadeInUp 0.7s ease-out 0.15s both;
}

.a1b-contact__lede {
    font-family: var(--a1b-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--a1b-text-2);
    margin: 0 0 40px;
}

.a1b-contact__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -0.5px;
    margin: 0 0 16px;
}

.a1b-contact__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.a1b-contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 24px;
    transition: border-color .3s cubic-bezier(.2, .7, .2, 1);
}
.a1b-contact-card:hover { border-color: rgba(184, 134, 11, 0.3); }

.a1b-contact-card__icon {
    width: 48px;
    height: 48px;
    background: rgba(184, 134, 11, 0.1);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.a1b-contact-card__label {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--a1b-text);
    margin-bottom: 4px;
}

.a1b-contact-card__value {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    color: var(--a1b-gold);
    text-decoration: none;
}
.a1b-contact-card__value:hover { color: var(--a1b-gold-light); }
.a1b-contact-card__value--muted { color: var(--a1b-text-2); }

/* ── FORM ─────────────────────────────────────────────────────────────── */
.a1b-form-wrap {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 40px;
}

.a1b-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.a1b-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.a1b-field__label {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-text-2);
    display: block;
    margin-bottom: 8px;
}

.a1b-field input[type="text"],
.a1b-field input[type="email"],
.a1b-field select,
.a1b-field textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: var(--a1b-font-body);
    font-size: 15px;
    color: var(--a1b-text);
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.a1b-field textarea { min-height: 140px; resize: vertical; }

.a1b-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--a1b-text-3) 50%),
                      linear-gradient(135deg, var(--a1b-text-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.a1b-field input::placeholder,
.a1b-field textarea::placeholder { color: var(--a1b-text-4); }

.a1b-field input:focus,
.a1b-field select:focus,
.a1b-field textarea:focus {
    outline: none;
    border-color: rgba(184, 134, 11, 0.55);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12);
}

/* Honeypot — hidden from people, visible to naive bots. */
.a1b-field--hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

.a1b-form__note {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
}
.a1b-form__note--ok {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--a1b-green);
}
.a1b-form__note--err {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.a1b-btn--full {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .a1b-contact__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .a1b-form-wrap  { padding: 26px; }
    .a1b-form__row  { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — NEWS / POST LISTING / EMPTY STATE
   Also used by index.php, which serves archives and search results.
   ══════════════════════════════════════════════════════════════════════════ */
.a1b-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    max-width: var(--a1b-container);
    margin: 0 auto;
}

.a1b-post-card {
    display: flex;
    flex-direction: column;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .3s cubic-bezier(.2, .7, .2, 1),
                transform .3s cubic-bezier(.2, .7, .2, 1);
}
.a1b-post-card:hover {
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateY(-3px);
}

.a1b-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--a1b-surface-2);
}
.a1b-post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.a1b-post-card:hover .a1b-post-card__media img { transform: scale(1.04); }

.a1b-post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

.a1b-post-card__meta {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.a1b-post-card__title {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 12px;
}
.a1b-post-card__title a { color: var(--a1b-text); text-decoration: none; }
.a1b-post-card__title a:hover { color: var(--a1b-gold-light); }

.a1b-post-card__excerpt {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--a1b-text-2);
    margin: 0 0 20px;
}

.a1b-post-card__more {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-decoration: none;
    margin-top: auto;
}
.a1b-post-card__more:hover { color: var(--a1b-gold-light); }

/* ── EMPTY STATE ──────────────────────────────────────────────────────── */
.a1b-empty {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    animation: a1b-fadeInUp 0.7s ease-out 0.15s both;
}

.a1b-empty__icon {
    width: 80px;
    height: 80px;
    background: var(--a1b-surface-2);
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 36px;
    margin: 0 auto 24px;
    line-height: 1;
}

.a1b-empty__title {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 12px;
}

.a1b-empty__desc {
    font-family: var(--a1b-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--a1b-text-2);
    margin: 0 0 32px;
}

/* ── PAGINATION ───────────────────────────────────────────────────────── */
.a1b-pagination {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}
.a1b-pagination .nav-links,
.a1b-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
.a1b-pagination a.page-numbers,
.a1b-pagination span.page-numbers {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 10px;
    padding: 10px 16px;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.a1b-pagination a.page-numbers:hover {
    color: var(--a1b-text);
    border-color: rgba(184, 134, 11, 0.4);
}
.a1b-pagination .page-numbers.current {
    color: var(--a1b-bg);
    background: var(--a1b-gold);
    border-color: var(--a1b-gold);
}

@media (max-width: 640px) {
    .a1b-posts { grid-template-columns: 1fr; }
    .a1b-post-card__body { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .a1b-post-card:hover { transform: none; }
    .a1b-post-card:hover .a1b-post-card__media img { transform: none; }
    .a1b-empty { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — PLUGIN SURFACE OVERRIDES
   Competition, Leaderboard and Store render their content from plugin
   shortcodes ([gp_platform], [gp_leaderboard], [gp_shop]). The markup and
   class names below belong to the plugins, so this file only restyles what
   they already emit — it never assumes markup the shortcodes do not produce.
   Same approach v2.0 used for .na-header.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Quiz Platform: shell ───────────────────────────────────────────── */
body.a1brainy .gp-platform {
    font-family: var(--a1b-font-body);
    color: var(--a1b-text);
    max-width: var(--a1b-container);
    margin: 0 auto;
}

/* ── Auth panel — the logged-out Competition view ─────────────────────── */
body.a1brainy .gp-auth-panel {
    max-width: 480px;
    margin: 0 auto;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 40px;
}

body.a1brainy .gp-auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}

body.a1brainy .gp-tab-btn {
    flex: 1;
    font-family: var(--a1b-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}
body.a1brainy .gp-tab-btn:hover {
    color: var(--a1b-gold);
    border-color: rgba(184, 134, 11, 0.4);
}
body.a1brainy .gp-tab-btn.active {
    color: var(--a1b-bg);
    background: var(--a1b-gold);
    border-color: var(--a1b-gold);
}

body.a1brainy .gp-hidden { display: none; }

/* ── Forms (login, register, profile) ─────────────────────────────────── */
body.a1brainy .gp-form h2 {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -0.5px;
    margin: 0 0 32px;
}

body.a1brainy .gp-form-group { margin-bottom: 20px; }

body.a1brainy .gp-form-group label {
    display: block;
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-text-2);
    margin-bottom: 8px;
}

body.a1brainy .gp-form input[type="text"],
body.a1brainy .gp-form input[type="email"],
body.a1brainy .gp-form input[type="password"],
body.a1brainy .gp-form select,
body.a1brainy .gp-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: var(--a1b-font-body);
    font-size: 15px;
    color: var(--a1b-text);
    transition: border-color .2s, box-shadow .2s;
}
body.a1brainy .gp-form input::placeholder { color: var(--a1b-text-4); }
body.a1brainy .gp-form input:focus,
body.a1brainy .gp-form select:focus,
body.a1brainy .gp-form textarea:focus {
    outline: none;
    border-color: rgba(184, 134, 11, 0.55);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.12);
}

body.a1brainy .gp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--a1b-font-body);
    font-size: 13px;
    color: var(--a1b-text-2);
    cursor: pointer;
    margin-bottom: 4px;
}
body.a1brainy .gp-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--a1b-gold);
    cursor: pointer;
}

body.a1brainy .gp-form-message:empty { display: none; }
body.a1brainy .gp-form-message {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0 0;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}
body.a1brainy .gp-form-message.success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--a1b-green);
}

/* ── Plugin buttons ───────────────────────────────────────────────────── */
body.a1brainy .gp-btn,
body.a1brainy .gps-btn,
body.a1brainy .gps-buy-btn {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 14px 28px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

body.a1brainy .gp-btn-primary,
body.a1brainy .gps-btn--points,
body.a1brainy .gps-buy-btn {
    background: var(--a1b-gold);
    color: var(--a1b-bg);
}
body.a1brainy .gp-btn-primary:hover,
body.a1brainy .gps-btn--points:hover,
body.a1brainy .gps-buy-btn:hover {
    background: var(--a1b-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 134, 11, 0.2);
}

body.a1brainy .gp-btn-ghost,
body.a1brainy .gps-btn--cash,
body.a1brainy .gps-btn--combined,
body.a1brainy .gps-btn--login {
    background: transparent;
    color: var(--a1b-gold);
    border-color: rgba(184, 134, 11, 0.35);
}
body.a1brainy .gp-btn-ghost:hover,
body.a1brainy .gps-btn--cash:hover,
body.a1brainy .gps-btn--combined:hover,
body.a1brainy .gps-btn--login:hover {
    border-color: rgba(184, 134, 11, 0.7);
    background: rgba(184, 134, 11, 0.06);
}

body.a1brainy .gp-btn-full,
body.a1brainy .gps-btn--full { width: 100%; }

/* ── Player header + nav tabs (logged-in Competition view) ────────────── */
body.a1brainy .gp-player-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
}
body.a1brainy .gp-player-avatar img { border-radius: 50%; display: block; }
body.a1brainy .gp-player-info { flex: 1; }
body.a1brainy .gp-player-info h3 {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 6px;
}
body.a1brainy .gp-player-header .gp-btn { margin-left: auto; }

body.a1brainy .gp-badge,
body.a1brainy .gp-rank-badge {
    display: inline-block;
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-gold);
    background: rgba(184, 134, 11, 0.1);
    padding: 5px 14px;
    border-radius: 20px;
    margin-right: 8px;
}
body.a1brainy .gp-score {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    color: var(--a1b-text-2);
}

body.a1brainy .gp-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}
body.a1brainy .gp-nav-btn {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: var(--a1b-surface-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}
body.a1brainy .gp-nav-btn:hover {
    color: var(--a1b-gold);
    border-color: rgba(184, 134, 11, 0.4);
}
body.a1brainy .gp-nav-btn.active {
    color: var(--a1b-bg);
    background: var(--a1b-gold);
    border-color: var(--a1b-gold);
}

/* ── Competition cards ────────────────────────────────────────────────── */
body.a1brainy .gp-competitions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
body.a1brainy .gp-comp-card {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 28px;
    transition: border-color .3s cubic-bezier(.2, .7, .2, 1),
                transform .3s cubic-bezier(.2, .7, .2, 1);
}
body.a1brainy .gp-comp-card:hover {
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateY(-3px);
}
body.a1brainy .gp-comp-card h3,
body.a1brainy .gp-comp-card-header h3 {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 10px;
}
body.a1brainy .gp-comp-meta {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    color: var(--a1b-text-3);
}
body.a1brainy .gp-comp-badge,
body.a1brainy .gp-badge-active {
    display: inline-block;
    font-family: var(--a1b-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--a1b-green);
    background: rgba(34, 197, 94, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
}

/* ── Leaderboard ──────────────────────────────────────────────────────── */
body.a1brainy .gp-leaderboard { max-width: 900px; margin: 0 auto; }

body.a1brainy .gp-lb-title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 28px;
    letter-spacing: -0.5px;
    margin: 0 0 24px;
}

body.a1brainy .gp-lb-table {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    overflow: hidden;
}

body.a1brainy .gp-lb-row {
    display: grid;
    grid-template-columns: 64px 1fr 110px 90px;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--a1b-border-2);
    transition: background .2s;
}
body.a1brainy .gp-lb-row:last-child { border-bottom: 0; }
body.a1brainy .gp-lb-row:hover { background: var(--a1b-surface-2); }

body.a1brainy .gp-lb-row.gp-lb-top { background: rgba(184, 134, 11, 0.04); }
body.a1brainy .gp-lb-row.gp-lb-top:hover { background: rgba(184, 134, 11, 0.08); }

/* The signed-in player's own row. */
body.a1brainy .gp-lb-row.gp-lb-current {
    background: rgba(184, 134, 11, 0.09);
    box-shadow: inset 3px 0 0 var(--a1b-gold);
}

body.a1brainy .gp-lb-pos {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 22px;
    color: var(--a1b-text-2);
}
body.a1brainy .gp-lb-top .gp-lb-pos { color: var(--a1b-gold-light); }

body.a1brainy .gp-lb-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--a1b-text);
    min-width: 0;
}

/* Tier, which the plugin nests inside the name cell as a <small>. */
body.a1brainy .gp-lb-rank {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

body.a1brainy .gp-lb-score {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--a1b-gold);
}
body.a1brainy .gp-lb-played {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    color: var(--a1b-text-2);
    text-align: right;
}

/* ── Notices / empty states / verify banner ───────────────────────────── */
body.a1brainy .gp-empty-state,
body.a1brainy .gps-empty {
    text-align: center;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 56px 28px;
    font-family: var(--a1b-font-body);
    color: var(--a1b-text-2);
}
body.a1brainy .gps-empty-icon { font-size: 36px; display: block; margin-bottom: 12px; }

body.a1brainy .gp-notice,
body.a1brainy .gps-notice,
body.a1brainy .gp-verify-banner {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    color: var(--a1b-text-2);
    background: rgba(184, 134, 11, 0.06);
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
}
body.a1brainy .gp-notice a,
body.a1brainy .gps-notice a,
body.a1brainy .gp-verify-banner a { color: var(--a1b-gold); font-weight: 600; }

/* ── Modal (quiz + checkout) ──────────────────────────────────────────── */
body.a1brainy .gp-modal-overlay,
body.a1brainy .gps-modal-overlay {
    background: rgba(8, 10, 15, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.a1brainy .gp-modal-content,
body.a1brainy .gps-modal {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    color: var(--a1b-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   GP SHOP
   ══════════════════════════════════════════════════════════════════════════ */
body.a1brainy .gps-shop {
    font-family: var(--a1b-font-body);
    color: var(--a1b-text);
    max-width: var(--a1b-container);
    margin: 0 auto;
}

/* The page hero already carries the title and subtitle, so the plugin's own
   copy of them is redundant here. Its balance card is kept. */
body.a1brainy .gps-shop-title,
body.a1brainy .gps-shop-subtitle { display: none; }

/* The plugin gives this row a bottom border to separate its title block from
   the products. That title is hidden here, so the rule was left underlining an
   empty row with the balance card floated to its right — the mockup has no
   divider at all. Border and its padding both go; only the card remains. */
body.a1brainy .gps-shop-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: 0;
}
body.a1brainy .gps-shop-header__balance {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 18px 24px;
}
body.a1brainy .gps-balance-label {
    font-size: 12px;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
body.a1brainy .gps-balance-value {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 24px;
    color: var(--a1b-gold);
}
body.a1brainy .gps-balance-rate { font-size: 12px; color: var(--a1b-text-3); }

/* The store page runs its hero straight into the product grid: the mockup
   gives the hero 36px of bottom padding and the products section none at the
   top. The generic .a1b-section 100px would leave the balance card stranded in
   a large empty band, which is what made the live page look unlike the mockup. */
body.a1brainy .a1b-section--tight { padding-top: 36px; }
@media (max-width: 767px) {
    body.a1brainy .a1b-section--tight { padding-top: 24px; }
}

/* Three per row, as the mockup specifies.
   This used to be repeat(auto-fill, minmax(320px, 1fr)), which made the column
   count depend on the window: three columns need 3x320 + 2x24 = 1008px of
   content width, so any window narrower than about 1100px silently dropped to
   two. An explicit count is what the mockup asks for and does not change
   underfoot; the breakpoints below still step it down on smaller screens. */
body.a1brainy .gps-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 1023px) {
    body.a1brainy .gps-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    body.a1brainy .gps-product-grid { grid-template-columns: 1fr; }
}

body.a1brainy .gps-product-card {
    display: flex;
    flex-direction: column;
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .3s cubic-bezier(.2, .7, .2, 1),
                transform .3s cubic-bezier(.2, .7, .2, 1);
}
body.a1brainy .gps-product-card:hover {
    border-color: rgba(184, 134, 11, 0.3);
    transform: translateY(-4px);
}

/* 5/4 rather than the mockup's 4/3: a taller frame gives the product photo
   noticeably more room in the same column width. */
body.a1brainy .gps-product-card__img,
body.a1brainy .gps-product-card__img-placeholder {
    position: relative;
    aspect-ratio: 5 / 4;
    background: var(--a1b-bg-2);
    display: grid;
    place-items: center;
    overflow: hidden;
}
body.a1brainy .gps-product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.a1brainy .gps-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px;
}

body.a1brainy .gps-product-card__name {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 10px;
}

body.a1brainy .gps-product-card__desc {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--a1b-text-2);
    margin: 0 0 24px;
}

body.a1brainy .gps-product-card__prices {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

body.a1brainy .gps-price--points {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184, 134, 11, 0.08);
    padding: 8px 14px;
    border-radius: 8px;
}
body.a1brainy .gps-price--points .gps-price__amount {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--a1b-gold);
}
body.a1brainy .gps-price--cash .gps-price__amount {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--a1b-text);
}
body.a1brainy .gps-price__label { font-size: 11px; color: var(--a1b-text-2); }
body.a1brainy .gps-price-divider { font-size: 12px; color: var(--a1b-text-3); }

/* The plugin stacks these buttons in a column and marks them white-space:
   nowrap. Overriding the container to a wrapping ROW without restoring a
   direction put them side by side, where a button wider than the card could
   not shrink and spilled past the card edge — the clipped price/action box.
   Back to a column of full-width buttons, which is what the card wants and
   what the plugin intended. */
body.a1brainy .gps-product-card__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}
body.a1brainy .gps-product-card__actions .gps-btn {
    width: 100%;
    white-space: normal;
}

/* ── GP Shop: product cards link through to their own page (v1.4.0) ─────── */

body.a1brainy .gps-product-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
body.a1brainy .gps-product-card__name a {
    color: inherit;
    text-decoration: none;
}
body.a1brainy .gps-product-card__name a:hover { color: var(--a1b-gold); }

body.a1brainy .gps-product-card__more {
    margin-top: 14px;
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-decoration: none;
    align-self: flex-start;
}
body.a1brainy .gps-product-card__more:hover { text-decoration: underline; }

/* ── GP Shop: single product page (v1.4.0) ─────────────────────────────── */

body.a1brainy .gps-single {
    background: var(--a1b-bg);
    padding: 48px 24px 96px;
}
body.a1brainy .gps-single__inner {
    max-width: var(--a1b-container);
    margin: 0 auto;
}
body.a1brainy .gps-single__crumbs {
    margin-bottom: 28px;
    font-family: var(--a1b-font-body);
    font-size: 14px;
}
body.a1brainy .gps-single__crumbs a {
    color: var(--a1b-text-2);
    text-decoration: none;
}
body.a1brainy .gps-single__crumbs a:hover { color: var(--a1b-gold); }

body.a1brainy .gps-single__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 899px) {
    body.a1brainy .gps-single__grid { grid-template-columns: 1fr; gap: 32px; }
}

body.a1brainy .gps-single__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center;
}
body.a1brainy .gps-single__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.a1brainy .gps-single__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 0 0 18px;
    color: var(--a1b-text);
}
body.a1brainy .gps-single__desc {
    font-family: var(--a1b-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--a1b-text-2);
    margin-bottom: 28px;
}
body.a1brainy .gps-single__desc p { margin: 0 0 14px; }

body.a1brainy .gps-single__prices { margin-bottom: 20px; }

body.a1brainy .gps-single__balance {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    color: var(--a1b-text-3);
    margin: 0 0 24px;
}

/* The single page has room, so the buttons sit in a row until it gets tight. */
body.a1brainy .gps-single .gps-product-card__actions { gap: 12px; }

/* The plugin positions this bottom-left. Setting top/right alone was not
   enough: its `left` survived, so the box stretched from left:8px to
   right:12px and the label sat at the LEFT edge. Both of the plugin's offsets
   have to be cleared for the badge to sit in the corner the mockup shows. */
body.a1brainy .gps-product-card__stock {
    position: absolute;
    top: 12px;
    right: 12px;
    left: auto;
    bottom: auto;
    font-family: var(--a1b-font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
}
body.a1brainy .gps-stock-ok  { background: rgba(34, 197, 94, 0.85);  color: #04140a; }
body.a1brainy .gps-stock-low { background: rgba(220, 38, 38, 0.9);   color: #fff5f5; }

/* ── My Orders ────────────────────────────────────────────────────────── */
body.a1brainy .gps-my-orders { max-width: 900px; margin: 0 auto; }
body.a1brainy .gps-my-orders__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 28px;
    margin: 0 0 24px;
}
body.a1brainy .gps-orders-list {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    overflow: hidden;
}
body.a1brainy .gps-order-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--a1b-border-2);
}
body.a1brainy .gps-order-row:last-child { border-bottom: 0; }
body.a1brainy .gps-order-row__name { font-weight: 600; }
body.a1brainy .gps-order-row__meta,
body.a1brainy .gps-order-row__date,
body.a1brainy .gps-order-row__id { font-size: 13px; color: var(--a1b-text-3); }
body.a1brainy .gps-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--a1b-text-2);
    margin-left: auto;
}

/* ── Plugin surfaces: responsive ──────────────────────────────────────── */
@media (max-width: 720px) {
    body.a1brainy .gp-auth-panel { padding: 26px; }
    body.a1brainy .gp-player-header { flex-wrap: wrap; }
    body.a1brainy .gp-player-header .gp-btn { margin-left: 0; width: 100%; }
    body.a1brainy .gp-lb-row {
        grid-template-columns: 44px 1fr auto;
        row-gap: 6px;
        padding: 16px 18px;
    }
    body.a1brainy .gp-lb-played { display: none; }
    body.a1brainy .gp-lb-name { flex-wrap: wrap; gap: 8px; }
    body.a1brainy .gps-shop-header { justify-content: stretch; }
    body.a1brainy .gps-shop-header__balance { width: 100%; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    body.a1brainy .gp-comp-card:hover,
    body.a1brainy .gps-product-card:hover,
    body.a1brainy .gp-btn-primary:hover,
    body.a1brainy .gps-buy-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — LEADERBOARD PAGE
   The template keeps the na-lb-tab / na-lb-panel class names because
   assets/js/main.js binds its tab switching to them. Those are behaviour
   hooks; everything visual below is a1b-.
   ══════════════════════════════════════════════════════════════════════════ */
.a1b-page-hero__glow {
    position: absolute;
    top: -200px; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 500px;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.08), transparent 60%);
    pointer-events: none;
}

.a1b-lb { max-width: 900px; margin: 0 auto; }

.a1b-lb__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.a1b-lb__tab {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: var(--a1b-surface-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}
.a1b-lb__tab:hover {
    color: var(--a1b-gold);
    border-color: rgba(184, 134, 11, 0.4);
}
.a1b-lb__tab.active {
    color: var(--a1b-bg);
    background: var(--a1b-gold);
    border-color: var(--a1b-gold);
}

.a1b-lb__table {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    overflow: hidden;
}

.a1b-lb__head,
.a1b-lb__row {
    display: grid;
    grid-template-columns: 64px 1fr 160px 100px 80px;
    align-items: center;
    gap: 12px;
}

.a1b-lb__head {
    padding: 14px 28px;
    border-bottom: 1px solid var(--a1b-border-2);
}
.a1b-lb__head span {
    font-family: var(--a1b-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.a1b-lb__head span:last-child { text-align: right; }

.a1b-lb__row {
    padding: 20px 28px;
    border-bottom: 1px solid var(--a1b-border-2);
    transition: background .2s;
}
.a1b-lb__row:last-child { border-bottom: 0; }
.a1b-lb__row:hover { background: var(--a1b-surface-2); }

.a1b-lb__row--top { background: rgba(184, 134, 11, 0.04); }
.a1b-lb__row--top:hover { background: rgba(184, 134, 11, 0.08); }

.a1b-lb__row--me {
    background: rgba(184, 134, 11, 0.09);
    box-shadow: inset 3px 0 0 var(--a1b-gold);
}
.a1b-lb__row--me:hover { background: rgba(184, 134, 11, 0.13); }

.a1b-lb__pos {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 22px;
    color: var(--a1b-text-2);
}
.a1b-lb__row--top .a1b-lb__pos { color: var(--a1b-gold-light); }

.a1b-lb__player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Initial-letter avatar. The letter itself comes from the template as a
   data attribute, because CSS alone cannot extract it from the username. */
.a1b-lb__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--a1b-surface-2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--a1b-gold);
    text-transform: uppercase;
}
.a1b-lb__row--top .a1b-lb__avatar { background: rgba(184, 134, 11, 0.15); }

.a1b-lb__name {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--a1b-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.a1b-lb__tier {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 14px;
    border-radius: 20px;
    width: fit-content;
    white-space: nowrap;
}

.a1b-lb__you {
    font-family: var(--a1b-font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--a1b-bg);
    background: var(--a1b-gold);
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.a1b-lb__score {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--a1b-gold);
}

.a1b-lb__played {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    color: var(--a1b-text-2);
    text-align: right;
}

.na-lb-panel--hidden { display: none; }

@media (max-width: 860px) {
    .a1b-lb__head { display: none; }
    .a1b-lb__row {
        grid-template-columns: 48px 1fr auto;
        row-gap: 8px;
        padding: 16px 18px;
    }
    .a1b-lb__tier   { grid-column: 2 / 4; }
    .a1b-lb__played { display: none; }
}

@media (max-width: 480px) {
    .a1b-lb__avatar { display: none; }
    .a1b-lb__tab    { flex: 1 1 auto; text-align: center; }
}

/* ── Plugin !important overrides ──────────────────────────────────────────
   gp-style.css forces a few declarations with !important, which beats
   ordinary specificity. These are the ones that land on surfaces v2.1
   restyles, so they have to be answered in kind.

   .gp-badge-active is the "active competition" pill: the plugin pins it to
   its old cyan accent (#00d4ff), which is not in this palette.
──────────────────────────────────────────────────────────────────────────── */
body.a1brainy .gp-badge-active {
    background: rgba(34, 197, 94, 0.1) !important;
    color: var(--a1b-green) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* The plugin gives the active tab a 2px cyan underline and a -1px nudge that
   made sense for its own tab strip, but not for the filled pill used here. */
body.a1brainy .gp-tab-btn.active {
    border-bottom-width: 1px;
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — FOOTER FIXES
   The v2.0 footer restyle set the 4-column grid but never constrained the
   logo or styled the link lists, so on the live site the brand mark rendered
   at its natural size and the social row was a strip of empty discs.
   ══════════════════════════════════════════════════════════════════════════ */

/* the_custom_logo() is shared with the header, which caps it at 40px. The
   footer had no cap at all, so the full-resolution asset was painted. */
body.a1brainy .na-footer .na-footer__brand img,
body.a1brainy .na-footer .na-footer__logo img,
body.a1brainy .na-footer .na-footer__logo .custom-logo,
body.a1brainy .na-footer .custom-logo-link img {
    /* !important because the logo asset is ~1200px wide and any rule that
       wins here blows the whole column out. Nothing should be overriding a
       footer logo cap, so losing this silently is worse than the specificity
       cost. */
    max-height: 44px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
}
body.a1brainy .na-footer .custom-logo-link { display: inline-block; line-height: 0; }
body.a1brainy .na-footer__logo .na-site-name {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 22px;
    text-decoration: none;
}

body.a1brainy .na-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.a1brainy .na-footer__links a {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    color: var(--a1b-text-2);
    text-decoration: none;
    transition: color .2s;
}
body.a1brainy .na-footer__links a:hover { color: var(--a1b-gold); }

/* Widget areas dropped into these columns arrive with the theme's default
   widget chrome; the footer columns are flat in the mockup. */
body.a1brainy .na-footer__col .widget,
body.a1brainy .na-footer__col .na-widget {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}
body.a1brainy .na-footer__col ul li { border: 0; }

/* If a Social menu is present anywhere else, keep the discs on-palette
   rather than the old cyan. */
body.a1brainy .na-social-links li a {
    background: var(--a1b-surface);
    border-color: var(--a1b-border-2);
    color: var(--a1b-text-2);
}
body.a1brainy .na-social-links li a:hover {
    border-color: rgba(184, 134, 11, 0.5);
    color: var(--a1b-gold);
    background: rgba(184, 134, 11, 0.06);
}

@media (max-width: 900px) {
    body.a1brainy .na-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    body.a1brainy .na-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    body.a1brainy .na-footer__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.2 — PLAYER DASHBOARD
   An app shell, not a marketing page: fixed sidebar + scrolling main column.
   The public header/footer are suppressed on this template.
   ══════════════════════════════════════════════════════════════════════════ */
.a1b-dash { display: flex; min-height: 100vh; background: var(--a1b-bg); }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.a1b-dash__side {
    width: 260px;
    flex-shrink: 0;
    background: #06080c;
    border-right: 1px solid var(--a1b-border-2);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
}
.a1b-dash__brand {
    padding: 0 24px 28px;
    border-bottom: 1px solid var(--a1b-border-2);
}
.a1b-dash__brand img { max-height: 34px; width: auto; display: block; }

.a1b-dash__nav {
    flex: 1;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}
.a1b-dash__navlink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 10px;
    font-family: var(--a1b-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--a1b-text-2);
    text-decoration: none;
    transition: color .2s, background .2s;
}
.a1b-dash__navlink:hover { color: var(--a1b-text); background: var(--a1b-surface); }
.a1b-dash__navlink[aria-current="page"] {
    color: var(--a1b-text);
    font-weight: 600;
    background: rgba(184, 134, 11, 0.1);
}
.a1b-dash__navicon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }

.a1b-dash__user {
    padding: 16px 8px 0;
    margin: 0 12px;
    border-top: 1px solid var(--a1b-border-2);
    display: flex;
    align-items: center;
    gap: 12px;
}
.a1b-dash__username {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--a1b-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.a1b-dash__usermeta { font-size: 11px; color: var(--a1b-text-3); }

/* ── Avatars ──────────────────────────────────────────────────────────── */
.a1b-avatar {
    background: var(--a1b-surface-2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--a1b-font-display);
    font-weight: 700;
    color: var(--a1b-gold);
    text-transform: uppercase;
    flex-shrink: 0;
}
.a1b-avatar--sm { width: 40px; height: 40px; font-size: 16px; }
.a1b-avatar--lg {
    width: 72px; height: 72px; font-size: 28px; font-weight: 900;
    border: 2px solid rgba(184, 134, 11, 0.3);
}

/* ── Main column ──────────────────────────────────────────────────────── */
.a1b-dash__main { flex: 1; min-width: 0; padding: 32px 40px; }

.a1b-dash__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.a1b-dash__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 32px;
    letter-spacing: -1px;
    margin: 0;
}
.a1b-dash__subtitle { font-size: 14px; color: var(--a1b-text-3); margin: 6px 0 0; }

.a1b-card {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
.a1b-card__title {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 20px;
}

/* ── Profile hero ─────────────────────────────────────────────────────── */
.a1b-dash__hero { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.a1b-dash__heroname {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.5px;
}
.a1b-dash__herometa { font-size: 13px; color: var(--a1b-text-3); margin-top: 4px; }
.a1b-dash__balance { text-align: right; margin-left: auto; }
.a1b-dash__balancelabel {
    font-size: 11px;
    font-weight: 600;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.a1b-dash__balancevalue {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 28px;
    color: var(--a1b-gold);
    letter-spacing: -1px;
}

.a1b-tier {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-green);
    background: rgba(34, 197, 94, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Rank progress ────────────────────────────────────────────────────── */
.a1b-progress { background: var(--a1b-bg-2); border-radius: 10px; padding: 16px 20px; }
.a1b-progress__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
}
.a1b-progress__label { font-weight: 600; color: var(--a1b-text-2); }
.a1b-progress__note  { color: var(--a1b-text-3); }
.a1b-progress__track {
    background: var(--a1b-surface-2);
    border-radius: 6px;
    height: 10px;
    overflow: hidden;
}
.a1b-progress__bar {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--a1b-green), var(--a1b-gold));
    transition: width .6s cubic-bezier(.32, .72, 0, 1);
}
.a1b-progress__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
}
.a1b-progress__from { color: var(--a1b-green); }
.a1b-progress__to   { color: var(--a1b-gold); }

/* ── Stats row ────────────────────────────────────────────────────────── */
.a1b-dash__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.a1b-stattile {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 24px;
}
.a1b-stattile__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.a1b-stattile__value {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 36px;
    letter-spacing: -1.5px;
    line-height: 1;
}
.a1b-stattile__note { font-size: 12px; color: var(--a1b-text-3); margin-top: 6px; }

/* ── Two-column region ────────────────────────────────────────────────── */
.a1b-dash__cols {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ── History table ────────────────────────────────────────────────────── */
.a1b-history__head,
.a1b-history__row {
    display: grid;
    grid-template-columns: 1fr 90px 90px 80px 100px;
    align-items: center;
    gap: 12px;
}
.a1b-history__head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--a1b-border-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--a1b-text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.a1b-history__row {
    padding: 18px 0;
    border-bottom: 1px solid var(--a1b-border-2);
    font-size: 14px;
}
.a1b-history__row:last-child { border-bottom: 0; }
.a1b-history__name { font-weight: 600; color: var(--a1b-text); }
.a1b-history__date { font-size: 12px; color: var(--a1b-text-3); margin-top: 2px; }
.a1b-history__score { font-family: var(--a1b-font-display); font-weight: 700; color: var(--a1b-gold); }
.a1b-result {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
}
.a1b-result--pass { color: var(--a1b-green); background: rgba(34, 197, 94, 0.1); }
.a1b-result--fail { color: #f87171;          background: rgba(239, 68, 68, 0.1); }

/* ── Achievements ─────────────────────────────────────────────────────── */
.a1b-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.a1b-achv {
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    opacity: .45;
    transition: opacity .3s, border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.a1b-achv--earned {
    opacity: 1;
    border-color: rgba(184, 134, 11, 0.3);
    background: rgba(184, 134, 11, 0.05);
}
.a1b-achv--earned:hover { transform: translateY(-2px); }
.a1b-achv__icon { font-size: 28px; line-height: 1; margin-bottom: 10px; }
.a1b-achv__name {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}
.a1b-achv__desc { font-size: 12px; color: var(--a1b-text-3); line-height: 1.5; }

/* ── Dashboard responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .a1b-dash__cols { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
    .a1b-dash { flex-direction: column; }
    .a1b-dash__side {
        width: 100%;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--a1b-border-2);
    }
    .a1b-dash__navlink { white-space: nowrap; }
    .a1b-dash__user { border-top: 0; padding-bottom: 8px; }
    .a1b-dash__main { padding: 24px 20px; }
}
@media (max-width: 620px) {
    .a1b-dash__balance { margin-left: 0; text-align: left; width: 100%; }
    .a1b-history__head { display: none; }
    .a1b-history__row  { grid-template-columns: 1fr auto; row-gap: 6px; }
    .a1b-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .a1b-progress__bar { transition: none; }
    .a1b-achv--earned:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.3 — PAGE, POST AND 404
   The last templates still on the legacy na- system. No mockups existed for
   these, so they are derived from the components already established rather
   than inventing a new visual language.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Prose — styles whatever the editor produces ───────────────────────── */
.a1b-prose {
    font-family: var(--a1b-font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--a1b-text-2);
    max-width: 72ch;
}
.a1b-prose > * + * { margin-top: 1.25em; }

.a1b-prose h1, .a1b-prose h2, .a1b-prose h3,
.a1b-prose h4, .a1b-prose h5, .a1b-prose h6 {
    font-family: var(--a1b-font-display);
    color: var(--a1b-text);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-top: 2em;
    margin-bottom: .6em;
}
.a1b-prose h1 { font-size: 2.2em; font-weight: 900; }
.a1b-prose h2 { font-size: 1.7em; font-weight: 900; }
.a1b-prose h3 { font-size: 1.35em; font-weight: 700; }
.a1b-prose h4 { font-size: 1.15em; font-weight: 700; }
.a1b-prose h5, .a1b-prose h6 { font-size: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.a1b-prose > :first-child { margin-top: 0; }

.a1b-prose a {
    color: var(--a1b-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(184, 134, 11, .45);
    transition: text-decoration-color .2s, color .2s;
}
.a1b-prose a:hover { color: var(--a1b-gold); text-decoration-color: currentColor; }

.a1b-prose strong { color: var(--a1b-text); font-weight: 700; }
.a1b-prose em     { font-style: italic; }

.a1b-prose ul, .a1b-prose ol { padding-left: 1.4em; }
.a1b-prose li + li { margin-top: .4em; }
.a1b-prose ul > li::marker { color: var(--a1b-gold); }
.a1b-prose ol > li::marker { color: var(--a1b-gold); font-family: var(--a1b-font-display); font-weight: 700; }

.a1b-prose blockquote {
    border-left: 3px solid var(--a1b-gold);
    padding: 4px 0 4px 24px;
    margin-left: 0;
    color: var(--a1b-text);
    font-size: 1.05em;
}
.a1b-prose blockquote cite { display: block; margin-top: .6em; font-size: .8em; color: var(--a1b-text-3); font-style: normal; }

.a1b-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em;
    background: var(--a1b-surface-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 5px;
    padding: .12em .4em;
    color: var(--a1b-gold-light);
}
.a1b-prose pre {
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 12px;
    padding: 20px 22px;
    overflow-x: auto;
    font-size: .9em;
    line-height: 1.6;
}
.a1b-prose pre code { background: none; border: 0; padding: 0; color: var(--a1b-text-2); }

.a1b-prose img,
.a1b-prose video,
.a1b-prose iframe { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.a1b-prose figure { margin: 2em 0; }
.a1b-prose figcaption { font-size: 13px; color: var(--a1b-text-3); text-align: center; margin-top: 10px; }

/* Tables scroll rather than forcing the page sideways. */
.a1b-prose .a1b-table-scroll { overflow-x: auto; }
.a1b-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95em;
}
.a1b-prose th, .a1b-prose td {
    border-bottom: 1px solid var(--a1b-border-2);
    padding: 12px 14px;
    text-align: left;
}
.a1b-prose th { color: var(--a1b-text); font-weight: 600; }

.a1b-prose hr { border: 0; border-top: 1px solid var(--a1b-border-2); margin: 2.5em 0; }

/* ── Page / post layout ───────────────────────────────────────────────── */
.a1b-entry { max-width: var(--a1b-container); margin: 0 auto; }

.a1b-entry__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}
.a1b-entry__grid--full { grid-template-columns: minmax(0, 1fr); }

/* ── Post meta in the hero ────────────────────────────────────────────── */
.a1b-postmeta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    font-family: var(--a1b-font-body);
    font-size: 13px;
    color: var(--a1b-text-3);
    margin-bottom: 18px;
}
.a1b-postmeta a { color: var(--a1b-gold); text-decoration: none; }
.a1b-postmeta a:hover { color: var(--a1b-gold-light); }
.a1b-postmeta__dot { color: var(--a1b-text-4); }

/* Featured image behind the post hero. */
.a1b-page-hero--post { position: relative; }
.a1b-page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .25;
}
.a1b-page-hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,10,15,.55) 0%, var(--a1b-bg) 100%);
}

/* ── Tags ─────────────────────────────────────────────────────────────── */
.a1b-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.a1b-tag {
    font-family: var(--a1b-font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--a1b-text-2);
    background: var(--a1b-surface-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 20px;
    padding: 6px 14px;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.a1b-tag:hover { color: var(--a1b-gold); border-color: rgba(184, 134, 11, .4); }

/* ── Prev / next ──────────────────────────────────────────────────────── */
.a1b-postnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--a1b-border-2);
}
.a1b-postnav__item {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 20px 22px;
    text-decoration: none;
    transition: border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.a1b-postnav__item:hover { border-color: rgba(184, 134, 11, .3); transform: translateY(-2px); }
.a1b-postnav__item--next { text-align: right; grid-column: 2; }
.a1b-postnav__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.a1b-postnav__title {
    display: block;
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--a1b-text);
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.a1b-sidebar { position: sticky; top: calc(var(--a1b-header-h) + 24px); }
.a1b-sidebar .widget,
.a1b-sidebar .na-widget {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}
.a1b-sidebar .na-widget__title,
.a1b-sidebar .widget-title,
.a1b-sidebar h3 {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--a1b-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px;
}
.a1b-sidebar ul { list-style: none; padding: 0; margin: 0; }
.a1b-sidebar li { margin-bottom: 10px; }
.a1b-sidebar a {
    font-family: var(--a1b-font-body);
    font-size: 14px;
    color: var(--a1b-text-2);
    text-decoration: none;
}
.a1b-sidebar a:hover { color: var(--a1b-gold); }

/* ── Comments ─────────────────────────────────────────────────────────── */
.a1b-comments { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--a1b-border-2); }
.a1b-comments .comment-reply-title,
.a1b-comments .comments-title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: 22px;
    margin: 0 0 20px;
}
.a1b-comments .comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.a1b-comments .comment-body {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 16px;
}
.a1b-comments .comment-author { font-weight: 600; color: var(--a1b-text); }
.a1b-comments .comment-metadata a { color: var(--a1b-text-3); font-size: 12px; text-decoration: none; }
.a1b-comments .comment-content { color: var(--a1b-text-2); font-size: 15px; line-height: 1.7; }
.a1b-comments input[type="text"],
.a1b-comments input[type="email"],
.a1b-comments input[type="url"],
.a1b-comments textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--a1b-bg-2);
    border: 1px solid var(--a1b-border-2);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--a1b-font-body);
    font-size: 15px;
    color: var(--a1b-text);
}
.a1b-comments input:focus, .a1b-comments textarea:focus {
    outline: none;
    border-color: rgba(184, 134, 11, .55);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, .12);
}
.a1b-comments .submit {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    background: var(--a1b-gold);
    color: var(--a1b-bg);
    border: 0;
    border-radius: 10px;
    padding: 14px 28px;
    cursor: pointer;
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.a1b-404 { text-align: center; max-width: 620px; margin: 0 auto; padding: 40px 0 20px; }
.a1b-404__code {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(96px, 20vw, 200px);
    line-height: .9;
    letter-spacing: -.06em;
    background: linear-gradient(180deg, var(--a1b-gold-light), rgba(184, 134, 11, .15));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
}
.a1b-404__title {
    font-family: var(--a1b-font-display);
    font-weight: 900;
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: -1px;
    margin: 0 0 14px;
}
.a1b-404__desc { font-size: 16px; line-height: 1.7; color: var(--a1b-text-2); margin: 0 0 32px; }
.a1b-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.a1b-404 .a1b-searchform, .a1b-404 form { display: flex; gap: 8px; justify-content: center; }
.a1b-404 input[type="search"] {
    background: var(--a1b-surface);
    border: 1px solid var(--a1b-border-2);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--a1b-font-body);
    font-size: 15px;
    color: var(--a1b-text);
    min-width: 220px;
}
.a1b-404 input[type="search"]:focus {
    outline: none;
    border-color: rgba(184, 134, 11, .55);
}

/* ── v2.3 responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .a1b-entry__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .a1b-sidebar { position: static; }
}
@media (max-width: 640px) {
    .a1b-prose { font-size: 16px; }
    .a1b-postnav { grid-template-columns: 1fr; }
    .a1b-postnav__item--next { grid-column: 1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .a1b-postnav__item:hover { transform: none; }
}

/* ── Dashboard: active competitions + leaderboard (v2.3.6) ──────────────────
   The mockup's two-column row. Both cards reuse .a1b-card and .a1b-empty, so
   they inherit the panel treatment and the empty states already in use. */

body.a1brainy .a1b-dash__two {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}
@media (max-width: 1023px) {
    body.a1brainy .a1b-dash__two { grid-template-columns: 1fr; }
}

body.a1brainy .a1b-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
body.a1brainy .a1b-card__head .a1b-card__title { margin: 0; }
body.a1brainy .a1b-card__more {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-decoration: none;
    white-space: nowrap;
}
body.a1brainy .a1b-card__more:hover { text-decoration: underline; }

/* ── one active competition ───────────────────────────────────────────── */
body.a1brainy .a1b-comprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--a1b-border-2);
}
body.a1brainy .a1b-comprow:last-child { border-bottom: 0; padding-bottom: 0; }
body.a1brainy .a1b-comprow__main { min-width: 0; }
body.a1brainy .a1b-comprow__name {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--a1b-text);
    margin-bottom: 4px;
}
body.a1brainy .a1b-comprow__meta {
    font-size: 13px;
    color: var(--a1b-text-3);
}
body.a1brainy .a1b-comprow__cta {
    font-family: var(--a1b-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--a1b-gold);
    text-decoration: none;
    white-space: nowrap;
}
body.a1brainy .a1b-comprow__cta:hover { text-decoration: underline; }

body.a1brainy .a1b-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
body.a1brainy .a1b-pill--done {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

/* ── one leaderboard row ──────────────────────────────────────────────── */
body.a1brainy .a1b-lbrow {
    display: grid;
    grid-template-columns: 28px auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 10px;
}
body.a1brainy .a1b-lbrow--me {
    background: rgba(184, 134, 11, 0.09);
    border: 1px solid rgba(184, 134, 11, 0.25);
}
body.a1brainy .a1b-lbrow__pos {
    font-size: 15px;
    text-align: center;
    color: var(--a1b-text-3);
}
body.a1brainy .a1b-lbrow__name {
    font-family: var(--a1b-font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--a1b-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.a1brainy .a1b-lbrow__you {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(184, 134, 11, 0.18);
    color: var(--a1b-gold);
    font-size: 11px;
    font-weight: 700;
}
body.a1brainy .a1b-lbrow__score {
    font-family: var(--a1b-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--a1b-gold);
}

/* The history table gained a Speed column; drop it first when space runs out
   rather than letting five columns crush the competition name. */
@media (max-width: 1023px) {
    body.a1brainy .a1b-history__head,
    body.a1brainy .a1b-history__row { grid-template-columns: 1fr 80px 80px 90px; }
    body.a1brainy .a1b-history__head span:nth-child(4),
    body.a1brainy .a1b-history__row  span:nth-child(4) { display: none; }
}

/* ── Dashboard on small screens (v2.3.6) ────────────────────────────────────
   The shell was a flex row with a fixed 260px sidebar and no breakpoint, so on
   a phone the sidebar ate most of the width and the panels beside it were
   crushed. Below 900px it becomes a bar across the top with a scrolling nav. */
/* ── Dashboard sidebar nav (v2.4.2) ─────────────────────────────────────────
   The nav is an ordinary, always-visible list on desktop. On phones it
   collapses behind a "☰ Menu" toggle driven purely by a checkbox — no
   <details>, whose collapsed-child behaviour hid the whole nav on desktop in
   some browsers. That is the bug this replaces. */

/* Desktop: the toggle is irrelevant, the nav simply shows (its base rule sets
   display:flex already). */
body.a1brainy .a1b-dash__menubtn { display: none; }

@media (max-width: 899px) {
    body.a1brainy .a1b-dash { flex-direction: column; min-height: 0; }

    body.a1brainy .a1b-dash__side {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--a1b-border-2);
        padding-bottom: 12px;
    }

    /* The sidebar's own name/rank block repeats the profile card right below
       it — pure duplication, and expensive on a phone screen. */
    body.a1brainy .a1b-dash__user { display: none; }

    body.a1brainy .a1b-dash__menubtn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        margin: 0 12px;
        border: 1px solid var(--a1b-border-2);
        border-radius: 10px;
        font-family: var(--a1b-font-body);
        font-weight: 600;
        font-size: 15px;
        color: var(--a1b-text);
        cursor: pointer;
        user-select: none;
    }
    body.a1brainy .a1b-dash__menubtn::after {
        content: '▾';
        margin-left: auto;
        color: var(--a1b-text-3);
        transition: transform .2s;
    }
    body.a1brainy .a1b-dash__navtoggle:checked ~ .a1b-dash__menubtn::after { transform: rotate(180deg); }
    body.a1brainy .a1b-dash__menubtn-icon { font-size: 16px; }

    /* Collapsed by default; the checkbox reveals it. The general sibling
       combinator works because the toggle, the label and the nav are all
       siblings inside the sidebar. */
    body.a1brainy .a1b-dash__nav { display: none; }
    body.a1brainy .a1b-dash__navtoggle:checked ~ .a1b-dash__nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: visible;
        padding: 10px 12px 0;
    }

    body.a1brainy .a1b-dash__main { padding: 24px 16px 48px; }
}

/* Narrower still: the history keeps only what identifies the row and how it
   ended. Accuracy and speed are in the detail, not in a 360px-wide table. */
@media (max-width: 479px) {
    body.a1brainy .a1b-history__head,
    body.a1brainy .a1b-history__row { grid-template-columns: 1fr 60px 78px; }
    body.a1brainy .a1b-history__head span:nth-child(3),
    body.a1brainy .a1b-history__row  span:nth-child(3) { display: none; }
}