/* ── Pricing page ─────────────────────────────────────────────────────────── */

/* Theme channels.
   This page was authored dark-only: every ink, surface tint and hairline was a
   literal white, so under [data-theme='light'] the page canvas flipped to white
   (via /tokens.css) while the text stayed white and the hero became invisible.
   Rather than fork ~160 declarations, the white channel is a variable: each
   rule keeps its own alpha (which is what carries the emphasis hierarchy) and
   only the channel flips. Dark resolves to the exact values authored here, so
   the primary theme is unchanged by construction.
   --pr-fg  ink + surface tint channel   (white on dark, --ink #1d212b on light)
   --pr-bg  the colour that sits ON a solid --pr-fg fill (inverted CTAs) */
:root {
	--pr-fg: 255, 255, 255;
	--pr-bg: 0, 0, 0;
	--pr-panel: #0d0d0f;
	--pr-panel-ink: #eee;
	/* Card surface ramp (base → raised → highest). */
	--pr-card: var(--pr-card);
	--pr-card-2: var(--pr-card-2);
	--pr-card-3: var(--pr-card-3);
	--pr-card-4: var(--pr-card-4);
	--pr-card-5: var(--pr-card-5);
}
:root[data-theme='light'] {
	--pr-fg: 29, 33, 43;
	--pr-bg: 255, 255, 255;
	--pr-panel: #ffffff;
	--pr-panel-ink: #1d212b;
	--pr-card: #ffffff;
	--pr-card-2: #f7f8fa;
	--pr-card-3: #f3f4f6;
	--pr-card-4: #f5f6f8;
	--pr-card-5: #f3f4f6;
}


.pricing-hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: calc(var(--header-h, 3.5rem) + 80px) 24px 0;
	text-align: center;
}

.pricing-hero .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: rgba(var(--pr-fg), 0.55);
	margin-bottom: 18px;
}

.pricing-hero .eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgb(var(--pr-fg));
	box-shadow: 0 0 10px rgba(var(--pr-fg), 0.6);
}

.pricing-hero h1 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: clamp(36px, 5vw, 62px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 18px;
	color: rgb(var(--pr-fg));
}

.pricing-hero h1 em {
	font-style: normal;
	color: rgba(var(--pr-fg), 0.6);
}

.pricing-hero .lead {
	color: rgba(var(--pr-fg), 0.6);
	font-size: 17px;
	max-width: 58ch;
	margin: 0 auto 44px;
	line-height: 1.6;
}

/* ── Billing toggle ────────────────────────────────────────────────────── */

.billing-toggle {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 52px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(var(--pr-fg), 0.5);
}

.billing-toggle span {
	cursor: pointer;
	transition: color var(--duration-base);
}

.billing-toggle span.is-active {
	color: rgb(var(--pr-fg));
}

.billing-toggle .toggle-track {
	position: relative;
	width: 46px;
	height: 24px;
	border-radius: 6px;
	background: rgba(var(--pr-fg), 0.1);
	border: 1px solid rgba(var(--pr-fg), 0.12);
	cursor: pointer;
	transition: background var(--duration-base), border-color var(--duration-base);
}

.billing-toggle .toggle-track:hover {
	border-color: rgba(var(--pr-fg), 0.25);
}

.billing-toggle .toggle-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgb(var(--pr-fg));
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	transition: transform var(--duration-base) cubic-bezier(0.2, 0.9, 0.3, 1);
}

.billing-toggle.annual .toggle-thumb {
	transform: translateX(22px);
}

.billing-toggle.annual .toggle-track {
	background: rgba(var(--pr-fg), 0.15);
}

.billing-save {
	display: inline-block;
	padding: 2px 8px;
	margin-left: 4px;
	background: rgba(74, 222, 128, 0.12);
	color: var(--success);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* ── Tier cards ────────────────────────────────────────────────────────── */

.pricing-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	background: rgba(var(--pr-fg), 0.06);
	border: 1px solid rgba(var(--pr-fg), 0.06);
	border-radius: 18px;
	overflow: hidden;
}

.pricing-tier-card {
	background: var(--pr-card);
	padding: 44px 36px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: background var(--duration-base);
}

