:root { --fxb-accent:           #111827;
--fxb-accent-hover:     #000000;
--fxb-accent-soft:      rgba(17, 24, 39, 0.06);
--fxb-accent-rgb:       17, 24, 39;
--fxb-on-accent:        #ffffff; --fxb-surface:          #ffffff;
--fxb-surface-sunken:   #f7f7f8;
--fxb-surface-raised:   #ffffff; --fxb-text:             #0a0a0a;
--fxb-text-secondary:   #4b5563;
--fxb-text-tertiary:    #9ca3af;
--fxb-text-on-sunken:   #1f2937; --fxb-border:           rgba(0, 0, 0, 0.08);
--fxb-border-strong:    rgba(0, 0, 0, 0.14);
--fxb-border-focus:     #0a0a0a; --fxb-success:          #16a34a;
--fxb-success-soft:     rgba(22, 163, 74, 0.08);
--fxb-warning:          #ca8a04;
--fxb-warning-soft:     rgba(202, 138, 4, 0.10);
--fxb-error:            #dc2626;
--fxb-error-soft:       rgba(220, 38, 38, 0.08);
--fxb-info:             #2563eb;
--fxb-info-soft:        rgba(37, 99, 235, 0.08); --fxb-winner-bg:        rgba(22, 163, 74, 0.08);
--fxb-winner-text:      #15803d;
--fxb-winner-border:    #16a34a; --fxb-font-display:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
--fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
--fxb-font-mono:        ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--fxb-text-xs:          0.75rem; --fxb-text-sm:          0.875rem; --fxb-text-base:        1rem; --fxb-text-md:          1.0625rem; --fxb-text-lg:          1.25rem; --fxb-text-xl:          1.5rem; --fxb-text-2xl:         1.875rem; --fxb-text-3xl:         2.5rem; --fxb-weight-normal:    400;
--fxb-weight-medium:    500;
--fxb-weight-semibold:  600;
--fxb-weight-bold:      700;
--fxb-leading-tight:    1.2;
--fxb-leading-snug:     1.4;
--fxb-leading-normal:   1.6;
--fxb-tracking-tight:   -0.01em;
--fxb-tracking-normal:  0;
--fxb-tracking-wide:    0.04em; --fxb-space-1:          0.25rem; --fxb-space-2:          0.5rem; --fxb-space-3:          0.75rem; --fxb-space-4:          1rem; --fxb-space-5:          1.5rem; --fxb-space-6:          2rem; --fxb-space-7:          2.5rem; --fxb-space-8:          3rem; --fxb-space-10:         4rem;  --fxb-radius-sm:        2px;
--fxb-radius-md:        4px;
--fxb-radius-lg:        6px;
--fxb-radius-pill:      9999px; --fxb-shadow-xs:        none;
--fxb-shadow-sm:        none;
--fxb-shadow-md:        none;
--fxb-shadow-lg:        none;
--fxb-shadow-focus:     0 0 0 3px rgba(var(--fxb-accent-rgb), 0.16); --fxb-duration-fast:    120ms;
--fxb-duration-base:    180ms;
--fxb-ease:             cubic-bezier(0.4, 0, 0.2, 1); --fxb-block-gap:        var(--fxb-space-6);
} @media (prefers-color-scheme: dark) {
:root {
--fxb-accent:         #f4f4f5;
--fxb-accent-hover:   #ffffff;
--fxb-accent-soft:    rgba(244, 244, 245, 0.10);
--fxb-accent-rgb:     244, 244, 245;
--fxb-on-accent:      #0a0a0a;
--fxb-surface:        #0a0a0a;
--fxb-surface-sunken: #18181b;
--fxb-surface-raised: #18181b;
--fxb-text:           #fafafa;
--fxb-text-secondary: #a1a1aa;
--fxb-text-tertiary:  #71717a;
--fxb-text-on-sunken: #e4e4e7;
--fxb-border:         rgba(255, 255, 255, 0.10);
--fxb-border-strong:  rgba(255, 255, 255, 0.18);
--fxb-border-focus:   #fafafa;
--fxb-success-soft:   rgba(34, 197, 94, 0.16);
--fxb-warning-soft:   rgba(234, 179, 8, 0.18);
--fxb-error-soft:     rgba(248, 113, 113, 0.18);
--fxb-info-soft:      rgba(96, 165, 250, 0.18);
--fxb-winner-bg:      rgba(34, 197, 94, 0.18);
--fxb-winner-text:    #4ade80;
}
} [data-fxb-theme="nature"], .fxb-theme-nature {
--fxb-accent:           #4a7c59; --fxb-accent-hover:     #3d6649;
--fxb-accent-soft:      rgba(74, 124, 89, 0.10);
--fxb-accent-rgb:       74, 124, 89;
--fxb-on-accent:        #fdfcf6;
--fxb-surface:          #fdfcf6; --fxb-surface-sunken:   #f5f1e8; --fxb-surface-raised:   #ffffff;
--fxb-text:             #1f2a24; --fxb-text-secondary:   #5c6b62;
--fxb-text-tertiary:    #8a9890;
--fxb-text-on-sunken:   #2d3a32;
--fxb-border:           rgba(74, 124, 89, 0.15);
--fxb-border-strong:    rgba(74, 124, 89, 0.28);
--fxb-border-focus:     #4a7c59;
--fxb-success:          #4a7c59;
--fxb-success-soft:     rgba(74, 124, 89, 0.12);
--fxb-warning:          #b8860b;
--fxb-warning-soft:     rgba(184, 134, 11, 0.12);
--fxb-error:            #b34234;
--fxb-error-soft:       rgba(179, 66, 52, 0.10);
--fxb-info:             #5a7f9a;
--fxb-info-soft:        rgba(90, 127, 154, 0.12);
--fxb-winner-bg:        rgba(74, 124, 89, 0.14);
--fxb-winner-text:      #2e5238;
--fxb-winner-border:    #4a7c59;
--fxb-font-display:     Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--fxb-radius-sm:        4px;
--fxb-radius-md:        10px;
--fxb-radius-lg:        14px;
--fxb-shadow-xs:        0 1px 2px rgba(74, 124, 89, 0.06);
--fxb-shadow-sm:        0 2px 6px rgba(74, 124, 89, 0.08), 0 1px 2px rgba(74, 124, 89, 0.04);
--fxb-shadow-md:        0 8px 20px rgba(74, 124, 89, 0.10), 0 2px 6px rgba(74, 124, 89, 0.06);
--fxb-shadow-lg:        0 16px 40px rgba(74, 124, 89, 0.12), 0 4px 12px rgba(74, 124, 89, 0.08);
--fxb-shadow-focus:     0 0 0 4px rgba(74, 124, 89, 0.20);
} @media (prefers-color-scheme: dark) {
[data-fxb-theme="nature"], .fxb-theme-nature {
--fxb-accent:         #7fb088;
--fxb-accent-hover:   #95c39d;
--fxb-accent-soft:    rgba(127, 176, 136, 0.14);
--fxb-accent-rgb:     127, 176, 136;
--fxb-on-accent:      #0f1614;
--fxb-surface:        #131814; --fxb-surface-sunken: #0c100e;
--fxb-surface-raised: #1a2118;
--fxb-text:           #f0ede3;
--fxb-text-secondary: #a8b1a5;
--fxb-text-tertiary:  #6f7c72;
--fxb-text-on-sunken: #d4d6c9;
--fxb-border:         rgba(127, 176, 136, 0.18);
--fxb-border-strong:  rgba(127, 176, 136, 0.32);
--fxb-success-soft:   rgba(127, 176, 136, 0.18);
--fxb-winner-bg:      rgba(127, 176, 136, 0.20);
--fxb-winner-text:    #b0d4b6;
--fxb-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.20);
--fxb-shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.30);
--fxb-shadow-md:      0 8px 20px rgba(0, 0, 0, 0.40);
--fxb-shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.50);
}
} [data-fxb-theme="vibrant"], .fxb-theme-vibrant {
--fxb-accent:           #2563eb;
--fxb-accent-hover:     #1d4ed8;
--fxb-accent-soft:      rgba(37, 99, 235, 0.10);
--fxb-accent-rgb:       37, 99, 235;
--fxb-on-accent:        #ffffff;
--fxb-surface:          #ffffff;
--fxb-surface-sunken:   #f1f5fb;
--fxb-surface-raised:   #ffffff;
--fxb-text:             #0f172a;
--fxb-text-secondary:   #475569;
--fxb-text-tertiary:    #94a3b8;
--fxb-text-on-sunken:   #1e293b;
--fxb-border:           rgba(37, 99, 235, 0.10);
--fxb-border-strong:    rgba(37, 99, 235, 0.22);
--fxb-border-focus:     #2563eb;
--fxb-success:          #10b981;
--fxb-success-soft:     rgba(16, 185, 129, 0.10);
--fxb-warning:          #f59e0b;
--fxb-warning-soft:     rgba(245, 158, 11, 0.10);
--fxb-error:            #ef4444;
--fxb-error-soft:       rgba(239, 68, 68, 0.10);
--fxb-info:             #2563eb;
--fxb-info-soft:        rgba(37, 99, 235, 0.10);
--fxb-winner-bg:        rgba(16, 185, 129, 0.12);
--fxb-winner-text:      #047857;
--fxb-winner-border:    #10b981;
--fxb-font-display:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--fxb-radius-sm:        6px;
--fxb-radius-md:        12px;
--fxb-radius-lg:        18px;
--fxb-shadow-xs:        0 1px 2px rgba(37, 99, 235, 0.06);
--fxb-shadow-sm:        0 4px 8px rgba(37, 99, 235, 0.10), 0 1px 2px rgba(37, 99, 235, 0.06);
--fxb-shadow-md:        0 12px 24px rgba(37, 99, 235, 0.14), 0 4px 8px rgba(37, 99, 235, 0.08);
--fxb-shadow-lg:        0 24px 48px rgba(37, 99, 235, 0.16), 0 8px 16px rgba(37, 99, 235, 0.10);
--fxb-shadow-focus:     0 0 0 4px rgba(37, 99, 235, 0.22);
}
@media (prefers-color-scheme: dark) {
[data-fxb-theme="vibrant"], .fxb-theme-vibrant {
--fxb-accent:         #60a5fa;
--fxb-accent-hover:   #93c5fd;
--fxb-accent-soft:    rgba(96, 165, 250, 0.15);
--fxb-accent-rgb:     96, 165, 250;
--fxb-on-accent:      #0f172a;
--fxb-surface:        #0f172a;
--fxb-surface-sunken: #0a0f1d;
--fxb-surface-raised: #1e293b;
--fxb-text:           #f1f5f9;
--fxb-text-secondary: #94a3b8;
--fxb-text-tertiary:  #64748b;
--fxb-text-on-sunken: #cbd5e1;
--fxb-border:         rgba(96, 165, 250, 0.16);
--fxb-border-strong:  rgba(96, 165, 250, 0.30);
--fxb-success-soft:   rgba(52, 211, 153, 0.18);
--fxb-warning-soft:   rgba(251, 191, 36, 0.18);
--fxb-error-soft:     rgba(248, 113, 113, 0.18);
--fxb-info-soft:      rgba(96, 165, 250, 0.18);
--fxb-winner-bg:      rgba(52, 211, 153, 0.20);
--fxb-winner-text:    #6ee7b7;
--fxb-shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.40);
--fxb-shadow-md:      0 16px 32px rgba(0, 0, 0, 0.50);
--fxb-shadow-lg:      0 24px 56px rgba(0, 0, 0, 0.60);
}
} [data-fxb-theme="editorial"], .fxb-theme-editorial {
--fxb-accent:           #1e293b; --fxb-accent-hover:     #0f172a;
--fxb-accent-soft:      rgba(30, 41, 59, 0.06);
--fxb-accent-rgb:       30, 41, 59;
--fxb-on-accent:        #fafaf7;
--fxb-surface:          #fafaf7; --fxb-surface-sunken:   #f0ede3; --fxb-surface-raised:   #ffffff;
--fxb-text:             #1a1a1a; --fxb-text-secondary:   #525252;
--fxb-text-tertiary:    #8a8a8a;
--fxb-text-on-sunken:   #2a2a2a;
--fxb-border:           rgba(0, 0, 0, 0.10);
--fxb-border-strong:    rgba(0, 0, 0, 0.20);
--fxb-border-focus:     #1e293b;
--fxb-success:          #166534;
--fxb-success-soft:     rgba(22, 101, 52, 0.07);
--fxb-warning:          #854d0e;
--fxb-warning-soft:     rgba(133, 77, 14, 0.07);
--fxb-error:            #991b1b;
--fxb-error-soft:       rgba(153, 27, 27, 0.07);
--fxb-info:             #1e3a8a;
--fxb-info-soft:        rgba(30, 58, 138, 0.07);
--fxb-winner-bg:        rgba(22, 101, 52, 0.10);
--fxb-winner-text:      #14532d;
--fxb-winner-border:    #166534;
--fxb-font-display:     "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--fxb-font-body:        Charter, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
--fxb-text-md:          1.0625rem;
--fxb-text-lg:          1.375rem;
--fxb-text-xl:          1.75rem;
--fxb-text-2xl:         2.125rem;
--fxb-text-3xl:         2.875rem;
--fxb-tracking-tight:   -0.02em;
--fxb-leading-snug:     1.5;
--fxb-leading-normal:   1.7;
--fxb-radius-sm:        0;
--fxb-radius-md:        2px;
--fxb-radius-lg:        2px;
--fxb-shadow-xs:        none;
--fxb-shadow-sm:        0 1px 0 rgba(0, 0, 0, 0.06);
--fxb-shadow-md:        0 2px 0 rgba(0, 0, 0, 0.08);
--fxb-shadow-lg:        0 3px 0 rgba(0, 0, 0, 0.10);
--fxb-shadow-focus:     0 0 0 2px var(--fxb-accent);
--fxb-block-gap:        var(--fxb-space-7);
}
@media (prefers-color-scheme: dark) {
[data-fxb-theme="editorial"], .fxb-theme-editorial {
--fxb-accent:         #e5e5e5;
--fxb-accent-hover:   #ffffff;
--fxb-accent-soft:    rgba(229, 229, 229, 0.08);
--fxb-accent-rgb:     229, 229, 229;
--fxb-on-accent:      #0a0a0a;
--fxb-surface:        #0f0f0f; --fxb-surface-sunken: #050505;
--fxb-surface-raised: #1a1a1a;
--fxb-text:           #f5f5f0; --fxb-text-secondary: #b0b0a8;
--fxb-text-tertiary:  #707068;
--fxb-text-on-sunken: #d8d8d2;
--fxb-border:         rgba(255, 255, 255, 0.12);
--fxb-border-strong:  rgba(255, 255, 255, 0.22);
--fxb-winner-bg:      rgba(22, 163, 74, 0.18);
--fxb-winner-text:    #86efac;
}
} [data-fxb-theme="sunset"], .fxb-theme-sunset {
--fxb-accent:           #c2410c; --fxb-accent-hover:     #9a3412;
--fxb-accent-soft:      rgba(194, 65, 12, 0.10);
--fxb-accent-rgb:       194, 65, 12;
--fxb-on-accent:        #fef7ed;
--fxb-surface:          #fffaf3; --fxb-surface-sunken:   #fdf2e0; --fxb-surface-raised:   #ffffff;
--fxb-text:             #292524; --fxb-text-secondary:   #78716c;
--fxb-text-tertiary:    #a8a29e;
--fxb-text-on-sunken:   #44403c;
--fxb-border:           rgba(194, 65, 12, 0.14);
--fxb-border-strong:    rgba(194, 65, 12, 0.28);
--fxb-border-focus:     #c2410c;
--fxb-success:          #ca8a04; --fxb-success-soft:     rgba(202, 138, 4, 0.12);
--fxb-warning:          #ea580c;
--fxb-warning-soft:     rgba(234, 88, 12, 0.12);
--fxb-error:            #b91c1c;
--fxb-error-soft:       rgba(185, 28, 28, 0.10);
--fxb-info:             #b45309;
--fxb-info-soft:        rgba(180, 83, 9, 0.10);
--fxb-winner-bg:        rgba(202, 138, 4, 0.16);
--fxb-winner-text:      #713f12;
--fxb-winner-border:    #ca8a04;
--fxb-font-display:     "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
--fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--fxb-radius-sm:        4px;
--fxb-radius-md:        8px;
--fxb-radius-lg:        16px;
--fxb-shadow-xs:        0 1px 2px rgba(194, 65, 12, 0.06);
--fxb-shadow-sm:        0 2px 8px rgba(194, 65, 12, 0.10), 0 1px 2px rgba(194, 65, 12, 0.06);
--fxb-shadow-md:        0 12px 24px rgba(194, 65, 12, 0.12), 0 4px 8px rgba(194, 65, 12, 0.08);
--fxb-shadow-lg:        0 20px 48px rgba(194, 65, 12, 0.14), 0 8px 16px rgba(194, 65, 12, 0.10);
--fxb-shadow-focus:     0 0 0 4px rgba(194, 65, 12, 0.20);
}
@media (prefers-color-scheme: dark) {
[data-fxb-theme="sunset"], .fxb-theme-sunset {
--fxb-accent:         #fb923c;
--fxb-accent-hover:   #fdba74;
--fxb-accent-soft:    rgba(251, 146, 60, 0.14);
--fxb-accent-rgb:     251, 146, 60;
--fxb-on-accent:      #1c1310;
--fxb-surface:        #1c1310; --fxb-surface-sunken: #130d0a;
--fxb-surface-raised: #2a1c16;
--fxb-text:           #fef3e2;
--fxb-text-secondary: #c7b8a6;
--fxb-text-tertiary:  #8a7f72;
--fxb-text-on-sunken: #e7d8c4;
--fxb-border:         rgba(251, 146, 60, 0.18);
--fxb-border-strong:  rgba(251, 146, 60, 0.32);
--fxb-winner-bg:      rgba(250, 204, 21, 0.18);
--fxb-winner-text:    #fde68a;
--fxb-shadow-sm:      0 4px 12px rgba(0, 0, 0, 0.40);
--fxb-shadow-md:      0 16px 32px rgba(0, 0, 0, 0.50);
--fxb-shadow-lg:      0 24px 56px rgba(0, 0, 0, 0.60);
}
} [data-fxb-theme="tech"], .fxb-theme-tech {
--fxb-accent:           #06b6d4; --fxb-accent-hover:     #22d3ee;
--fxb-accent-soft:      rgba(6, 182, 212, 0.14);
--fxb-accent-rgb:       6, 182, 212;
--fxb-on-accent:        #042f36; --fxb-surface:          #0a0a0a;
--fxb-surface-sunken:   #050505;
--fxb-surface-raised:   #151515;
--fxb-text:             #fafafa;
--fxb-text-secondary:   #a3a3a3;
--fxb-text-tertiary:    #525252;
--fxb-text-on-sunken:   #d4d4d4;
--fxb-border:           rgba(6, 182, 212, 0.18);
--fxb-border-strong:    rgba(6, 182, 212, 0.35);
--fxb-border-focus:     #06b6d4;
--fxb-success:          #4ade80;
--fxb-success-soft:     rgba(74, 222, 128, 0.14);
--fxb-warning:          #facc15;
--fxb-warning-soft:     rgba(250, 204, 21, 0.14);
--fxb-error:            #f87171;
--fxb-error-soft:       rgba(248, 113, 113, 0.14);
--fxb-info:             #06b6d4;
--fxb-info-soft:        rgba(6, 182, 212, 0.14);
--fxb-winner-bg:        rgba(74, 222, 128, 0.18);
--fxb-winner-text:      #86efac;
--fxb-winner-border:    #4ade80;
--fxb-font-display:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--fxb-font-body:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--fxb-tracking-tight:   0;
--fxb-tracking-wide:    0.08em;
--fxb-radius-sm:        2px;
--fxb-radius-md:        4px;
--fxb-radius-lg:        6px; --fxb-shadow-xs:        none;
--fxb-shadow-sm:        0 0 0 1px rgba(6, 182, 212, 0.10);
--fxb-shadow-md:        0 0 20px rgba(6, 182, 212, 0.12), 0 0 0 1px rgba(6, 182, 212, 0.18);
--fxb-shadow-lg:        0 0 40px rgba(6, 182, 212, 0.18), 0 0 0 1px rgba(6, 182, 212, 0.25);
--fxb-shadow-focus:     0 0 0 2px var(--fxb-accent), 0 0 16px rgba(6, 182, 212, 0.35);
} @media (prefers-color-scheme: light) {
[data-fxb-theme="tech"], .fxb-theme-tech {
--fxb-accent:         #0e7490;
--fxb-accent-hover:   #155e75;
--fxb-accent-soft:    rgba(14, 116, 144, 0.10);
--fxb-accent-rgb:     14, 116, 144;
--fxb-on-accent:      #ffffff;
--fxb-surface:        #fafafa;
--fxb-surface-sunken: #f0f0f0;
--fxb-surface-raised: #ffffff;
--fxb-text:           #0a0a0a;
--fxb-text-secondary: #525252;
--fxb-text-tertiary:  #a3a3a3;
--fxb-text-on-sunken: #1f1f1f;
--fxb-border:         rgba(14, 116, 144, 0.15);
--fxb-border-strong:  rgba(14, 116, 144, 0.30);
--fxb-shadow-sm:      0 0 0 1px rgba(14, 116, 144, 0.12);
--fxb-shadow-md:      0 4px 12px rgba(14, 116, 144, 0.10), 0 0 0 1px rgba(14, 116, 144, 0.15);
--fxb-shadow-lg:      0 12px 32px rgba(14, 116, 144, 0.12), 0 0 0 1px rgba(14, 116, 144, 0.20);
}
} [class*="fxb-"] {
box-sizing: border-box;
}
[class*="fxb-"]::before,
[class*="fxb-"]::after {
box-sizing: border-box;
} @media (prefers-reduced-motion: reduce) {
[class*="fxb-"],
[class*="fxb-"]::before,
[class*="fxb-"]::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}  .fxb-icon {
display: inline-flex;
width: 1em;
height: 1em;
flex-shrink: 0;
vertical-align: -0.125em;
}
.fxb-icon svg { width: 100%; height: 100%; display: block; }
.fxb-icon--success { color: var(--fxb-success); }
.fxb-icon--error   { color: var(--fxb-error); } .fxb-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--fxb-space-2);
padding: var(--fxb-space-3) var(--fxb-space-5);
background: var(--fxb-accent);
color: var(--fxb-on-accent);
text-decoration: none;
font-family: var(--fxb-font-body);
font-weight: var(--fxb-weight-semibold);
font-size: var(--fxb-text-sm);
letter-spacing: var(--fxb-tracking-normal);
border: 0;
border-radius: var(--fxb-radius-md);
cursor: pointer;
min-height: 44px;
transition:
background var(--fxb-duration-fast) var(--fxb-ease),
transform var(--fxb-duration-fast) var(--fxb-ease),
box-shadow var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-cta-button:hover,
.fxb-cta-button:focus-visible {
background: var(--fxb-accent-hover);
color: var(--fxb-on-accent);
text-decoration: none;
}
.fxb-cta-button:focus-visible {
outline: none;
box-shadow: var(--fxb-shadow-focus);
}
@media (prefers-reduced-motion: no-preference) {
.fxb-cta-button:hover { transform: translateY(-1px); }
}
.fxb-cta-button:active { transform: translateY(0); }
.fxb-cta-button--small {
padding: var(--fxb-space-2) var(--fxb-space-4);
font-size: var(--fxb-text-xs);
min-height: 36px;
}
.fxb-cta-button--large {
padding: var(--fxb-space-4) var(--fxb-space-6);
font-size: var(--fxb-text-base);
min-height: 52px;
}
.fxb-cta-button__price {
display: block;
margin-top: 2px;
font-weight: var(--fxb-weight-normal);
font-size: var(--fxb-text-xs);
opacity: 0.82;
} .fxb-badge {
display: inline-flex;
align-items: center;
padding: 2px var(--fxb-space-2);
background: var(--fxb-accent);
color: var(--fxb-on-accent);
border-radius: var(--fxb-radius-sm);
font-size: 11px;
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-wide);
text-transform: uppercase;
line-height: 1.4;
}
.fxb-badge--floating {
position: absolute;
top: calc(-1 * var(--fxb-space-2));
right: var(--fxb-space-5);
} .fxb-block-empty,
.fxb-block-error {
padding: var(--fxb-space-5);
background: var(--fxb-surface-sunken);
border-radius: var(--fxb-radius-md);
color: var(--fxb-text-tertiary);
text-align: center;
font-size: var(--fxb-text-sm);
font-family: var(--fxb-font-body);
}
.fxb-block-error {
color: var(--fxb-error);
background: var(--fxb-error-soft);
} .fxb-product-card {
position: relative;
padding: var(--fxb-space-6);
background: var(--fxb-surface-raised);
border-radius: var(--fxb-radius-lg);
border: 1px solid var(--fxb-border);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
color: var(--fxb-text);
box-shadow: var(--fxb-shadow-xs);
transition: box-shadow var(--fxb-duration-base) var(--fxb-ease),
transform var(--fxb-duration-base) var(--fxb-ease);
}
@media (prefers-reduced-motion: no-preference) {
.fxb-product-card:hover {
box-shadow: var(--fxb-shadow-md);
transform: translateY(-2px);
}
}
.fxb-product-card--highlight {
border-color: var(--fxb-accent);
background:
linear-gradient(var(--fxb-surface-raised), var(--fxb-surface-raised)) padding-box,
var(--fxb-accent) border-box;
border-width: 2px;
}
.fxb-product-card--compact {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--fxb-space-4);
padding: var(--fxb-space-4) var(--fxb-space-5);
}
.fxb-product-card__header {
display: flex;
align-items: center;
gap: var(--fxb-space-4);
margin-bottom: var(--fxb-space-5);
}
.fxb-product-card__logo {
width: 56px;
height: 56px;
object-fit: contain;
flex-shrink: 0;
border-radius: var(--fxb-radius-sm);
}
.fxb-product-card--compact .fxb-product-card__logo {
width: 40px;
height: 40px;
}
.fxb-product-card__title { flex: 1; min-width: 0; }
.fxb-product-card__name {
margin: 0;
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-xl);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
line-height: var(--fxb-leading-tight);
color: var(--fxb-text);
}
.fxb-product-card--compact .fxb-product-card__name { font-size: var(--fxb-text-md); }
.fxb-product-card__tagline {
margin: 4px 0 0;
font-size: var(--fxb-text-sm);
color: var(--fxb-text-secondary);
line-height: var(--fxb-leading-snug);
}
.fxb-product-card__score {
display: inline-flex;
align-items: baseline;
gap: 2px;
padding: var(--fxb-space-1) var(--fxb-space-3);
background: var(--fxb-accent-soft);
color: var(--fxb-accent);
border-radius: var(--fxb-radius-md);
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-bold);
font-feature-settings: "tnum";
flex-shrink: 0;
}
.fxb-product-card__score--large {
padding: var(--fxb-space-2) var(--fxb-space-4);
font-size: var(--fxb-text-lg);
}
.fxb-product-card__score--xlarge {
padding: var(--fxb-space-3) var(--fxb-space-5);
font-size: var(--fxb-text-3xl);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-product-card__score--small {
padding: 2px var(--fxb-space-2);
font-size: var(--fxb-text-sm);
}
.fxb-score-max {
font-size: 0.65em;
opacity: 0.6;
font-weight: var(--fxb-weight-medium);
}
.fxb-product-card__pros {
list-style: none;
padding: 0;
margin: 0 0 var(--fxb-space-5);
}
.fxb-product-card__pros li {
display: flex;
align-items: flex-start;
gap: var(--fxb-space-3);
padding: var(--fxb-space-2) 0;
color: var(--fxb-text);
line-height: var(--fxb-leading-snug);
}
.fxb-product-card__pros li + li {
border-top: 1px solid var(--fxb-border);
}
.fxb-product-card__note {
font-style: italic;
color: var(--fxb-text-secondary);
margin: 0 0 var(--fxb-space-4);
font-size: var(--fxb-text-sm);
}
.fxb-product-card__hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fxb-space-7);
align-items: center;
}
.fxb-product-card__screenshot {
max-width: 100%;
height: auto;
border-radius: var(--fxb-radius-md);
box-shadow: var(--fxb-shadow-md);
}
@media (max-width: 640px) {
.fxb-product-card { padding: var(--fxb-space-5); }
.fxb-product-card__hero-content { grid-template-columns: 1fr; }
.fxb-product-card__header { flex-direction: column; text-align: center; }
.fxb-product-card--compact {
grid-template-columns: 1fr;
text-align: center;
}
} .fxb-product-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fxb-space-7);
align-items: center;
padding: var(--fxb-space-7);
background: var(--fxb-surface-sunken);
border-radius: var(--fxb-radius-lg);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
color: var(--fxb-text);
}
.fxb-product-hero--centered {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
.fxb-product-hero__logo {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: var(--fxb-space-4);
}
.fxb-product-hero__name {
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-3xl);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
line-height: var(--fxb-leading-tight);
margin: 0 0 var(--fxb-space-3);
color: var(--fxb-text);
}
.fxb-product-hero__tagline {
font-size: var(--fxb-text-md);
color: var(--fxb-text-secondary);
margin: 0 0 var(--fxb-space-5);
line-height: var(--fxb-leading-normal);
max-width: 48ch;
}
.fxb-product-hero__score {
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-2xl);
font-weight: var(--fxb-weight-bold);
margin-bottom: var(--fxb-space-5);
color: var(--fxb-accent);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-product-hero__media img {
max-width: 100%;
height: auto;
border-radius: var(--fxb-radius-md);
box-shadow: var(--fxb-shadow-lg);
}
@media (max-width: 768px) {
.fxb-product-hero {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
padding: var(--fxb-space-5);
}
} .fxb-product-mini {
display: inline-flex;
align-items: center;
gap: var(--fxb-space-2);
padding: 2px var(--fxb-space-2);
text-decoration: none;
color: var(--fxb-accent);
background: var(--fxb-accent-soft);
border-radius: var(--fxb-radius-sm);
font-family: var(--fxb-font-body);
font-weight: var(--fxb-weight-medium);
font-size: var(--fxb-text-sm);
transition: background var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-product-mini:hover {
background: var(--fxb-accent);
color: var(--fxb-on-accent);
text-decoration: none;
}
.fxb-product-mini__logo {
width: 16px;
height: 16px;
flex-shrink: 0;
object-fit: contain;
}
.fxb-product-mini__price {
color: inherit;
opacity: 0.75;
font-weight: var(--fxb-weight-normal);
font-size: 0.92em;
} .fxb-comparison-table {
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
color: var(--fxb-text);
}
.fxb-comparison-table__table {
width: 100%;
border-collapse: collapse;
background: var(--fxb-surface-raised);
border-radius: var(--fxb-radius-md);
overflow: hidden;
border: 1px solid var(--fxb-border);
}
.fxb-comparison-table .fxb-cell {
padding: var(--fxb-space-4) var(--fxb-space-4);
border-bottom: 1px solid var(--fxb-border);
text-align: center;
vertical-align: middle;
font-size: var(--fxb-text-sm);
}
.fxb-comparison-table tr:last-child .fxb-cell { border-bottom: 0; }
.fxb-comparison-table .fxb-cell--header {
background: var(--fxb-surface-sunken);
color: var(--fxb-text-on-sunken);
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-semibold);
text-align: center;
font-size: var(--fxb-text-md);
letter-spacing: var(--fxb-tracking-tight);
padding-block: var(--fxb-space-5);
position: sticky;
top: 0;
z-index: 1;
}
.fxb-comparison-table .fxb-cell--label {
background: var(--fxb-surface-sunken);
color: var(--fxb-text-secondary);
font-weight: var(--fxb-weight-medium);
text-align: left;
font-size: var(--fxb-text-sm);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-comparison-table .fxb-cell--winner {
background: var(--fxb-winner-bg);
color: var(--fxb-winner-text);
font-weight: var(--fxb-weight-semibold);
position: relative;
}
.fxb-comparison-table .fxb-cell--winner::before {
content: "";
position: absolute;
inset: 0;
border-left: 3px solid var(--fxb-winner-border);
pointer-events: none;
} .fxb-comparison-table tbody tr:nth-child(even) .fxb-cell:not(.fxb-cell--label):not(.fxb-cell--winner) {
background: rgba(0, 0, 0, 0.012);
}
@media (prefers-color-scheme: dark) {
.fxb-comparison-table tbody tr:nth-child(even) .fxb-cell:not(.fxb-cell--label):not(.fxb-cell--winner) {
background: rgba(255, 255, 255, 0.025);
}
}
.fxb-comparison-table__logo {
display: block;
margin: 0 auto var(--fxb-space-3);
width: 56px;
height: 56px;
object-fit: contain;
}
.fxb-comparison-table__name {
display: block;
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-bold);
color: var(--fxb-text);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-cell__unit {
display: block;
font-size: var(--fxb-text-xs);
font-weight: var(--fxb-weight-normal);
color: var(--fxb-text-tertiary);
margin-top: 2px;
}
.fxb-comparison-table--layout-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--fxb-radius-md);
}
.fxb-comparison-table--layout-scroll .fxb-comparison-table__table { min-width: 600px; }
@media (max-width: 640px) {
.fxb-comparison-table--layout-cards .fxb-comparison-table__table {
display: block;
border: 0;
background: transparent;
}
.fxb-comparison-table--layout-cards thead { display: none; }
.fxb-comparison-table--layout-cards tbody { display: block; }
.fxb-comparison-table--layout-cards tr {
display: block;
margin-bottom: var(--fxb-space-4);
background: var(--fxb-surface-raised);
border: 1px solid var(--fxb-border);
border-radius: var(--fxb-radius-md);
overflow: hidden;
}
.fxb-comparison-table--layout-cards td,
.fxb-comparison-table--layout-cards th {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--fxb-space-4);
text-align: right;
}
.fxb-comparison-table--layout-cards .fxb-cell--label {
text-align: left;
flex: 0 0 auto;
}
} .fxb-comparison-cards {
display: grid;
gap: var(--fxb-space-5);
grid-template-columns: repeat(var(--fxb-cards-cols, 3), 1fr);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
}
.fxb-comparison-cards--2 { --fxb-cards-cols: 2; }
.fxb-comparison-cards--3 { --fxb-cards-cols: 3; }
.fxb-comparison-cards--4 { --fxb-cards-cols: 4; }
.fxb-comparison-cards__item {
display: flex;
flex-direction: column;
gap: var(--fxb-space-4);
padding: var(--fxb-space-5);
background: var(--fxb-surface-raised);
border: 1px solid var(--fxb-border);
border-radius: var(--fxb-radius-lg);
box-shadow: var(--fxb-shadow-xs);
transition: box-shadow var(--fxb-duration-base) var(--fxb-ease),
transform var(--fxb-duration-base) var(--fxb-ease);
}
@media (prefers-reduced-motion: no-preference) {
.fxb-comparison-cards__item:hover {
box-shadow: var(--fxb-shadow-md);
transform: translateY(-2px);
}
}
.fxb-comparison-cards__header { text-align: center; }
.fxb-comparison-cards__logo {
display: block;
margin: 0 auto var(--fxb-space-3);
width: 64px;
height: 64px;
object-fit: contain;
}
.fxb-comparison-cards__name {
margin: 0 0 var(--fxb-space-2);
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-lg);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
}
.fxb-comparison-cards__score {
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-xl);
color: var(--fxb-accent);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-comparison-cards__criteria { margin: 0; }
.fxb-comparison-cards__criterion {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--fxb-space-3);
padding: var(--fxb-space-3) 0;
border-bottom: 1px solid var(--fxb-border);
font-size: var(--fxb-text-sm);
}
.fxb-comparison-cards__criterion:last-child { border-bottom: 0; }
.fxb-comparison-cards__criterion dt {
color: var(--fxb-text-secondary);
font-weight: var(--fxb-weight-medium);
}
.fxb-comparison-cards__criterion dd {
margin: 0;
color: var(--fxb-text);
font-weight: var(--fxb-weight-semibold);
font-feature-settings: "tnum";
}
@media (max-width: 768px) {
.fxb-comparison-cards { grid-template-columns: 1fr; }
} .fxb-pros-cons {
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
}
.fxb-pros-cons--two-columns,
.fxb-pros-cons--inline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fxb-space-5);
}
.fxb-pros-cons--stacked { display: flex; flex-direction: column; gap: var(--fxb-space-4); }
.fxb-pros-cons__column {
padding: var(--fxb-space-5);
border-radius: var(--fxb-radius-md);
background: var(--fxb-surface-raised);
border: 1px solid var(--fxb-border);
position: relative;
overflow: hidden;
}
.fxb-pros-cons__column::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
}
.fxb-pros-cons__column--pros { background: var(--fxb-success-soft); }
.fxb-pros-cons__column--pros::before { background: var(--fxb-success); }
.fxb-pros-cons__column--cons { background: var(--fxb-error-soft); }
.fxb-pros-cons__column--cons::before { background: var(--fxb-error); }
.fxb-pros-cons__heading {
margin: 0 0 var(--fxb-space-3);
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-md);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
}
.fxb-pros-cons__column--pros .fxb-pros-cons__heading { color: var(--fxb-success); }
.fxb-pros-cons__column--cons .fxb-pros-cons__heading { color: var(--fxb-error); }
.fxb-pros-cons__list { list-style: none; padding: 0; margin: 0; }
.fxb-pros-cons__list li {
display: flex;
align-items: flex-start;
gap: var(--fxb-space-3);
padding: var(--fxb-space-2) 0;
color: var(--fxb-text);
line-height: var(--fxb-leading-snug);
font-size: var(--fxb-text-sm);
}
@media (max-width: 640px) {
.fxb-pros-cons--two-columns,
.fxb-pros-cons--inline { grid-template-columns: 1fr; }
} .fxb-key-points {
display: grid;
gap: var(--fxb-space-5);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
}
.fxb-key-points--cols-1 { grid-template-columns: 1fr; }
.fxb-key-points--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fxb-key-points--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fxb-key-points--cols-4 { grid-template-columns: repeat(4, 1fr); }
.fxb-key-points__item {
display: flex;
gap: var(--fxb-space-4);
}
.fxb-key-points--cards .fxb-key-points__item {
padding: var(--fxb-space-5);
background: var(--fxb-surface-raised);
border: 1px solid var(--fxb-border);
border-radius: var(--fxb-radius-lg);
box-shadow: var(--fxb-shadow-xs);
flex-direction: column;
transition: box-shadow var(--fxb-duration-base) var(--fxb-ease),
transform var(--fxb-duration-base) var(--fxb-ease);
}
@media (prefers-reduced-motion: no-preference) {
.fxb-key-points--cards .fxb-key-points__item:hover {
box-shadow: var(--fxb-shadow-md);
transform: translateY(-2px);
}
}
.fxb-key-points__number {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
background: var(--fxb-accent);
color: var(--fxb-on-accent);
border-radius: var(--fxb-radius-pill);
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-bold);
font-size: var(--fxb-text-base);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-key-points__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
background: var(--fxb-accent-soft);
color: var(--fxb-accent);
border-radius: var(--fxb-radius-pill);
font-size: var(--fxb-text-md);
}
.fxb-key-points__title {
margin: 0 0 var(--fxb-space-2);
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-md);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
}
.fxb-key-points__content {
color: var(--fxb-text-secondary);
font-size: var(--fxb-text-sm);
line-height: var(--fxb-leading-normal);
}
.fxb-key-points__content > *:first-child { margin-top: 0; }
.fxb-key-points__content > *:last-child  { margin-bottom: 0; }
@media (max-width: 768px) {
.fxb-key-points--cols-3,
.fxb-key-points--cols-4 { grid-template-columns: 1fr; }
} .fxb-verdict-box {
padding: var(--fxb-space-7);
border-radius: var(--fxb-radius-lg);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
}
.fxb-verdict-box--highlighted {
background: var(--fxb-surface-raised);
border: 2px solid var(--fxb-accent);
position: relative;
}
.fxb-verdict-box--subtle {
background: var(--fxb-surface-sunken);
}
.fxb-verdict-box--gradient {
background:
linear-gradient(135deg, var(--fxb-accent) 0%, var(--fxb-accent-hover) 100%);
color: var(--fxb-on-accent);
border: 0;
}
.fxb-verdict-box--gradient .fxb-verdict-box__title,
.fxb-verdict-box--gradient .fxb-verdict-box__score,
.fxb-verdict-box--gradient .fxb-verdict-box__hint {
color: var(--fxb-on-accent);
}
.fxb-verdict-box--gradient .fxb-verdict-box__hint { opacity: 0.85; }
.fxb-verdict-box__header {
display: flex;
gap: var(--fxb-space-4);
align-items: center;
margin-bottom: var(--fxb-space-4);
flex-wrap: wrap;
}
.fxb-verdict-box__title {
margin: 0;
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-xl);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
}
.fxb-verdict-box__body {
display: flex;
gap: var(--fxb-space-5);
align-items: flex-start;
}
.fxb-verdict-box__logo {
width: 72px;
height: 72px;
object-fit: contain;
flex-shrink: 0;
border-radius: var(--fxb-radius-sm);
}
.fxb-verdict-box__content { flex: 1; }
.fxb-verdict-box__score {
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-2xl);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
margin-bottom: var(--fxb-space-3);
color: var(--fxb-accent);
}
.fxb-verdict-box__text {
margin: 0 0 var(--fxb-space-4);
line-height: var(--fxb-leading-normal);
}
.fxb-verdict-box__hint {
margin: 0 0 var(--fxb-space-4);
color: var(--fxb-text-secondary);
font-size: var(--fxb-text-sm);
}
@media (max-width: 640px) {
.fxb-verdict-box { padding: var(--fxb-space-5); }
.fxb-verdict-box__body { flex-direction: column; align-items: center; text-align: center; }
} .fxb-affiliate-cta {
margin-block: var(--fxb-space-5);
font-family: var(--fxb-font-body);
}
.fxb-affiliate-cta--align-center { text-align: center; }
.fxb-affiliate-cta--align-right  { text-align: right; }
.fxb-affiliate-cta__guarantee {
font-size: var(--fxb-text-xs);
color: var(--fxb-text-tertiary);
margin: var(--fxb-space-2) 0 0;
}
.fxb-affiliate-cta--banner {
display: flex;
gap: var(--fxb-space-4);
align-items: center;
padding: var(--fxb-space-4) var(--fxb-space-5);
background: var(--fxb-surface-sunken);
border-radius: var(--fxb-radius-md);
border: 1px solid var(--fxb-border);
}
.fxb-affiliate-cta--banner .fxb-affiliate-cta__text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.fxb-affiliate-cta__name {
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-md);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
}
.fxb-affiliate-cta__tagline {
font-size: var(--fxb-text-sm);
color: var(--fxb-text-secondary);
}
.fxb-affiliate-cta__price {
font-weight: var(--fxb-weight-bold);
color: var(--fxb-accent);
font-feature-settings: "tnum";
}
.fxb-affiliate-cta--inline {
display: inline-flex;
align-items: center;
gap: var(--fxb-space-1);
padding: 2px var(--fxb-space-2);
background: var(--fxb-accent-soft);
color: var(--fxb-accent);
border-radius: var(--fxb-radius-sm);
text-decoration: none;
font-weight: var(--fxb-weight-semibold);
font-size: var(--fxb-text-sm);
transition: background var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-affiliate-cta--inline:hover {
background: var(--fxb-accent);
color: var(--fxb-on-accent);
}
.fxb-affiliate-cta--card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--fxb-space-3);
padding: var(--fxb-space-5);
background: var(--fxb-surface-raised);
border: 1px solid var(--fxb-border);
border-radius: var(--fxb-radius-lg);
max-width: 280px;
box-shadow: var(--fxb-shadow-xs);
}
@media (max-width: 640px) {
.fxb-affiliate-cta--banner {
flex-direction: column;
text-align: center;
}
} .fxb-faq {
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
}
.fxb-faq__item {
border-bottom: 1px solid var(--fxb-border);
background: transparent;
transition: background var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-faq__item:first-child { border-top: 1px solid var(--fxb-border); }
.fxb-faq__item[open] {
background: var(--fxb-surface-sunken);
}
.fxb-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--fxb-space-4);
padding: var(--fxb-space-5);
cursor: pointer;
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-semibold);
font-size: var(--fxb-text-md);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
margin: 0;
list-style: none;
user-select: none;
transition: color var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-faq__question::-webkit-details-marker,
.fxb-faq__question::marker { display: none; content: ""; }
.fxb-faq__question:hover { color: var(--fxb-accent); }
.fxb-faq__question:focus-visible {
outline: none;
box-shadow: var(--fxb-shadow-focus);
border-radius: var(--fxb-radius-sm);
} .fxb-faq__question-text {
margin: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
}
h2.fxb-faq__question,
h3.fxb-faq__question,
h4.fxb-faq__question,
h5.fxb-faq__question {
margin: 0;
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-semibold);
font-size: var(--fxb-text-md);
}
.fxb-faq__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--fxb-text-secondary);
transition: transform var(--fxb-duration-base) var(--fxb-ease),
color var(--fxb-duration-fast) var(--fxb-ease);
}
.fxb-faq__item[open] .fxb-faq__icon {
transform: rotate(180deg);
color: var(--fxb-accent);
}
.fxb-faq__answer {
padding: 0 var(--fxb-space-5) var(--fxb-space-5);
color: var(--fxb-text-secondary);
line-height: var(--fxb-leading-normal);
}
.fxb-faq__answer > *:last-child { margin-bottom: 0; }
.fxb-faq--flat .fxb-faq__question { cursor: default; }
.fxb-faq--flat .fxb-faq__question:hover { color: var(--fxb-text); }
.fxb-faq--flat .fxb-faq__icon { display: none; }
.fxb-faq__number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 var(--fxb-space-2);
background: var(--fxb-accent-soft);
color: var(--fxb-accent);
border-radius: var(--fxb-radius-sm);
font-size: var(--fxb-text-xs);
font-weight: var(--fxb-weight-bold);
margin-right: var(--fxb-space-3);
font-feature-settings: "tnum";
} .fxb-expert-tip {
display: flex;
gap: var(--fxb-space-4);
padding: var(--fxb-space-5);
background: var(--fxb-info-soft);
color: var(--fxb-text);
border-radius: var(--fxb-radius-md);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
position: relative;
overflow: hidden;
}
.fxb-expert-tip::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--fxb-info);
}
.fxb-expert-tip--tip {
background: var(--fxb-success-soft);
}
.fxb-expert-tip--tip::before { background: var(--fxb-success); }
.fxb-expert-tip--warning {
background: var(--fxb-warning-soft);
}
.fxb-expert-tip--warning::before { background: var(--fxb-warning); }
.fxb-expert-tip--critical {
background: var(--fxb-error-soft);
}
.fxb-expert-tip--critical::before { background: var(--fxb-error); }
.fxb-expert-tip__icon {
font-size: var(--fxb-text-xl);
flex-shrink: 0;
color: var(--fxb-info);
line-height: 1;
}
.fxb-expert-tip--tip      .fxb-expert-tip__icon { color: var(--fxb-success); }
.fxb-expert-tip--warning  .fxb-expert-tip__icon { color: var(--fxb-warning); }
.fxb-expert-tip--critical .fxb-expert-tip__icon { color: var(--fxb-error); }
.fxb-expert-tip__body { flex: 1; min-width: 0; }
.fxb-expert-tip__title {
display: block;
margin-bottom: var(--fxb-space-2);
font-family: var(--fxb-font-display);
font-size: var(--fxb-text-md);
font-weight: var(--fxb-weight-bold);
letter-spacing: var(--fxb-tracking-tight);
color: var(--fxb-text);
}
.fxb-expert-tip__content {
color: inherit;
line-height: var(--fxb-leading-normal);
font-size: var(--fxb-text-sm);
}
.fxb-expert-tip__content > *:first-child { margin-top: 0; }
.fxb-expert-tip__content > *:last-child  { margin-bottom: 0; } @media print {
.fxb-cta-button,
.fxb-affiliate-cta {
display: none !important;
}
.fxb-product-card,
.fxb-comparison-cards__item,
.fxb-product-hero,
.fxb-verdict-box {
box-shadow: none !important;
border: 1px solid #000 !important;
page-break-inside: avoid;
}
.fxb-comparison-table .fxb-cell--winner {
background: transparent !important;
border: 2px solid #000 !important;
}
.fxb-faq__item[open] { background: transparent !important; }
} .fxb-steps {
display: grid;
gap: var(--fxb-space-5);
margin-block: var(--fxb-block-gap);
font-family: var(--fxb-font-body);
}
.fxb-steps--cols-1 { grid-template-columns: 1fr; }
.fxb-steps--cols-2 { grid-template-columns: repeat(2, 1fr); }
.fxb-steps--cols-3 { grid-template-columns: repeat(3, 1fr); }
.fxb-steps--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 781px) {
.fxb-steps--cols-2,
.fxb-steps--cols-3,
.fxb-steps--cols-4 { grid-template-columns: 1fr; }
}
.fxb-steps__item {
display: flex;
gap: var(--fxb-space-4);
align-items: flex-start;
}
.fxb-steps__num {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
background: var(--fxb-accent);
color: var(--fxb-on-accent);
border-radius: var(--fxb-radius-pill);
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-bold);
font-size: var(--fxb-text-base);
letter-spacing: var(--fxb-tracking-tight);
}
.fxb-steps__body { flex: 1 1 auto; min-width: 0; }
.fxb-steps__title {
margin: 0 0 var(--fxb-space-2);
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-semibold);
font-size: var(--fxb-text-md);
line-height: var(--fxb-leading-tight);
color: inherit;
}
.fxb-steps__content { line-height: var(--fxb-leading-base); }
.fxb-steps__content > :first-child { margin-top: 0; }
.fxb-steps__content > :last-child { margin-bottom: 0; } .fxb-steps--timeline.fxb-steps--cols-1 .fxb-steps__item {
position: relative;
padding-bottom: var(--fxb-space-5);
}
.fxb-steps--timeline.fxb-steps--cols-1 .fxb-steps__item:not(:last-child)::before {
content: "";
position: absolute;
left: 17px;
top: 36px;
bottom: 0;
width: 2px;
background: var(--fxb-border);
} .fxb-faq__heading,
.fxb-steps__heading {
margin: 0 0 var(--fxb-space-5);
font-family: var(--fxb-font-display);
font-weight: var(--fxb-weight-bold);
line-height: var(--fxb-leading-tight);
color: inherit;
} .fxb-scores__title {
font-size: 1.15rem;
font-weight: 700;
color: var(--fxb-text);
margin: 0 0 1rem;
}
.fxb-scores__grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fxb-scores__product {
border: 1px solid var(--fxb-border);
border-radius: 12px;
padding: 1rem 1.1rem;
background: var(--fxb-surface);
}
.fxb-scores__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
.fxb-scores__name {
font-weight: 700;
color: var(--fxb-text);
}
.fxb-scores__global {
display: inline-flex;
align-items: baseline;
gap: 1px;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: var(--fxb-accent);
color: var(--fxb-on-accent);
font-size: 1rem;
line-height: 1;
}
.fxb-scores__global-max { font-size: 0.7rem; opacity: 0.8; }
.fxb-scores__list { list-style: none; margin: 0; padding: 0; }
.fxb-scores__row {
display: grid;
grid-template-columns: minmax(90px, 38%) 1fr auto;
align-items: center;
gap: 0.6rem;
padding: 0.28rem 0;
}
.fxb-scores__label {
font-size: 0.85rem;
color: var(--fxb-text-secondary);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.fxb-scores__weight {
font-size: 0.68rem;
color: var(--fxb-text-tertiary);
border: 1px solid var(--fxb-border);
border-radius: 4px;
padding: 0 0.25rem;
}
.fxb-scores__bar {
display: block;
height: 8px;
border-radius: 999px;
background: var(--fxb-surface-sunken);
overflow: hidden;
}
.fxb-scores__bar-fill {
display: block;
height: 100%;
border-radius: 999px;
background: var(--fxb-accent);
}
.fxb-scores__note {
font-size: 0.82rem;
font-weight: 600;
color: var(--fxb-text);
min-width: 1.6rem;
text-align: right;
}
.fxb-scores--empty {
border: 1px dashed var(--fxb-border-strong);
border-radius: 12px;
padding: 1rem;
color: var(--fxb-text-tertiary);
font-size: 0.9rem;
} .fxb-product-card__scores {
margin-top: 0.85rem;
padding-top: 0.75rem;
border-top: 1px solid var(--fxb-border);
}
.fxb-product-card__scores .fxb-scores__row {
grid-template-columns: minmax(80px, 40%) 1fr auto;
padding: 0.22rem 0;
}
.fxb-product-mini .fxb-product-card__scores {
margin-top: 0.5rem;
padding-top: 0.5rem;
} .fxb-ctable__title { font-size: 1.15rem; font-weight: 700; color: var(--fxb-text); margin: 0 0 1rem; }
.fxb-ctable__scroll { overflow-x: auto; }
.fxb-ctable__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.fxb-ctable__table th, .fxb-ctable__table td {
padding: 0.6rem 0.7rem; text-align: center; border-bottom: 1px solid var(--fxb-border); vertical-align: middle;
}
.fxb-ctable__table tbody th[scope="row"] {
text-align: left; font-weight: 600; color: var(--fxb-text-secondary); white-space: nowrap;
}
.fxb-ctable__corner { background: transparent; border-bottom: none; }
.fxb-ctable__col { font-weight: 700; color: var(--fxb-text); }
.fxb-ctable__col.is-highlight { background: var(--fxb-accent-soft); border-radius: 8px 8px 0 0; }
.fxb-ctable__pname { color: var(--fxb-text); text-decoration: none; }
a.fxb-ctable__pname:hover { text-decoration: underline; }
.fxb-ctable__row--global td { font-weight: 600; }
.fxb-ctable__bar {
display: inline-block; vertical-align: middle; width: 64px; height: 7px; border-radius: 999px;
background: var(--fxb-surface-sunken); overflow: hidden;
}
.fxb-ctable__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--fxb-accent); }
.fxb-ctable__num { font-weight: 600; color: var(--fxb-text); margin-left: 0.35rem; }
.fxb-ctable__yes { color: var(--fxb-success); font-weight: 700; }
.fxb-ctable__no { color: var(--fxb-text-tertiary); }
.fxb-ctable__table td.is-winner { background: var(--fxb-accent-soft); font-weight: 700; } .fxb-comparison-cards__item.is-highlight {
border-color: var(--fxb-accent);
box-shadow: 0 0 0 2px var(--fxb-accent-soft);
}
.fxb-comparison-cards__tagline {
font-size: 0.88rem; color: var(--fxb-text-secondary); margin: 0.25rem 0 0.75rem;
}
.fxb-comparison-cards__pros {
list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem;
}
.fxb-comparison-cards__pros li {
display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.86rem; color: var(--fxb-text);
}