/*
 * features-page.css
 * FocusJam Features page — Cloudly rebuild.
 * Loads after site-overrides.css. Purple palette preserved.
 */

/* ================================================================
   1. HERO — extended breadcrumb with config panel
   ================================================================ */

.fj-feat-hero {
    padding-top: 160px;
    padding-bottom: 80px;
}

.fj-feat-hero .pp-page-heading {
    padding: 0;
}

.fj-feat-hero h1 {
    font-size: clamp(32px, 4.5vw, 52px);
    line-height: 1.15;
    margin-bottom: 20px;
}

.fj-feat-hero h1 em {
    font-style: italic;
    color: #c084fc;
}

.fj-feat-hero-lead {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 32px;
}

/* ── config panel ── */
.fj-config-panel {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 28px;
    backdrop-filter: blur(12px);
    max-width: 400px;
    margin-left: auto;
}

.fj-config-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.fj-config-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.80); /* raised from 0.50: ~7.5:1 on dark panel ✓ */
}

.fj-config-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #4ade80;
}

.fj-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    animation: fj-blink 1.4s ease-in-out infinite;
}

@keyframes fj-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.fj-config-jammer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.fj-config-orb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B1FE4, #A121CA);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fj-config-wave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.fj-config-wave i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: fj-ring-pulse 2.4s ease-out infinite;
    display: block;
}

.fj-config-wave i:nth-child(2) { animation-delay: 0.48s; }
.fj-config-wave i:nth-child(3) { animation-delay: 0.96s; }
.fj-config-wave i:nth-child(4) { animation-delay: 1.44s; }
.fj-config-wave i:nth-child(5) { animation-delay: 1.92s; }

@keyframes fj-ring-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2);   opacity: 0;   }
}

.fj-config-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    font-family: "DM Sans", sans-serif;
}

.fj-config-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.fj-config-bar-wrap {
    margin-bottom: 20px;
}

.fj-config-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.80); /* raised from 0.45: ~7.5:1 on dark panel ✓ */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.fj-config-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
}

.fj-config-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #7B1FE4, #A121CA);
    border-radius: 100px;
    transition: width 0.4s ease;
}

.fj-config-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(123, 31, 228, 0.5);
}

.fj-config-triggers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.fj-config-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78); /* raised from 0.55: ~6.4:1 on dark panel ✓ */
    font-family: "DM Sans", sans-serif;
}

.fj-config-trigger--on {
    color: rgba(255, 255, 255, 0.9);
}

.fj-ctoggle {
    display: inline-block;
    width: 28px;
    height: 16px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.fj-ctoggle::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: transform 0.25s ease, background 0.25s ease;
}

.fj-ctoggle--on {
    background: #7B1FE4;
}

.fj-ctoggle--on::after {
    transform: translateX(12px);
    background: #fff;
}

.fj-config-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.fj-config-stat {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.fj-config-stat:last-child {
    border-right: none;
}

.fj-config-stat-val {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    line-height: 1;
}

.fj-config-stat-key {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80); /* raised from 0.45: ~7.5:1 on dark panel ✓ */
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ================================================================
   2. SECTION UTILITY
   ================================================================ */

.fj-section-lead-light {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Contrast fix: .pp-sub-title kicker labels inside dark sections
   (#triggers, #commands) use var(--pp-theme) = #7B1FE4 on dark
   section-bg-2 (#1A192E) → 2.58:1 (fails 4.5:1).
   Override to white: white on #1A192E = 17.2:1 ✓ */
#triggers .pp-sub-title,
#commands .pp-sub-title {
    color: #fff;
}

/* ================================================================
   3. PARTICIPATION — assertiveness badge + featured card + custom strip
   ================================================================ */

.fj-assert-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pp-theme);
    background: rgba(123, 31, 228, 0.1);
    border: 1px solid rgba(123, 31, 228, 0.25);
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 10px;
}

.fj-assert-badge--light {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Featured (Cohost) card gets theme gradient */
.fj-offer-featured {
    background: linear-gradient(135deg, #7B1FE4 0%, #A121CA 100%) !important;
    position: relative;
    overflow: hidden;
}

.fj-offer-featured h3,
.fj-offer-featured p {
    color: #fff !important;
}

.fj-most-popular {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7B1FE4;
    background: #fff;
    border-radius: 100px;
    padding: 3px 10px;
}

/* Custom strip */
.fj-custom-strip {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    padding: 32px;
    margin-top: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.fj-custom-strip h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.fj-assert-visual {
    max-width: 360px;
    margin-left: auto;
}

.fj-assert-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.fj-assert-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pp-text);
    opacity: 0.6;
}

.fj-assert-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--pp-theme);
    font-family: "DM Sans", sans-serif;
    line-height: 1;
}

