/* ============================================================================
   LLMIC — Pricing page (page-pricing.php). Uses front-page.css utilities.
   ========================================================================== */

.llmic-pricing-hero { padding-bottom: var(--space-l); }
.llmic-section--plans { padding-top: var(--space-l); }

.llmic-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-m);
	align-items: start;
	max-width: 1080px;
	margin-inline: auto;
}
@media (max-width: 900px) { .llmic-plans { grid-template-columns: 1fr; max-width: 460px; } }

.llmic-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface-1);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: var(--space-l);
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.llmic-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.llmic-plan--featured {
	border-color: transparent;
	box-shadow: var(--shadow-2), 0 0 0 2px var(--accent), 0 30px 60px -24px color-mix(in srgb, var(--accent) 40%, transparent);
}
@media (min-width: 901px) {
	.llmic-plan--featured { transform: translateY(-14px); }
	.llmic-plan--featured:hover { transform: translateY(-18px); }
}
.llmic-plan__badge {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(140deg, var(--accent), var(--brand-600));
	color: #fff;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 0.3em 0.9em;
	border-radius: var(--radius-pill);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.llmic-plan__name { font-family: var(--font-display); font-size: var(--step-2); margin: 0 0 var(--space-3xs); }
.llmic-plan__for { color: var(--ink-3); margin: 0 0 var(--space-m); font-size: var(--step--1); }
.llmic-plan__price { margin: 0 0 var(--space-m); }
.llmic-price { display: inline-flex; align-items: baseline; gap: 0.2em; }
.llmic-price--y { display: none; }
#llmic-plans.is-annual .llmic-price--m { display: none; }
#llmic-plans.is-annual .llmic-price--y { display: inline-flex; }

/* Monthly / annual toggle */
.llmic-billing {
	display: flex;
	width: max-content;
	margin: 0 auto var(--space-xl);
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-2);
}
.llmic-billing__btn {
	font: inherit;
	font-weight: 600;
	font-size: var(--step--1);
	padding: 0.5em 1.2em;
	border: 0;
	background: transparent;
	color: var(--ink-2);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.llmic-billing__btn.is-active { background: var(--surface-1); color: var(--accent-strong); box-shadow: var(--shadow-1); }
.llmic-plan__price .amt { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; letter-spacing: var(--tracking-tight); }
.llmic-plan__price .per { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--step-0); }
.llmic-plan__cta { width: 100%; justify-content: center; margin-bottom: var(--space-m); }
.llmic-plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.llmic-plan__features li {
	position: relative;
	padding-left: 1.8em;
	color: var(--ink-2);
	font-size: var(--step-0);
	line-height: var(--leading-snug);
}
.llmic-plan__features li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.3em;
	width: 1.15em; height: 1.15em;
	background: var(--accent-wash);
	border-radius: var(--radius-s);
}
.llmic-plan__features li::after {
	content: "";
	position: absolute;
	left: 0.36em; top: 0.46em;
	width: 0.3em; height: 0.58em;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
}
.llmic-plan__features li.is-heading {
	padding-left: 0;
	color: var(--ink);
	font-weight: 600;
	margin-top: var(--space-2xs);
}
.llmic-plan__features li.is-heading::before,
.llmic-plan__features li.is-heading::after { display: none; }
.llmic-plans__note { text-align: center; color: var(--ink-3); font-size: var(--step--1); max-width: 64ch; margin: var(--space-l) auto 0; }

/* --- Comparison table --------------------------------------------------- */
.llmic-compare {
	max-width: 840px;
	margin-inline: auto;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-1);
}
.llmic-compare table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step-0); }
.llmic-compare th, .llmic-compare td { padding: 0.9em 1.15em; border-bottom: 1px solid var(--line); text-align: left; }
.llmic-compare thead th { background: var(--surface-2); font-weight: var(--llmic-weight-semibold); white-space: nowrap; }
.llmic-compare tbody th { font-weight: 500; color: var(--ink); }
.llmic-compare td { text-align: center; width: 22%; }
/* Highlight the LLMIC column */
.llmic-compare th:nth-child(2), .llmic-compare td:nth-child(2) { background: color-mix(in srgb, var(--accent-wash) 60%, transparent); }
.llmic-compare thead th:nth-child(2) { color: var(--accent-strong); }
.llmic-compare tbody tr:last-child th, .llmic-compare tbody tr:last-child td { border-bottom: 0; }
.llmic-yn { font-size: 1.15em; }
.llmic-yn--yes { color: var(--accent); font-weight: 700; }
.llmic-yn--no { color: var(--ink-3); }