.pricing-tier-card:hover {
	background: var(--pr-card-2);
}

.pricing-tier-card.featured {
	background: var(--pr-card-3);
	box-shadow: inset 0 0 0 1px rgba(var(--pr-fg), 0.15);
}

.pricing-tier-card.featured:hover {
	background: rgba(24, 24, 24, 0.98);
}

.pricing-popular {
	position: absolute;
	top: 18px;
	right: 18px;
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgb(var(--pr-fg));
	color: rgb(var(--pr-bg));
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 700;
}

.pricing-tier-name {
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(var(--pr-fg), 0.6);
	margin-bottom: 14px;
	font-weight: 600;
}

.pricing-amount {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: rgb(var(--pr-fg));
	line-height: 1;
	margin-bottom: 6px;
}

.pricing-amount sub {
	font-size: 16px;
	font-weight: 400;
	color: rgba(var(--pr-fg), 0.6);
	letter-spacing: 0;
}

.pricing-cycle-info {
	font-size: 13px;
	color: rgba(var(--pr-fg), 0.6);
	margin-bottom: 32px;
	min-height: 20px;
}

.pricing-features {
	list-style: none;
	padding: 0;
	margin: 0 0 36px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pricing-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: rgba(var(--pr-fg), 0.7);
	line-height: 1.45;
}

.pricing-features li::before {
	content: '';
	flex: 0 0 6px;
	height: 6px;
	margin-top: 7px;
	border-radius: 50%;
	background: rgba(var(--pr-fg), 0.35);
}

.pricing-tier-card.featured .pricing-features li::before {
	background: rgb(var(--pr-fg));
	box-shadow: 0 0 6px rgba(var(--pr-fg), 0.4);
}

.pricing-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	border-radius: 12px;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid rgba(var(--pr-fg), 0.1);
	background: rgba(var(--pr-fg), 0.04);
	color: rgb(var(--pr-fg));
	transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.pricing-cta:hover {
	background: rgba(var(--pr-fg), 0.08);
	border-color: rgba(var(--pr-fg), 0.2);
	transform: translateY(-1px);
}

.pricing-cta.primary {
	background: rgb(var(--pr-fg));
	color: rgb(var(--pr-bg));
	border-color: transparent;
	box-shadow:
		0 1px 0 rgba(var(--pr-fg), 0.3) inset,
		0 6px 20px -8px rgba(var(--pr-fg), 0.15);
}

.pricing-cta.primary:hover {
	background: #f0f0f0;
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(var(--pr-fg), 0.4) inset,
		0 10px 28px -8px rgba(var(--pr-fg), 0.2);
}

/* ── 3D Avatar overlay ─────────────────────────────────────────────────── */

.pricing-avatar-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 50;
}

/* ── Feature comparison ────────────────────────────────────────────────── */

.pricing-comparison {
	max-width: 1100px;
	margin: 0 auto;
	padding: 100px 24px 0;
}

