/*
 * The AI wallet: the usage page's balance and top-ups, and the console's
 * list of transfers to credit.
 *
 * Its own file for the reason the others are: shell.css is long enough that
 * a new class name in it is a collision waiting to happen. Everything here
 * is `xc-wal`, `xc-use`, `xc-dc`, `xc-sb`, `xc-tu`, `xc-cu` (the
 * console's AI usage pages), `xc-sp` (the website's pricing, previewed on
 * the console's plans and prices, whose own rules are in pricing.css) or
 * `xc-pb` (Settings → Plan & billing, and the trial's banner).
 */

/* ── the page ────────────────────────────────────────────────────────── */

/* The screen's one scrolling column: the shell holds still around it. */
.xc-wal {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-wal > * { flex: none; }

.xc-wal__card {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-wal__sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(var(--ink), .55);
    text-wrap: pretty;
    max-inline-size: 70ch;
}

/* The balance: the one figure the page is for. */

.xc-wal__level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    color: rgb(var(--tint));
    background: rgba(var(--tint), .1);
}

/* Joined letters, not spaced capitals, in Arabic — see .xc-tag. */
[dir="rtl"] .xc-wal__level { font-family: inherit; font-size: 11px; letter-spacing: 0; }

/* Asking on one side, how to pay on the other; one column on a phone. */
.xc-wal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.xc-wal__form {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.xc-wal__amount {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.xc-wal__amount .xc-in { flex: 1; min-inline-size: 0; font-variant-numeric: tabular-nums; }

.xc-wal__code {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

/* Our bank details: a list of named facts, which is what a dl is. */
.xc-wal__bank {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 13.5px;
}

.xc-wal__bank dt { color: rgba(var(--ink), .5); }

.xc-wal__bank dd {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.xc-wal__ref {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed var(--line);
}

.xc-wal__ref strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    letter-spacing: .05em;
}

/* Isolated left to right so the code reads as one; in Arabic it still sits
   under its label, on the right, rather than at the far edge of the box. */
[dir="rtl"] .xc-wal__ref strong { text-align: right; }

/* ── the top-ups, newest first ───────────────────────────────────────── */

.xc-wal__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xc-wal__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.xc-wal__what {
    flex: 1;
    min-inline-size: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
}

.xc-wal__what > span { color: rgba(var(--ink), .55); font-size: 12.8px; }

/* A top-up our team turned down: the alert it is, with their reason in its colour. */
.xc-wal__row[data-refused] { background: rgba(214, 69, 69, .05); border-color: rgba(214, 69, 69, .35); }
.xc-wal__row[data-refused] .xc-wal__why { color: #b83636; font-weight: 500; }
[data-theme="dark"] .xc-wal__row[data-refused] .xc-wal__why { color: #EC8A8A; }

.xc-wal__mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: .03em;
}

/* Above its own lines, on their side, in Arabic — see .xc-wal__ref strong. */
[dir="rtl"] .xc-wal__mono { text-align: right; }

.xc-wal__acts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.xc-wal__acts form { margin: 0; }

@media (max-width: 820px) {
    .xc-wal__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── the console's transfers to credit ───────────────────────────────── */

.xc-tu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.xc-tu__top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.xc-tu__forms {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.xc-tu__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.xc-tu form { margin: 0; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 980px) {
    .xc-tu__forms { grid-template-columns: minmax(0, 1fr); }
    .xc-tu__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ── the usage page's figures ───────────────────────────────────────────── */

.xc-use {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The balance: the one hero number, and the screen's one gradient. */
.xc-use__hero {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xc-use__hero-top,
.xc-use__hero-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.xc-use__hero-foot { justify-content: space-between; }

.xc-use__balance {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(34px, 6vw, 48px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.05;
    inline-size: fit-content;
    background: linear-gradient(90deg, rgb(var(--brand)), var(--peri));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.xc-use__balance[data-negative] {
    background: none;
    color: rgb(214, 69, 69);
}

.xc-use__line,
.xc-use__note,
.xc-use__empty {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(var(--ink), .6);
    text-wrap: pretty;
}

.xc-use__note,
.xc-use__empty { margin: 0; }

.xc-use__empty {
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    text-align: center;
}

/* The period and its switch. */
.xc-use__period {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.xc-use__span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: rgba(var(--ink), .55);
}

/* The digits stay mono; an Arabic month or word takes the Arabic face. */
[dir="rtl"] .xc-use__span { font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace; }

.xc-use__periods,
.xc-use__range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.xc-use__range { margin: 0; }

.xc-use__range .xc-in {
    inline-size: auto;
    min-block-size: 38px;
    padding-block: 6px;
}

.xc-use__periods .xc-act[aria-pressed="true"] {
    color: var(--peri);
    border-color: var(--peri);
    font-weight: 600;
}

/* Two charts side by side, one on its own for somebody who sees no money. */
.xc-use__charts,
.xc-use__splits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.xc-use__charts[data-one] { grid-template-columns: minmax(0, 1fr); }

/* The balance keeps the screen's one gradient: the buttons on the usage
   page are plain, and so are its charts (components/day-chart). */
.xc-wal .xc-primary { background: rgb(var(--brand)); }

/* The heading grows in a row head; in a card's column it would push what
   follows to the bottom — a split with one part sat under a gap. */
.xc-wal__card > .xc-head__title { flex: none; }

.xc-use__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.xc-use__money [data-out] { color: rgba(var(--ink), .7); }

.xc-use__after {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: rgba(var(--ink), .5);
}

/* As .xc-use__span. */
[dir="rtl"] .xc-use__after { font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace; }

/* ── a day-by-day chart (components/day-chart) ─────────────────────────────
 *
 * Flat: the page's one gradient is the balance. Every day sits in a faint
 * track of its own, the busiest in the brand's blue with its figure over
 * it; the gridlines and the average say their values in a gutter at the
 * line's end, which is the left in Arabic.
 */

.xc-dc {
    --dc-bar: var(--peri);
    --dc-peak: rgb(var(--brand));
    --dc-second: var(--amber);
    --dc-loss: rgb(214, 69, 69);
    --dc-track: rgba(var(--ink), .045);
    --dc-line: rgba(var(--ink), .1);
    --dc-gutter: 64px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-inline-size: 0;
}

/* The period's figure, and under it its average day and its busiest. */
.xc-dc__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.xc-dc__total {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--text);
}

.xc-dc__facts {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(var(--ink), .58);
}

/* Above the bars, room for the busiest day's figure; beside them, the gutter. */
.xc-dc__plot {
    padding-block-start: 24px;
    padding-inline-end: var(--dc-gutter);
}

.xc-dc__area {
    position: relative;
    block-size: 150px;
}

/* A gridline, and its value in the gutter. */
.xc-dc__tick {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--at);
    border-block-start: 1px dashed var(--dc-line);
    pointer-events: none;
}

.xc-dc__tick[data-zero] { border-block-start: 1px solid rgba(var(--ink), .22); }

.xc-dc__tick b,
.xc-dc__avg b {
    position: absolute;
    inset-inline-start: calc(100% + 8px);
    inset-block-start: -.75em;
    font: 500 10.5px/1.4 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: rgba(var(--ink), .45);
}

.xc-dc__bars {
    position: absolute;
    inset: 0;
    display: flex;
    /* Up to 5px between a month's days; less as the days multiply. */
    gap: clamp(1px, calc(120px / var(--n, 30)), 5px);
}

.xc-dc__col {
    position: relative;
    flex: 1;
    min-inline-size: 0;
    display: flex;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.xc-dc__track {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    border-radius: 999px;
    background: var(--dc-track);
    overflow: hidden;
    transition: background-color .15s ease;
}

.xc-dc__bar {
    display: block;
    flex: none;
    block-size: var(--h);
    border-radius: 999px;
    background: var(--dc-bar);
    transition: background-color .15s ease;
}

.xc-dc__bar[data-part="second"] {
    block-size: var(--h2);
    background: var(--dc-second);
}

.xc-dc__bar[data-part="loss"] { background: var(--dc-loss); }

/* Stacked: one pill in two colours, square where they meet. */
.xc-dc[data-mode="stacked"] .xc-dc__track { gap: 0; }

.xc-dc__bar[data-part="second"] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.xc-dc__bar[data-part="first"] {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.xc-dc__col[data-solo] .xc-dc__bar[data-part] { border-radius: 999px; }

.xc-dc__col:is(:hover, :focus) .xc-dc__track { background: rgba(var(--ink), .085); }

.xc-dc__col[data-peak] .xc-dc__bar:not([data-part]),
.xc-dc__col:is(:hover, :focus) .xc-dc__bar:not([data-part]) { background: var(--dc-peak); }

/* Signed: gains above the zero line, losses below, each bar round only at
   its far end. The line sits where the biggest of each fills its side. */
.xc-dc[data-mode="signed"] .xc-dc__track {
    justify-content: flex-start;
    gap: 0;
}

.xc-dc__half {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
}

.xc-dc__half[data-side="up"] {
    block-size: var(--up);
    justify-content: flex-end;
}

.xc-dc__half[data-side="down"] {
    block-size: calc(100% - var(--up));
    justify-content: flex-start;
}

.xc-dc__half[data-side="up"] .xc-dc__bar {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.xc-dc__half[data-side="down"] .xc-dc__bar {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

/* The busiest day's figure, without being asked; out of the way of a tip. */
.xc-dc__chip {
    position: absolute;
    inset-block-end: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--brand), .1);
    color: var(--dc-peak);
    font: 600 10.5px/1.5 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .12s ease;
}

.xc-dc__bars:is(:hover, :focus-within) .xc-dc__chip { opacity: 0; }

/* A day's date and figures, just over its bar: on hover, or a tap on a phone. */
.xc-dc__tip {
    position: absolute;
    inset-block-end: calc(var(--top, 100%) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 9px;
    border-radius: 10px;
    background: var(--text);
    color: var(--surface);
    box-shadow: 0 8px 22px rgba(var(--scrim), .22);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s;
}

.xc-dc__tip b { font-weight: 600; }

.xc-dc__tip span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.xc-dc__col:is(:hover, :focus) .xc-dc__tip {
    opacity: 1;
    visibility: visible;
}

/* The first days and the last keep their tip and figure over the chart. */
.xc-dc__col[data-edge="start"] :is(.xc-dc__chip, .xc-dc__tip) {
    left: auto;
    right: auto;
    inset-inline-start: 0;
    transform: none;
}

.xc-dc__col[data-edge="end"] :is(.xc-dc__chip, .xc-dc__tip) {
    left: auto;
    right: auto;
    inset-inline-end: 0;
    transform: none;
}

/* The period's average, dashed across. */
.xc-dc__avg {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--at);
    z-index: 2;
    border-block-start: 1.5px dashed rgba(var(--brand), .6);
    pointer-events: none;
}

.xc-dc__avg b {
    font-weight: 600;
    color: rgb(var(--brand));
}

.xc-dc__x {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-inline-end: var(--dc-gutter);
    font: 11px/1.4 'JetBrains Mono', ui-monospace, monospace;
    color: rgba(var(--ink), .45);
}

/* Month names and "average" are words: the Arabic face, after the mono one. */
[dir="rtl"] :is(.xc-dc__x, .xc-dc__tip span, .xc-dc__tick b, .xc-dc__avg b) {
    font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace;
}

.xc-dc__key {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.xc-dc__key span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--ink), .045);
    font-size: 12.5px;
    color: rgba(var(--ink), .7);
}

.xc-dc__key i {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--dc-bar);
}

.xc-dc__key i[data-part="second"] { background: var(--dc-second); }
.xc-dc__key i[data-part="loss"] { background: var(--dc-loss); }

/* ── where it went (components/split-bars) ──────────────────────────────────
 *
 * One hue at falling strength, never a rainbow: the whole cut into its
 * parts over the rows, and each row's dot the strength of its slice.
 */

.xc-sb {
    --sb: var(--peri);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-sb[data-tone="amber"] { --sb: var(--amber); }

.xc-sb__whole {
    display: flex;
    gap: 3px;
    block-size: 10px;
    border-radius: 999px;
    background: rgba(var(--ink), .05);
    overflow: hidden;
}

.xc-sb__whole span {
    inline-size: var(--w);
    min-inline-size: 4px;
    background: var(--sb);
    opacity: var(--o);
}

.xc-sb__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.xc-sb__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xc-sb__top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
}

.xc-sb__dot {
    flex: none;
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: var(--sb);
    opacity: var(--o);
}

/* The name takes the room that shrinks, in its own direction. */
.xc-sb__name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
    font-size: 14px;
    color: var(--text);
}

.xc-sb__chip {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--ink), .055);
    font: 500 11px/1.5 'JetBrains Mono', ui-monospace, monospace;
    color: rgba(var(--ink), .62);
}

[dir="rtl"] .xc-sb__chip { font-family: 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace; }

.xc-sb__n {
    flex: none;
    font: 13px/1.4 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--ink), .78);
}

.xc-sb__track {
    display: block;
    block-size: 7px;
    border-radius: 999px;
    background: rgba(var(--ink), .055);
    overflow: hidden;
}

.xc-sb__fill {
    display: block;
    block-size: 100%;
    inline-size: var(--w);
    border-radius: 999px;
    background: var(--sb);
    opacity: var(--o);
}

.xc-sb__note {
    font-size: 12.5px;
    color: rgba(var(--ink), .55);
}

@media (max-width: 980px) {
    .xc-use__charts,
    .xc-use__splits { grid-template-columns: minmax(0, 1fr); }
}

/* ── the console's AI usage pages ──────────────────────────────────────── */

.xc-cu {
    padding: 8px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.xc-cu__panel {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The heading grows in a row head; in a panel's column it would push what
   follows to the bottom. */
.xc-cu__panel > .xc-head__title { flex: none; }

/* A sentence that is what a panel says, not a note about it. */
.xc-cu__say {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(var(--ink), .62);
    text-wrap: pretty;
}

.xc-cu__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

[dir="rtl"] .xc-cu__back svg { transform: scaleX(-1); }

.xc-cu__meta {
    font-size: 13px;
    color: rgba(var(--ink), .5);
    text-wrap: pretty;
}

.xc-cu__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px 12px;
}

.xc-cu__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    color: rgba(var(--ink), .6);
}

.xc-cu__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.xc-cu__charts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.xc-cu__charts[data-two] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The table is wider than the screen on purpose: it scrolls on its own. */
.xc-cu__scroll { overflow-x: auto; }
.xc-cu__scroll .xc-co { min-inline-size: 1180px; }

/* One scroller, not two. On a phone every .xc-co scrolls by itself
   (responsive.css); inside this one, that hid the last columns behind a
   second swipe of their own. */
.xc-cu__scroll .xc-co { overflow-x: visible !important; }

/* Each row as wide as its columns, so its rule and its hover reach the last. */
.xc-cu__scroll .xc-co__head,
.xc-cu__scroll .xc-co__row { min-inline-size: max-content; }

.xc-cu__none {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 26px;
    text-align: center;
    font-size: 15px;
    color: rgba(var(--ink), .45);
}

.xc-cu__flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.xc-cu__sort {
    color: inherit;
    text-decoration: none;
}

[aria-sort="ascending"] > .xc-cu__sort::after { content: " \2191"; }
[aria-sort="descending"] > .xc-cu__sort::after { content: " \2193"; }

.xc-cu__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.xc-cu__form .xc-mild { align-self: flex-start; }

.xc-cu__choice {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
}

.xc-cu__choice label { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1180px) {
    .xc-cu__charts,
    .xc-cu__charts[data-two] { grid-template-columns: minmax(0, 1fr); }
}

/* ── the website's pricing section, previewed on plans & prices ──────── */

/*
 * The website's pricing section, previewed (screens/admin/pricing-site): the
 * site's own colours and shapes (xconversions-landing, styles/pricing.css),
 * smaller. A tab per language without script: the radios sit before the
 * tabs and the pages, and the one checked shows its page.
 */
.xc-sp { position: relative; display: flex; flex-direction: column; gap: 12px; }
.xc-sp__pick { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.xc-sp__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.xc-sp__tabs label { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; }
.xc-sp__pick:nth-of-type(1):checked ~ .xc-sp__tabs label:nth-child(1),
.xc-sp__pick:nth-of-type(2):checked ~ .xc-sp__tabs label:nth-child(2),
.xc-sp__pick:nth-of-type(3):checked ~ .xc-sp__tabs label:nth-child(3) { background: rgba(var(--ink), .08); font-weight: 600; }
.xc-sp__pick:focus-visible ~ .xc-sp__tabs { outline: 2px solid rgba(var(--ink), .4); outline-offset: 3px; border-radius: 999px; }
.xc-sp__page { display: none; flex-direction: column; gap: 16px; padding: 22px; border-radius: 18px; background: #FAFAF7; color: #0E0E1A; }
.xc-sp__pick:nth-of-type(1):checked ~ .xc-sp__pages > .xc-sp__page:nth-child(1),
.xc-sp__pick:nth-of-type(2):checked ~ .xc-sp__pages > .xc-sp__page:nth-child(2),
.xc-sp__pick:nth-of-type(3):checked ~ .xc-sp__pages > .xc-sp__page:nth-child(3) { display: flex; }
.xc-sp__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.xc-sp__plan { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid #E6E4DE; border-radius: 20px; background: #FFFFFF; color: #0E0E1A; }
.xc-sp__plan[data-hot] { border-color: #0B0B1A; background: #0B0B1A; color: #FFFFFF; }
.xc-sp__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.xc-sp__name { font-size: 16px; }
.xc-sp__tag { padding: 3px 9px; border-radius: 999px; background: #0E9E5E; color: #06210F; font-size: 11px; font-weight: 600; white-space: nowrap; }
.xc-sp__price { display: flex; align-items: baseline; gap: 5px; margin: 0; }
.xc-sp__amount { font-family: Poppins, sans-serif; font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.04em; }
.xc-sp__per { font-size: 13px; opacity: .6; }
.xc-sp__facts, .xc-sp__advantages, .xc-sp__included { margin: 0; padding: 0; list-style: none; }
.xc-sp__facts { display: flex; flex-direction: column; gap: 8px; padding-block: 12px; border-block: 1px solid #EFEDE8; font-size: 13.5px; font-weight: 600; }
.xc-sp__plan[data-hot] .xc-sp__facts { border-color: rgba(255, 255, 255, .12); }
.xc-sp__facts li, .xc-sp__advantages li, .xc-sp__included li { display: flex; align-items: center; gap: 8px; }
.xc-sp__facts svg { flex: none; opacity: .7; }
.xc-sp__advantages { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.xc-sp__advantages svg, .xc-sp__included svg { flex: none; color: #1C1CD2; }
.xc-sp__plan[data-hot] .xc-sp__advantages svg { color: #3BE07A; }
.xc-sp__cta { margin-block-start: auto; padding: 10px; border-radius: 11px; background: #0E0E1A; color: #FFFFFF; font-weight: 600; font-size: 13px; text-align: center; }
.xc-sp__plan[data-hot] .xc-sp__cta { background: #0E9E5E; color: #06210F; }
.xc-sp__included { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.xc-sp__included li { padding: 6px 12px; border: 1px solid #E6E4DE; border-radius: 999px; background: #FFFFFF; font-size: 12.5px; font-weight: 500; }
.xc-sp__pilot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; background: #0B0B1A; color: #FFFFFF; }
.xc-sp__bars { display: flex; gap: 5px; }
.xc-sp__bars i { display: block; inline-size: 9px; block-size: 26px; border-radius: 3px; background: #0E9E5E; }
.xc-sp__lead { display: flex; flex: 1; flex-direction: column; gap: 3px; min-inline-size: 200px; }
.xc-sp__lead strong { font-family: Poppins, sans-serif; font-size: 16px; }
.xc-sp__lead span { font-size: 13px; color: rgba(255, 255, 255, .66); }
.xc-sp__go { padding: 10px 15px; border-radius: 10px; background: #0E9E5E; color: #06210F; font-weight: 600; font-size: 13px; }

/* ── Plan & billing (screens/settings/tabs/plan) ─────────────────────── */

/* Where the workspace stands: washed in its colour — the brand's, amber in
   the trial's last days, red past it, the plan's own on a plan. */
.xc-pb {
    border-color: rgba(var(--tint), .3);
    background: linear-gradient(150deg, rgba(var(--tint), .1), rgba(var(--tint), 0) 60%), var(--surface);
}

.xc-pb__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.xc-pb__top .xc-setcard__head { gap: 4px; min-inline-size: 0; }
.xc-pb__top .xc-setcard__head h3 { font-size: 22px; letter-spacing: -0.015em; }
.xc-pb__top .xc-setcard__head p { font-size: 13.5px; line-height: 1.5; max-inline-size: 60ch; }

.xc-pb__facts { border-block-start: 1px solid var(--line); }
.xc-pb__facts > div:last-child { border-block-end: 0; padding-block-end: 0; }
.xc-pb__facts .xc-pb__paused { color: rgb(214, 69, 69); font-weight: 600; }

/* A trial nothing will end: amber, where it cannot be missed. */
.xc-pb__warn {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 13px;
    border: 1px solid rgba(232, 163, 61, .42);
    background: rgba(232, 163, 61, .12);
    color: var(--amber);
}

.xc-pb__warn svg { flex: none; margin-block-start: 1px; }
.xc-pb__warn > span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.xc-pb__warn strong { font-size: 14.5px; font-weight: 600; }
.xc-pb__warn > span > span { font-size: 13px; line-height: 1.5; color: rgba(var(--ink), .66); text-wrap: pretty; }

/* On a trial: "Choose a plan", down to the plans after this card. */
.xc-pb__go { display: flex; justify-content: flex-start; }

/* A trial's one extension: to ask for, asked, or given. */
.xc-pb__more {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    flex-wrap: wrap;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--line);
}

.xc-pb__more > span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; flex: 1 1 260px; }
.xc-pb__more strong { font-size: 14px; font-weight: 600; }
.xc-pb__more > span > span { font-size: 13px; line-height: 1.5; color: rgba(var(--ink), .6); text-wrap: pretty; }

/* Arrived at by "Choose a plan": a little room above it, not flush. */
.xc-pb__choose { scroll-margin-block-start: 14px; }

/* A plan asked for: what to transfer, and where. */
.xc-pb__asked { border-color: rgba(var(--brand), .38); }

.xc-pb__bank {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    padding: 14px 16px;
    border-radius: 13px;
    background: rgba(var(--ink), .035);
    font-size: 13.5px;
}

.xc-pb__bank dt { color: rgba(var(--ink), .55); }
.xc-pb__bank dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Left to right inside, beside its label on either side of the page. */
[dir="rtl"] .xc-pb__bank dd { text-align: end; }

/* What the plan includes, and how much of it is in use. */
.xc-pb__uses { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

.xc-pb__use {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(96px, 200px);
    align-items: center;
    gap: 8px 13px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(var(--ink), .035);
}

/* The languages have no bar: their words take its room. */
.xc-pb__use > .xc-pb__say:last-child { grid-column: span 2; }

.xc-pb__mark {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--brand));
    background: rgba(var(--brand), .09);
}

.xc-pb__say { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.xc-pb__say strong { font-size: 14px; font-weight: 600; }
.xc-pb__say > span { font-size: 12.8px; color: rgba(var(--ink), .6); }
.xc-pb__say em { font-style: normal; font-size: 12px; line-height: 1.45; color: rgba(var(--ink), .45); text-wrap: pretty; }

.xc-pb__bar { block-size: 7px; border-radius: 99px; background: rgba(var(--ink), .08); overflow: hidden; }
.xc-pb__bar > span { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, #1C1CD2, #5B5BF0); }
[dir="rtl"] .xc-pb__bar > span { background: linear-gradient(270deg, #1C1CD2, #5B5BF0); }

/* All of it in use: amber, like the notice that stops the next one. */
.xc-pb__use[data-full] .xc-pb__bar > span { background: #E8A33D; }
.xc-pb__use[data-full] .xc-pb__say > span { color: var(--amber); font-weight: 600; }

.xc-pb__langs { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }
.xc-pb__lang { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--ink), .05); color: rgba(var(--ink), .45); }
.xc-pb__lang[data-on] { background: rgba(0, 168, 134, .12); color: var(--green); font-weight: 600; }

/* The AI wallet. */
.xc-pb__wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(var(--ink), .035);
}

.xc-pb__balance { font-family: Poppins, sans-serif; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.xc-pb__balance[data-negative] { color: rgb(214, 69, 69); }

/* The plans, side by side. */
/* Narrow enough that four plans sit in one row on a desktop's settings column. */
.xc-pb__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

.xc-pb__plan {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    border-block-start: 3px solid rgb(var(--tint));
    border-radius: 14px;
    background: var(--surface);
}

/* Graphite, a plan's colour, is lost on Ink: its rule lifted toward white. */
[data-theme="dark"] .xc-pb__plan { border-block-start-color: color-mix(in srgb, rgb(var(--tint)) 55%, #FFFFFF); }
.xc-pb__plan[data-current] { background: linear-gradient(180deg, rgba(var(--tint), .08), rgba(var(--tint), 0) 70%), var(--surface); }

.xc-pb__planhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-inline-size: 0; }
.xc-pb__plan h4 { margin: 0; font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; }
.xc-pb__price { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.xc-pb__per { font-size: 13px; font-weight: 400; letter-spacing: 0; color: rgba(var(--ink), .5); }

/* How it is paid, under the price: every month, or the year's amount at once. */
.xc-pb__billed { margin: -4px 0 0; font-size: 12.8px; line-height: 1.45; color: rgba(var(--ink), .58); }

/* What a plan has: ticked lines, in the plan's own colour. */
.xc-pb__gets { margin: 0; padding: 0; list-style: none; font-size: 13.2px; line-height: 1.45; color: rgba(var(--ink), .78); display: flex; flex-direction: column; gap: 6px; }
.xc-pb__gets li { display: flex; align-items: flex-start; gap: 8px; }
.xc-pb__gets svg { flex: none; margin-block-start: 3px; color: rgb(var(--tint)); }
[data-theme="dark"] .xc-pb__gets svg { color: color-mix(in srgb, rgb(var(--tint)) 55%, #FFFFFF); }
.xc-pb__gets em { display: block; font-style: normal; font-size: 12.4px; color: rgba(var(--ink), .52); }

/* What it opens above the plan before it. */
.xc-pb__opens { display: flex; flex-direction: column; gap: 7px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.xc-pb__after { font-size: 12.6px; font-weight: 600; color: rgba(var(--ink), .6); }

/* Its button at the foot of the card, whatever the card above it holds. */
.xc-pb__plan > button { margin-block-start: auto; inline-size: 100%; justify-content: center; }

/* A plan we quote: the same card, a dashed edge, and words where a price would be. */
.xc-pb__plan[data-quoted] { border-style: dashed; border-block-start-style: solid; }
.xc-pb__plan[data-quoted] .xc-pb__price { font-family: Poppins, sans-serif; }

/* By the month, or by the year: the choice above the plans, and what the year saves. */
.xc-pb__form { display: flex; flex-direction: column; gap: 14px; }
.xc-pb__period { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.xc-pb__save { padding: 3px 10px; border-radius: 999px; font-size: 12.4px; font-weight: 600; color: var(--green); background: rgba(0, 168, 134, .12); }

/* A price is shown for the way of paying that is ticked. Where the browser
 * cannot tell which that is, the monthly one is. */
.xc-pb__form[data-periods] [data-when] { display: none; }
.xc-pb__form[data-periods]:has(input[name="period"][value="monthly"]:checked) [data-when="monthly"],
.xc-pb__form[data-periods]:has(input[name="period"][value="yearly"]:checked) [data-when="yearly"] { display: block; }

@supports not selector(:has(*)) {
    .xc-pb__form[data-periods] [data-when="monthly"] { display: block; }
}

/* What every plan does, under the cards. */
/* Setup and onboarding: our team's one-time packages, a card each. */
.xc-pb__setup { scroll-margin-block-start: 14px; }
.xc-pb__packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: stretch; }
.xc-pb__pack { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.xc-pb__pack h4 { margin: 0; font-family: Poppins, sans-serif; font-size: 15px; font-weight: 600; }
.xc-pb__packprice { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.xc-pb__packprice > span { white-space: nowrap; }
.xc-pb__packprice .xc-pb__per { font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.xc-pb__packfor, .xc-pb__packtime { margin: 0; font-size: 12.8px; line-height: 1.45; color: rgba(var(--ink), .58); text-wrap: pretty; }
.xc-pb__pack .xc-pb__gets { flex: 1; }
.xc-pb__pack form { display: flex; }
.xc-pb__pack form button, .xc-pb__pack > a { inline-size: 100%; box-sizing: border-box; justify-content: center; text-align: center; white-space: normal; }

/* The bigger sizes a plan is sold in: which one goes with the plan chosen, and what each costs. */
.xc-pb__sizes { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.xc-pb__sizeshead { display: flex; flex-direction: column; gap: 2px; }
.xc-pb__sizeshead strong { font-size: 14px; font-weight: 600; }
.xc-pb__sizeshead span { font-size: 13px; line-height: 1.5; color: rgba(var(--ink), .6); text-wrap: pretty; }
.xc-pb__sizes .xc-seg { align-self: flex-start; }
.xc-pb__sizewrap { overflow-x: auto; }
.xc-pb__sizetable { inline-size: 100%; min-inline-size: 560px; table-layout: fixed; border-collapse: collapse; font-size: 13.2px; font-variant-numeric: tabular-nums; }
.xc-pb__sizetable th, .xc-pb__sizetable td { padding: 8px 10px; text-align: start; border-block-end: 1px solid var(--line); white-space: nowrap; }
.xc-pb__sizetable thead th { font-size: 12px; font-weight: 600; color: rgba(var(--ink), .55); }
.xc-pb__sizetable tbody th { font-weight: 600; }
.xc-pb__sizetable tbody tr:last-child th, .xc-pb__sizetable tbody tr:last-child td { border-block-end: 0; }
.xc-pb__sizeless { color: rgba(var(--ink), .5); white-space: normal; }

/* The size ticked, in the table. */
.xc-pb__sizes:has(input[name="contacts"][value="1000"]:checked) tr[data-size="1000"],
.xc-pb__sizes:has(input[name="contacts"][value="2500"]:checked) tr[data-size="2500"],
.xc-pb__sizes:has(input[name="contacts"][value="5000"]:checked) tr[data-size="5000"],
.xc-pb__sizes:has(input[name="contacts"][value="10000"]:checked) tr[data-size="10000"] { background: rgba(var(--brand), .07); }

.xc-pb__every { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--ink), .035); }
.xc-pb__every strong { font-size: 13.6px; font-weight: 600; }
.xc-pb__every ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px 16px; font-size: 13.2px; color: rgba(var(--ink), .78); }
.xc-pb__every li { display: flex; align-items: flex-start; gap: 8px; }
.xc-pb__every svg { flex: none; margin-block-start: 3px; color: var(--green); }

@media (max-width: 640px) {
    .xc-pb__use { grid-template-columns: auto minmax(0, 1fr); }
    .xc-pb__bar { grid-column: 1 / -1; }
    .xc-pb__use > .xc-pb__say:last-child { grid-column: auto; }
}

/* The trial's banner while there is time: the brand's mark, not a warning's. */
.xc-alert[data-trial-banner="trial"] .xc-alert__mark { background: rgba(var(--brand), .1); color: rgb(var(--brand)); }