/*
  taste-skill feature cards - the card, its inset panel and where a fragment sits on it.
  The rules and their reasons are in references/cards.md. Link after system.css (it refines .card
  and .panel there) or on its own with these tokens on a ground:
    --bg (page), --card (one step off the page), --ink, --muted, --accent, --accent-ink,
    --font-text, --font-mono
  Fragments in a panel take --fx-* from .stage (set below from the same tokens).
*/

/* ---------------------------------------------------------------- the card */
.card {
    --c-r: 20px; /* card radius */
    --c-pad: 28px; /* text padding = the panel's side inset */
    --c-gap: 8px; /* an inset panel's margin; its radius is --c-r minus this */
    --c-border: color-mix(in oklab, var(--ink) 8%, transparent);
    --c-text: color-mix(
        in oklab,
        var(--ink) 84%,
        var(--card)
    ); /* card text: the ink, a touch softer than titles */
    --c-hi: oklch(
        from var(--card) 1 0 0 / clamp(0, calc(0.09 - l * 0.09), 0.07)
    );
    --c-sh: oklch(from var(--card) 0 0 0 / calc(0.07 - l * 0.04));
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--c-pad);
    border-radius: var(--c-r);
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--c-border);
    box-shadow:
        inset 0 1px 0 var(--c-hi),
        0 1px 2px var(--c-sh);
    overflow: clip;
    gap: 0;
}
@media (min-width: 1024px) {
    .card {
        --c-pad: 32px;
    }
}
@media (max-width: 639px) {
    .card {
        --c-r: 18px;
        --c-pad: 20px;
    }
}

.card > h3,
.card__title {
    margin: 0;
    font-family: var(--font-text);
    font-size: 18px;
    line-height: 26px;
    font-weight: 560;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: balance;
}
/* the two lines under a title: 16px in the ink (a touch softer than the title), never small grey text */
.card > p,
.card__text {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
    max-width: 46ch;
    text-wrap: pretty;
}
/* two muted lines keep one height in a row so the panels line up; only where cards sit side by side
   (below 1024px a row is one column, and the held line would be an empty gap) */
