/* Public pricing (plugin-rendered): page layer on top of assets/system/marketing.css. */
body.qr-public { background: var(--mk-page, var(--q-bg-public)); font-size: var(--q-fs-base); }
.qr-pricing { background: var(--mk-page, var(--q-bg-public)); }
.qr-pricing .qr-pricing-page { width: auto; margin: 0; padding: 0; }
.qr-pricing-page :where(p) { line-height: var(--q-lh-relaxed); }

/* ---------- Hero ---------- */
.qr-price-hero { padding-top: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.qr-price-intro { display: grid; justify-items: center; gap: clamp(0.8rem, 0.7rem + 0.5vw, 1.1rem); margin-bottom: 1.25rem; text-align: center; }
.qr-price-title { max-width: none; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); }
.qr-plan-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--q-2) var(--q-4); max-width: 48rem; margin: 0 auto 1.25rem; padding: 0.6rem 1rem; border: 1px solid var(--mk-card-line); border-radius: 14px; background: color-mix(in srgb, var(--mk-card) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--q-fs-md); text-align: center; }
.qr-plan-context--quiet { border: 0; background: none; padding: 0; color: var(--q-text-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.qr-plan-context--quiet a { color: var(--q-accent-text); font-weight: 650; }

/* ---------- Monthly / Yearly switch (enhancement; without it all three offers show) ---------- */
.qr-price-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 22rem); margin: 0 auto 1.5rem; padding: 4px; border: 1px solid var(--mk-card-line); border-radius: var(--q-r-pill); background: color-mix(in srgb, var(--mk-card) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--mk-card-shadow); }
.qr-price-switch[hidden] { display: none; }
.qr-price-switch__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--q-r-pill); background: var(--mk-grad-btn); box-shadow: 0 6px 16px -6px rgba(20, 102, 240, 0.8); transition: transform 0.5s var(--mk-ease), background 0.4s ease; }
.qr-price-switch[data-selected="yearly"] .qr-price-switch__thumb { transform: translateX(100%); background: var(--mk-grad-pro-btn); box-shadow: 0 6px 16px -6px rgba(138, 44, 255, 0.8); }
.qr-price-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.6rem; padding: 0 0.9rem; border: 0; border-radius: var(--q-r-pill); background: none; color: var(--q-text-2); font: inherit; font-size: var(--q-fs-md); font-weight: 650; cursor: pointer; transition: color 0.3s ease; }
.qr-price-switch button[aria-checked="true"] { color: #fff; }
.qr-price-switch__save { padding: 0.05rem 0.45rem; border-radius: var(--q-r-pill); background: var(--q-match-bg); color: var(--q-match); font-size: var(--q-fs-2xs); font-weight: 750; }
.qr-price-switch button[aria-checked="true"] .qr-price-switch__save { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ---------- Offers ---------- */
.qr-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; text-align: left; }
.is-billing-enhanced .qr-offers { grid-template-columns: repeat(2, minmax(0, 24rem)); justify-content: center; }
.qr-offer { position: relative; isolation: isolate; display: grid; align-content: start; gap: 0.7rem; overflow: hidden; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); border: 1px solid var(--mk-card-line); border-radius: 22px; background: var(--mk-card); box-shadow: var(--mk-card-shadow); transition: translate 0.45s var(--mk-ease), box-shadow 0.45s var(--mk-ease), border-color 0.3s ease; }
.qr-offer:hover { translate: 0 -4px; box-shadow: var(--mk-card-shadow-hover); }
.qr-offer[hidden] { display: none; }
.qr-offer.is-swapped { animation: qr-price-swap 0.6s var(--mk-ease); }
@keyframes qr-price-swap { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
/* PRO offers: a moving gradient edge in the PRO mark's colours. */
.qr-offer--monthly, .qr-offer--yearly { border-color: transparent; background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, conic-gradient(from var(--qr-price-angle, 0deg), #3b12d9, #8a2cff, #ef6bff, #1f74ff, #3b12d9) border-box; border-width: 1.5px; box-shadow: 0 30px 70px -40px rgba(123, 44, 255, 0.55), var(--mk-card-shadow); animation: qr-price-edge 8s linear infinite; }
@property --qr-price-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes qr-price-edge { to { --qr-price-angle: 360deg; } }
.qr-offer--monthly::after, .qr-offer--yearly::after { content: ""; position: absolute; top: -40%; right: -30%; z-index: -1; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(circle, rgba(138, 44, 255, 0.14), transparent 70%); pointer-events: none; }
.qr-offer.is-current { box-shadow: 0 0 0 3px var(--q-accent-line), var(--mk-card-shadow); }
.qr-offer__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; }
.qr-offer__mark { width: 2.6rem; flex: none; }
.qr-offer--monthly .qr-offer__mark, .qr-offer--yearly .qr-offer__mark { width: 2.9rem; filter: drop-shadow(0 6px 14px rgba(138, 44, 255, 0.4)); }
.qr-offer__label { display: flex; align-items: center; gap: var(--q-2); min-height: 1.5rem; color: var(--q-text-3); font-size: var(--q-fs-sm); font-weight: 650; }
.qr-offer h2 { font-size: 1.5rem; font-weight: 760; letter-spacing: -0.03em; }
.qr-offer--monthly h2, .qr-offer--yearly h2 { background: var(--mk-grad-pro-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.qr-offer__desc { margin-top: -0.3rem; color: var(--q-text-2); font-size: var(--q-fs-md); }
.qr-offer__price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.5rem; }
.qr-offer__price strong { font-size: clamp(2.75rem, 2.1rem + 2vw, 3.6rem); font-weight: 780; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.qr-offer__price > span { color: var(--q-text-3); font-size: var(--q-fs-md); font-weight: 550; }
.qr-offer__equivalent { margin-top: -0.25rem; color: var(--q-text-3); font-size: var(--q-fs-xs); font-weight: 650; }
.qr-offer__charge { color: var(--q-text-2); font-size: var(--q-fs-sm); }
.qr-offer__cta { margin: 0.6rem 0 0.4rem; }
.qr-offer__cta form { margin: 0; }
.qr-offer__cta .qr-btn, .qr-price-final__actions .qr-btn { min-height: 3.1rem; font-size: 1rem; }
.qr-offer--monthly .qr-offer__cta .qr-btn--primary, .qr-offer--yearly .qr-offer__cta .qr-btn--primary { background: var(--mk-grad-pro-btn) #7a22e8; background-size: 160% 100%; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 12px 28px -12px rgba(138, 44, 255, 0.85); }
.qr-offer--monthly .qr-offer__cta .qr-btn--primary:hover:not(:disabled), .qr-offer--yearly .qr-offer__cta .qr-btn--primary:hover:not(:disabled) { background-color: #3b12d9; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 12px 28px -12px rgba(138, 44, 255, 0.85); }
.qr-offer__includes { display: grid; gap: 0.6rem; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--q-line); list-style: none; font-size: var(--q-fs-md); }
.qr-offer__includes li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--q-text-2); }
.qr-offer__includes .qr-next-icon { flex: none; margin-top: 0.1rem; padding: 2px; box-sizing: content-box; border-radius: 50%; background: var(--q-match-bg); color: var(--q-match); }
.qr-offer--monthly .qr-offer__includes .qr-next-icon, .qr-offer--yearly .qr-offer__includes .qr-next-icon { background: rgba(138, 44, 255, 0.12); color: #7a2ff0; }
html[data-theme="dark"] .qr-offer--monthly .qr-offer__includes .qr-next-icon, html[data-theme="dark"] .qr-offer--yearly .qr-offer__includes .qr-next-icon { background: rgba(183, 140, 255, 0.14); color: #caa8ff; }
.qr-offer__includes strong { color: var(--q-text); font-weight: 650; }
/* Notes are sentences with links inside them, so they flow as text rather than as flex items. */
.qr-offers-note, .qr-plan-purchase-note, .qr-legal-purchase-note { display: block; max-width: 46rem; margin: 1.5rem auto 0; color: var(--q-text-3); font-size: var(--q-fs-sm); line-height: 1.6; text-align: center; text-wrap: pretty; }
.qr-offers-note .qr-next-icon { display: inline-block; margin-right: 0.35rem; color: var(--q-accent-text); vertical-align: -0.2em; }
.qr-offers-note a, .qr-legal-purchase-note a { color: var(--q-accent-text); font-weight: 600; }

/* ---------- Included on both plans ---------- */

/* ---------- Comparison table ---------- */
.qr-price-split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.qr-price-split .qr-mk-intro { position: sticky; top: calc(var(--q-header-h) + 2rem); margin: 0; }
.qr-plan-comparison-wrap { overflow-x: auto; border: 1px solid var(--mk-card-line); border-radius: 18px; background: var(--mk-card); box-shadow: var(--mk-card-shadow); }
.qr-plan-comparison { font-size: var(--q-fs-md); }
.qr-plan-comparison :is(th, td) { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--q-line); }
.qr-plan-comparison tbody tr:last-child :is(th, td) { border-bottom: 0; }
.qr-plan-comparison thead th { background: var(--q-surface-2); color: var(--q-text-2); font-size: var(--q-fs-sm); font-weight: 700; }
.qr-plan-comparison thead th.qr-plan-comparison__pro { background: linear-gradient(135deg, rgba(91, 43, 255, 0.12), rgba(239, 107, 255, 0.1)); color: #6d28d9; }
html[data-theme="dark"] .qr-plan-comparison thead th.qr-plan-comparison__pro { color: #d0b2ff; }
.qr-plan-comparison td.qr-plan-comparison__pro { background: rgba(138, 44, 255, 0.035); }
.qr-plan-comparison tbody tr { transition: background-color 0.2s ease; }
.qr-plan-comparison tbody tr:hover { background: var(--q-surface-2); }
.qr-plan-comparison tbody th { color: var(--q-text); font-weight: 650; white-space: normal; }
.qr-plan-comparison tbody th small { display: block; margin-top: 0.2rem; color: var(--q-text-3); font-size: var(--q-fs-xs); font-weight: 400; line-height: 1.45; }
.qr-plan-comparison td { width: 7.5rem; white-space: nowrap; }
.qr-plan-comparison__capacity td { font-size: 1.35rem; font-weight: 780; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qr-plan-comparison__capacity td.qr-plan-comparison__pro { color: #6d28d9; }
html[data-theme="dark"] .qr-plan-comparison__capacity td.qr-plan-comparison__pro { color: #d0b2ff; }
.qr-yes { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--q-ok); font-weight: 650; }
.qr-yes .qr-next-icon { padding: 2px; box-sizing: content-box; border-radius: 50%; background: var(--q-match-bg); }
.qr-no { color: var(--q-text-3); }

/* ---------- Counting rules and questions ---------- */
.qr-fair-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.qr-fair-rules .qr-mk-card { display: grid; align-content: start; gap: 0.7rem; }
.qr-fair-rules__note { margin-top: 1.5rem; color: var(--q-text-3); font-size: var(--q-fs-sm); text-align: center; }

/* ---------- Final call to action ---------- */
.qr-price-final { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.qr-price-final__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.5rem; }
.qr-price-final__actions form { margin: 0; }
.qr-price-final__actions .qr-btn { min-width: 13rem; }
.qr-price-final .qr-mk-cta { background: radial-gradient(90% 120% at 50% -20%, #7b2cff 0%, #2a0f7a 42%, #0a0620 100%); box-shadow: 0 50px 100px -50px rgba(123, 44, 255, 0.8); }
.qr-price-final .qr-mk-cta p { color: #d7c8f5; }
.qr-price-final .qr-btn--primary { background: #fff; color: #3b12d9; }
.qr-price-final .qr-btn--primary:hover:not(:disabled) { background: #fff; color: #7a2ff0; }
.qr-price-final .qr-mk-btn-ghost { --btn-bg: rgba(255, 255, 255, 0.08); --btn-hover-bg: rgba(255, 255, 255, 0.14); --btn-line: rgba(255, 255, 255, 0.24); --btn-fg: #fff; }

@media (max-width: 63.99rem) {
	.qr-price-split { grid-template-columns: 1fr; }
	.qr-price-split .qr-mk-intro { position: static; }
	.qr-offers { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
	.is-billing-enhanced .qr-offers { grid-template-columns: 1fr; }
	.qr-fair-rules { grid-template-columns: 1fr; }
}
@media (max-width: 47.99rem) {
	.qr-offer--yearly { order: -1; }
	.is-billing-enhanced .qr-offer--free { order: 1; }
	.qr-plan-comparison td { width: 3.5rem; white-space: normal; text-align: center; }
	.qr-plan-comparison :is(th, td) { padding: 0.8rem 0.6rem; }
	/* The feature column keeps the width: a check or a cross stands for Included or Not included, whose words stay for screen readers. */
	.qr-plan-comparison :is(.qr-yes, .qr-no) { font-size: 0; }
	.qr-plan-comparison .qr-yes .qr-next-icon { width: 1rem; height: 1rem; }
	.qr-plan-comparison .qr-no::before { content: "\00D7"; font-size: 1.15rem; line-height: 1; }
	.qr-price-final__actions, .qr-price-final__actions > * { width: 100%; }
	.qr-price-final__actions .qr-btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.qr-offer--monthly, .qr-offer--yearly { animation: none; }
	.qr-offer, .qr-price-switch__thumb { transition: none; }
	.qr-offer:hover { translate: none; }
	.qr-offer.is-swapped { animation: none; }
}