.pricing-comparison h2 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: clamp(26px, 3.5vw, 38px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: rgb(var(--pr-fg));
	text-align: center;
	margin: 0 0 48px;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.comparison-table thead th {
	padding: 16px 20px;
	text-align: center;
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 14px;
	font-weight: 600;
	color: rgba(var(--pr-fg), 0.5);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(var(--pr-fg), 0.08);
}

.comparison-table thead th:first-child {
	text-align: left;
	color: rgba(var(--pr-fg), 0.6);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.comparison-table thead th.featured-col {
	color: rgb(var(--pr-fg));
}

.comparison-table tbody td {
	padding: 14px 20px;
	border-bottom: 1px solid rgba(var(--pr-fg), 0.04);
	color: rgba(var(--pr-fg), 0.55);
	text-align: center;
	vertical-align: middle;
}

.comparison-table tbody td:first-child {
	text-align: left;
	color: rgba(var(--pr-fg), 0.7);
	font-weight: 500;
}

.comparison-table tbody tr:hover td {
	background: rgba(var(--pr-fg), 0.02);
}

.comparison-table .section-row td {
	padding-top: 28px;
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(var(--pr-fg), 0.6);
	border-bottom: 1px solid rgba(var(--pr-fg), 0.08);
}

.comparison-table .check {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(var(--pr-fg), 0.06);
	position: relative;
}

.comparison-table .check::after {
	content: '';
	position: absolute;
	top: 5px;
	left: 6px;
	width: 5px;
	height: 8px;
	border: solid rgba(var(--pr-fg), 0.5);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.comparison-table .check.yes::after {
	border-color: rgb(var(--pr-fg));
}

.comparison-table .check.yes {
	background: rgba(var(--pr-fg), 0.12);
}

.comparison-table .val {
	color: rgba(var(--pr-fg), 0.6);
	font-weight: 500;
}

.comparison-table td.featured-col {
	background: rgba(var(--pr-fg), 0.02);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.pricing-faq {
	max-width: 720px;
	margin: 0 auto;
	padding: 100px 24px 0;
}

.pricing-faq h2 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: clamp(26px, 3.5vw, 38px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: rgb(var(--pr-fg));
	text-align: center;
	margin: 0 0 48px;
}

.pricing-faq details {
	padding: 18px 0;
	border-bottom: 1px solid rgba(var(--pr-fg), 0.06);
}

.pricing-faq details:first-of-type {
	border-top: 1px solid rgba(var(--pr-fg), 0.06);
}

.pricing-faq summary {
	cursor: pointer;
	font-weight: 500;
	color: rgba(var(--pr-fg), 0.85);
	font-size: 15px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	transition: color var(--duration-fast);
}

.pricing-faq summary::-webkit-details-marker {
	display: none;
}

.pricing-faq summary:hover {
	color: rgb(var(--pr-fg));
}

.pricing-faq summary::after {
	content: '+';
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(var(--pr-fg), 0.06);
	color: rgba(var(--pr-fg), 0.6);
	font-size: 16px;
	font-weight: 400;
	transition: background var(--duration-fast), transform var(--duration-base);
}

.pricing-faq details[open] summary::after {
	content: '\2212';
	transform: rotate(180deg);
	background: rgba(var(--pr-fg), 0.1);
}

.pricing-faq details p {
	color: rgba(var(--pr-fg), 0.6);
	margin: 14px 0 0;
	line-height: 1.65;
	font-size: 14.5px;
	padding-right: 40px;
}

/* ── Bottom CTA ────────────────────────────────────────────────────────── */

.pricing-bottom-cta {
	max-width: 800px;
	margin: 0 auto;
	padding: 100px 24px 80px;
	text-align: center;
}

.pricing-bottom-cta .cta-card {
	padding: 64px 48px;
	border: 1px solid rgba(var(--pr-fg), 0.08);
	border-radius: 18px;
	background: rgba(var(--pr-fg), 0.02);
}

.pricing-bottom-cta .cta-card h2 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: rgb(var(--pr-fg));
	margin: 0 0 14px;
	line-height: 1.15;
}

.pricing-bottom-cta .cta-card p {
	color: rgba(var(--pr-fg), 0.6);
	font-size: 16px;
	margin: 0 0 32px;
}

.pricing-bottom-cta .cta-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Inline pricing upgrade banner (used on avatar-studio, agent, dashboard) ── */

.upgrade-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	margin: 16px 0;
	border: 1px solid rgba(var(--pr-fg), 0.08);
	border-radius: 12px;
	background: rgba(var(--pr-fg), 0.02);
	transition: background var(--duration-fast), border-color var(--duration-fast);
}

.upgrade-banner:hover {
	background: rgba(var(--pr-fg), 0.04);
	border-color: rgba(var(--pr-fg), 0.12);
}

.upgrade-banner-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(var(--pr-fg), 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

.upgrade-banner-icon svg {
	width: 18px;
	height: 18px;
	color: rgba(var(--pr-fg), 0.6);
}

.upgrade-banner-text {
	flex: 1;
	min-width: 0;
}

.upgrade-banner-title {
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--pr-fg));
	margin-bottom: 2px;
}

.upgrade-banner-desc {
	font-size: 12px;
	color: rgba(var(--pr-fg), 0.6);
	line-height: 1.4;
}

.upgrade-banner-btn {
	flex-shrink: 0;
	padding: 8px 16px;
	border-radius: 8px;
	background: rgba(var(--pr-fg), 0.08);
	border: 1px solid rgba(var(--pr-fg), 0.1);
	color: rgb(var(--pr-fg));
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--duration-fast), border-color var(--duration-fast);
	white-space: nowrap;
}

