/**
 * Pricing page styles (pricing.html)
 * Requires: base.css
 */

* {
	margin: 0;
	padding: 0;
}

/* Hero Section */
.hero {
	text-align: center;
	padding: 4rem 2rem 3rem;
	max-width: 800px;
	margin: 0 auto;
}

.hero h1 {
	font-size: 3rem;
	font-weight: 700;
	color: var(--sage-ink);
	margin-bottom: 1rem;
	line-height: 1.2;
}

.hero p {
	font-size: 1.25rem;
	color: var(--sage-text-secondary);
	margin-bottom: 2rem;
}

/* Billing Toggle */
.billing-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-bottom: 3rem;
}

.toggle-label {
	font-weight: 500;
	color: var(--sage-text-secondary);
	transition: color 0.2s;
}

.toggle-label.active {
	color: var(--sage-ink);
	font-weight: 600;
}

.toggle-switch {
	position: relative;
	width: 56px;
	height: 32px;
	background: var(--sage-border);
	border-radius: 16px;
	cursor: pointer;
	transition: background 0.3s;
}

.toggle-switch.active {
	background: var(--sage-accent);
}

.toggle-slider {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 24px;
	height: 24px;
	background: white;
	border-radius: 50%;
	transition: transform 0.3s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider {
	transform: translateX(24px);
}

.save-badge {
	background: #fef3c7;
	color: #92400e;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 600;
}

/* Pricing Cards */
.pricing-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 4rem;
	align-items: stretch;
}

.pricing-card {
	background: var(--sage-surface);
	border: 2px solid var(--sage-border);
	border-radius: 16px;
	padding: 2.5rem;
	position: relative;
	transition:
		transform 0.2s,
		box-shadow 0.2s;
}

.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
	border-color: var(--sage-accent);
	box-shadow: 0 8px 24px rgba(74, 124, 89, 0.15);
}

.popular-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--sage-accent);
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 600;
}

.card-header {
	margin-bottom: 2rem;
}

.tier-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sage-ink);
	margin-bottom: 0.5rem;
}

.tier-description {
	color: var(--sage-text-secondary);
	font-size: 0.95rem;
}

.price-container {
	margin-bottom: 2rem;
	min-height: 9rem;
}

.price {
	font-size: 3rem;
	font-weight: 700;
	color: var(--sage-ink);
	line-height: 1;
}

.price-period {
	color: var(--sage-text-secondary);
	font-size: 1rem;
	font-weight: 500;
	margin-left: 0.25rem;
}

.price-strike-line {
	margin-bottom: 0.25rem;
	line-height: 1;
}

/* Visually hidden, available to screen readers */
.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;
}

.price-strike {
	text-decoration: line-through;
	color: var(--sage-text-muted);
	font-size: 1.4rem;
	font-weight: 500;
}

.price-line {
	line-height: 1;
}

.launch-chip {
	display: block;
	width: fit-content;
	background: #fef3c7;
	color: #92400e;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-top: 0.5rem;
}

.annual-note {
	color: var(--sage-text-muted);
	font-size: 0.875rem;
	margin-top: 0.5rem;
}

.guarantee-footer {
	text-align: center;
	color: var(--sage-text-secondary);
	font-size: 0.95rem;
	margin: 2rem auto 0;
	padding: 0 2rem;
}

.guarantee-footer a {
	color: var(--sage-accent);
	text-decoration: none;
}

.guarantee-footer a:hover {
	text-decoration: underline;
}

.cta-button {
	width: 100%;
	padding: 1rem 2rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	margin-bottom: 2rem;
}

.cta-button.outline {
	background: transparent;
	border: 2px solid var(--sage-accent);
	color: var(--sage-accent);
}

.cta-button.outline:hover {
	background: var(--sage-botanical-light);
}

.cta-button.solid {
	background: var(--sage-accent);
	color: white;
}

.cta-button.solid:hover {
	background: var(--sage-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.features-list {
	list-style: none;
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	color: var(--sage-text-secondary);
}

.feature-icon {
	color: var(--sage-accent);
	font-weight: 700;
	flex-shrink: 0;
}

/* Comparison Table */
.comparison-section {
	margin-top: 4rem;
}

.comparison-header {
	text-align: center;
	margin-bottom: 2rem;
}

.comparison-header h2 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--sage-ink);
	margin-bottom: 0.5rem;
}

.comparison-header p {
	color: var(--sage-text-secondary);
}

.launch-note {
	max-width: 640px;
	margin: 1rem auto 0;
	padding: 0.75rem 1rem;
	background: #fef3c7;
	color: #78350f;
	border-radius: 8px;
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: left;
}

.comparison-table {
	background: var(--sage-surface);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--sage-border);
}

.table-header {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	background: var(--sage-canvas);
	border-bottom: 2px solid var(--sage-border);
	padding: 1.25rem 1.5rem;
	font-weight: 600;
	color: var(--sage-ink);
}

.table-header .feature-value {
	text-align: center;
}

.table-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--sage-border);
	align-items: center;
}

.table-row:last-child {
	border-bottom: none;
}

.table-row:hover {
	background: #fafafa;
}

.feature-name {
	font-weight: 500;
	color: var(--sage-text-primary);
}

.feature-value {
	text-align: center;
	color: var(--sage-text-secondary);
}

.checkmark {
	color: var(--sage-accent);
	font-weight: 700;
	font-size: 1.25rem;
}

.xmark {
	color: #d1d5db;
	font-weight: 700;
	font-size: 1.25rem;
}

.table-row-subtle {
	padding-top: 0.5rem;
	padding-bottom: 0.75rem;
	font-size: 0.875rem;
	color: var(--sage-text-secondary);
}

.feature-name-sub {
	padding-left: 1rem;
	font-weight: 400;
	color: var(--sage-text-muted);
}

.credit-key {
	margin-top: 1.25rem;
	padding: 0.875rem 1.25rem;
	background: var(--sage-canvas);
	border: 1px solid var(--sage-border);
	border-radius: 8px;
	color: var(--sage-text-secondary);
	font-size: 0.9rem;
	line-height: 1.55;
	text-align: center;
}

.credit-key strong {
	color: var(--sage-ink);
	margin-right: 0.25rem;
}

/* Bottom CTA overrides */
.bottom-cta {
	padding: 4rem 2rem;
}

.bottom-cta .cta-button {
	max-width: 300px;
	margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
	.hero h1 {
		font-size: 2rem;
	}

	.hero p {
		font-size: 1rem;
	}

	.pricing-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.price-container {
		min-height: auto;
	}

	.table-header,
	.table-row {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		padding: 1rem;
		font-size: 0.875rem;
	}
}

@media (max-width: 480px) {
	.billing-toggle {
		flex-direction: column;
		gap: 0.75rem;
	}

	.table-header,
	.table-row {
		grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
		padding: 0.6rem;
		font-size: 0.7rem;
	}

	.feature-name {
		font-size: 0.8rem;
	}
}