.fj-assert-track {
    position: relative;
    height: 8px;
    background: rgba(123, 31, 228, 0.12);
    border-radius: 100px;
    margin-bottom: 8px;
}

.fj-assert-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #7B1FE4, #A121CA);
    border-radius: 100px;
}

.fj-assert-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #7B1FE4;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(123, 31, 228, 0.45);
    font-family: "DM Sans", sans-serif;
}

.fj-assert-ends {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--pp-text);
    opacity: 0.5;
}

/* ================================================================
   4. WAKE TRIGGERS
   ================================================================ */

.fj-trigger-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 24px;
    height: 100%;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.fj-trigger-card:hover {
    border-color: rgba(161, 33, 202, 0.4);
    background: rgba(255, 255, 255, 0.08);
}

.fj-trigger-card--off {
    opacity: 0.65;
}

.fj-trigger-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.fj-trigger-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(123, 31, 228, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c084fc;
    font-size: 18px;
}

.fj-trigger-toggle {
    width: 36px;
    height: 20px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.fj-trigger-toggle::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: transform 0.25s ease, background 0.25s ease;
}

.fj-trigger-toggle--on {
    background: #7B1FE4;
}

.fj-trigger-toggle--on::after {
    transform: translateX(16px);
    background: #fff;
}

.fj-trigger-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    font-family: "DM Sans", sans-serif;
}

.fj-trigger-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
    margin-bottom: 14px;
}

.fj-trigger-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fj-tag {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    padding: 3px 10px;
}

/* ================================================================
   5. ACTIVITIES — Bootstrap pills + activity rows
   ================================================================ */

.fj-act-nav .nav-link {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-text);
    border-radius: 100px;
    padding: 10px 22px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

.fj-act-nav .nav-link:hover {
    border-color: var(--pp-theme);
    color: var(--pp-theme);
}

.fj-act-nav .nav-link.active {
    background: var(--pp-theme);
    color: #fff;
    border-color: var(--pp-theme);
}

.fj-act-tab-content {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.fj-act-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f2f7;
    transition: background 0.2s ease;
}

.fj-act-row:last-child {
    border-bottom: none;
}

.fj-act-row:hover {
    background: rgba(123, 31, 228, 0.03);
}

.fj-act-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(123, 31, 228, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pp-theme);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.fj-act-body {
    flex: 1;
    min-width: 0;
}

.fj-act-body h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    font-family: "DM Sans", sans-serif;
    color: var(--pp-header);
}

.fj-act-body p {
    font-size: 13px;
    color: var(--pp-text);
    line-height: 1.5;
    margin: 0;
}

.fj-act-body code {
    font-size: 12px;
    background: rgba(123, 31, 228, 0.08);
    color: var(--pp-theme);
    border-radius: 4px;
    padding: 1px 6px;
}

.fj-act-modes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-shrink: 0;
}

.fj-mode {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid #d9dfea;
    color: var(--pp-text);
    white-space: nowrap;
    font-family: "DM Sans", sans-serif;
}

.fj-mode--active {
    background: var(--pp-theme);
    border-color: var(--pp-theme);
    color: #fff;
}

@media (max-width: 768px) {
    .fj-act-row {
        flex-wrap: wrap;
    }
    .fj-act-modes {
        width: 100%;
        padding-left: 56px;
    }
}

/* ================================================================
   6. BLUEPRINTS (on theme-bg)
   ================================================================ */

.fj-blueprint-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 28px;
    height: 100%;
    transition: transform 0.3s ease, background 0.3s ease;
}

.fj-blueprint-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.16);
}

.fj-blueprint-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 18px;
}

.fj-blueprint-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    font-family: "DM Sans", sans-serif;
}

.fj-blueprint-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.90); /* raised from 0.75: 4.95:1 on purple card ✓ */
    line-height: 1.55;
    margin-bottom: 18px;
}