.upgrade-banner-btn:hover {
	background: rgba(var(--pr-fg), 0.12);
	border-color: rgba(var(--pr-fg), 0.2);
}

/* ── Compact pricing card (embeddable section for other pages) ─────── */

.pricing-embed-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 80px 24px;
}

.pricing-embed-section .section-eyebrow {
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--pr-fg), 0.6);
	margin-bottom: 14px;
	text-align: center;
}

.pricing-embed-section h2 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: clamp(26px, 3.5vw, 40px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: rgb(var(--pr-fg));
	text-align: center;
	margin: 0 0 12px;
}

.pricing-embed-section .section-lead {
	color: rgba(var(--pr-fg), 0.6);
	font-size: 16px;
	text-align: center;
	max-width: 52ch;
	margin: 0 auto 44px;
}

.pricing-embed-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: rgba(var(--pr-fg), 0.06);
	border: 1px solid rgba(var(--pr-fg), 0.06);
	border-radius: 16px;
	overflow: hidden;
}

.pricing-embed-card {
	background: var(--pr-card);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: background var(--duration-fast);
}

.pricing-embed-card:hover {
	background: var(--pr-card-2);
}

.pricing-embed-card.featured {
	background: var(--pr-card-3);
	box-shadow: inset 0 0 0 1px rgba(var(--pr-fg), 0.12);
}

.pricing-embed-card .embed-tier-name {
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(var(--pr-fg), 0.6);
	margin-bottom: 10px;
	font-weight: 600;
}

.pricing-embed-card .embed-price {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: rgb(var(--pr-fg));
	line-height: 1;
	margin-bottom: 4px;
}

.pricing-embed-card .embed-price sub {
	font-size: 14px;
	font-weight: 400;
	color: rgba(var(--pr-fg), 0.6);
}

.pricing-embed-card .embed-cycle {
	font-size: 12px;
	color: rgba(var(--pr-fg), 0.6);
	margin-bottom: 20px;
}

.pricing-embed-card .embed-feats {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pricing-embed-card .embed-feats li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: rgba(var(--pr-fg), 0.6);
	line-height: 1.4;
}

.pricing-embed-card .embed-feats li::before {
	content: '✓';
	color: rgba(var(--pr-fg), 0.6);
	font-weight: 700;
	font-size: 11px;
	flex-shrink: 0;
	margin-top: 1px;
}

.pricing-embed-card.featured .embed-feats li::before {
	color: rgb(var(--pr-fg));
}

.pricing-embed-card .embed-popular {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: rgb(var(--pr-fg));
	color: rgb(var(--pr-bg));
	padding: 3px 8px;
	border-radius: 6px;
}

.pricing-embed-cta {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.pricing-embed-cta a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(var(--pr-fg), 0.5);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: color var(--duration-fast);
}

.pricing-embed-cta a:hover {
	color: rgb(var(--pr-fg));
}

.pricing-embed-cta a .arrow {
	transition: transform var(--duration-fast);
}

.pricing-embed-cta a:hover .arrow {
	transform: translateX(3px);
}

/* ── Microinteractions (B11) — press feedback, focus rings, motion ─────── */

/* Tier cards rise in on load — staggered, transform/opacity only. */
.pricing-tier-card {
	animation: pricing-rise var(--duration-slow, 420ms) var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.pricing-tier-card:nth-child(2) { animation-delay: 70ms; }
.pricing-tier-card:nth-child(3) { animation-delay: 140ms; }
@keyframes pricing-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Billing toggle — keyboard ring + press feedback */
.billing-toggle span:hover { color: rgba(var(--pr-fg), 0.78); }
.billing-toggle span.is-active:hover { color: rgb(var(--pr-fg)); }
.billing-toggle .toggle-track:active { background: rgba(var(--pr-fg), 0.18); }
.billing-toggle .toggle-track:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgb(var(--pr-fg)));
	outline-offset: var(--focus-ring-offset, 2px);
}

