/* =============================================================================
   InvestProp — plan grid (2026 rebuild)
   -----------------------------------------------------------------------------
   Used by `site/index/pricing.blade.php`, which is shared by the home page and
   the plans page — so nothing here may be scoped to one page's body class. It
   is instead scoped to `.px-pricing`, the section's own root.

   The section replaces a nine-row wide table of near-identical rows with a card
   grid: one card per account size, each showing the numbers a trader actually
   compares (target, drawdown, split) rather than four columns of constants.

   Conventions this file must respect (see the site design system):
     • dark is the DEFAULT theme (`html.dark`); light is the opt-in override,
       and neither compiled sheet sets a global text colour — every block here
       declares its own.
     • RTL is the default direction; logical properties throughout.
   ========================================================================== */

.px-pricing {
    /* --- palette (dark = default) ---------------------------------------- */
    --px-primary: #007BFF;
    --px-primary-2: #1C8AFF;
    --px-cyan: #5ED2EC;
    --px-mint: #3DD68C;
    --px-amber: #F5B544;

    --px-surface: rgba(7, 20, 37, .72);
    --px-surface-2: rgba(10, 26, 47, .92);
    --px-inset: rgba(255, 255, 255, .03);
    --px-line: rgba(141, 196, 255, .14);
    --px-line-strong: rgba(141, 196, 255, .3);
    --px-text: #EAF2FF;
    --px-text-2: #C3D4EA;
    --px-muted: #8FA5C2;
    --px-track: rgba(141, 196, 255, .14);

    --px-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --px-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
    --px-radius: 22px;

    position: relative;
}

html:not(.dark) .px-pricing {
    --px-surface: rgba(255, 255, 255, .82);
    --px-surface-2: #FFFFFF;
    --px-inset: rgba(10, 40, 80, .03);
    --px-line: rgba(0, 72, 153, .12);
    --px-line-strong: rgba(0, 72, 153, .24);
    --px-text: #0A1A30;
    --px-text-2: #2B4463;
    --px-muted: #5D7492;
    --px-track: rgba(0, 72, 153, .12);
    --px-shadow: 0 26px 60px -38px rgba(10, 40, 80, .45);
}

/* Numerals are compared column-to-column, so they get the tabular face and are
   isolated from the RTL run — "$1,000" must never reorder. */
.px-pricing .px-num {
    font-family: dana, yekanbakh, sans-serif;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* -----------------------------------------------------------------------------
   Ambient background
   -------------------------------------------------------------------------- */

.px-pricing__bg {
    position: absolute;
    inset: -80px 0 20%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.px-pricing__bg span {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .45;
}

html:not(.dark) .px-pricing__bg span { opacity: .25; }

.px-pricing__bg span:nth-child(1) {
    inset-inline-start: -8%;
    top: 6%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(0, 123, 255, .5), rgba(0, 123, 255, 0) 66%);
}

.px-pricing__bg span:nth-child(2) {
    inset-inline-end: -6%;
    top: 34%;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(94, 210, 236, .32), rgba(94, 210, 236, 0) 66%);
}

.px-pricing > .container-fluid { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.px-head {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 34px;
}

.px-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--px-line-strong);
    background: color-mix(in srgb, var(--px-primary) 10%, transparent);
    color: #8DC4FF;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 16px;
}

html:not(.dark) .px-head__eyebrow { color: #0B62C4; }

.px-head__title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 900;
    line-height: 1.35;
    color: var(--px-text);
}

