/* Color Brain Test -- restyle to the rx design language (design only; JS hooks untouched) */
body.rx.brain-color-page {
    --brain-ink: var(--rx-navy);
    --brain-muted: var(--rx-text);
    --brain-border: var(--rx-lilac-2);
    --brain-shadow: var(--rx-shadow);
    --brain-backdrop: #ffffff;
    background: #fff;
}
body.rx .brain-color-main { padding: 48px 24px 80px; }
body.rx .brain-color-shell { max-width: 1120px; gap: 28px; grid-template-columns: minmax(0, 1fr); }
body.rx .brain-color-shell > * { min-width: 0; }

/* Shared card chrome */
body.rx .brain-color-quiz-card,
body.rx .brain-color-result-card {
    background: #fff;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--rx-lilac-2);
    border-radius: 24px;
    box-shadow: var(--rx-shadow);
}
body.rx .brain-color-quiz-card { padding: 36px; }
body.rx .brain-color-result-card { background: var(--rx-lilac); padding: 32px; }
body.rx .brain-color-intro-card::before,
body.rx .brain-color-quiz-card::before,
body.rx .brain-color-result-card::before,
body.rx .brain-color-intro-card::after { display: none; }

/* Kicker */
body.rx .brain-color-kicker {
    color: var(--rx-purple); font-weight: 600; font-size: 0.9rem;
    letter-spacing: 0.01em; text-transform: none; font-family: var(--rx-font);
}
body.rx .brain-color-kicker::before { background: var(--rx-purple-2, #8b6cf6); width: 24px; height: 2px; border-radius: 2px; }
body.rx .brain-color-kicker-on-dark { color: rgba(255, 255, 255, 0.85); }
body.rx .brain-color-kicker-on-dark::before { background: rgba(255, 255, 255, 0.6); }

/* ---------- Intro as dark hero ---------- */
body.rx .brain-color-intro-card {
    border: 0; border-radius: 28px; padding: clamp(36px, 6vw, 72px);
    color: rgba(255, 255, 255, 0.82);
    background:
        radial-gradient(circle at 12% 20%, rgba(109, 79, 224, 0.35), transparent 40%),
        radial-gradient(circle at 88% 80%, rgba(58, 109, 240, 0.28), transparent 42%),
        var(--rx-grad-dark);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(30, 18, 90, 0.28);
}
body.rx .brain-color-intro-card::after {
    display: block; content: ""; position: absolute; right: 24px; top: 50%; width: 440px; height: 440px;
    transform: translateY(-50%); pointer-events: none;
    background: url("../../assets/images/rx-neural-brain.svg") center / contain no-repeat; opacity: 0.9;
}
body.rx .brain-hero-copy { position: relative; z-index: 1; }
body.rx .brain-color-intro-card .brain-color-kicker { color: var(--rx-teal-soft, #5fe0d6); }
body.rx .brain-color-intro-card .brain-color-kicker::before { background: var(--rx-teal-soft, #5fe0d6); }
body.rx .brain-color-title {
    color: #fff; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; max-width: 12ch;
}
body.rx .brain-color-body { color: rgba(255, 255, 255, 0.8); font-size: 1.08rem; line-height: 1.65; max-width: 46ch; }
body.rx .brain-color-pill {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff; font-weight: 500; font-size: 0.9rem;
}
body.rx .brain-hero-note { color: rgba(255, 255, 255, 0.66); font-size: 0.9rem; }
body.rx .brain-color-start.btn-editorial-solid {
    border-color: transparent;
    background: linear-gradient(135deg, #c7b5ff, #9b7bff); color: #1d1650;
    box-shadow: 0 6px 18px rgba(155, 123, 255, 0.35);
}
body.rx .brain-color-start.btn-editorial-solid:hover, body.rx .brain-color-start.btn-editorial-solid:focus-visible {
    filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(155, 123, 255, 0.45); color: #1d1650;
}

/* ---------- Pill buttons (navy / purple) ---------- */
body.rx .btn-editorial-solid { background: var(--rx-navy); color: #fff; border-color: var(--rx-navy); }
body.rx .btn-editorial-solid:hover, body.rx .btn-editorial-solid:focus-visible {
    background: var(--rx-purple); border-color: var(--rx-purple); color: #fff; transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(109, 79, 224, 0.3);
}
body.rx .brain-color-back {
    min-height: 44px; padding: 10px 22px; background: #fff; color: var(--rx-navy);
    border: 1.5px solid var(--rx-lilac-2); font-family: var(--rx-font); font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
body.rx .brain-color-back:hover:not(:disabled), body.rx .brain-color-back:focus-visible {
    border-color: var(--rx-purple); color: var(--rx-purple); outline: none;
}
body.rx .brain-color-back:focus-visible { outline: 3px solid var(--rx-purple-2); outline-offset: 2px; }

/* ---------- Progress ---------- */
body.rx .brain-color-progress-label { color: var(--rx-navy); font-weight: 600; }
body.rx .brain-color-progress-count { color: var(--rx-text); }
body.rx .brain-color-progress-track { background: var(--rx-lilac-2); height: 8px; }
body.rx .brain-color-progress-fill { background: linear-gradient(90deg, var(--rx-purple), #9b7bff); }

/* ---------- Question + options ---------- */
body.rx .brain-color-question {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em;
    font-weight: 600; max-width: 16ch; color: var(--rx-navy);
}
body.rx .brain-quiz-caption { color: var(--rx-text); }
body.rx .brain-option {
    min-height: 150px; padding: 22px; border-radius: 18px; background: var(--rx-lilac);
    border: 1.5px solid var(--rx-lilac-2); box-shadow: none; font-family: var(--rx-font);
}
body.rx .brain-option:hover, body.rx .brain-option:focus-visible,
body.rx .brain-option[aria-pressed="true"], body.rx .brain-option.is-selected, body.rx .brain-option[data-selected="true"] {
    background: #efe9ff; border-color: var(--rx-purple); transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(109, 79, 224, 0.16);
}
body.rx .brain-option:focus-visible { outline: 3px solid var(--rx-purple-2); outline-offset: 2px; }
body.rx .brain-option-key {
    background: #fff; border: 1.5px solid var(--rx-lilac-2); color: var(--rx-purple); font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.rx .brain-option:hover .brain-option-key, body.rx .brain-option:focus-visible .brain-option-key,
body.rx .brain-option[aria-pressed="true"] .brain-option-key {
    background: var(--rx-purple); border-color: var(--rx-purple); color: #fff;
}
body.rx .brain-option-text { color: var(--rx-navy); font-size: 1.02rem; line-height: 1.5; }

/* ---------- Result ---------- */
body.rx .brain-color-profile-column h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; color: var(--rx-navy); }
body.rx .brain-color-preview-head p { color: var(--rx-text); }
body.rx .brain-preview-chip {
    background: #fff; border: 1.5px solid var(--rx-lilac-2); color: var(--rx-navy); font-family: var(--rx-font); font-weight: 500;
}
body.rx .brain-preview-chip:hover, body.rx .brain-preview-chip:focus-visible { border-color: var(--rx-purple); box-shadow: 0 10px 22px rgba(109, 79, 224, 0.14); }
body.rx .brain-preview-chip:focus-visible { outline: 3px solid var(--rx-purple-2); outline-offset: 2px; }
body.rx .brain-preview-chip[data-active="true"] { border-color: var(--rx-purple); box-shadow: 0 0 0 3px rgba(109, 79, 224, 0.16); }
body.rx .brain-preview-chip[data-actual="true"] { background: var(--rx-navy); border-color: var(--rx-navy); color: #fff; }
body.rx .brain-preview-percent { color: var(--rx-text); }
body.rx .brain-preview-swatch { box-shadow: 0 0 0 3px rgba(18, 22, 63, 0.08); }

/* Profile card keeps its JS-driven colour background (colour meaning); only shape/type are restyled */
body.rx .brain-color-profile-card { border-radius: 24px; padding: clamp(24px, 4vw, 40px); }
body.rx .brain-color-profile-title, body.rx .brain-color-profile-card h3 { color: #fff; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-family: var(--rx-font); }
body.rx .brain-color-profile-title { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 10ch; }
body.rx .brain-color-profile-lead { font-size: 1.05rem; line-height: 1.6; }
body.rx .brain-color-profile-eyebrow { font-weight: 600; letter-spacing: 0.08em; }
body.rx .brain-color-profile-wheel-card, body.rx .brain-trait, body.rx .brain-color-detail-card { border-radius: 18px; }
body.rx .brain-color-detail-card strong { font-family: var(--rx-font); font-weight: 600; font-size: 1.3rem; }
body.rx .brain-color-profile-closing { font-family: var(--rx-font); font-weight: 600; }
body.rx .brain-color-share-trigger {
    width: auto; min-width: 260px; min-height: 48px; padding: 12px 28px;
    background: #fff; color: var(--rx-navy); border: 1.5px solid transparent;
    font-family: var(--rx-font); font-weight: 600; font-size: 1rem;
}
body.rx .brain-color-share-trigger:hover, body.rx .brain-color-share-trigger:focus-visible { color: var(--rx-purple); }

/* Waitlist + invite */
body.rx .brain-color-waitlist {
    background: #fff; border: 1px solid var(--rx-lilac-2); border-radius: 22px; box-shadow: var(--rx-shadow);
}
body.rx .brain-color-profile-card .brain-color-waitlist {
    background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); box-shadow: none; color: #fff;
}
body.rx .brain-color-waitlist-copy h3 { font-family: var(--rx-font); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
body.rx .brain-color-waitlist:not(.brain-color-profile-card *) .brain-color-waitlist-copy h3 { color: var(--rx-navy); }
body.rx .brain-color-waitlist-copy p { color: var(--rx-text); }
body.rx .brain-color-profile-card .brain-color-waitlist-copy p { color: rgba(255, 255, 255, 0.86); }
body.rx .brain-color-waitlist-form { background: var(--rx-lilac); border: 1px solid var(--rx-lilac-2); border-radius: 18px; box-shadow: none; }
body.rx .brain-color-waitlist-form input[type="email"],
body.rx .brain-color-waitlist-form input[type="text"],
body.rx .brain-share-field input {
    background: #fff; border: 1.5px solid var(--rx-lilac-2); color: var(--rx-navy); font-family: var(--rx-font);
}
body.rx .brain-color-waitlist-form input[type="email"]:focus-visible,
body.rx .brain-color-waitlist-form input[type="text"]:focus-visible,
body.rx .brain-share-field input:focus-visible { outline: 3px solid var(--rx-purple-2); outline-offset: 1px; border-color: var(--rx-purple); }
body.rx .brain-color-waitlist-note { color: var(--rx-text); }
body.rx .brain-color-waitlist-note a { color: var(--rx-purple); }
body.rx .brain-color-waitlist-form .brain-color-waitlist-button,
body.rx .btn-massive-flow.brain-color-waitlist-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    background: var(--rx-navy); color: #fff; border-radius: 999px; font-family: var(--rx-font); font-weight: 600;
    padding: 12px 22px; position: relative; overflow: hidden; transition: background 0.2s ease, transform 0.2s ease;
}
body.rx .brain-color-waitlist-button:hover, body.rx .brain-color-waitlist-button:focus-visible { background: var(--rx-purple); transform: translateY(-1px); }
body.rx .brain-color-waitlist-button .btn-text { color: #fff; position: relative; z-index: 2; }
body.rx .brain-color-waitlist-button .btn-liquid { display: none; }

/* ---------- Share landing (colour set inline by JS; keep it) ---------- */
body.rx .brain-color-share-landing { border-radius: 24px; }
body.rx .brain-color-share-title, body.rx .brain-color-empathy-copy h2 { font-family: var(--rx-font); font-weight: 600; letter-spacing: -0.02em; }
body.rx .brain-color-share-cta-copy { color: var(--rx-text); }

/* ---------- Share modal ---------- */
body.rx .brain-share-dialog { border-radius: 24px; background: #fff; border: 1px solid var(--rx-lilac-2); box-shadow: 0 30px 80px rgba(18, 22, 63, 0.3); }
body.rx .brain-share-title { font-family: var(--rx-font); font-weight: 600; letter-spacing: -0.02em; color: var(--rx-navy); }
body.rx .brain-share-body, body.rx .brain-share-form-note { color: var(--rx-text); }
body.rx .brain-share-field-label { color: var(--rx-navy); font-weight: 600; }
body.rx .brain-share-close { color: var(--rx-navy); }
body.rx .brain-share-color-option { background: var(--rx-lilac); border: 1.5px solid var(--rx-lilac-2); border-radius: 16px; }
body.rx .brain-share-color-option:hover, body.rx .brain-share-color-option:focus-visible { border-color: var(--rx-purple); }
body.rx .brain-share-color-option[data-selected="true"] { border-color: var(--rx-purple); box-shadow: 0 0 0 3px rgba(109, 79, 224, 0.18); background: #efe9ff; }
body.rx .brain-share-link-shell { background: var(--rx-lilac); border: 1px solid var(--rx-lilac-2); border-radius: 14px; }
body.rx .brain-share-method {
    border-radius: 999px; background: #fff; color: var(--rx-navy); border: 1.5px solid var(--rx-lilac-2);
    font-family: var(--rx-font); font-weight: 600;
}
body.rx .brain-share-method:hover, body.rx .brain-share-method:focus-visible { border-color: var(--rx-purple); color: var(--rx-purple); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    body.rx .brain-color-intro-card::after { right: -140px; width: 340px; height: 340px; opacity: 0.35; }
}
@media (max-width: 780px) {
    body.rx .brain-color-main { padding: 20px 16px 40px; }
    /* nav is in normal flow under rx, so the quiz card's viewport-fit height needs a smaller offset */
    body.rx .brain-color-quiz-card { min-height: calc(100dvh - 116px); max-height: calc(100dvh - 116px); }
    body.rx .brain-color-quiz-card, body.rx .brain-color-result-card { padding: 20px; border-radius: 20px; }
    body.rx .brain-color-intro-card { padding: 32px 22px; border-radius: 22px; }
    body.rx .brain-color-title { max-width: none; }
    body.rx .brain-color-question { max-width: none; }
    body.rx .brain-option { min-height: 120px; padding: 16px; }
    body.rx .brain-color-share-trigger { width: 100%; min-width: 0; }
}

@media (max-width: 780px) and (max-height: 740px) {
    body.rx .brain-color-quiz-card { min-height: calc(100dvh - 108px); max-height: calc(100dvh - 108px); }
}

body.rx .brain-color-waitlist-button .btn-text {
    font-family: var(--rx-font); font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.2;
}
body.rx .brain-color-waitlist-form .brain-color-waitlist-button { height: auto; min-height: 48px; padding: 12px 22px; }