/* Price figures crossfade when the billing cycle flips (class set by JS). */
.price-swap {
	animation: pricing-price-swap var(--duration-base, 220ms) var(--ease-standard, cubic-bezier(0.2, 0.8, 0.2, 1));
}
@keyframes pricing-price-swap {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* CTAs — press + focus */
.pricing-cta { transition: background var(--duration-fast, var(--duration-fast)) var(--ease-standard, var(--ease-standard)), border-color var(--duration-fast, var(--duration-fast)) var(--ease-standard, var(--ease-standard)), transform var(--duration-fast, var(--duration-fast)) var(--ease-standard, var(--ease-standard)), box-shadow var(--duration-fast, var(--duration-fast)) var(--ease-standard, var(--ease-standard)); }
.pricing-cta:active {
	transform: translateY(0) scale(0.98);
}
.pricing-cta.primary:active { background: #e4e4e4; }
.pricing-cta:focus-visible,
.upgrade-banner-btn:focus-visible,
.pricing-embed-cta a:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgb(var(--pr-fg)));
	outline-offset: var(--focus-ring-offset, 2px);
}
.upgrade-banner-btn:active { background: rgba(var(--pr-fg), 0.16); }
.pricing-embed-cta a:active { color: rgba(var(--pr-fg), 0.78); }

/* FAQ — answers ease in instead of popping; summary gets ring + press */
.pricing-faq details[open] p {
	animation: pricing-faq-open var(--duration-base, 220ms) var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes pricing-faq-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pricing-faq summary:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgb(var(--pr-fg)));
	outline-offset: var(--focus-ring-offset, 2px);
	border-radius: var(--radius-sm, 6px);
}
.pricing-faq summary:active::after { background: rgba(var(--pr-fg), 0.14); }

/* Below-the-fold sections reveal on scroll (IntersectionObserver adds
   .is-revealed). Transform/opacity only; the script reveals everything
   immediately when IO is unsupported or reduced motion is set, so content is
   never left invisible. */
.js .reveal-section {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--duration-slow, var(--duration-slow)) var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1)),
		transform var(--duration-slow, var(--duration-slow)) var(--ease-emphasized, cubic-bezier(0.22, 1, 0.36, 1));
	will-change: opacity, transform;
}
.reveal-section.is-revealed {
	opacity: 1;
	transform: none;
}