.px-head__title b {
    background: linear-gradient(96deg, var(--px-primary-2), var(--px-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:not(.dark) .px-head__title b {
    background: linear-gradient(96deg, #0069DC, #17A9C7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.px-head__desc {
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 2.1;
    color: var(--px-muted);
}

/* -----------------------------------------------------------------------------
   Segmented control (challenge type)
   -------------------------------------------------------------------------- */

.px-switch {
    position: relative;
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 26px;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid var(--px-line);
    background: var(--px-surface);
    backdrop-filter: blur(24px);
    box-shadow: var(--px-shadow);
}

/* The thumb is positioned from JS. Until that runs — or if it never does —
   `.is-ready` is absent and the active button paints its own background, so
   the control is never left with no visible selection. */
.px-switch__thumb {
    position: absolute;
    z-index: 0;
    top: 5px;
    bottom: 5px;
    /* Anchored physically and moved with translateX, which is also physical.
       Leaving `left` at auto puts the thumb at its static position — the RIGHT
       edge under RTL — and the translate then walks it the wrong way. */
    left: 0;
    border-radius: 999px;
    background: var(--px-grad);
    box-shadow: 0 8px 24px -8px rgba(0, 123, 255, .9);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}

.px-switch.is-ready .px-switch__thumb { opacity: 1; }

.px-switch__btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: none;
    border-radius: 999px;
    padding: 11px 26px;
    font-size: 14.5px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--px-muted);
    cursor: pointer;
    transition: color .25s ease;
}

.px-switch__btn:hover { color: var(--px-text); }
.px-switch__btn.active { color: #fff; }

html:not(.dark) .px-switch:not(.is-ready) .px-switch__btn.active,
.px-switch:not(.is-ready) .px-switch__btn.active {
    background: var(--px-grad);
    color: #fff;
}

.px-switch__btn:focus-visible {
    outline: 2px solid var(--px-primary-2);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Stage tabs (speed / normal / economic)
   -------------------------------------------------------------------------- */

.px-stages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 34px;
}

.px-stage {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    padding: 12px 18px;
    border-radius: 16px;
    border: 1px solid var(--px-line);
    background: var(--px-surface);
    backdrop-filter: blur(20px);
    text-align: start;
    cursor: pointer;
    transition: border-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
}

.px-stage:hover { transform: translateY(-2px); border-color: var(--px-line-strong); }

.px-stage.active {
    border-color: var(--px-primary-2);
    background: color-mix(in srgb, var(--px-primary) 14%, var(--px-surface));
}

.px-stage:focus-visible {
    outline: 2px solid var(--px-primary-2);
    outline-offset: 2px;
}

.px-stage__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: var(--px-inset);
    border: 1px solid var(--px-line);
    color: var(--px-muted);
    font-size: 19px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.px-stage.active .px-stage__icon {
    background: var(--px-grad);
    border-color: transparent;
    color: #fff;
}

.px-stage__name {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--px-text);
}

.px-stage__desc {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--px-muted);
}

@media (max-width: 575.98px) {
    .px-stages { gap: 8px; }
    .px-stage { min-width: 0; flex: 1 1 100%; }
}

/* -----------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Carousel rail
   -----------------------------------------------------------------------------
   Swiper 11, already loaded site-wide. A rail rather than a wrapping grid: the
   plan count per stage varies (9, 8, 6 …), so a grid left a lone final card
   jammed against the start edge, and three rows of cards buried the section.
   Direction is handled by Swiper itself — it reads the computed `direction` off
   the container, so the RTL build needs no separate options.
   -------------------------------------------------------------------------- */

/* The rail breaks out of `.container-fluid` to the full viewport width so more
   plans are visible at once; the heading, tabs and the "included" strip stay
   inside the container where their line length is readable.

   `--px-sbw` is the classic scrollbar's width, measured once in JS. Without it
   a plain `100vw` overruns the viewport by that much — html/body hide the
   overflow, so it does not scroll, but the rail ends up off-centre by half a
   scrollbar against everything above it. The 0px fallback is the old
   behaviour, which is right on any overlay-scrollbar platform. */
.px-rail-wrap {
    --px-sbw: 0px;
    width: calc(100vw - var(--px-sbw));
    max-width: calc(100vw - var(--px-sbw));
    margin-inline: calc(50% - 50vw + (var(--px-sbw) / 2));
    /* The inset lives on the wrapper, NOT on `.px-rail`. Swiper sizes slides
       from `clientWidth`, which includes padding, but lays them out from the
       padding edge — so padding on the carousel itself makes every slide too
       wide by that much and the last one is clipped. */
    padding-inline: clamp(16px, 3.2vw, 56px);
}

.px-rail {
    /* Room for the hover lift (-6px) and the card shadow, which the carousel's
       own `overflow: hidden` would otherwise clip. */
    padding-block: 14px 24px;
}

/* Slides stretch to the tallest card in view instead of each sizing to its own
   content, so the CTAs line up across the rail. */
.px-rail .swiper-wrapper { align-items: stretch; }
.px-rail .swiper-slide { height: auto; }

/* Before Swiper initialises — and if its script never arrives — the rail falls
   back to a plain scroll-snapping row rather than clipping every card past the
   first. `.is-live` is added by the init. */
.px-rail-wrap:not(.is-live) .px-rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.px-rail-wrap:not(.is-live) .px-rail::-webkit-scrollbar { display: none; }

.px-rail-wrap:not(.is-live) .swiper-wrapper { gap: 20px; }

.px-rail-wrap:not(.is-live) .swiper-slide {
    flex: 0 0 288px;
    scroll-snap-align: center;
}

.px-rail-wrap:not(.is-live) .px-rail__ctl { display: none; }

/* --- controls --- */
.px-rail__ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
}

