/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/pricing-card.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Pricing Card
 * Layout: marketing.section.pricing-card
 *
 * Used on: pricing (standalone single-card embed or within pricing-grid)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - tier (required) — tier name string e.g. 'Pro Annual'
 *   - amount (required) — price string e.g. '$12'
 *   - period (required) — billing period e.g. '/mo'
 *   - billing_note (optional) — e.g. 'Billed annually'
 *   - savings (optional) — savings pill text e.g. 'Save 40%'
 *   - description (required) — short tier description
 *   - features (required) — array of {text, available} items
 *   - cta (required) — {label, url, style}
 *   - is_featured (optional, default false)
 *   - badge (optional) — badge text e.g. 'Best Value'
 *
 * Visual spec:
 *   Card with tier name, large price, feature checklist, and CTA.
 *   Featured card has violet border, slight scale-up, and badge.
 *   Unavailable features show × in muted style.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-surface-edge, --nllm-violet,
 *   --nllm-violet-pale, --nllm-violet-bg, --nllm-text, --nllm-text-muted,
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-gradient, --nllm-space-xl,
 *   --nllm-space-md, --nllm-space-sm, --nllm-space-xs, --nllm-radius-lg,
 *   --nllm-radius-full, --nllm-shadow-md, --nllm-shadow-lg, --pc-status-flowing
 *
 * M1 status: minimal baseline. M2 adds annual/monthly toggle interaction.
 *
 * [claude:sonnet-4.6][client:2.1.152][hurc:v0.7.0]
 */

.pc-section--pricing-card {
	background-color: var(--nllm-surface);
}

.pc-pricing-card {
	position: relative;
	background-color: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-lg);
	padding: var(--nllm-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-md);
	transition: transform var(--nllm-transition-base), box-shadow var(--nllm-transition-base);
}

.pc-pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--nllm-shadow-lg);
}

.pc-pricing-card--featured {
	border-color: var(--nllm-violet);
	box-shadow: var(--nllm-shadow-md);
	transform: scale(1.03);
	background-color: var(--nllm-violet-bg);
}

.pc-pricing-card--featured:hover {
	transform: scale(1.03) translateY(-4px);
}

.pc-pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nllm-gradient);
	color: var(--nllm-text);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.3em 0.9em;
	border-radius: var(--nllm-radius-full);
	white-space: nowrap;
}

.pc-pricing-card__tier {
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nllm-violet-pale);
}

.pc-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--nllm-space-xs);
}

.pc-pricing-card__price-was {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--nllm-text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	align-self: center;
}

.pc-pricing-card__amount {
	font-size: 3rem;
	font-weight: 800;
	color: var(--nllm-text);
	letter-spacing: -0.03em;
}

.pc-pricing-card__period {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
}

.pc-pricing-card__billing-note {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
}

.pc-pricing-card__savings {
	display: inline-block;
	background-color: rgba(34, 197, 94, 0.12);
	color: var(--pc-status-flowing);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2em 0.6em;
	border-radius: var(--nllm-radius-full);
}

.pc-pricing-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	flex: 1;
}

.pc-pricing-card__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--nllm-space-sm);
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
}

.pc-pricing-card__cta {
	margin-top: var(--nllm-space-md);
}

@media (max-width: 768px) {
	.pc-pricing-card--featured {
		transform: none;
	}
}