/* Reduced motion: this sheet uses literal durations, so disable explicitly. */
@media (prefers-reduced-motion: reduce) {
	.pricing-tier-card,
	.pricing-faq details[open] p,
	.price-swap {
		animation: none !important;
	}
	.reveal-section {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.pricing-hero *,
	.pricing-tier-card,
	.pricing-cta,
	.billing-toggle *,
	.upgrade-banner,
	.upgrade-banner-btn,
	.pricing-embed-card,
	.pricing-embed-cta a,
	.pricing-faq summary,
	.pricing-faq summary::after {
		transition-duration: 0ms !important;
	}
	.pricing-cta:hover,
	.pricing-cta.primary:hover { transform: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	.pricing-tiers {
		grid-template-columns: 1fr;
	}

	.pricing-embed-grid {
		grid-template-columns: 1fr;
	}

	.comparison-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.comparison-table thead th,
	.comparison-table tbody td {
		padding: 12px 14px;
		white-space: nowrap;
	}
}

@media (max-width: 560px) {
	.pricing-hero {
		padding-top: calc(var(--header-h, 3.5rem) + 48px);
	}

	.pricing-tier-card {
		padding: 32px 24px;
	}

	.pricing-comparison {
		padding-top: 64px;
	}

	.pricing-faq {
		padding-top: 64px;
	}

	.pricing-bottom-cta {
		padding: 64px 24px 48px;
	}

	.pricing-bottom-cta .cta-card {
		padding: 40px 24px;
	}

	.upgrade-banner {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.upgrade-banner-btn {
		width: 100%;
		text-align: center;
	}
}

/* ── Pay per use (catalog-driven) ──────────────────────────────────────────
   Prices rendered here come live from /api/three/catalog — see pages/pricing.html.
   Quoted in USD, settled in $AXIS. */
.pricing-payg {
	max-width: 1100px;
	margin: 0 auto;
	padding: 100px 24px 0;
}

.pricing-payg h2 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: clamp(26px, 3.5vw, 38px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: rgb(var(--pr-fg));
	text-align: center;
	margin: 0 0 12px;
}

.payg-lead {
	max-width: 620px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(var(--pr-fg), 0.6);
}

.payg-lead a,
.payg-foot a {
	color: rgb(var(--pr-fg));
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--pr-fg), 0.3);
	transition: border-color var(--duration-fast);
}

.payg-lead a:hover,
.payg-foot a:hover {
	border-bottom-color: rgb(var(--pr-fg));
}

.payg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.payg-card {
	background: var(--pr-card);
	border: 1px solid rgba(var(--pr-fg), 0.08);
	border-radius: 14px;
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color var(--duration-fast), transform var(--duration-fast), background var(--duration-fast);
}

.payg-card:hover {
	border-color: rgba(var(--pr-fg), 0.2);
	background: var(--pr-card-4);
	transform: translateY(-2px);
}

.payg-card.is-free {
	background: var(--pr-card-3);
	box-shadow: inset 0 0 0 1px rgba(var(--pr-fg), 0.14);
}

/* ── Holder discount banner + personalized "your price" ──────────────────── */
.payg-holder {
	margin: 0 0 18px;
}
.payg-holder-card {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid rgba(var(--pr-fg), 0.1);
	background: var(--pr-card-5);
	font-size: 13.5px;
	color: rgba(var(--pr-fg), 0.78);
}
.payg-holder-card.is-active {
	border-color: color-mix(in srgb, var(--accent, #38bdf8) 55%, transparent);
	background: color-mix(in srgb, var(--accent, #38bdf8) 12%, var(--pr-card-5));
}
.payg-holder-badge {
	flex: 0 0 auto;
	font-family: var(--font-mono, 'SF Mono', monospace);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 6px;
	color: rgb(var(--pr-fg));
	background: var(--accent, #38bdf8);
}
.payg-holder-msg {
	flex: 1 1 240px;
	line-height: 1.45;
}
.payg-holder-msg strong {
	color: rgba(var(--pr-fg), 0.95);
}
.payg-holder-cta {
	flex: 0 0 auto;
	font-weight: 600;
	font-size: 13px;
	color: var(--accent, #38bdf8);
	text-decoration: none;
	transition: opacity var(--duration-fast);
}
.payg-holder-cta:hover {
	opacity: 0.8;
}
.payg-card.is-yourprice {
	border-color: color-mix(in srgb, var(--accent, #38bdf8) 45%, rgba(var(--pr-fg), 0.08));
}
.payg-badge.is-discount {
	color: rgb(var(--pr-fg));
	background: var(--accent, #38bdf8);
}
.payg-was {
	color: rgba(var(--pr-fg), 0.4);
	font-weight: 400;
	margin-right: 6px;
	text-decoration-thickness: 1px;
}

.payg-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.payg-card-label {
	font-size: 13px;
	font-weight: 600;
	color: rgba(var(--pr-fg), 0.85);
	line-height: 1.35;
}

.payg-badge {
	flex: 0 0 auto;
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: rgb(var(--pr-bg));
	background: rgb(var(--pr-fg));
	padding: 3px 8px;
	border-radius: 6px;
}

.payg-card-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: auto;
}

.payg-card-price .amt {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: rgb(var(--pr-fg));
	line-height: 1;
}

.payg-card-price .unit {
	font-size: 13px;
	color: rgba(var(--pr-fg), 0.5);
}

.payg-card-settle {
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: rgba(var(--pr-fg), 0.45);
}

.payg-card-settle strong {
	color: rgba(var(--pr-fg), 0.75);
	font-weight: 600;
}

.payg-card-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(var(--pr-fg), 0.55);
}

.payg-card-note a {
	color: rgb(var(--pr-fg));
	text-decoration: underline;
}

.payg-card-cta {
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 10px;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid rgba(var(--pr-fg), 0.12);
	background: rgba(var(--pr-fg), 0.05);
	color: rgb(var(--pr-fg));
	transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.payg-card.is-free .payg-card-cta {
	background: rgb(var(--pr-fg));
	color: rgb(var(--pr-bg));
	border-color: transparent;
}

.payg-card-cta:hover {
	background: rgba(var(--pr-fg), 0.1);
	border-color: rgba(var(--pr-fg), 0.25);
	transform: translateY(-1px);
}

.payg-card.is-free .payg-card-cta:hover {
	background: #f0f0f0;
}

.payg-card-cta:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgb(var(--pr-fg)));
	outline-offset: var(--focus-ring-offset, 2px);
}

.payg-foot {
	max-width: 640px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(var(--pr-fg), 0.5);
}

.payg-foot code {
	font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
	font-size: 12px;
	color: rgba(var(--pr-fg), 0.7);
}

/* Loading skeleton — shimmer until the live catalog arrives. */
.payg-card.is-skeleton {
	pointer-events: none;
}

.payg-card.is-skeleton .sk {
	border-radius: 6px;
	background: linear-gradient(
		90deg,
		rgba(var(--pr-fg), 0.04) 25%,
		rgba(var(--pr-fg), 0.09) 37%,
		rgba(var(--pr-fg), 0.04) 63%
	);
	background-size: 400% 100%;
	animation: payg-shimmer 1.4s ease infinite;
}

.payg-card.is-skeleton .sk-label {
	height: 13px;
	width: 70%;
}

.payg-card.is-skeleton .sk-price {
	height: 28px;
	width: 50%;
	margin-top: auto;
}

.payg-card.is-skeleton .sk-note {
	height: 11px;
	width: 40%;
}

@keyframes payg-shimmer {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.payg-card.is-skeleton .sk {
		animation: none;
	}
	.payg-card:hover {
		transform: none;
	}
}

@media (max-width: 640px) {
	.pricing-payg {
		padding-top: 72px;
	}
	.payg-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Pro checkout modal — pay in USDC, SOL, or $AXIS ─────────────────── */

.pricing-pay-assets {
	margin-top: 12px;
	font-size: 12px;
	color: rgba(var(--pr-fg), 0.45);
	text-align: center;
}

.pricing-pay-assets strong {
	color: rgba(var(--pr-fg), 0.75);
	font-weight: 600;
}

.pricing-three-discount {
	color: var(--success);
	font-weight: 600;
}

.pc-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.72);
	animation: pc-fade var(--duration-fast, 140ms) var(--ease-standard, ease);
}

@keyframes pc-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.pc-dialog {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: var(--pr-panel);
	border: 1px solid rgba(var(--pr-fg), 0.14);
	border-radius: 18px;
	padding: 30px 28px 26px;
	color: var(--pr-panel-ink);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
	animation: pc-rise var(--duration-fast, 180ms) var(--ease-standard, ease);
	outline: none;
}

@keyframes pc-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pc-overlay, .pc-dialog { animation: none; }
}

.pc-dialog h3 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 24px;
	margin: 0 0 6px;
	letter-spacing: -0.02em;
}

.pc-sub {
	color: rgba(var(--pr-fg), 0.55);
	font-size: 14px;
	margin: 0 0 22px;
}

.pc-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--pr-fg), 0.06);
	border: 1px solid rgba(var(--pr-fg), 0.12);
	border-radius: 50%;
	color: rgba(var(--pr-fg), 0.7);
	cursor: pointer;
	transition: background var(--duration-fast, var(--duration-fast)) var(--ease-standard), color var(--duration-fast, var(--duration-fast)) var(--ease-standard);
}

.pc-close:hover, .pc-close:focus-visible {
	background: rgba(var(--pr-fg), 0.14);
	color: rgb(var(--pr-fg));
}

.pc-close svg { width: 14px; height: 14px; }

.pc-assets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 18px;
}