.px-nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    border: 1px solid var(--px-line-strong);
    background: var(--px-surface);
    backdrop-filter: blur(20px);
    color: var(--px-text);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease, transform .2s ease;
}

.px-nav:hover:not(.px-nav--off) {
    background: var(--px-grad);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -12px rgba(0, 123, 255, .9);
}

.px-nav:focus-visible {
    outline: 2px solid var(--px-primary-2);
    outline-offset: 2px;
}

.px-nav--off {
    opacity: .35;
    cursor: default;
}

/* `isax-arrow-right` is a boxed chevron, not the mirror of `isax-arrow-left`,
   so both buttons use the same plain-arrow glyph and the direction is set here.
   site.css mirrors every `.isax-arrow-left` under LTR at specificity (0,3,1) —
   it cannot know which way each of these two points — so the doubled class is
   load-bearing: without it both arrows come out pointing the same way. */
.px-nav.px-nav--prev i { transform: scaleX(-1); }
.px-nav.px-nav--next i { transform: none; }

html[dir="ltr"] .px-nav.px-nav--prev i { transform: none; }
html[dir="ltr"] .px-nav.px-nav--next i { transform: scaleX(-1); }

/* Swiper locks the nav and pagination when every slide already fits; the
   surrounding row has to collapse with them or it leaves a gap. */
.px-nav--lock,
.px-dots--lock { display: none; }

.px-rail__ctl:not(:has(.px-nav:not(.px-nav--lock))) { display: none; }

/* --- pagination --- */
.px-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    width: auto;
}

/* Swiper's own bullet classes carry positioning meant for the absolutely
   placed pagination it normally renders inside the carousel; these dots sit in
   an inline row instead, so the module is told to emit `.px-dot` and nothing
   from swiper-bundle.css applies. */
.px-dots .px-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--px-track);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: width .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}

.px-dots .px-dot:focus-visible {
    outline: 2px solid var(--px-primary-2);
    outline-offset: 3px;
}

/* The active dot stretches into a capsule — position in the run is readable at
   a glance without counting. */
.px-dots .px-dot--on {
    width: 26px;
    background: var(--px-grad);
}

@media (prefers-reduced-motion: reduce) {
    .px-dots .px-dot { transition: none; }
}

.px-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    border-radius: var(--px-radius);
    border: 1px solid var(--px-line);
    background: var(--px-surface-2);
    backdrop-filter: blur(26px);
    box-shadow: var(--px-shadow);
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .3s ease;
}

.px-card:hover {
    transform: translateY(-6px);
    border-color: var(--px-line-strong);
}

/* A sheen sweeps across on hover — the same gesture as the CTA's edge shine,
   scaled up to the whole card. */
