/* ==================================================================
   Plans: Free / Trial / Pro (billing/, Settings > Plan & billing, Admin > Billing).
   Same palette as custom.css: ink #1E2433, muted #7A8194, wash #F4F6FB, accent #3445E5.
   ================================================================== */

/* Header chip: what plan you're on, linking to Plan & billing */
.plan-chip {
    display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .85rem; margin-right: .75rem;
    border-radius: 2rem; font-size: .95rem; font-weight: 600; white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .18); color: #ffffff; background: rgba(255, 255, 255, .06);
    transition: background-color .15s ease, border-color .15s ease;
}
.plan-chip:hover { color: #ffffff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.plan-chip i { font-size: .85rem; color: inherit; }
.plan-chip--pro { border-color: transparent; background: linear-gradient(115deg, #3445E5 0%, #6B4FD8 100%); }
.plan-chip--pro:hover { background: linear-gradient(115deg, #2531B8 0%, #5A3FC8 100%); border-color: transparent; }
.plan-chip--trial { border-color: rgba(255, 196, 64, .55); color: #FFD27A; }
.plan-chip--trial:hover { color: #FFD27A; }
.plan-chip__cta { color: #9DA6FF; }
.header-mobile .plan-chip { height: 1.9rem; padding: 0 .65rem; margin-right: .5rem; font-size: .85rem; }
@media (max-width: 575.98px) { .plan-chip__extra { display: none; } }

/* The small PRO tag next to locked features */
.pro-badge {
    display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: .35rem;
    background: linear-gradient(115deg, #3445E5 0%, #6B4FD8 100%); color: #ffffff;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; line-height: 1.4; vertical-align: middle;
}

/* In place of a Pro feature on Free (the blue sibling of components/feature-disabled.html) */
.pro-locked {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: .85rem;
    background: linear-gradient(115deg, #EEF0FF 0%, #F6F1FF 100%); border: 1px solid var(--app-accent-line, #DDE1FB);
}
.pro-locked--compact { padding: .75rem 1rem; }
.pro-locked__icon {
    flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: .7rem;
    display: flex; align-items: center; justify-content: center; background: #3445E5; color: #ffffff;
}
.pro-locked__icon i { color: inherit; font-size: 1rem; }
.pro-locked__text { flex: 1 1 auto; min-width: 0; color: var(--app-ink, #1E2433); font-weight: 500; }
.pro-locked .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .pro-locked { flex-wrap: wrap; }
    .pro-locked .btn { width: 100%; }
}

/* Download button on Free: same button, with a PRO tag */
.export-locked { position: relative; }
.export-locked .pro-badge { position: absolute; top: -.45rem; right: -.55rem; font-size: .6rem; padding: .05rem .35rem; }

/* Mic buttons on Free */
.voice-fab .pro-badge { position: absolute; top: -.3rem; right: -.4rem; font-size: .55rem; padding: .05rem .3rem; }

/* Usage of a Free limit: "32 of 50 ledger records this month" */
.usage-meter { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-radius: .85rem; background: var(--app-soft, #F4F6FB); }
.usage-meter__body { flex: 1 1 auto; min-width: 0; }
.usage-meter__label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .45rem; font-size: 1rem; color: var(--app-ink, #1E2433); }
.usage-meter__label span { font-weight: 600; }
.usage-meter__label small { font-size: .9rem; color: var(--app-muted, #7A8194); }
.usage-meter__bar { display: block; height: .5rem; border-radius: 1rem; background: var(--app-track, #E4E6EF); overflow: hidden; }
.usage-meter__bar > span { display: block; height: 100%; border-radius: 1rem; background: #3445E5; transition: width .3s ease; }
.usage-meter--near { background: var(--app-warn-wash, #FFF8EC); }
.usage-meter--near .usage-meter__bar > span { background: #E8A100; }
.usage-meter--full { background: var(--app-bad-wash, #FDECEF); }
.usage-meter--full .usage-meter__bar > span { background: #C42D43; }
.usage-meter .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .usage-meter { flex-wrap: wrap; }
    .usage-meter .btn { width: 100%; }
}

/* ---- Settings > Plan & billing ---- */
.plan-current {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.5rem;
    padding: 1.75rem 2rem; border-radius: 1rem; color: #ffffff;
    background: linear-gradient(115deg, #2531B8 0%, #3445E5 55%, #5868F2 100%);
    box-shadow: 0 10px 30px rgba(52, 69, 229, .18);
}
.plan-current--free { background: linear-gradient(115deg, #1F1E2E 0%, #2C3270 100%); box-shadow: 0 10px 30px rgba(31, 30, 46, .18); }
.plan-current__text { flex: 1 1 auto; min-width: 0; }
.plan-current__label { margin: 0 0 .3rem; font-size: 1rem; color: rgba(255, 255, 255, .75); }
.plan-current__title { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: #ffffff; }
.plan-current__detail { margin: .4rem 0 0; font-size: 1.05rem; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.plan-current__art { flex: 0 0 auto; width: 9rem; max-height: 7rem; object-fit: contain; }
@media (max-width: 575.98px) {
    .plan-current { padding: 1.4rem 1.25rem; }
    .plan-current__title { font-size: 1.45rem; }
    .plan-current__art { display: none; }
}

.plan-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
@media (max-width: 575.98px) { .plan-usage { grid-template-columns: minmax(0, 1fr); } }

/* Free vs Pro */
.plan-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.02rem; }
.plan-compare th, .plan-compare td { padding: .8rem 1rem; border-bottom: 1px solid var(--app-line, #EEF0F5); }
.plan-compare thead th { font-weight: 600; color: var(--app-muted, #7A8194); font-size: .95rem; }
.plan-compare thead th.is-pro { color: var(--app-accent, #3445E5); }
.plan-compare td:first-child { color: var(--app-ink, #1E2433); font-weight: 500; }
.plan-compare td.is-pro { background: var(--app-soft, #F7F8FF); }
.plan-compare th:not(:first-child), .plan-compare td:not(:first-child) { text-align: center; width: 28%; }
.plan-compare .fa-check { color: var(--app-good, #1E7F5C); }
.plan-compare .fa-times { color: var(--app-faint, #B5B5C3); }
@media (max-width: 575.98px) { .plan-compare th, .plan-compare td { padding: .65rem .5rem; font-size: .92rem; } }

/* A running deal */
.promo-banner {
    display: flex; align-items: center; gap: .9rem; padding: .9rem 1.15rem; margin-bottom: 1.25rem; border-radius: .85rem;
    background: linear-gradient(115deg, #FFF4DE 0%, #FFE9D6 100%); color: var(--app-warn, #6B4A00);
}
.promo-banner > i { font-size: 1.2rem; color: #E8A100; }
.promo-banner strong { color: var(--app-ink, #1E2433); }

/* Pricing cards: pick one */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; margin: .75rem 0 1.5rem; }
.price-card { position: relative; display: block; margin: 0; cursor: pointer; }
.price-card input { position: absolute; opacity: 0; pointer-events: none; }
.price-card__body {
    display: flex; flex-direction: column; height: 100%; padding: 1.35rem 1.25rem 1.2rem; border-radius: 1rem;
    border: 2px solid var(--app-line, #E4E6EF); background: var(--app-surface, #ffffff); transition: border-color .15s ease, box-shadow .15s ease;
}
.price-card:hover .price-card__body { border-color: var(--app-accent-line, #C9CDF6); }
.price-card input:checked + .price-card__body { border-color: #3445E5; box-shadow: 0 8px 24px rgba(52, 69, 229, .14); }
.price-card input:focus-visible + .price-card__body { outline: 2px solid #3445E5; outline-offset: 2px; }
.price-card__ribbon {
    position: absolute; top: -.7rem; right: 1rem; z-index: 1; padding: .15rem .65rem; border-radius: 1rem;
    background: #3445E5; color: #ffffff; font-size: .8rem; font-weight: 600;
}
.price-card__name { font-size: 1.1rem; font-weight: 600; color: var(--app-ink, #1E2433); }
.price-card__price { margin-top: .5rem; font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; color: var(--app-ink, #1E2433); font-variant-numeric: tabular-nums; }
.price-card__was { margin-left: .4rem; font-size: 1rem; font-weight: 500; color: var(--app-faint, #A1A5B7); text-decoration: line-through; letter-spacing: 0; }
.price-card__note { margin-top: .25rem; font-size: .95rem; color: var(--app-muted, #7A8194); }
.price-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .75rem; }
.price-card__save, .price-card__deal { padding: .15rem .55rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; }
.price-card__save { background: var(--app-good-wash, #E3F6EE); color: var(--app-good, #1E7F5C); }
.price-card__deal { background: var(--app-warn-wash, #FFF4DE); color: var(--app-warn, #946200); }

/* Checkout: promo code, summary, payment */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 991.98px) { .checkout { grid-template-columns: minmax(0, 1fr); } }
.checkout__box { padding: 1.35rem 1.4rem; border-radius: 1rem; background: var(--app-soft, #F4F6FB); }
.checkout__title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; color: var(--app-ink, #1E2433); }
.promo-field { display: flex; gap: .5rem; }
.promo-field .form-control { text-transform: uppercase; background: var(--app-surface, #ffffff); }
.promo-field .btn { flex: 0 0 auto; }
.promo-result { margin-top: .5rem; font-size: .95rem; min-height: 1.4rem; }
.promo-result.is-ok { color: var(--app-good, #1E7F5C); }
.promo-result.is-bad { color: var(--app-bad, #B42338); }
.checkout-lines { margin: 1rem 0 0; font-variant-numeric: tabular-nums; }
.checkout-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: 1.02rem; color: var(--app-text, #3F4254); }
.checkout-lines dt { font-weight: 400; }
.checkout-lines dd { margin: 0; font-weight: 500; text-align: right; }
.checkout-lines .is-discount dd { color: var(--app-good, #1E7F5C); }
.checkout-lines .is-total { margin-top: .4rem; padding-top: .75rem; border-top: 1px solid var(--app-line, #E4E6EF); }
.checkout-lines .is-total dt, .checkout-lines .is-total dd { font-size: 1.2rem; font-weight: 600; color: var(--app-ink, #1E2433); }
.payment-instructions { white-space: pre-line; padding: 1rem 1.1rem; margin-bottom: 1.25rem; border-radius: .75rem; background: var(--app-surface, #ffffff); border: 1px dashed var(--app-accent-line, #C9CDF6); color: var(--app-ink, #1E2433); }
.checkout .form-control { background: var(--app-surface, #ffffff); }

.plan-pending { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: .9rem; background: var(--app-warn-wash, #FFF8EC); flex-wrap: wrap; }
.plan-pending__icon { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFE8B3; color: var(--app-warn, #946200); }
.plan-pending__icon i { color: inherit; }
.plan-pending__text { flex: 1 1 16rem; min-width: 0; color: var(--app-ink, #1E2433); }
.plan-pending__text strong { display: block; }

.plan-history { list-style: none; margin: 0; padding: 0; }
.plan-history li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--app-line, #EEF0F5); }
.plan-history li:last-child { border-bottom: 0; }
.plan-history__main { display: flex; flex-direction: column; min-width: 0; }
.plan-history__main span:first-child { font-weight: 600; color: var(--app-ink, #1E2433); }
.plan-history__main span + span { font-size: .92rem; color: var(--app-muted, #7A8194); }
.plan-history__side { flex: 0 0 auto; text-align: right; }

/* ---- Dashboard: Pro teasers, insights, customize ---- */
/* A locked Pro widget on the Free dashboard */
.dash-teaser {
    display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem 1.6rem; color: var(--app-ink, #1E2433);
    background: linear-gradient(160deg, #EEF0FF 0%, #ffffff 75%); border: 1px dashed var(--app-accent-line, #C9CDF6);
    transition: box-shadow .15s ease, transform .15s ease;
}
.dash-teaser:hover { color: var(--app-ink, #1E2433); box-shadow: 0 8px 24px rgba(52, 69, 229, .12); transform: translateY(-2px); }
.dash-teaser:focus-visible { outline: 2px solid #3445E5; outline-offset: 2px; }
.dash-teaser__icon {
    width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; border-radius: .7rem;
    display: flex; align-items: center; justify-content: center; background: #3445E5; color: #ffffff;
}
.dash-teaser__icon i { color: inherit; }
.dash-teaser__title { font-size: 1.15rem; font-weight: 600; }
.dash-teaser__text { color: var(--app-text-soft, #5E6278); font-size: 1rem; line-height: 1.5; }
.dash-teaser__cta { margin-top: auto; padding-top: .5rem; color: var(--app-accent, #3445E5); font-weight: 600; }
.dash-teaser__cta i { font-size: .8rem; color: inherit; margin-left: .25rem; }

/* Budget health: chips on a white card */
.dash-health-chips { margin: 0 0 1.25rem; }
.dash-health-chips li { background: var(--app-soft, #F3F6F9); color: var(--app-text, #3F4254); }
.dash-health-chips li.is-warn { background: var(--app-warn-wash, #FFF4DE); color: var(--app-warn, #946200); }
.dash-health-chips li.is-bad { background: var(--app-bad-wash, #FDE8EB); color: var(--app-bad, #B42338); }

/* Next 30 days */
.dash-outlook { padding: 1.1rem 1.25rem; border-radius: .9rem; background: var(--app-good-wash, #E3F6EE); }
.dash-outlook--warn { background: var(--app-warn-wash, #FFF4DE); }
.dash-outlook--bad { background: var(--app-bad-wash, #FDE8EB); }
.dash-outlook__label { display: block; font-size: .95rem; color: var(--app-text-soft, #5E6278); }
.dash-outlook__value { display: block; margin: .15rem 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; color: var(--app-good, #1E7F5C); font-variant-numeric: tabular-nums; }
.dash-outlook--warn .dash-outlook__value { color: var(--app-warn, #946200); }
.dash-outlook--bad .dash-outlook__value { color: var(--app-bad, #B42338); }
.dash-outlook__note { display: block; font-size: .92rem; color: var(--app-text-soft, #5E6278); }
.dash-outlook__lines { margin-top: .75rem; }

/* "3 of 5 accounts" next to Customize */
.dash-focus-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 2rem;
    background: var(--app-accent-wash, #ECEEFD); color: var(--app-accent, #3445E5); font-size: .95rem; font-weight: 600;
}
.dash-focus-chip i { font-size: .8rem; color: inherit; }

/* Customize dashboard: the card list */
.dash-arrange { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 26rem; overflow-y: auto; }
.dash-arrange__item {
    display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: .75rem;
    border: 1px solid var(--app-line, #E4E6EF); background: var(--app-surface, #ffffff); cursor: grab;
}
.dash-arrange__item.is-dragging { opacity: .5; border-style: dashed; border-color: #3445E5; }
.dash-arrange__item.is-off .dash-arrange__text { opacity: .5; }
.dash-arrange__handle { color: var(--app-faint, #B5B5C3); }
.dash-arrange__handle i { color: inherit; }
.dash-arrange__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-arrange__title { font-weight: 600; color: var(--app-ink, #1E2433); }
.dash-arrange__desc { font-size: .9rem; color: var(--app-muted, #7A8194); }
.dash-arrange__move { display: flex; gap: .2rem; }
.dash-arrange__btn {
    width: 1.9rem; height: 1.9rem; border: 0; border-radius: .45rem; background: var(--app-soft, #F3F6F9); color: var(--app-muted, #7A8194);
    display: flex; align-items: center; justify-content: center;
}
.dash-arrange__btn:hover { background: var(--app-accent-wash, #ECEEFD); color: var(--app-accent, #3445E5); }
.dash-arrange__btn:focus-visible { outline: 2px solid #3445E5; outline-offset: 1px; }
.dash-arrange__btn i { font-size: .7rem; color: inherit; }
@media (max-width: 575.98px) {
    .dash-arrange__item { flex-wrap: wrap; }
    .dash-arrange__handle { display: none; }
    .dash-arrange__text { flex-basis: 100%; }
    .dash-arrange__move { margin-right: auto; }
}

/* ---- Admin: Billing pages ---- */
/* Payment rows sit in a 2/3-width card: details stack under the name (and wrap, since the reference
   number and note are what gets checked) until there's room for columns */
.mg-row--request { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .5rem; }
.mg-row--request > .mg-row__meta { grid-column: 2; }
.mg-row--request > .mg-row__actions { grid-column: 3; grid-row: 1; align-self: start; }
.mg-row--request .mg-row__sub, .mg-row--request .mg-row__strong { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 1700px) {
    .mg-row--request { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
    .mg-row--request > .mg-row__meta { grid-column: auto; }
    .mg-row--request > .mg-row__actions { grid-column: auto; grid-row: auto; align-self: center; }
}
/* Plans, plan features and promos: icon, name, figures, status chips, actions */
/* Every row is its own grid, so the columns after the name get fixed widths: prices, chips and buttons then line
   up from row to row whatever each row holds. Lists with more buttons widen theirs (--row-actions). */
.mg-row--price {
    --row-figures: 15rem; --row-tags: 13rem; --row-actions: 8rem;
    grid-template-columns: 3rem minmax(0, 1fr) var(--row-figures) var(--row-tags) var(--row-actions);
}
.mg-row--promo { --row-actions: 10.5rem; }
.mg-row--feature { --row-figures: 11rem; --row-tags: 10rem; --row-actions: 13.5rem; }
.mg-row--price > .bill-tags { justify-content: flex-end; margin-top: 0; }
@media (max-width: 1399.98px) {
    .mg-row--price { --row-figures: 13rem; --row-tags: 11rem; }
    .mg-row--feature { --row-figures: 10rem; --row-tags: 8.5rem; }
}
.mg-row--price .mg-row__title { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mg-row--price .mg-row__title > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mg-row__chip { flex: 0 0 auto; padding: .1rem .45rem; border-radius: .35rem; background: var(--app-accent-wash, #EEF0FD); color: var(--app-accent, #3445E5); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.mg-row__price { font-variant-numeric: tabular-nums; }
.mg-row__price small { font-size: .85rem; font-weight: 400; color: var(--app-muted, #7A8194); }
.mg-mini-list { list-style: none; margin: 0; padding: 0; }
.mg-mini-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--app-line, #EEF0F5); }
.mg-mini-list li:last-child { border-bottom: 0; }
.mg-mini-list__main { display: flex; flex-direction: column; min-width: 0; }
.mg-mini-list__main span:first-child { font-weight: 600; color: var(--app-ink, #1E2433); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-mini-list__main span + span { font-size: .92rem; color: var(--app-muted, #7A8194); }
.mg-mini-list__side { flex: 0 0 auto; text-align: right; font-size: .92rem; color: var(--app-muted, #7A8194); }
.bill-status--pro { background: linear-gradient(115deg, #3445E5 0%, #6B4FD8 100%); color: #ffffff; }
.bill-status--trial { background: var(--app-warn-wash, #FFF4DE); color: var(--app-warn, #946200); }
.bill-status--free { background: var(--app-soft, #F3F6F9); color: var(--app-muted, #7A8194); }
.manage-promo-code { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 991.98px) {
    /* Figures and chips stack under the name; the buttons stay beside it, on the first line */
    .mg-row--price { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .5rem; }
    .mg-row--price > .mg-row__meta, .mg-row--price > .bill-tags { grid-column: 2; }
    .mg-row--price > .bill-tags { justify-content: flex-start; max-width: none; }
    .mg-row--price > .mg-row__actions { grid-column: 3; grid-row: 1; align-self: start; }
}
@media (max-width: 767.98px) {
    .mg-row--request, .mg-row--price { grid-template-columns: auto minmax(0, 1fr); }
    .mg-row--request > .mg-row__actions, .mg-row--price > .mg-row__actions { grid-column: 2; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; }
}

/* ==================================================================
   Plan cards with the Monthly / Annual switch (components/billing/plan-cards.html, static/js/plan-cards.js).
   Shared by Settings > Plan & billing and the public /pricing/ page.
   ================================================================== */
.plans { --plan-accent: #3445E5; --plan-ink: var(--app-ink, #1E2433); --plan-muted: var(--app-muted, #7A8194); --plan-line: var(--app-line, #E7E9F2); }
.plans__bar { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.plans__toggle { display: inline-flex; align-items: center; gap: .75rem; padding: .55rem 1rem; border: 1px solid var(--plan-line); border-radius: 2rem; background: var(--app-surface, #ffffff); }
.plans__toggle-label { font-size: 1rem; font-weight: 500; color: var(--plan-muted); cursor: pointer; user-select: none; }
.plans__toggle-label.is-on { color: var(--plan-ink); font-weight: 600; }
.plans__switch { position: relative; width: 3rem; height: 1.6rem; padding: 0; border: 0; border-radius: 1rem; background: var(--app-track, #D5D9E6); cursor: pointer; transition: background-color .2s ease; }
.plans__switch[aria-checked="true"] { background: #1E7F5C; }
.plans__switch:focus-visible { outline: 3px solid rgba(52, 69, 229, .35); outline-offset: 2px; }
.plans__knob { position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--app-surface, #ffffff); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.plans__switch[aria-checked="true"] .plans__knob { transform: translateX(1.4rem); }

.plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.5rem 1.4rem; border: 1px solid var(--plan-line);
    border-radius: 1.1rem; background: var(--app-surface, #ffffff); box-shadow: 0 4px 18px rgba(30, 36, 51, .05); transition: box-shadow .2s ease, border-color .2s ease;
}
.plan-card--featured { border: 2px solid var(--plan-accent); background: linear-gradient(180deg, #F3F4FF 0%, #ffffff 40%); box-shadow: 0 12px 32px rgba(52, 69, 229, .14); }
.plan-card--current { border-color: #1E7F5C; }
.plan-card.is-chosen { box-shadow: 0 0 0 3px rgba(52, 69, 229, .25), 0 12px 32px rgba(52, 69, 229, .14); }
.plan-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.plan-card__name { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: var(--plan-ink); text-transform: uppercase; }
.plan-card__badges { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.plan-badge { display: inline-block; padding: .15rem .5rem; border-radius: .3rem; font-size: .78rem; font-weight: 800; font-style: italic; letter-spacing: .02em; transform: skew(-8deg); }
.plan-badge--deal { background: #E0234E; color: #ffffff; }
.plan-badge--info { background: var(--plan-accent); color: #ffffff; }
.plan-card__desc { margin: .4rem 0 0; font-size: .98rem; color: var(--plan-muted); }
.plan-card__price { margin-top: 1.25rem; min-height: 4.6rem; }
.plan-card__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: 0; }
.plan-card__amount strong { font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--plan-ink); font-variant-numeric: tabular-nums; }
.plan-card__was { font-size: 1.4rem; font-weight: 700; color: #E0234E; text-decoration-thickness: 2px; }
.plan-card__per { font-size: .95rem; color: var(--plan-muted); }
.plan-card__charged, .plan-card__terms, .plan-card__only { margin: .25rem 0 0; font-size: .88rem; color: var(--plan-muted); }
.plan-card__only { font-weight: 600; color: var(--app-warn, #946200); }
.plan-card__action { margin-top: 1rem; }
.plan-card__action .btn { min-height: 2.9rem; }
.plan-card__current { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; margin-bottom: .5rem; border-radius: .6rem; background: var(--app-good-wash, #E3F6EE); color: var(--app-good, #1E7F5C); font-weight: 600; }
.plan-card__current i { color: inherit; }
.plan-card__savings { margin: .55rem 0 0; text-align: center; font-size: .9rem; font-weight: 600; color: var(--app-good, #1E7F5C); }
/* Scoped to the card so a host page's list styles (the legal pages' .legal-page ul / li, around /pricing/) don't leak in */
.plan-card .plan-card__features { margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--plan-line); list-style: none; }
.plan-card .plan-card__features li { display: flex; align-items: baseline; gap: .55rem; margin: 0; padding: .35rem 0; font-size: .97rem; color: var(--plan-ink); }
.plan-card__features li i { flex: 0 0 auto; font-size: .75rem; }
.plan-card__features li.is-in i { color: var(--app-good, #1E7F5C); }
.plan-card__features li.is-out { color: var(--app-faint, #A1A5B7); }
.plan-card__features li.is-out i { color: var(--app-faint, #C9CCD8); }
.plan-card__feature { flex: 1 1 auto; min-width: 0; }
.plan-card__detail { flex: 0 0 auto; padding: .05rem .45rem; border-radius: .35rem; background: var(--app-accent-wash, #EEF0FD); color: var(--plan-accent); font-size: .8rem; font-weight: 700; white-space: nowrap; }
/* Cards side by side line up part by part (name, description, price, button, features): each part is a row shared
   across the cards and as tall as the tallest, so a card with less to say about its price keeps its button level */
@supports (grid-template-rows: subgrid) {
    .plan-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .plan-card__head { grid-row: 1; }
    .plan-card__desc { grid-row: 2; }
    .plan-card__price { grid-row: 3; }
    .plan-card__action { grid-row: 4; }
    .plan-card__features { grid-row: 5; }
}
.pricing-note { margin: 1.5rem 0 0; font-size: .98rem; color: var(--app-muted, #7A8194); text-align: center; }
.legal-body--wide .legal-page { max-width: 78rem; }
@media (max-width: 575.98px) {
    .plans__bar { justify-content: center; }
    .legal-body--wide .legal-page { padding: 1.5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .plans__switch, .plans__knob, .plan-card { transition: none; }
}

/* Admin > Plans: the plan editor (screens/modals/manage-plan.html) */
.plan-form section + section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--app-line, #EEF0F5); }
.plan-form__heading { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; color: var(--app-ink, #1E2433); }
.plan-form__period { height: 100%; padding: 1rem 1rem .25rem; border: 1px solid var(--app-line, #EEF0F5); border-radius: .8rem; background: var(--app-soft, #FAFBFD); }
.plan-form__hint { margin: -.5rem 0 .75rem; font-size: .9rem; color: var(--app-good, #1E7F5C); }
.plan-form__features { width: 100%; border-collapse: separate; border-spacing: 0; }
.plan-form__features th { padding: .5rem .6rem; font-size: .85rem; font-weight: 600; color: var(--app-muted, #7A8194); border-bottom: 1px solid var(--app-line, #EEF0F5); white-space: nowrap; }
.plan-form__features td { padding: .55rem .6rem; border-bottom: 1px solid var(--app-line, #F3F4F8); vertical-align: middle; }
.plan-form__features td:nth-child(3) { width: 9rem; }
.plan-form__features td:nth-child(4) { width: 14rem; }

/* Admin Billing pages: a long subtitle wraps instead of pushing the page's buttons onto a line of their own */
.card.card-custom > .card-header.manage-header { flex-wrap: nowrap; gap: 1rem; }
.manage-header .card-title { flex: 1 1 auto; min-width: 0; margin-right: 0; }
.manage-header .card-toolbar { flex: 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 767.98px) {
    .card.card-custom > .card-header.manage-header { flex-wrap: wrap; }
    .manage-header .card-toolbar { flex-wrap: wrap; gap: .5rem; }
}

/* Admin > Plans as cards (components/manage/plan-cards.html): display order left to right, like the pricing page */
.mg-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mg-plan {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--app-line, #E7E9F2); border-radius: 1rem; background: var(--app-surface, #ffffff); transition: box-shadow .15s ease, border-color .15s ease;
}
.mg-plan:hover { box-shadow: 0 8px 24px rgba(30, 36, 51, .07); }
.mg-plan--featured { border: 2px solid #3445E5; background: linear-gradient(180deg, #F5F6FF 0%, #ffffff 35%); }
.mg-plan.is-muted { background: var(--app-soft, #FAFBFD); }
.mg-plan.is-muted .mg-plan__name, .mg-plan.is-muted .mg-plan__prices, .mg-plan.is-muted .mg-plan__features { opacity: .6; }
.mg-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.mg-plan__heading { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; min-width: 0; }
.mg-plan__name { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--app-ink, #1E2433); overflow-wrap: anywhere; }
.mg-plan__actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.mg-plan__desc { margin: .35rem 0 0; font-size: .95rem; color: var(--app-muted, #7A8194); }
.mg-plan__tags { align-items: center; margin-top: .75rem; }
.mg-plan__order { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--app-faint, #A1A5B7); font-variant-numeric: tabular-nums; }
.mg-plan__prices { margin-top: 1rem; padding: .85rem 1rem; border-radius: .75rem; background: var(--app-soft, #F5F7FB); }
.mg-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; margin: 0; font-variant-numeric: tabular-nums; }
.mg-plan__price + .mg-plan__price { margin-top: .35rem; }
.mg-plan__price strong { font-size: 1.25rem; font-weight: 700; color: var(--app-ink, #1E2433); }
.mg-plan__price span { font-size: .9rem; color: var(--app-muted, #7A8194); }
.mg-plan__price s { font-size: .9rem; color: var(--app-bad, #B42338); }
.mg-plan__price--missing { font-size: .95rem; font-weight: 600; color: var(--app-bad, #B42338); }
.mg-plan__save { padding: .05rem .4rem; border-radius: .35rem; background: var(--app-good-wash, #E3F6EE); color: var(--app-good, #1E7F5C); font-size: .78rem; font-style: normal; font-weight: 700; }
.mg-plan__people { margin: .75rem 0 0; font-size: .92rem; color: var(--app-text-soft, #5E6278); }
.mg-plan__people i { margin-right: .25rem; font-size: .8rem; color: var(--app-faint, #A1A5B7); }
.mg-plan__features { margin: .9rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--app-line, #EEF0F5); list-style: none; }
.mg-plan__features li { display: flex; align-items: baseline; gap: .5rem; padding: .25rem 0; font-size: .93rem; color: var(--app-ink, #1E2433); }
.mg-plan__features li > i { flex: 0 0 auto; font-size: .7rem; color: var(--app-good, #1E7F5C); }
.mg-plan__features li > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.mg-plan__none { color: var(--app-faint, #A1A5B7); }
.mg-plan__more a { font-weight: 600; }
/* The last tile: add another plan */
.mg-plan--add { padding: 0; border: 2px dashed var(--app-line, #D5D9E6); background: transparent; }
.mg-plan--add:hover { box-shadow: none; border-color: #3445E5; }
.mg-plan--add button {
    display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 12rem;
    width: 100%; border: 0; border-radius: 1rem; background: none; color: var(--app-muted, #7A8194); font-weight: 600;
}
.mg-plan--add button i { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--app-accent-wash, #EEF0FD); color: var(--app-accent, #3445E5); font-size: 1rem; }
.mg-plan--add:hover button { color: var(--app-accent, #3445E5); }
.mg-plan--add button:focus-visible { outline: 3px solid rgba(52, 69, 229, .35); outline-offset: 2px; }
.mg-plan-grid__empty { grid-column: 1 / -1; }
@media (max-width: 575.98px) {
    .mg-plan-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mg-plan { transition: none; } }