html.cbx-on #tarifs-legacy { display: none !important; }
.cbx { --cbx-ink: #1d1d1f; --cbx-muted: #52525b; --cbx-line: rgba(0, 0, 0, 0.07); --cbx-surface: #f5f5f7; color: var(--cbx-ink); }
.cbx *, .cbx *::before, .cbx *::after { box-sizing: border-box; }
.cbx-wrap { margin: 0 auto; max-width: 72rem; padding: 4.5rem 1.25rem; }
.cbx .cbx-title { margin: 0; text-align: center; font-size: clamp(2.1rem, 5.2vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
.cbx .cbx-title span { color: #52525b; }
.cbx p.cbx-sub { margin: 1rem auto 0; max-width: 40rem; text-align: center; color: var(--cbx-muted); font-size: 1rem; line-height: 1.6; }
.cbx-ai-orb {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 0.35rem;
pointer-events: none;
}
.cbx-ai-orb canvas {
display: block;
width: 64px !important;
height: 64px !important;
flex: 0 0 auto;
}
.cbx-eyebrow {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-bottom: 2.4rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.22);
background:
linear-gradient(
155deg,
#3a3a3c 0%,
#111113 22%,
#2c2c2e 40%,
#0a0a0b 58%,
#4a4a4d 78%,
#1a1a1c 100%
);
box-shadow:
0 6px 14px -6px rgba(0, 0, 0, 0.55),
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 -1px 0 rgba(0, 0, 0, 0.55) inset;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
}
.cbx-eyebrow-wave { display: none; }
.cbx-eyebrow-text {
position: relative;
z-index: 1;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.cbx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; background: var(--cbx-ink); color: #fff !important; padding: 0.65rem 1.25rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 0.2s; }
.cbx-btn:hover { background: #333; }
.cbx-btn--light { background: #fff; color: var(--cbx-ink) !important; }
.cbx-btn--light:hover { background: #f1f1f3; }
.cbx-btn--block { display: flex; width: 100%; text-align: center; }
.cbx-pill {
display: flex;
justify-content: center;
margin-top: 1.15rem;
width: 100%;
padding: 0 0.5rem;
box-sizing: border-box;
}
.cbx-pill--menu {
margin: 0.45rem 0 0.55rem;
padding: 0;
width: 100%;
}
.cbx-pill--menu a {
width: 100%;
min-height: 48px;
font-size: 0.74rem;
white-space: normal;
line-height: 1.25;
padding: 0.55rem 2.6rem 0.55rem 2.75rem;
text-align: center;
}
.cbx-pill a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-height: 48px;
padding: 0.45rem 2.75rem;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 100%),
linear-gradient(135deg, #fafafa 0%, #f3f3f5 45%, #ececef 100%);
border: 1px solid rgba(24, 24, 27, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 10px 28px -18px rgba(24, 24, 27, 0.35),
0 2px 6px -3px rgba(24, 24, 27, 0.08);
font-size: 0.78rem;
color: #3f3f46;
text-decoration: none;
white-space: nowrap;
transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.cbx-pill a:hover {
transform: translateY(-1px);
filter: brightness(1.015);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 14px 32px -16px rgba(24, 24, 27, 0.4),
0 3px 8px -3px rgba(24, 24, 27, 0.1);
}
.cbx-pill a b { font-weight: 700; color: #18181b; }
.cbx-pill-text {
display: block;
text-align: center;
min-width: 0;
}
.cbx-pill-ico {
display: inline-block;
width: 1em;
height: 1em;
margin: 0 0.2em 0 0.05em;
vertical-align: -0.15em;
object-fit: contain;
}
.cbx-pill-orb {
position: absolute;
left: 0.3rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
pointer-events: none;
}
.cbx-pill-orb canvas { width: 36px !important; height: 36px !important; display: block; }
@media (min-width: 480px) {
.cbx-pill a { font-size: 0.8rem; min-height: 60px; padding: 0.5rem 3.5rem; }
.cbx-pill-orb { left: 0.35rem; width: 48px; height: 48px; }
.cbx-pill-orb canvas { width: 48px !important; height: 48px !important; }
}
@media (min-width: 640px) {
.cbx-pill { width: auto; padding: 0; }
.cbx-pill a { width: auto; }
}
.cbx-pill-badge {
position: absolute;
top: -0.6rem;
right: -0.45rem;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.45rem;
height: 1.25rem;
padding: 0 0.5rem;
border-radius: 999px;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.22);
background:
linear-gradient(
155deg,
#3a3a3c 0%,
#111113 22%,
#2c2c2e 40%,
#0a0a0b 58%,
#4a4a4d 78%,
#1a1a1c 100%
);
box-shadow:
0 6px 14px -6px rgba(0, 0, 0, 0.55),
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 -1px 0 rgba(0, 0, 0, 0.55) inset;
}
.cbx-pill-badge-wave {
position: absolute;
inset: -35% -70%;
z-index: 0;
pointer-events: none;
background:
linear-gradient(
115deg,
transparent 0%,
transparent 28%,
rgba(255, 255, 255, 0.08) 38%,
rgba(255, 255, 255, 0.55) 48%,
rgba(255, 255, 255, 0.12) 56%,
transparent 68%,
transparent 100%
);
mix-blend-mode: screen;
animation: cbx-chrome-sweep 2.6s ease-in-out infinite;
}
.cbx-pill-badge-text {
position: relative;
z-index: 1;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1;
color: #f5f5f7;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}
@keyframes cbx-chrome-sweep {
0% { transform: translateX(-45%) skewX(-12deg); opacity: 0.55; }
50% { transform: translateX(35%) skewX(-12deg); opacity: 1; }
100% { transform: translateX(-45%) skewX(-12deg); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.cbx-pill-badge-wave,
.cbx-ref-badge-wave { animation: none; }
}
.cbx-providers { margin-top: 2rem; }
.cbx-pivot {
display: flex;
align-items: center;
gap: 0.3rem;
height: 3.9rem;
padding: 0.3rem;
border-radius: 999px;
background:
linear-gradient(180deg, #fafafa, #f0f0f2);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
max-width: 44rem;
margin: 0 auto;
overflow: hidden;
}
.cbx-pivot-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
flex: 0 0 3.15rem;
width: 3.15rem;
height: 100%;
min-width: 0;
padding: 0 0.65rem;
border: 0;
border-radius: 999px;
background: transparent;
color: #52525b;
cursor: pointer;
transition:
flex 0.32s cubic-bezier(0.22, 1, 0.36, 1),
width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
background 0.22s ease,
color 0.22s ease,
box-shadow 0.22s ease;
font: inherit;
text-align: left;
}
.cbx-pivot-btn img,
.cbx-pivot-dot {
width: 22px;
height: 22px;
flex: none;
}
.cbx-pivot-dot {
display: inline-block;
border-radius: 999px;
background: #d4d4d8;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.cbx-pivot-copy {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
gap: 0.1rem;
transition: opacity 0.2s ease, max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cbx-pivot-btn strong {
font-size: 0.92rem;
font-weight: 650;
line-height: 1.1;
color: inherit;
white-space: nowrap;
}
.cbx-pivot-btn small {
font-size: 0.68rem;
line-height: 1.2;
color: #52525b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cbx-pivot-btn.is-active {
flex: 1 1 auto;
width: auto;
justify-content: flex-start;
padding-left: 0.85rem;
padding-right: 1rem;
background: #fff;
color: var(--cbx-ink);
box-shadow:
0 10px 24px -16px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.cbx-pivot-btn.is-active .cbx-pivot-copy {
max-width: 22rem;
opacity: 1;
}
.cbx-pivot-btn.is-active .cbx-pivot-dot { background: var(--cbx-ink); }
.cbx-pivot-btn:not(.is-active):hover {
color: var(--cbx-ink);
}
.cbx-url {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
margin-top: 0.85rem;
padding: 0.35rem 0.4rem 0.35rem 0.85rem;
border-radius: 999px;
background: #fff;
border: 1px solid var(--cbx-line);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.78rem;
color: #3f3f46;
box-sizing: border-box;
}
.cbx-url span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cbx-url button {
flex: none;
margin-left: auto;
border: 0;
border-radius: 999px;
background: var(--cbx-ink);
padding: 0.3rem 0.7rem;
font: inherit;
font-family: inherit;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
color: #fff;
}
@media (max-width: 640px) {
.cbx-pivot {
border-radius: 999px;
max-width: none;
height: 3.7rem;
}
.cbx-pivot-btn {
flex-basis: 2.85rem;
width: 2.85rem;
padding: 0 0.45rem;
}
.cbx-pivot-btn.is-active {
padding-left: 0.75rem;
padding-right: 0.85rem;
}
.cbx-pivot-btn.is-active .cbx-pivot-copy { max-width: 14rem; }
.cbx-pivot-btn strong { font-size: 0.86rem; }
.cbx-pivot-btn small { font-size: 0.62rem; }
}
.cbx-chats {
margin-top: 1.5rem;
touch-action: pan-y;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.cbx-chats.is-swiping { cursor: grabbing; }
.cbx-chats .cbx-url,
.cbx-chats button { user-select: auto; -webkit-user-select: auto; }
.cbx-chats-stage {
position: relative;
display: grid;
width: min(100%, 36rem);
margin: 0 auto;
}
@media (min-width: 768px) {
.cbx-chats-stage { width: min(100%, 42rem); }
}
.cbx-chats-stage > .cbx-chat {
grid-area: 1 / 1;
width: 100%;
opacity: 0;
visibility: hidden;
transform: translate3d(14px, 0, 0) scale(0.985);
transition:
opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0.42s;
pointer-events: none;
z-index: 0;
}
.cbx-chats-stage > .cbx-chat.is-active {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.cbx-chats-stage > .cbx-chat {
transition: opacity 0.15s ease, visibility 0.15s;
transform: none;
}
}
.cbx-chat {
display: flex;
flex-direction: column;
min-height: 100%;
overflow: hidden;
border-radius: 28px;
background: #f7f7f8;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.35);
}
.cbx-chat--other {
background: #fafafa;
justify-content: flex-start;
}
.cbx-other-body {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
padding: 0.35rem 1.35rem 1.5rem;
font-size: 0.95rem;
line-height: 1.55;
color: #3f3f46;
}
.cbx-other-body p { margin: 0; }
.cbx-chat--other .cbx-chat-brand .cbx-pivot-dot {
width: 18px;
height: 18px;
background: var(--cbx-ink);
}
.cbx-chat--claude { background: #f5f4f0; }
.cbx-chat-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1.15rem 1.15rem 0.25rem;
}
.cbx-chat-brand {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
font-weight: 600;
color: #0d0d0d;
}
.cbx-chat-brand img { width: 18px; height: 18px; display: block; }
.cbx-chat-top small {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #52525b;
white-space: nowrap;
}
.cbx-chat-thread {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.25rem;
flex: 1;
min-height: 12.5rem;
margin-top: 0.85rem;
padding: 0.85rem 1.15rem 1.35rem;
}
@media (max-width: 767px) {
.cbx-chat-thread { margin-top: 2.6rem; }
}
.cbx-me {
align-self: flex-end;
max-width: 88%;
padding: 0.85rem 1.1rem;
border-radius: 22px;
background: #ececec;
color: #0d0d0d;
font-size: 0.9rem;
line-height: 1.5;
text-align: left;
}
.cbx-chat--claude .cbx-me {
background: #e8e6df;
border-radius: 18px;
}
.cbx-bot {
display: flex;
align-items: flex-start;
gap: 0.55rem;
max-width: 100%;
}
.cbx-bot-avatar {
display: grid;
place-items: center;
width: 16px;
height: 16px;
flex: none;
margin-top: 0.2rem;
background: transparent;
box-shadow: none;
}
.cbx-bot-avatar img {
width: 16px;
height: 16px;
display: block;
opacity: 0.72;
}
.cbx-bot-bubble {
flex: 1;
min-width: 0;
padding: 0.15rem 0.1rem;
font-size: 0.9rem;
line-height: 1.55;
color: #0d0d0d;
}
.cbx-bot-bubble b { font-weight: 650; color: #0d0d0d; }
.cbx-composer {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0 1rem 1.1rem;
padding: 0.5rem 0.5rem 0.5rem 0.8rem;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.35);
}
.cbx-chat--claude .cbx-composer {
background: #faf9f5;
border-color: rgba(0, 0, 0, 0.05);
box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.28);
}
.cbx-composer-placeholder { color: #52525b !important; }
.cbx-composer-icon {
display: inline-flex;
width: 20px;
height: 20px;
color: #0d0d0d;
flex: none;
}
.cbx-composer-icon svg { width: 100%; height: 100%; display: block; }
.cbx-composer-voice {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: #0d0d0d;
color: #fff;
flex: none;
}
.cbx-composer-voice svg { width: 15px; height: 15px; display: block; }
.cbx-points { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cbx-points { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
@media (min-width: 768px) {
/* Space between advantage row and “Prêt en deux minutes” */
.cbx-points + .cbx-title {
margin-top: 5.5rem !important;
}
}
.cbx-point { padding: 0.25rem 0.25rem; }
.cbx-point svg { width: 22px; height: 22px; color: var(--cbx-ink); }
.cbx-point h3 { margin: 0.7rem 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.cbx-point p { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--cbx-muted); }
.cbx-steps { display: grid; gap: 0.75rem; margin-top: 2.5rem; grid-template-columns: 1fr; counter-reset: cbx-step; }
@media (min-width: 768px) { .cbx-steps { grid-template-columns: repeat(3, 1fr); } }
.cbx-step { position: relative; padding: 1.1rem 1.2rem 1.1rem 3.4rem; border-radius: 22px; background: var(--cbx-surface); font-size: 0.9rem; line-height: 1.5; color: #3f3f46; counter-increment: cbx-step; }
.cbx-step::before { content: counter(cbx-step); position: absolute; left: 1.1rem; top: 1.05rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cbx-ink); color: #fff; font-size: 0.78rem; font-weight: 600; }
.cbx-cta { display: flex; justify-content: center; margin-top: 2rem; }
.cbx-plans {
display: flex;
align-items: stretch;
gap: 0.85rem;
margin-top: 2.5rem;
overflow-x: auto;
overflow-y: visible;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
padding: 1.15rem 0 0;
background: transparent;
box-shadow: none;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.cbx-plans::-webkit-scrollbar { display: none; }
.cbx-plans .cbx-plan {
flex: 0 0 86%;
max-width: 86%;
scroll-snap-align: start;
}
@media (min-width: 700px) {
.cbx-plans {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
overflow: visible;
scroll-snap-type: none;
padding-bottom: 0;
}
.cbx-plans .cbx-plan {
flex: none;
max-width: none;
scroll-snap-align: unset;
}
}
@media (min-width: 1100px) {
.cbx-plans {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.9rem;
}
.cbx-plans .cbx-plan { padding: 1.5rem 1.25rem; }
.cbx-plans .cbx-price { font-size: 2rem; }
.cbx-plans .cbx-list { font-size: 0.82rem; }
}
.cbx-plans .cbx-price { font-size: clamp(2rem, 4vw, 2.6rem); }
.cbx-plans .cbx-per { max-width: 16rem; }
.cbx-plan {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 2rem;
border-radius: 28px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.28);
}
.cbx-plan--dark {
border-color: rgba(255, 255, 255, 0.1);
background: #1d1d1f;
color: #fff;
box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.55);
}
.cbx-plan-kicker { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--cbx-muted); }
.cbx-plan--dark .cbx-plan-kicker { color: #d4d4d8; }
.cbx-plan h3 { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.cbx-badge {
position: absolute;
top: -0.55rem;
right: 0.95rem;
z-index: 3;
margin: 0;
padding: 0.28rem 0.75rem;
border-radius: 999px;
background: #fff;
color: var(--cbx-ink);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
/* Mostly downward so the top isn't hard-clipped by the carousel scrollport */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.08),
0 6px 16px rgba(0, 0, 0, 0.2),
0 10px 28px rgba(0, 0, 0, 0.12);
pointer-events: none;
}
.cbx-plan.cbx-plan--dark { overflow: visible; }
/* Extra top padding: overflow-x:auto clips vertical overflow; keep badge+shadow inside */
.cbx-plans { padding-top: 1.15rem; margin-top: 2.5rem; }
.cbx-price { margin: 1.5rem 0 0; font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cbx-per { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--cbx-muted); }
.cbx-plan--dark .cbx-per { color: #d4d4d8; }
.cbx-tease {
margin: 1rem 0 0;
padding: 0.55rem 0.8rem;
border-radius: 14px;
background: rgba(24, 24, 27, 0.05);
font-size: 0.8rem;
line-height: 1.45;
color: #3f3f46;
}
.cbx-plan--dark .cbx-tease {
background: rgba(255, 255, 255, 0.1);
color: #e4e4e7;
}
.cbx-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.875rem; line-height: 1.45; color: #52525b; }
.cbx-plan--dark .cbx-list { color: #e4e4e7; }
.cbx-list li { display: flex; gap: 0.55rem; }
.cbx-list svg { width: 16px; height: 16px; flex: none; margin-top: 0.15rem; }
.cbx-list li.cbx-ai { font-weight: 600; color: var(--cbx-ink); }
.cbx-plan--dark .cbx-list li.cbx-ai { color: #fff; }
.cbx-plan .cbx-foot { margin-top: auto; padding-top: 1.75rem; }
.cbx-allin { margin: 1.5rem auto 0; max-width: 40rem; text-align: center; font-size: 0.85rem; color: var(--cbx-muted); }
.cbx-ref {
position: relative;
display: grid;
gap: 1.75rem;
margin-top: 5.75rem;
padding: 3.75rem 1.5rem 2rem;
border-radius: 28px;
background: var(--cbx-surface);
border: 1px solid rgba(0, 0, 0, 0.04);
grid-template-columns: 1fr;
overflow: visible;
}
.cbx-ref-badge {
position: absolute;
top: -2.85rem;
right: 0.85rem;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 7.75rem;
height: 7.75rem;
padding: 0.55rem;
border-radius: 50%;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, #000 99%, transparent 100%);
mask-image: radial-gradient(circle, #000 99%, transparent 100%);
text-align: center;
background:
linear-gradient(
155deg,
#3a3a3c 0%,
#111113 22%,
#2c2c2e 40%,
#0a0a0b 58%,
#4a4a4d 78%,
#1a1a1c 100%
);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow:
0 12px 28px -10px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.28) inset;
color: #f5f5f7;
line-height: 1.05;
}
.cbx-ref-badge-wave {
position: absolute;
inset: -40% -80%;
z-index: 0;
pointer-events: none;
background:
linear-gradient(
115deg,
transparent 0%,
transparent 34%,
rgba(255, 255, 255, 0.06) 42%,
rgba(255, 255, 255, 0.42) 50%,
rgba(255, 255, 255, 0.08) 58%,
transparent 66%,
transparent 100%
);
animation: cbx-chrome-sweep 2.6s ease-in-out infinite;
will-change: transform;
}
.cbx-ref-badge strong,
.cbx-ref-badge small {
position: relative;
z-index: 1;
}
.cbx-ref-badge strong {
display: block;
font-size: 1.95rem;
font-weight: 750;
letter-spacing: -0.06em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.cbx-ref-badge small {
display: block;
margin-top: 0.3rem;
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
color: rgba(245, 245, 247, 0.82);
text-wrap: balance;
}
.cbx-ref h3 {
margin: 0;
padding-top: 0.55rem;
padding-right: 5.25rem;
font-size: 1.6rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
}
@media (min-width: 900px) {
.cbx-ref {
grid-template-columns: 1.1fr 0.9fr;
gap: 2.5rem;
margin-top: 6.25rem;
padding: 2.75rem 2.5rem 2.5rem;
align-items: center;
}
.cbx-ref-badge {
top: -4.25rem;
right: 1.35rem;
width: 8.75rem;
height: 8.75rem;
}
.cbx-ref-badge strong { font-size: 2.35rem; }
.cbx-ref-badge small { font-size: 0.66rem; margin-top: 0.35rem; }
.cbx-ref h3 { padding-top: 0; padding-right: 0; }
}
.cbx-ref h3 span { color: #52525b; }
.cbx-ref > div > p { margin: 0.8rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--cbx-muted); }
.cbx-ref ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; line-height: 1.45; color: #3f3f46; }
.cbx-ref li { display: flex; gap: 0.6rem; }
.cbx-ref li svg { width: 16px; height: 16px; flex: none; margin-top: 0.15rem; }
.cbx-calc { padding: 1.4rem; border-radius: 22px; background: #fff; border: 1px solid var(--cbx-line); box-shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.4); }
.cbx-calc label { display: block; font-size: 0.85rem; font-weight: 500; color: #52525b; }
.cbx-calc label b { color: var(--cbx-ink); }
.cbx-calc input[type='range'] { width: 100%; margin: 1rem 0 0.4rem; accent-color: var(--cbx-ink); height: 28px; }
.cbx-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: #52525b; }
.cbx-out { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.cbx-out s { font-size: 1.05rem; color: #52525b; }
.cbx-out strong { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.03em; }
.cbx-out em { font-style: normal; font-size: 0.85rem; color: #52525b; }
.cbx-fine { margin: 0.9rem 0 0; font-size: 0.72rem; line-height: 1.5; color: #52525b; }
@media (max-width: 640px) {
.cbx-wrap { padding: 3.5rem 1.25rem; }
.cbx-plan { padding: 1.6rem; }
.cbx-ref { padding: 3.9rem 1.25rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .cbx-pill a { transition: none; } }
.text-zinc-400 { color: #52525b !important; }
.text-zinc-500 { color: #52525b !important; }
.cbx-ai span[style*="color"],
.cbx-ai .text-zinc-400,
.cbx-ai .text-zinc-500,
#ia span,
#ia small,
#pricing span,
#pricing s,
#pricing p {
}
#ia small,
#ia .cbx-chat-kicker,
.cbx-ai small {
color: #52525b !important;
}
#ia h2 span,
#pricing h2 span,
.cbx-ai h2 span,
.cbx-price-title span {
color: #52525b !important;
}
.cbx-composer-placeholder {
color: #52525b !important;
}
#pricing p,
.cbx-referral p,
#pricing s,
#pricing .cbx-muted {
color: #52525b !important;
}
.cbx-carousel-dot {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
.text-zinc-600 { color: #52525b !important; }
.cbx-plan--dark .cbx-plan-kicker,
.cbx-plan--dark .cbx-per,
.cbx-plan--dark .cbx-plan-desc,
.cbx-plan--dark li {
color: #e4e4e7 !important;
}
.cbx-plan--dark .cbx-per { color: #d4d4d8 !important; }
button.h-2.rounded-full[aria-label] {
box-sizing: content-box !important;
width: 8px !important;
height: 8px !important;
padding: 18px !important;
margin: -18px 4px !important;
background-clip: content-box !important;
}
button.h-2.rounded-full[aria-label][aria-current="true"],
button.h-2.rounded-full[aria-current="true"] {
width: 24px !important;
}

/* Hero / display muted line — original zinc-400 look (not the a11y body override) */
h1 .text-zinc-400,
h2 .text-zinc-400,
.cbx .cbx-title span,
.cbx-ref h3 span {
  color: #a1a1aa !important;
}

/* Direct links to ChatGPT / Claude in the AI section (v76). */
.cbx-ai-open { flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.cbx-ai-open .cbx-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.cbx-ai-ico { width: 16px; height: 16px; flex: none; }
.cbx-ai-ico--gpt { filter: invert(1); }
@media (max-width: 520px) { .cbx-ai-open .cbx-btn { width: 100%; justify-content: center; } }
.cbx-ai-open button.cbx-btn { cursor: pointer; font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: normal; border: 0; }