.px-card::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07), transparent);
    transform: skewX(-14deg);
    transition: inset-inline-start .7s cubic-bezier(.22, 1, .36, 1);
}

.px-card:hover::after { inset-inline-start: 115%; }

@media (prefers-reduced-motion: reduce) {
    .px-card, .px-card::after, .px-switch__thumb { transition: none; }
    .px-card:hover { transform: none; }
}

/* --- equity-curve watermark --- */
/* Each card carries the shape of a passed challenge behind its numbers: the
   line is generated per balance in Blade, so no two cards repeat. */
.px-card__spark {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 46%;
    z-index: -1;
    opacity: .5;
    pointer-events: none;
}

html:not(.dark) .px-card__spark { opacity: .24; }

.px-card__spark svg { width: 100%; height: 100%; display: block; }

/* --- head row --- */
.px-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 26px;
}

.px-tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--px-line);
    background: var(--px-inset);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--px-text-2);
}

.px-tier i { font-size: 13px; color: var(--px-primary-2); }

.px-flag {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--px-amber) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--px-amber) 45%, transparent);
    color: var(--px-amber);
    font-size: 11.5px;
    font-weight: 800;
}

html:not(.dark) .px-flag { color: #A66A00; }

.px-flag i { font-size: 13px; }

/* --- account size --- */
.px-card__size {
    font-size: clamp(30px, 3.2vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--px-text);
    /* `.px-num` sets direction:ltr so "$10,000" keeps its glyph order, which
       also flips what `start` means for this block. Resolve the alignment
       against the page instead, or the balance sits on the opposite edge from
       the label under it. */
    text-align: start;
}

html[dir="rtl"] .px-card__size { text-align: end; }

.px-card__size-label {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--px-muted);
}

/* --- price --- */
.px-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--px-line);
}