@media (max-width: 520px) {
	.pc-assets { grid-template-columns: 1fr; }
}

.pc-asset {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 14px;
	background: rgba(var(--pr-fg), 0.03);
	border: 1px solid rgba(var(--pr-fg), 0.12);
	border-radius: 12px;
	color: var(--pr-panel-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--duration-fast, var(--duration-fast)) var(--ease-standard), background var(--duration-fast, var(--duration-fast)) var(--ease-standard), transform var(--duration-fast, var(--duration-fast)) var(--ease-standard);
}

.pc-asset:hover { border-color: rgba(var(--pr-fg), 0.35); transform: translateY(-1px); }

.pc-asset:focus-visible {
	outline: 2px solid rgb(var(--pr-fg));
	outline-offset: 2px;
}

.pc-asset.is-selected {
	border-color: rgb(var(--pr-fg));
	background: rgba(var(--pr-fg), 0.07);
	box-shadow: 0 0 0 1px rgb(var(--pr-fg)) inset;
}

.pc-asset-name {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
}

.pc-asset-price { font-size: 20px; font-weight: 600; }

.pc-asset-note {
	font-size: 11.5px;
	color: rgba(var(--pr-fg), 0.5);
	line-height: 1.4;
}

.pc-asset-badge {
	position: absolute;
	top: -9px;
	right: 10px;
	background: var(--success);
	color: #05240f;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 99px;
	letter-spacing: 0.03em;
}