@media (min-width: 1024px) {
    .card--row > p {
        min-height: 2lh;
    }
}
.card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    width: max-content;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    color: var(--ink);
    text-decoration: none;
}
.card__link svg {
    width: 14px;
    height: 14px;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card__link:hover svg {
    transform: translateX(2px);
}

/* ---------------------------------------------------------------- the inset panel */
/* Default (x.ai): aligned with the text column and running off the card's bottom edge.
   The effect canvas mounts on the panel (data-fx) and sits under everything in it. */
.panel {
    --p-r: 12px;
    display: block;
    padding: 0;
    --p-h: clamp(264px, 22vw + 8px, 340px);
    position: relative;
    isolation: isolate;
    overflow: clip;
    min-height: var(--p-h);
    flex: 1 0 auto;
    border-radius: var(--p-r) var(--p-r) 0 0;
    background: color-mix(in oklab, var(--ink) 4%, var(--card));
}
/* a panel with no effect mounted stands on the page's lit ground (system.css --ground-*: sand, sky,
   sage, painting), never a grey a shade off the white UI on it: flat on kind other (cafes, shops,
   studios); on a tech page (site-kind tech, software or gaming) a soft mesh of the ground's own tones,
   the Figma tile, with no grain (grain or texture would be the page's one effect). A [data-fx] panel
   draws its effect instead. */
.panel:not([data-fx], .panel--device) {
    background: var(--ground-bg, #d9ccb7);
}
:root:has(
        meta[name='site-kind']:is(
                [content='tech'],
                [content='software'],
                [content='gaming']
            )
    )
    .panel:not([data-fx], .panel--device) {
    background-color: var(--ground-bg, #d9ccb7);
    background-image:
        radial-gradient(
            70% 90% at 12% 0%,
            color-mix(in oklab, var(--ground-surface, #e9e0d2) 92%, white),
            transparent 70%
        ),
        radial-gradient(
            60% 80% at 100% 100%,
            color-mix(
                in oklab,
                var(--ground-accent, #a8794a) 34%,
                var(--ground-bg, #d9ccb7)
            ),
            transparent 72%
        ),
        radial-gradient(
            50% 60% at 85% 10%,
            color-mix(
                in oklab,
                var(--ground-surface, #e9e0d2) 60%,
                transparent
            ),
            transparent 70%
        );
}
.card > .panel {
    margin-top: 32px;
    margin-bottom: calc(-1 * var(--c-pad) - 1px);
}
.card > .panel--device {
    margin-top: 24px;
}
/* system.css spaces the text above a panel itself; here the panel carries the 32px */
.card > :has(+ .panel) {
    margin-bottom: 0;
}
/* a crisp 1px edge over the ground and over any fragment it crops */
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px color-mix(in oklab, var(--ink) 7%, transparent),
        inset 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
}
/* the vignette that calms the ground where the fragment sits (--vx, --vy: its centre) */
.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    width: auto;
    padding: 0;
    background: radial-gradient(
        ellipse 70% 62% at var(--vx, 50%) var(--vy, 62%),
        color-mix(
            in oklab,
            var(--calm, var(--card)) var(--calm-k, 34%),
            transparent
        ),
        transparent 72%
    );
}
/* inset on all sides by --c-gap; nested radius */
.card > .panel--inset {
    margin: 32px calc(var(--c-gap) - var(--c-pad))
        calc(var(--c-gap) - var(--c-pad));
    border-radius: calc(var(--c-r) - var(--c-gap));
}
/* runs to the card's side and bottom edges (Figma's image band); the card's corners clip it */
.card > .panel--flush {
    margin: 32px calc(-1 * var(--c-pad) - 1px) calc(-1 * var(--c-pad) - 1px);
    border-radius: 0;
}
.panel--flush::after {
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 7%, transparent);
}
/* the panel on top, the caption under it (tall cards) */
.card > .panel--top {
    order: -1;
    margin: calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad))
        24px;
    border-radius: calc(var(--c-r) - var(--c-gap));
    flex: none;
    min-height: 0;
    aspect-ratio: 1 / 1;
}
.panel--top.panel--wide {
    aspect-ratio: 4 / 3;
}

/* a device (x.ai's "Computer" card): a status row, then the ground as its screen. The row sits on the
   card itself, not in a frame of its own, so the card stays two levels deep (card > picture > UI) */
.panel--device {
    display: flex;
    padding: 0;
    flex-direction: column;
    background: none;
    overflow: visible;
    isolation: auto;
    border-radius: 0;
}
.panel--device::before,
.panel--device::after {
    display: none;
}
.panel__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin-bottom: 12px;
    padding: 0;
    flex: none;
    font: 500 13px/20px var(--font-text);
    color: var(--ink);
}
.panel__bar .muted {
    color: var(--muted);
    font-weight: 400;
}
.panel__bar .sp {
    flex: 1;
}
/* the bar's status is quiet ink: the accent belongs to the one status inside the screen */
.panel__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font: 500 var(--t-label)/1 var(--font-text);
    color: var(--ink);
    background: color-mix(in oklab, var(--ink) 6%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent);
}
.panel__bar .ui-agent {
    width: 20px;
    height: 20px;
    --u-ink: var(--ink);
    --u-bg: var(--card);
}
/* a still dot: the bar's status never spins on its own (the moving part is the screen's one loop) */
.panel__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
.panel__screen {
    position: relative;
    isolation: isolate;
    overflow: clip;
    flex: 1;
    margin: 0;
    border-radius: var(--p-r) var(--p-r) 0 0;
    background: color-mix(in oklab, var(--ink) 4%, var(--card));
}
.panel__screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 7%, transparent);
}
.panel__screen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 70% 62% at var(--vx, 50%) var(--vy, 70%),
        color-mix(in oklab, var(--calm, #000) var(--calm-k, 30%), transparent),
        transparent 72%
    );
}

/* ---------------------------------------------------------------- where a fragment sits */
/* .stage holds the fragment(s) and gives them their palette: the fragment surface is one step
   lighter than the card on dark grounds and white on light ones */
