/* Plans & pricing, shared by the workspace page and the public site.
   Built on the theme tokens only (themes.css), so it follows whichever
   palette the page uses. The offer banner keeps its own shared styles
   (offer-banner.css); only its spacing is set here. */

/* A compact header: title and one line on the left, Monthly/Yearly on the
   right, then the offer strip and straight to the cards. */
.plans-page .plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 14px; }
.plans-page .plans-head h1 { font-size: 26px; }
.plans-page .plans-head .plans-sub { margin-top: 4px; font-size: 14px; }
.plans-page .plans-head .billing-switch { margin: 0; }

/* One badge for every label: plan, state, recommendation. */
.rx-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px; border: 1px solid var(--theme-line); border-radius: 999px; background: var(--theme-inset); color: var(--theme-muted); font-size: 11.5px; font-weight: 650; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.rx-badge:empty { display: none; }
.rx-badge-accent { border-color: color-mix(in srgb, var(--theme-accent) 50%, var(--theme-line)); background: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-inset)); color: var(--theme-text); }
.rx-badge-current { border-color: color-mix(in srgb, var(--theme-text) 30%, var(--theme-line)); background: var(--theme-hover); color: var(--theme-text); }
.rx-badge-current::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #6fdcae); }

/* Only for what no card can say (a trial refused at checkout): one slim line. */
.plans-status { margin: 0 0 12px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--rx-alert) 40%, var(--theme-line)); border-radius: 10px; background: color-mix(in srgb, var(--rx-alert) 6%, var(--theme-surface)); color: var(--theme-text); font-size: 13px; line-height: 1.5; }
.plans-status[hidden] { display: none; }

/* The offer banner sits right above the cards (offer-banner.css); its fine print
   is under them. */
.plans-bar:empty { display: none; }
.plans-bar { margin: 0 0 6px; }
.plan-price .price-per-line { display: none; }

.billing-switch { display: inline-flex; -webkit-user-select: none; user-select: none; gap: 2px; margin: 0 0 16px; padding: 3px; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-inset); }
.billing-switch button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--theme-muted); font-size: 13px; font-weight: 650; cursor: pointer; }
.billing-switch button:hover { color: var(--theme-text); }
.billing-switch button[aria-pressed="true"] { background: var(--theme-accent); color: var(--theme-ink); }

/* Room above the cards for the ribbon that sits across the Pro card's edge. */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin: 0; padding-top: 12px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; height: auto; padding: 20px 20px 22px; border: 1px solid var(--theme-line); border-radius: 18px; background: var(--theme-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 16px 32px -26px rgb(0 0 0 / .35); text-align: left; overflow: visible; transform: none; transition: border-color .12s ease, box-shadow .12s ease; }
.plan-card:hover { transform: none; border-color: color-mix(in srgb, var(--theme-text) 22%, var(--theme-line)); }
/* The recommended plan stands forward: accent edge, warmer fill, deeper shadow. */
.plan-card.featured, .plan-card.featured:hover { border-color: var(--theme-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 11%, var(--theme-surface)), var(--theme-surface) 48%); box-shadow: 0 0 0 1px var(--theme-accent), 0 26px 50px -26px color-mix(in srgb, var(--theme-accent) 75%, transparent), 0 2px 6px rgb(0 0 0 / .06); }
/* The same ribbon as PC Tweaker's plan cards, across the top edge of the highlighted plan. */
.plan-ribbon { position: absolute; top: -13px; left: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--theme-accent); color: var(--theme-ink); box-shadow: 0 6px 18px -8px var(--theme-accent); font: 700 11px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.plan-ribbon svg { width: 12px; height: 12px; fill: currentColor; }

.plan-card.is-current { border-color: color-mix(in srgb, var(--theme-text) 34%, var(--theme-line)); }
.plan-top { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-height: 28px; }
.plan-top .rx-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-top :is(h2, h3) { margin: 0 auto 0 0; color: var(--theme-text); font: 650 22px/1.2 var(--font-display); }
.plan-tagline { margin: -4px 0 0; color: var(--theme-accent); font-size: 12.5px; font-weight: 650; }
.plan-desc { margin: 0; color: var(--theme-muted); font-size: 13px; line-height: 1.5; }
/* The price is the hero of every card: the largest, heaviest text in it. */
.plan-price { display: flex; align-items: baseline; align-content: flex-start; flex-wrap: wrap; gap: 6px 8px; min-height: 0; margin-top: 4px; color: var(--theme-text); font: 750 42px/1.05 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-price small { color: var(--theme-muted); font: 550 14px/1.3 var(--font-text); letter-spacing: 0; }
.plan-price .price-equiv { flex-basis: 100%; margin-top: 2px; font-size: 13px; font-weight: 500; }
.plan-price .rx-was { color: var(--theme-muted); font: 500 20px/1.2 var(--font-display); letter-spacing: 0; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--rx-promo) 75%, var(--theme-muted)); }
/* A live offer (promo.ts promoPriceHtml): one bold badge with the real
   reduction, and the offer's name and deadline beside it, drawn above the
   price. White on this orange is 5.2:1, on every palette. */