.pc-continue { width: 100%; text-align: center; }

.pc-fineprint {
	font-size: 12px;
	color: rgba(var(--pr-fg), 0.4);
	margin: 14px 0 0;
	line-height: 1.5;
}

.pc-quote {
	text-align: center;
	margin-bottom: 18px;
}

.pc-quote-amount {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	word-break: break-all;
}

.pc-quote-meta {
	font-size: 13px;
	color: rgba(var(--pr-fg), 0.55);
	margin-top: 4px;
}

.pc-pay-grid {
	display: flex;
	gap: 18px;
	align-items: center;
	margin-bottom: 18px;
}

@media (max-width: 520px) {
	.pc-pay-grid { flex-direction: column; }
}

.pc-qr-wrap {
	background: rgb(var(--pr-fg));
	border-radius: 12px;
	padding: 8px;
	line-height: 0;
	flex-shrink: 0;
	transition: opacity var(--duration-fast, var(--duration-fast)) var(--ease-standard);
}

.pc-pay-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	width: 100%;
}

.pc-pay-actions .pricing-cta { text-align: center; }

.pc-sig-label {
	display: block;
	font-size: 12.5px;
	color: rgba(var(--pr-fg), 0.55);
	margin-bottom: 6px;
}

.pc-sig-row { display: flex; gap: 8px; }

/* .pricing-cta is width:100% by default — inside the signature row that
   starves the input, so size the button to its label instead. */
.pc-sig-row .pricing-cta { width: auto; flex-shrink: 0; }

.pc-sig-row input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	background: rgba(var(--pr-fg), 0.04);
	border: 1px solid rgba(var(--pr-fg), 0.14);
	border-radius: 10px;
	color: var(--pr-panel-ink);
	font-size: 13px;
	font-family: inherit;
	transition: border-color var(--duration-fast, var(--duration-fast)) var(--ease-standard);
}

.pc-sig-row input:focus-visible {
	outline: none;
	border-color: rgb(var(--pr-fg));
}

.pc-back {
	margin-top: 14px;
	background: none;
	border: 0;
	color: rgba(var(--pr-fg), 0.5);
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
}

.pc-back:hover, .pc-back:focus-visible { color: rgb(var(--pr-fg)); }

.pc-status {
	margin-top: 12px;
	font-size: 13px;
	color: rgba(var(--pr-fg), 0.65);
	min-height: 1.2em;
	line-height: 1.5;
}

.pc-status.is-err { color: #ffb3b3; }

.pc-success { text-align: center; padding: 12px 0 4px; }

.pc-success-mark {
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(74, 222, 128, 0.14);
	border: 1px solid rgba(74, 222, 128, 0.45);
	color: var(--success);
	font-size: 24px;
	font-weight: 700;
}

.pc-success h4 {
	font-family: var(--font-display, 'Space Grotesk', 'Inter', sans-serif);
	font-size: 20px;
	margin: 0 0 6px;
}

.pc-success p {
	color: rgba(var(--pr-fg), 0.6);
	font-size: 14px;
	margin: 0 0 18px;
}