.stage,
.panel > .stage,
.panel__screen > .stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    max-width: none;
    --ui-font: var(--font-text);
    --ui-mono: var(--font-mono);
    --ui-radius: 12px;
    /* the fragment surface: white on a light card, one step lighter than a dark card (--frag overrides) */
    --fx-bg: var(
        --frag,
        oklch(
            from var(--card) clamp(calc(l + 0.05), calc((l - 0.5) * 1000), 1)
                calc(c * 0.5) h
        )
    );
    --fx-surface: var(--card);
    --fx-ink: var(--ink);
    --fx-muted: var(--muted);
    --fx-accent: var(--accent);
    --fx-accent-ink: var(--accent-ink);
}
.stage > * {
    position: absolute;
    max-width: none;
}
/* from 640px a fragment keeps its true width and is cropped by the panel, never squeezed to fit
   (on a phone it takes the panel's width instead: see the end of this block) */
@media (min-width: 640px) {
    .stage > :not(.at-center) > [data-ui] {
        max-width: none;
    }
}
/* a fragment cut by the panel's edge dissolves into the ground over its last --fade-h (64px; 40px for a
   short panel) instead of being sliced through a line of text (edge-fade-dissolve, 14 of 41 sites).
   The fade only ever covers context: the fragment's point (the row that changes, the number, the
   button) sits above it. */
.stage {
    --fade-h: 64px;
}
.stage--fade-b {
    -webkit-mask: linear-gradient(
        to bottom,
        #000 calc(100% - var(--fade-h)),
        transparent calc(100% - 4px)
    );
    mask: linear-gradient(
        to bottom,
        #000 calc(100% - var(--fade-h)),
        transparent calc(100% - 4px)
    );
}
.stage--fade-r {
    -webkit-mask: linear-gradient(
        to right,
        #000 calc(100% - 72px),
        transparent calc(100% - 4px)
    );
    mask: linear-gradient(
        to right,
        #000 calc(100% - 72px),
        transparent calc(100% - 4px)
    );
}
.stage--fade-br {
    -webkit-mask:
        linear-gradient(
            to bottom,
            #000 calc(100% - var(--fade-h)),
            transparent calc(100% - 4px)
        ),
        linear-gradient(
            to right,
            #000 calc(100% - 72px),
            transparent calc(100% - 4px)
        );
    -webkit-mask-composite: source-in;
    mask:
        linear-gradient(
            to bottom,
            #000 calc(100% - var(--fade-h)),
            transparent calc(100% - 4px)
        ),
        linear-gradient(
            to right,
            #000 calc(100% - 72px),
            transparent calc(100% - 4px)
        );
    mask-composite: intersect;
}
/* anchored at the top-left inset, cut by the right and bottom edges (19 of 41 sites) */
.at-corner {
    left: var(--ax, 32px);
    top: var(--ay, 32px);
}
/* anchored at the top-right inset, cut by the bottom only: on a narrow panel it narrows to the panel
   minus both insets rather than run out of the left edge through its text */
.at-right {
    right: var(--ax, 32px);
    top: var(--ay, 32px);
    max-width: calc(100% - 2 * var(--ax, 32px));
}
.stage > .at-right > :is([data-ui], .ui) {
    max-width: 100%;
}
/* rising out of the bottom edge (x.ai) */
.at-rise {
    left: var(--ax, 18%);
    top: var(--ay, 48px);
}
/* .to-edge: the wrapper reaches --cut (72px) past the panel's bottom edge whatever the panel's height,
   so a fragment that fills its wrapper (stat with opts.fill, a long list) is always cut on purpose and
   never by a few accidental px */
.stage > .to-edge {
    bottom: calc(-1 * var(--cut, 72px));
}
.stage > .to-edge > :is([data-ui], .ui) {
    height: 100%;
}
/* .fit: the fragment takes the panel's width minus --ax on both sides instead of its own, for a narrow
   panel where a few px of overhang would cut its text (contain it, or cut it by 48px or more).
   --fit-max (its true width, e.g. 400px for chat) keeps it at that width on a wide panel, centred
   between the insets (x.ai's window rising out of the bottom edge), so it only narrows where the
   panel is too small: never a 1-23px sliver, a cut at 1024, or uneven ground at the sides */
.stage > .fit {
    right: var(--ax, 32px);
}
.stage > .fit > :is([data-ui], .ui) {
    width: 100%;
    max-width: var(--fit-max, 100%);
    margin-inline: auto;
}
/* .wide: a fluid fragment (files, calendar) set wider than the panel (--w), so it is cut by the right
   edge like a window, not centred with even ground round it; pair with .stage--fade-br. Whatever the
   panel's width it runs at least 64px past the right edge */
