/* Pricing-page plan cards reused on feature pages: the card rules 39863 keeps in its page code */
/* Popular-card veil; revert with the Free column */
:where(.uc-prc) [data-prc-tab] .w-\[322px\] { width: 100%; }
/* Popular-card glow; revert with the Free column */
:where(.uc-prc) [data-prc-tab] .w-\[630px\] {
  left: -56.4189%;
  width: 212.8378%;
}
/* Even 9px rhythm between card lines, 20px between sections */
.uc-prc.uichemy-cards-2 .mt-5.grid.gap-5 .py-\[7px\] { padding-top: 4.5px; padding-bottom: 4.5px; line-height: 1.375; }
.uc-prc.uichemy-cards-2 .mt-5.grid.gap-5 .mb-2 + .py-\[7px\] { padding-top: 7px; }
.uc-prc.uichemy-cards-2 .mt-5.grid.gap-5 .py-\[7px\]:last-child { padding-bottom: 0; }
.uc-prc.uichemy-cards-2 .mt-5.grid.gap-5 .py-\[7px\] + ul.mt-\[7px\] { margin-top: 4.5px; }
/* Undo WP Compress's unlayered img defaults so the page's own fit and height apply */
:where(.uc-prc) img[data-wpc-bf], :where(.uc-prc) img[data-wpc-ar] { object-fit: revert-layer; height: revert-layer; aspect-ratio: revert-layer; }
/* Early-bird limits: icon + struck normal value + boosted value, with a tooltip; note beside the plan tabs (All in one only) */
:where(.uc-prc) .ucx-eb-tip { display: inline-flex; align-items: baseline; gap: 0; margin: 0; padding: 0 1px; border: 0; border-radius: 4px; background: none; font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap; cursor: help; vertical-align: baseline; -webkit-tap-highlight-color: transparent; }
:where(.uc-prc) .ucx-eb-tip:focus-visible { outline: 2px solid #B8441A; outline-offset: 2px; }
:where(.uc-prc) .ucx-eb-ic { width: 12px; height: 12px; flex: none; align-self: center; margin-right: 5px; color: #B8441A; }
/* Plan cards: the sparkle sits after the row label, like the compare table's info icons; the label is the trigger */
:where(.uc-prc) .ucx-eb-lab { padding: 0; text-align: left; }
:where(.uc-prc) .ucx-eb-lab .ucx-eb-ic { margin: 0 0 0 5px; }
:where(.uc-prc) .ucx-eb-was { color: var(--color-sprout-color-text-weaker); font-weight: 400; font-size: .85em; line-height: 1; text-decoration: none; padding: 0 3px; margin: 0 -3px; background: linear-gradient(rgba(115,115,115,.55), rgba(115,115,115,.55)) 0 48% / 100% 1px no-repeat; }
/* Strike drawn as a light 1px line wider than the digit, so a struck 1 does not read as a plus-minus sign */
@media (forced-colors: active) { :where(.uc-prc) .ucx-eb-was { background: none; text-decoration: line-through; } }
:where(.uc-prc) .ucx-eb-now { margin-left: 7px; color: #0A7A28; font-weight: 500; }
/* Up arrow after the boosted value; decorative, the sr text already says "was X, early bird Y" */
:where(.uc-prc) .ucx-eb-now::after { content: ""; display: inline-block; width: .8em; height: .8em; margin-left: 2px; vertical-align: -0.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3M3.5 7.5 8 3l4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3M3.5 7.5 8 3l4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
:where(.uc-prc) .ucx-eb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Early-bird mark: #B8441A on a #FFF1EB tint for the Designer chip and the Studio ribbon; the note pill beside the plan tabs is green (#0A7A28 on #EBF7EE) */
:where(.uc-prc) .ucx-eb-mk { width: 12px; height: 12px; flex: none; color: currentColor; }
:where(.uc-prc) .ucx-eb-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
:where(.uc-prc) .ucx-eb-note { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Hidden on the Composer tab; visibility only, so the row keeps its height */
:where(.uc-prc) .ucx-eb-row:has([aria-controls$="-content-composer"][aria-selected="true"]) .ucx-eb-note { visibility: hidden; }
@media (min-width:768px){
  :where(.uc-prc) .ucx-eb-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  :where(.uc-prc) .ucx-eb-note { align-items: flex-end; text-align: right; }
}
:where(.uc-prc) .ucx-eb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 999px; background: #EBF7EE; box-shadow: inset 0 0 0 1px rgba(10,122,40,.2); color: #0A7A28; font-size: 12.5px; font-weight: 500; line-height: 18px; white-space: nowrap; }
:where(.uc-prc) .ucx-eb-sub { font-size: 13px; line-height: 18px; color: var(--color-sprout-color-text-weaker); }
:where(.uc-prc) .ucx-eb-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; margin-top: auto; padding: 3px 10px 3px 8px; border-radius: 999px; background: #FFF1EB; box-shadow: inset 0 0 0 1px rgba(184,68,26,.2); color: #B8441A; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
:where(.uc-prc) .ucx-eb-chip + .mt-auto { margin-top: 0; padding-top: 10px; }
:where(.uc-prc) .ucx-eb-sep { margin: 0 7px; }
/* Studio ribbon sits on the orange glow, so its early-bird part gets the same tint as the chip */
:where(.uc-prc) .ucx-eb-rib { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 7px; border-radius: 999px; background: #FFF1EB; color: #B8441A; line-height: 16px; }
/* Annual "Save 25%" moves to green so it no longer shares the early-bird orange; monthly (neutral) unchanged */
:where(.uc-prc) .ucx-eb-save.Badge_brand__u7HV8 { --_fg: #0A7A28; --_border: rgba(10,122,40,.4); }
/* Tooltip bubble: same look as tip2's .ucpr2-tip, positioned above the value */
.ucx-eb-bubble { position: fixed; z-index: 1300; left: 0; top: 0; max-width: 240px; background: #0A0A0A; color: #FFFFFF; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.2; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; box-shadow: 0 0 0 1px rgba(120,120,130,0.06), 0 6px 12px -4px rgba(0,0,0,0.06), 0 14px 28px -6px rgba(0,0,0,0.10); font-family: "zalando sans","zalando sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ucx-eb-bubble[data-state="open"] { opacity: 1; visibility: visible; animation: ucx-eb-in 300ms cubic-bezier(0.3, 0, 0, 1); }
@keyframes ucx-eb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ucx-eb-bubble[data-state="open"] { animation: none; } }
/* Composer yearly/lifetime discount: regular price struck before the sale price */
:where(.uc-prc) .ucx-ltd-was { align-self: center; font-size: 16px; font-weight: 500; line-height: 1; color: #525252; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: currentColor; white-space: nowrap; }
:where(.uc-prc) .ucx-ltd-was-sm { font-size: 13px; }
/* Struck regular price on its own line above the sale price (cards + compare header) */
:where(.uc-prc) .ucx-ltd-row { flex-wrap: wrap; row-gap: 6px; padding-top: 20px; }
/* Card headers 206px on BOTH tabs: room for the stacked Composer price, and no 16px jump when switching tabs */
:where(.uc-prc) [data-prc-tab] .min-h-\[190px\] { min-height: 206px; }
:where(.uc-prc) .ucx-ltd-hrow { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
:where(.uc-prc) .ucx-ltd-row > .ucx-ltd-was { flex-basis: 100%; font-size: 15px; }
:where(.uc-prc) .ucx-ltd-hrow > .ucx-ltd-was { flex-basis: 100%; text-align: center; font-size: 12px; }
:where(.uc-prc) .ucx-cents { font-size: .58em; letter-spacing: 0; }
:where(.uc-prc) .ucx-ltd-sub { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Composer early-bird note: same cell as the All in one note, shown only while the Composer tab is selected */
:where(.uc-prc) .ucx-eb-notes { display: grid; justify-items: start; }
:where(.uc-prc) .ucx-eb-notes > .ucx-eb-note { grid-area: 1 / 1; }
:where(.uc-prc) .ucx-eb-note-cmp { visibility: hidden; }
:where(.uc-prc) .ucx-eb-row:has([aria-controls$="-content-composer"][aria-selected="true"]) .ucx-eb-note-cmp { visibility: visible; }
@media (min-width:768px){ :where(.uc-prc) .ucx-eb-notes { justify-items: end; } }
/* Composer pill carries no icon, so even padding */
:where(.uc-prc) .ucx-eb-note-cmp .ucx-eb-pill { padding: 4px 12px; }