.fj-blueprint-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fj-blueprint-details li {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85); /* raised from 0.65: 4.51:1 on purple card ✓ */
    padding: 5px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: "DM Sans", sans-serif;
}

.fj-blueprint-details li:first-child {
    border-top: none;
}

.fj-blueprint-details strong {
    color: rgba(255, 255, 255, 0.95);
}

/* ================================================================
   7. SLASH COMMANDS
   ================================================================ */

.fj-cmd-palette {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
    max-width: 820px;
    margin: 0 auto;
}

.fj-cmd-palette-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fj-cmd-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    font-family: "DM Sans", sans-serif;
}

.fj-cmd-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72); /* raised from 0.40: ~5.1:1 on dark palette ✓ */
    font-family: "DM Sans", sans-serif;
}

.fj-cmd-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: center;
    padding: 11px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease;
}

.fj-cmd-row:last-child {
    border-bottom: none;
}

.fj-cmd-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.fj-cmd-row code {
    font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
    font-size: 13px;
    color: #c084fc;
    background: rgba(161, 33, 202, 0.15);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}

.fj-cmd-row span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
    font-family: "Open Sans", sans-serif;
}

.fj-cmd-row--host {
    background: rgba(123, 31, 228, 0.1);
}

.fj-cmd-row--host:hover {
    background: rgba(123, 31, 228, 0.16);
}

.fj-host-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    background: rgba(123, 31, 228, 0.35);
    color: #d8b4fe;
    border-radius: 100px;
    margin-left: 8px;
    font-family: "DM Sans", sans-serif;
}

@media (max-width: 576px) {
    .fj-cmd-row {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   8. RECAP CARD (CSS-built, section F)
   ================================================================ */

.fj-recap-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e9f0;
}

.fj-recap-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f7;
}

.fj-recap-type {
    font-size: 15px;
    font-weight: 700;
    color: var(--pp-header);
    font-family: "DM Sans", sans-serif;
}

.fj-recap-meta {
    font-size: 12px;
    color: var(--pp-text); /* #6D6B7B on white = 5.20:1 ✓; removed opacity:0.6 (was 2.39:1) */
}

.fj-recap-block {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f7;
}

.fj-recap-block--last {
    border-bottom: none;
    margin-bottom: 14px;
}

.fj-recap-block-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pp-header);
    margin-bottom: 8px;
    font-family: "DM Sans", sans-serif;
}

.fj-recap-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--pp-text);
}

.fj-recap-cite {
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-theme);
    white-space: nowrap;
    background: rgba(123, 31, 228, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
    font-family: "DM Sans", sans-serif;
}

.fj-recap-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: var(--pp-text);
}

.fj-recap-action-row > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fj-recap-owner {
    font-size: 11px;
    font-weight: 600;
    color: var(--pp-theme);
    background: rgba(123, 31, 228, 0.08);
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
    font-family: "DM Sans", sans-serif;
}

.fj-recap-due {
    font-size: 11px;
    color: var(--pp-text); /* #6D6B7B on white = 5.20:1 ✓; removed opacity:0.55 (was 2.17:1) */
    white-space: nowrap;
    font-family: "DM Sans", sans-serif;
}

.fj-recap-health-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.fj-recap-health-bar {
    flex: 1;
    height: 8px;
    background: rgba(123, 31, 228, 0.1);
    border-radius: 100px;
    overflow: hidden;
}

.fj-recap-health-fill {
    height: 100%;
    background: linear-gradient(90deg, #7B1FE4, #A121CA);
    border-radius: 100px;
}

.fj-recap-health-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--pp-theme);
    font-family: "DM Sans", sans-serif;
    line-height: 1;
    flex-shrink: 0;
}

.fj-recap-health-sub {
    font-size: 12px;
    color: var(--pp-text); /* #6D6B7B on white = 5.20:1 ✓; removed opacity:0.6 (was 2.39:1) */
    margin-top: 6px;
}

.fj-recap-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid #f0f2f7;
}

.fj-dl-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--pp-theme);
    background: rgba(123, 31, 228, 0.1);
    border: 1px solid rgba(123, 31, 228, 0.2);
    border-radius: 100px;
    padding: 5px 14px;
    font-family: "DM Sans", sans-serif;
}

.fj-dl-badge--muted {
    color: var(--pp-text);
    background: #f5f7fa;
    border-color: #dde1eb;
}