.plans-page, .rx-shell { --rx-promo: #c2410c; }
.plan-price .rx-deal { order: -1; display: flex; flex-basis: 100%; align-items: center; gap: 10px; min-height: 38px; margin-bottom: 2px; letter-spacing: 0; }
.plan-price .rx-off { flex: none; margin: 0; padding: 7px 11px 6px; border: 0; border-radius: 10px; background: var(--rx-promo); color: #fff; font: 800 22px/1 var(--font-display); letter-spacing: -.01em; box-shadow: 0 8px 18px -10px var(--rx-promo); }
.plan-price .rx-deal-when { display: grid; gap: 2px; min-width: 0; color: var(--theme-muted); font: 500 12.5px/1.3 var(--font-text); }
.plan-price .rx-deal-when b { color: var(--rx-promo-text, var(--rx-promo)); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.plan-note { margin: 0; color: var(--theme-muted); font-size: 12.5px; }
.plan-note:empty { display: none; }
.seats-row { margin: 2px 0 0; }
.seats-row select { width: 100%; max-width: none; }
.plan-actions { display: grid; gap: 8px; margin: 6px 0 0; }
/* Price, then the plan button, then what is included: the decision and its
   button stay in view on a 1000x700 window, and the buttons line up. */
.plan-card > .seats-row { order: 1; padding-top: 4px; }
.plan-card > .plan-actions { order: 2; padding-top: 6px; }
.plan-card > .rx-benefits { order: 3; align-content: start; }
.plan-card > .plan-footnote { order: 4; }
/* Where subgrid exists, the cards share one set of rows: every plan's name,
   description, price, benefits and button sit on the same lines across the
   row, whichever card has a tagline, a longer description or a seat picker.
   Each part keeps its row, so a part a card lacks leaves its row empty. */
@supports (grid-template-rows: subgrid) {
  .plan-grid { row-gap: 0; }
  /* One column no wider than the card: left to size itself it grew to the longest button label
     ("Commencer l’essai gratuit de 3 jours") and the card cut its own text and buttons. */
  .plan-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 9; row-gap: 0; margin-bottom: 16px; }
  .plan-card > * { grid-column: 1; }
  .plan-card > .plan-top { grid-row: 1; }
  .plan-card > .plan-tagline { grid-row: 2; margin: 2px 0 0; }
  .plan-card > .plan-desc { grid-row: 3; margin-top: 6px; }
  .plan-card > .plan-price { grid-row: 4; margin-top: 10px; }
  .plan-card > .plan-note { grid-row: 5; margin-top: 4px; }
  .plan-card > .seats-row { grid-row: 6; margin-top: 0; padding-top: 12px; align-self: end; }
  .plan-card > .plan-actions { grid-row: 7; align-content: start; margin-top: 0; padding-top: 12px; }
  .plan-card > .rx-benefits { grid-row: 8; margin-top: 16px; }
  .plan-card > .plan-footnote { grid-row: 9; margin-top: 14px; }
  /* The last card's spacing is the grid's own bottom edge. */
  .plan-grid { margin-bottom: -16px; }
}
/* Three across, an offer on some cards only (never on Free): the others keep
   the badge's line empty, so every price still sits on one line. */
@container plans (min-width: 640px) {
  .plan-grid:has(.rx-deal) .plan-price:not(:has(.rx-deal))::before { content: ""; order: -1; flex-basis: 100%; height: 38px; margin-bottom: 2px; }
}
.plan-actions > * { width: 100%; }
/* One plan button for every product: full width, 42 px, 8 px corners. */
/* A label longer than the card wraps onto a second line instead of running out of the button. */
.plan-card .plan-actions > :is(button, a) { min-height: 42px; padding-block: 6px; border-radius: 8px; font-size: 13.5px; font-weight: 650; line-height: 1.25; white-space: normal; text-align: center; }
.plan-card .plan-actions > button:disabled:not([aria-busy="true"]) { opacity: 1; border-style: dashed; color: var(--theme-muted); background: transparent; cursor: default; }
/* auth.ts marks a plan button busy while the checkout or portal opens. */
.plan-card .plan-actions > [aria-busy="true"] { position: relative; color: transparent !important; cursor: progress; }
.plan-card .plan-actions > [aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid var(--theme-ink); border-right-color: transparent; border-radius: 50%; animation: plan-busy .7s linear infinite; }
@keyframes plan-busy { to { transform: rotate(1turn); } }
.plan-actions [hidden] { display: none; }

/* The trial choice: "Start free trial" first, "Subscribe now" as the quiet
   alternative, then what each one charges, from the prices Stripe holds. */
.plans-page, .rx-shell { --rx-alert: var(--danger, #ff9ca7); }
html:is(:not([data-theme]), [data-theme="paper"]) .plans-page, html:is(:not([data-theme]), [data-theme="paper"]) .rx-shell { --rx-alert: #b4232f; }
/* The offer's name in text: the badge orange on light pages, a lighter one on dark palettes. */
.plans-page, .rx-shell { --rx-promo-text: #ff9a6b; }
html:is(:not([data-theme]), [data-theme="paper"]) .plans-page, html:is(:not([data-theme]), [data-theme="paper"]) .rx-shell { --rx-promo-text: #b23c0b; }
.plan-card .plan-actions > .plan-now { border: 1px solid var(--theme-strong); background: transparent; color: var(--theme-text); }
.plan-card .plan-actions > .plan-now:hover:not(:disabled) { background: var(--theme-hover); }
.plan-choice-line, .plan-choice-note { margin: 2px 0 0; color: var(--theme-muted); font-size: 12.5px; line-height: 1.55; text-wrap: pretty; }
.plan-choice-line { color: var(--theme-text); }
.plan-choice-note.is-error, .billing-state.is-error { color: var(--rx-alert); font-weight: 600; }
.billing-state { margin: 6px 0 0; color: var(--theme-text); font-size: 13px; line-height: 1.55; }

.plan-card .rx-benefits { display: grid; gap: 8px; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--theme-line); list-style: none; color: var(--theme-muted); font-size: 13px; line-height: 1.55; }
.plan-card .rx-benefits li { position: relative; padding-left: 24px; }
.plan-card .rx-benefits li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 5px; border-left: 2px solid var(--theme-accent); border-bottom: 2px solid var(--theme-accent); transform: rotate(-45deg); }
.plan-card .rx-benefits strong { color: var(--theme-text); font-weight: 650; }

.plan-footnote { margin: 4px 0 0; color: var(--theme-muted); font-size: 12px; line-height: 1.6; }
/* Label and picker on one line, so the plan button stays in view. */
.seats-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; color: var(--theme-text); font-size: 13px; font-weight: 600; }
.seats-row[hidden] { display: none; }
/* Native arrow replaced by a chevron in the theme's muted ink, so it follows paper and the dark themes. */
.seats-row select { -webkit-appearance: none; appearance: none; min-height: 34px; padding: 6px 32px 6px 10px; border: 1px solid var(--theme-strong); border-radius: 7px; color: var(--theme-text); font: inherit; cursor: pointer; transition: border-color .15s;
  background: linear-gradient(45deg, transparent 50%, var(--theme-muted) 50%) calc(100% - 16px) 50% / 5px 5px no-repeat, linear-gradient(135deg, var(--theme-muted) 50%, transparent 50%) calc(100% - 11px) 50% / 5px 5px no-repeat, var(--theme-inset); }
.seats-row select:hover { border-color: var(--theme-accent); }
.seats-row select option { background: var(--theme-surface); color: var(--theme-text); }
/* Plan buttons on pages without the workspace's own button styles (the site). */
.plan-card .rx-plan-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--theme-accent); border-radius: 8px; background: var(--theme-accent); color: var(--theme-ink); font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .12s ease, background-color .12s ease; }
.plan-card .rx-plan-cta:hover { filter: brightness(1.08); }
.plan-card .rx-plan-cta.ghost { border-color: var(--theme-strong); background: transparent; color: var(--theme-text); }
.plan-card .rx-plan-cta.ghost:hover { background: var(--theme-hover); filter: none; }
.plans-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plans-checkout-note { max-width: 90ch; margin: 14px 0 0; color: var(--theme-muted); font-size: 12.5px; line-height: 1.6; }
/* Trial terms, the offer's fine print and how payment works: small print under the cards. */
.plans-fine { display: grid; gap: 4px; max-width: 100ch; margin: 16px 0 0; }
.plans-fine p { margin: 0; color: var(--theme-muted); font-size: 12px; line-height: 1.55; }
.plans-fine p[hidden] { display: none; }

.plans-section { margin-top: 36px; }
.plans-section > :is(h2, h3) { margin: 0 0 14px; color: var(--theme-text); font: 600 21px/1.25 var(--font-display); }
.compare-wrap { position: relative; overflow-x: auto; border: 1px solid var(--theme-line); border-radius: 14px; background: var(--theme-surface); scrollbar-width: thin; }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.compare-table th, .compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--theme-line); text-align: center; vertical-align: middle; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table thead th { color: var(--theme-text); font: 650 13.5px/1.3 var(--font-display); background: var(--theme-inset); }
.compare-table th[scope="row"], .compare-table thead th:first-child { width: 40%; color: var(--theme-text); font-weight: 500; text-align: left; }
.compare-table thead th:first-child { color: var(--theme-muted); font-weight: 600; }
.compare-table td { color: var(--theme-muted); }
.compare-table td:nth-child(3), .compare-table .cmp-featured { background: color-mix(in srgb, var(--theme-accent) 7%, transparent); color: var(--theme-text); }
.compare-table .cmp-yes { width: 16px; height: 16px; fill: none; stroke: var(--theme-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.compare-table .cmp-cell-no { color: var(--theme-muted); }
/* Phones: fit all three plans in view instead of hiding Pro and Business off-screen. */
/* By the room the page gives the table, not the window: beside the workspace rail an 820 px window leaves 554 px,
   and the Business column was cut off behind a sideways scroll. 684 = the table's 640 px plus the section's padding. */
@container plans (max-width: 684px) { .compare-table { min-width: 0; font-size: 12px; } .compare-table th, .compare-table td { padding: 10px 6px; } .compare-table th[scope="row"], .compare-table thead th:first-child { width: 34%; padding-left: 12px; } }

.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Five statements: three over two, every row full. */
.plans-trust .trust-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.plans-trust .trust-item { grid-column: span 2; }
.plans-trust .trust-item:nth-child(n + 4) { grid-column: span 3; }
.trust-item { padding: 16px; border: 1px solid var(--theme-line); border-radius: 12px; background: var(--theme-surface); }
.trust-item :is(h3, h4) { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; color: var(--theme-text); font: 600 14px/1.35 var(--font-display); }
/* Lock Pup's wink: each statement is marked with the redaction bar. */
.trust-item :is(h3, h4)::before { content: ""; width: 14px; height: 6px; flex: 0 0 14px; border-radius: 3px; background: var(--theme-accent); }
.trust-item p { margin: 0; color: var(--theme-muted); font-size: 13px; line-height: 1.6; }
.trust-limit { margin: 14px 0 0; color: var(--theme-muted); font-size: 13px; line-height: 1.6; }
.trust-limit a { color: var(--theme-text); text-decoration: underline; text-underline-offset: 3px; }

.faq-list { border-top: 1px solid var(--theme-line); }
.faq-item { border-bottom: 1px solid var(--theme-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 2px; color: var(--theme-text); font-size: 14.5px; font-weight: 650; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; color: var(--theme-accent); font-size: 18px; font-weight: 500; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { max-width: 78ch; margin: -4px 0 16px; padding: 0 2px; color: var(--theme-muted); font-size: 13.5px; line-height: 1.65; }

/* Laid out by the width the page gives the plans, not the window's: the
   workspace rail and the site's margins leave different room. */
.plans-page {
  container: plans / inline-size;
  /* Same stacks as the workspace (app.css), so the site renders the plans identically. */
  --font-display: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-text: "Redaxa Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}
/* Three across down to 640 px of plans width (a 1000x700 window); the price
   steps down so it still fits a narrower card. */
@container plans (max-width: 899px) {
  .plan-grid { gap: 12px; }
  /* The strip right above names the offer and its deadline; each card keeps the bold reduction. */
  .plans-page .plan-price .rx-deal-when { display: none; }
  .plans-page .plan-price .rx-deal { min-height: 30px; }
  .plan-grid:has(.rx-deal) .plan-price:not(:has(.rx-deal))::before { height: 30px; }
  .plan-card { padding: 18px 16px 20px; }
  .plan-desc { font-size: 12.5px; }
  .plan-price { font-size: 34px; }
  .plan-price .rx-was { font-size: 17px; }
  .plan-price .rx-off { font-size: 19px; padding: 6px 9px 5px; }
  .plan-top :is(h2, h3) { font-size: 20px; }
  .plan-top .rx-badge { min-height: 20px; padding: 0 7px; font-size: 11px; }
  /* The struck price moves beside the reduction badge, so the new price and
     its unit always share one line: "€74 / user / year", never an orphan unit. */
  .plans-page .plan-price .rx-deal { order: -3; flex-basis: auto; }
  .plans-page .plan-price .rx-was { order: -2; align-self: center; font-size: 16px; }
  .plans-page .plan-price:has(.rx-deal)::before { content: ""; order: -1; flex-basis: 100%; height: 0; }
  .plans-page .plan-price > small:not(.price-equiv) { font-size: 12.5px; white-space: nowrap; }
  .plans-page .plan-price .price-equiv { font-size: 12.5px; order: 2; }
  /* Business at its regular price: the per-seat unit as one line under the price. */
  .plans-page .plan-price:not(:has(.rx-deal)):has(.price-per-line) > small:not(.price-equiv, .price-per-line) { display: none; }
  .plans-page .plan-price:not(:has(.rx-deal)) > .price-per-line { display: block; order: 1; flex-basis: 100%; margin-top: -2px; color: var(--theme-muted); font: 550 12.5px/1.3 var(--font-text); letter-spacing: 0; }
}
/* Three across but narrow: Free has no offer, so its "No card needed" fills the
   reduction badge's line above the price. Only here: below 640 px the price has
   no badge-line spacer and the note would sit on top of "€0". */
@container plans (min-width: 640px) and (max-width: 899px) {
  .plan-grid:has(.rx-deal) .plan-free > .plan-note { grid-row: 4; grid-column: 1; align-self: start; display: flex; align-items: center; min-height: 30px; margin-top: 10px; }
}
/* Narrower: the paid plans side by side first, Free under them. */
@container plans (max-width: 639px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card.plan-free { grid-column: 1 / -1; order: 1; }
  .plan-card:not(.plan-free) { grid-column: auto; }
}
@container plans (max-width: 879px) {
  .trust-grid, .plans-trust .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-trust .trust-item, .plans-trust .trust-item:nth-child(n + 4) { grid-column: auto; }
  .plans-trust .trust-item:last-child { grid-column: 1 / -1; }
}
@container plans (max-width: 479px) {
  .plan-grid, .trust-grid, .plans-trust .trust-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card, .billing-switch button { transition: none; }
  .plan-card .plan-actions > [aria-busy="true"]::after { animation-duration: 2.4s; }
}

/* The site puts the switch right under its lede: give it the same breathing room as the workspace. */
.plans-page > .lede + .billing-switch { margin-top: 14px; }

/* The plan's main action, same recipe as PC Tweaker: lit from the top, with an arrow that moves on hover. */
.plan-card .rx-plan-cta:not(.ghost) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-accent) 90%, #fff), var(--theme-accent) 60%);
  color: var(--theme-ink);
  border: 1px solid color-mix(in srgb, var(--theme-accent) 80%, #000);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), 0 1px 2px rgb(0 0 0 / 35%), 0 10px 22px -10px var(--theme-accent);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.plan-card .rx-plan-cta:not(.ghost):not(:disabled):not([aria-busy="true"])::after {
  content: "→" / "";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s;
}
.plan-card .rx-plan-cta:not(.ghost):hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 1px 2px rgb(0 0 0 / 35%), 0 14px 28px -10px var(--theme-accent);
}
.plan-card .rx-plan-cta:not(.ghost):hover:not(:disabled)::after {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .plan-card .rx-plan-cta:not(.ghost), .plan-card .rx-plan-cta:not(.ghost)::after {
    transition: none;
  }
  .plan-card .rx-plan-cta:not(.ghost):hover:not(:disabled), .plan-card .rx-plan-cta:not(.ghost):hover:not(:disabled)::after {
    transform: none;
  }
}