.stage > .wide {
    width: max(var(--w, 680px), 100% - var(--ax, 32px) + 64px);
}
.stage > .wide > :is([data-ui], .ui) {
    width: 100%;
    max-width: none;
}
/* a small control in the calm middle of a focal ground (Figma's Texture tile): never a window or a
   dialog. It never runs past the panel: at most the panel less 24px a side */
.at-center {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    max-width: calc(100% - 48px);
}
.stage > .at-center > :is([data-ui], .ui) {
    max-width: 100%;
}
/* a second fragment laid over the first one's edge */
.at-over {
    right: var(--bx, 24px);
    bottom: var(--by, 24px);
    z-index: 2;
}
.at-over-l {
    left: var(--bx, 24px);
    bottom: var(--by, 24px);
    z-index: 2;
}
/* phone: a fragment takes the panel's width minus the inset on both sides (its own width stays the upper
   bound), so it is only ever cut at the bottom, never through a line of text at the side. The desktop
   --ax and --ay are ignored here; --ay-sm sets the top. */
@media (max-width: 639px) {
    .stage > :is(.at-corner, .at-right, .at-rise) {
        left: var(--ax-sm, 16px);
        right: var(--ax-sm, 16px);
        top: var(--ay-sm, 24px);
        max-width: none;
    }
    .stage > :is(.at-corner, .at-right, .at-rise) > :is([data-ui], .ui) {
        max-width: 100%;
    }
    .stage > .wide {
        width: auto;
    }
    .stage > .at-center {
        max-width: calc(100% - 2 * var(--ax-sm, 16px));
    }
    /* a dialog over a window takes the panel's width less 12px a side, never running past it */
    .stage > :is(.at-over, .at-over-l) {
        left: 12px;
        right: 12px;
        bottom: 16px;
    }
    .stage > :is(.at-over, .at-over-l) > :is([data-ui], .ui) {
        width: auto;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------- variants */
/* text beside the panel */
.card--split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: stretch;
}
.card--split > .card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 0;
}
.card--split > .panel {
    margin: calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad))
        calc(var(--c-gap) - var(--c-pad)) 0;
    border-radius: calc(var(--c-r) - var(--c-gap));
    min-height: 420px;
}
@media (max-width: 899px) {
    .card--split {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .card--split > .card__body {
        padding: 0;
    }
    .card--split > .panel {
        margin: 28px calc(var(--c-gap) - var(--c-pad))
            calc(var(--c-gap) - var(--c-pad));
        min-height: 360px;
    }
}
.card__points {
    display: grid;
    gap: 0;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.card__points li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--c-border);
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
}
.card__points li b {
    color: var(--ink);
    font-weight: 500;
}
.card__points svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: none;
    color: var(--ink);
}

/* the big number: filled with an effect through a blend knock-out (see cards.md) */
.knock {
    position: relative;
    isolation: isolate;
    display: inline-block;
    line-height: 0.92;
}
.knock__text {
    position: relative;
    z-index: 1;
    display: block;
    font: 600 var(--knock-size, 128px)/0.92
        var(--font-display, var(--font-text));
    letter-spacing: -0.05em;
    background: var(--card);
    color: #fff;
    mix-blend-mode: darken;
    padding: 0.04em 0.06em 0.08em 0;
}
.knock--light .knock__text {
    color: #000;
    mix-blend-mode: lighten;
}
/* a plain big number beside a knocked-out one: the same size and the same box, so the rows under both
   start level */
.stat__num {
    display: block;
    font: 600 var(--knock-size, 128px)/0.92
        var(--font-display, var(--font-text));
    letter-spacing: -0.05em;
    padding: 0.04em 0.06em 0.08em 0;
    color: var(--ink);
    white-space: nowrap;
}
.stat__unit {
    font-size: 0.32em;
    letter-spacing: -0.01em;
    color: var(--muted);
    font-weight: 500;
    margin-left: 0.2em;
}
.stat__label {
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
}
.stat__label b {
    color: var(--ink);
    font-weight: 500;
}