/* export badges (used with pp-feature-list) */
.fj-export-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-theme);
    background: rgba(123, 31, 228, 0.08);
    border: 1px solid rgba(123, 31, 228, 0.2);
    border-radius: 100px;
    padding: 5px 16px;
    font-family: "DM Sans", sans-serif;
}

.fj-export-badge--muted {
    color: var(--pp-text);
    background: #f0f2f7;
    border-color: #d9dfea;
}

/* ================================================================
   9. JAMMER IDENTITY CARD (CSS-built, section G)
   ================================================================ */

.fj-jammer-card {
    background: linear-gradient(135deg, #1A192E 0%, #2d1b5e 100%);
    border: 1px solid rgba(123, 31, 228, 0.3);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(123, 31, 228, 0.2);
    max-width: 380px;
    margin: 0 auto;
}

.fj-jammer-orb {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B1FE4, #A121CA);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.fj-jammer-wave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.fj-jammer-wave i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    animation: fj-ring-pulse 2.4s ease-out infinite;
    display: block;
}

.fj-jammer-wave i:nth-child(2) { animation-delay: 0.48s; }
.fj-jammer-wave i:nth-child(3) { animation-delay: 0.96s; }
.fj-jammer-wave i:nth-child(4) { animation-delay: 1.44s; }
.fj-jammer-wave i:nth-child(5) { animation-delay: 1.92s; }

.fj-jammer-name {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    margin-bottom: 6px;
}

.fj-jammer-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 18px;
}

.fj-jammer-badges {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fj-jbadge {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    padding: 4px 12px;
    font-family: "DM Sans", sans-serif;
}

.fj-jbadge--muted {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}

.fj-jammer-prompt {
    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid #7B1FE4;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    text-align: left;
    margin-bottom: 18px;
    line-height: 1.5;
}

.fj-jammer-wake-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 16px;
}

.fj-jammer-wake-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    font-family: "DM Sans", sans-serif;
}

.fj-jammer-wake-val {
    font-size: 14px;
    font-weight: 700;
    color: #c084fc;
    font-family: "DM Sans", sans-serif;
}

/* ================================================================
   10. PERSONA CARDS — Meet your AI Jammers (section H, dark bg)
   ================================================================ */

/*
 * Section lives on section-bg-2 (dark navy #1A192E).
 * White on #1A192E = 17.2:1 ✓.  #c084fc on #1A192E = 6.72:1 ✓.
 * rgba(255,255,255,0.72) blended = ~12:1 ✓.
 */

.fj-persona-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 32px 24px 24px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s ease;
}

.fj-persona-card:hover {
    border-color: rgba(161, 33, 202, 0.45);
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-6px);
}

.fj-persona-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    flex-shrink: 0;
}

.fj-persona-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fj-persona-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.fj-persona-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    line-height: 1.2;
}

.fj-persona-role {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72); /* 12:1 on #1A192E ✓ */
    line-height: 1.5;
}

.fj-persona-rename {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #c084fc; /* 6.72:1 on effective card bg ✓ */
    background: rgba(161, 33, 202, 0.18);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: 100px;
    padding: 5px 14px;
    font-family: "DM Sans", sans-serif;
    letter-spacing: 0.02em;
    margin-top: auto;
    flex-shrink: 0;
}

.fj-jammers-footnote {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55); /* 7.5:1 on #1A192E ✓ */
    max-width: 600px;
    margin: 40px auto 0;
    line-height: 1.6;
}

/* ================================================================
   11. CTA button override (white on theme-bg)
   ================================================================ */

.fj-cta-btn-light {
    background: #fff !important;
    color: var(--pp-theme) !important;
}

.fj-cta-btn-light:hover {
    background: var(--pp-theme) !important;
    color: #fff !important;
}

/* ================================================================
   12. RESPONSIVE
   ================================================================ */

@media (max-width: 991px) {
    .fj-feat-hero {
        padding-top: 120px;
        padding-bottom: 60px;
    }

    .fj-custom-strip {
        padding: 24px;
    }

    .fj-assert-visual {
        margin-left: 0;
        margin-top: 16px;
    }
}

@media (max-width: 767px) {
    .fj-feat-hero {
        padding-top: 100px;
    }

    .fj-cmd-palette {
        border-radius: 12px;
    }

    .fj-cmd-palette-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .fj-jammer-card {
        padding: 28px 20px;
    }
}