.px-card__price-now {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(96deg, var(--px-primary-2), var(--px-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:not(.dark) .px-card__price-now {
    background: linear-gradient(96deg, #0069DC, #17A9C7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.px-card__price-was {
    font-size: 14px;
    font-weight: 700;
    color: var(--px-muted);
    text-decoration: line-through;
}

.px-card__save {
    margin-inline-start: auto;
    padding: 4px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--px-mint) 18%, transparent);
    color: var(--px-mint);
    font-size: 11.5px;
    font-weight: 800;
}

html:not(.dark) .px-card__save { color: #158A52; }

.px-card__price-note {
    margin-top: 6px;
    width: 100%;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--px-muted);
}

/* --- spec rows with inline meters --- */
.px-specs {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.px-spec {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    font-size: 13px;
}

.px-spec__label {
    font-weight: 600;
    color: var(--px-muted);
}

.px-spec__value {
    font-weight: 800;
    color: var(--px-text);
}

/* The meter turns two abstract percentages into a comparison you can read at a
   glance: target fills toward its own ceiling, drawdown toward the risk cap. */
.px-spec__meter {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 999px;
    background: var(--px-track);
    overflow: hidden;
}

.px-spec__meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--px-grad);
}

.px-spec--risk .px-spec__meter i {
    background: linear-gradient(90deg, var(--px-amber), #F2555A);
}

/* Daily drawdown is the smaller, per-day cousin of the overall limit: the same
   warm "risk" family, one step lighter, so the two bars never read as one. */
.px-spec--daily .px-spec__meter i {
    background: linear-gradient(90deg, #FFE08A, var(--px-amber));
}

html:not(.dark) .px-spec--daily .px-spec__meter i {
    background: linear-gradient(90deg, #F7C948, #E9A023);
}

.px-spec--good .px-spec__value { color: var(--px-mint); }

html:not(.dark) .px-spec--good .px-spec__value { color: #158A52; }

/* --- CTA --- */
.px-card__cta {
    position: relative;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 14px;
    border: 1px solid var(--px-line-strong);
    background: var(--px-inset);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--px-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.px-card:hover .px-card__cta,
.px-card__cta:hover,
.px-card--featured .px-card__cta {
    background: var(--px-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 34px -12px rgba(0, 123, 255, .9);
}

/* Stretched link: one anchor per card, its hit area covering the whole tile.
   The sheen sits at z-index 2 but is pointer-events:none, so it does not block. */
.px-card__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.px-card__cta i { font-size: 17px; }

.px-card__cta:focus-visible {
    outline: 2px solid var(--px-primary-2);
    outline-offset: 2px;
}

/* --- featured card --- */
/* A rotating conic ring rather than a flat accent border: it marks the card
   without a badge-shaped hole punched in the layout. */
.px-card--featured {
    border-color: transparent;
    background:
        linear-gradient(var(--px-surface-2), var(--px-surface-2)) padding-box,
        conic-gradient(from var(--px-angle, 0deg), var(--px-primary), var(--px-cyan), var(--px-primary-2), var(--px-primary)) border-box;
    border: 1px solid transparent;
    animation: px-spin 6s linear infinite;
}

@property --px-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes px-spin {
    to { --px-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .px-card--featured { animation: none; }
}

.px-card--featured::before {
    content: "";
    position: absolute;
    inset-inline: 15%;
    top: -60px;
    height: 120px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 123, 255, .55), rgba(0, 123, 255, 0) 70%);
    filter: blur(30px);
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   "Included in every plan" strip
   -------------------------------------------------------------------------- */

.px-includes {
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: 18px;
    border: 1px dashed var(--px-line-strong);
    background: var(--px-surface);
    backdrop-filter: blur(20px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
}

.px-includes__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--px-text);
    margin: 0;
}

.px-includes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.px-includes li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--px-text-2);
}

.px-includes li i {
    font-size: 16px;
    color: var(--px-mint);
}

/* -----------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */

.px-empty {
    padding: 28px;
    border-radius: 18px;
    border: 1px dashed var(--px-line-strong);
    background: var(--px-surface);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--px-muted);
}

/* -----------------------------------------------------------------------------
   Superseding the old section chrome
   -----------------------------------------------------------------------------
   `.pricing-section` still picks up two decorations from the compiled sheet
   that were drawn for the table layout: a hard-edged PNG rectangle bleeding
   off the corner, and an empty absolutely-positioned backdrop element. The
   section paints its own glow now, so both are switched off here rather than
   edited out of mainPage.css (which the plans page shares).
   -------------------------------------------------------------------------- */
.pricing-section.px-pricing::before { display: none; }
.pricing-section.px-pricing .ellipse-background { display: none; }

/* `.pricing-section .tab-content { overflow: auto }` let the old 700px-wide
   plan row scroll inside the container. It is also a clipping box, so it cut
   the full-bleed rail off at the container's edges — the carousel measured and
   laid out correctly, it was simply painted through a narrower window. */
.px-pricing .tab-content { overflow: visible; }

/* -----------------------------------------------------------------------------
   Phone layout
   -----------------------------------------------------------------------------
   One card per row is the only honest fit at 390px — two would leave ~145px of
   content for a Persian label and its value. Instead the card gets shorter:
   the balance and the price sit on one line rather than stacking, which is
   worth ~60px per card across a nine-plan stage.
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .px-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 14px;
        padding: 18px 18px 16px;
    }

    .px-card__top { grid-column: 1 / -1; margin-bottom: 12px; }

    .px-card__size { grid-column: 1; grid-row: 2; font-size: 27px; }
    .px-card__size-label { grid-column: 1; grid-row: 3; }

    .px-card__price {
        grid-column: 2;
        grid-row: 2 / 4;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: end;
    }

    /* `margin-inline-start: auto` pushes to the far edge in a row; in this
       column it would only add dead space above the pill. */
    .px-card__save { margin-inline-start: 0; }
    .px-card__price-note { width: auto; }

    .px-specs {
        grid-column: 1 / -1;
        gap: 10px;
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px dashed var(--px-line);
    }

    .px-card__cta { grid-column: 1 / -1; margin-top: 16px; }
}