/* testimonial: the quote and who said it, beside one result told as a number and two bars */
.quote {
    margin: 0;
    font-family: var(--font-display, var(--font-text));
    font-size: clamp(22px, 1.1vw + 12px, 28px);
    line-height: 1.32;
    letter-spacing: -0.02em;
    font-weight: 450;
    color: var(--ink);
    text-wrap: pretty;
}
.person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}
.person__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: var(--ink);
    background: color-mix(in oklab, var(--ink) 5%, var(--card));
    box-shadow: inset 0 0 0 1px var(--c-border);
}
.person__logo svg {
    width: 22px;
    height: 22px;
}
.person__name {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--ink);
}
.person__role {
    display: block;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
}
.result {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding-left: 40px;
    border-left: 1px solid var(--c-border);
}
.result__fig {
    font: 600 clamp(64px, 3.4vw + 24px, 88px)/0.95
        var(--font-display, var(--font-text));
    letter-spacing: -0.05em;
    color: var(--ink);
}
.result__cap {
    margin: 12px 0 0;
    max-width: 28ch;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
}
.result__bars {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.result__bars li {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
}
.result__bars i {
    display: block;
    height: 8px;
    width: var(--w);
    border-radius: 4px;
    background: color-mix(in oklab, var(--ink) 16%, var(--card));
}
.result__bars li:last-child i {
    background: var(--accent);
}
.result__bars b {
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) {
    .result {
        padding: 28px 0 0;
        border-left: 0;
        border-top: 1px solid var(--c-border);
    }
}

/* pricing */
.plan {
    gap: 0;
}
/* every plan's name row is the badge's height, so prices, buttons and lists sit level across the row */
.plan__name {
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.plan__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 20px;
    font: 600 44px/1 var(--font-display, var(--font-text));
    letter-spacing: -0.04em;
}
.plan__price small {
    font: 400 14px/20px var(--font-text);
    letter-spacing: 0;
    color: var(--muted);
}
.plan__for {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
    min-height: 2lh;
}
.plan__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-top: 24px;
    border-radius: 10px;
    font: 500 14px/1 var(--font-text);
    text-decoration: none;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 16%, transparent);
}
.plan__btn--primary {
    background: var(--ink);
    color: var(--card);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--card) 18%, transparent);
}
.plan__list {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid var(--c-border);
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
}
.plan__list li {
    display: flex;
    gap: 10px;
}
.plan__list li::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    background: var(--ink);
    opacity: 0.85;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.8 2.8 6.2-6.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.8 2.8 6.2-6.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 16px no-repeat;
}
/* the featured plan: the same --card fill as its neighbours and a quiet accent hairline, its one accent
   touch (so the badge is quiet ink). On hover or focus a light runs once round the edge: an edge-glow
   canvas (fill 1, wash 0) mounted for that lap only, which paints the same fill under a lit border and
   then fades. Never a light that runs because the plan scrolled into view, never a comet left on one edge */
.plan.is-featured {
    border-color: color-mix(in oklab, var(--accent) 48%, transparent);
    background: var(--card);
}
.plan.is-featured.is-fading > .fx-canvas {
    opacity: 0 !important;
    transition: opacity 600ms ease !important;
}
.plan.is-featured .plan__badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font: 500 var(--t-label)/1 var(--font-text);
    color: var(--ink);
    background: color-mix(in oklab, var(--ink) 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent);
}

/* on a phone a fragment fits the panel's width (see the placements), so it is only cut at the bottom:
   the side fades go, the bottom fade stays */
/* a phone: the card's link and the plan's button are 44px targets (the link keeps its look, its box grows round it) */
@media (max-width: 639px) {
    .card__link {
        min-height: 44px;
        margin-top: 5px;
    }
    .plan__btn {
        height: 44px;
    }
}
@media (max-width: 639px) {
    .stage--fade-r {
        -webkit-mask: none;
        mask: none;
    }
    .stage--fade-b,
    .stage--fade-br {
        -webkit-mask: linear-gradient(
            to bottom,
            #000 calc(100% - min(56px, var(--fade-h))),
            transparent calc(100% - 4px)
        );
        mask: linear-gradient(
            to bottom,
            #000 calc(100% - min(56px, var(--fade-h))),
            transparent calc(100% - 4px)
        );
    }
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}