/* ==========================================================================
   AGYATVYAKTI — PRICING
   Stage 02.5. Uses the existing tokens only; no new palette, no new fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRICING HERO
   -------------------------------------------------------------------------- */
.agy-pricing-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
	border-bottom: 1px solid var(--agy-gray-200);
}

.agy-pricing-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--agy-rule-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--agy-rule-soft) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
}

.agy-pricing-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

.agy-pricing-hero h1 {
	margin-block: var(--space-sm) var(--space-md);
}

/* Keep the secondary hero line readable in dark mode. The global muted token is intentionally
   subtle for metadata, but this headline is primary content and needs strong contrast. */
[data-theme="dark"] .agy-pricing-hero h1 .agy-muted {
	color: var(--agy-gray-900);
}

/* --------------------------------------------------------------------------
   2. SHARED MARKS — tick and dash
   -------------------------------------------------------------------------- */
.agy-tick {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-top: 5px;
}

.agy-tick::before,
.agy-tick::after {
	content: "";
	position: absolute;
	background: var(--agy-purple);
	border-radius: 1px;
}

.agy-tick::before {
	width: 5px;
	height: 1.5px;
	left: 1px;
	top: 7px;
	transform: rotate(45deg);
}

.agy-tick::after {
	width: 10px;
	height: 1.5px;
	left: 3px;
	top: 5px;
	transform: rotate(-52deg);
}

.agy-dash {
	flex: 0 0 auto;
	color: var(--agy-gray-300);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. PRICING CARDS
   -------------------------------------------------------------------------- */
.agy-pricing-grid {
	align-items: stretch;
}

.agy-pricing-card {
	display: flex;
	flex-direction: column;
}

/* Highlighted plan: a purple edge, not a different colour scheme. */
.agy-pricing-card--popular {
	border-color: var(--agy-purple);
	box-shadow: 0 0 0 1px var(--agy-purple);
}

/* Seated flush in the corner rather than straddling the top border: the
   card sets overflow:hidden (studio.css), which clipped the upper half of a
   translateY(-50%) badge. */
.agy-pricing-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	transform: none;
	padding: 0.4rem 0.7rem;
	border-radius: 0 0 0 var(--radius-sm);
	background: var(--agy-purple);
	color: #f7f5ef;
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}

/* Room for the badge so it never sits on the plan index. */
.agy-pricing-card--popular {
	padding-top: calc(clamp(1.25rem, 1.7vw, 1.6rem) + 1.1rem);
}

.agy-pricing-card__name {
	font-size: var(--fs-h3);
	margin-bottom: 0.25rem;
}

.agy-pricing-card__sub {
	color: var(--agy-gray-700);
	font-size: var(--fs-small);
	margin-bottom: var(--space-md);
}

.agy-pricing-card__price {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 2.6vw, 2.15rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
	color: var(--agy-black);
	margin-bottom: 0.15rem;
}

.agy-pricing-card--popular .agy-pricing-card__price {
	color: var(--agy-purple);
}

.agy-pricing-card__terms {
	font-size: var(--fs-caption);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--agy-gray-500);
	margin-bottom: var(--space-md);
}

.agy-pricing-card__action .agy-btn {
	width: 100%;
	justify-content: center;
}

.agy-pricing-card__list {
	list-style: none;
	display: grid;
	gap: 0.55rem;
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--agy-gray-200);
}

.agy-pricing-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--fs-small);
	color: var(--agy-gray-900);
	line-height: 1.5;
}

.agy-pricing-card__scope {
	margin-top: auto;
	padding-top: var(--space-md);
	margin-bottom: 0;
	font-size: var(--fs-caption);
	color: var(--agy-gray-500);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.agy-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--agy-gray-200);
	border-radius: var(--radius-lg);
}

.agy-table-scroll:focus-visible {
	outline: 2px solid var(--agy-purple);
	outline-offset: 2px;
}

.agy-table {
	display: table;
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.agy-table th,
.agy-table td {
	padding: 0.85rem var(--space-md);
	text-align: left;
	border-bottom: 1px solid var(--agy-gray-200);
	vertical-align: middle;
}

.agy-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--agy-white);
	border-bottom: 1px solid var(--agy-gray-300);
	vertical-align: bottom;
}

.agy-table__plan {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--agy-black);
	letter-spacing: -0.01em;
}

.agy-table__price {
	display: block;
	font-size: var(--fs-caption);
	color: var(--agy-purple);
	font-weight: 700;
	margin-top: 2px;
}

/* Row labels */
.agy-table tbody th {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--agy-gray-900);
	white-space: nowrap;
}

/* Group header rows */
.agy-table__group th {
	background: var(--agy-gray-100);
	font-family: var(--font-display);
	font-size: var(--fs-caption);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--agy-gray-700);
	white-space: nowrap;
}

.agy-table tbody tr:not(.agy-table__group):hover {
	background: var(--agy-tint);
}

.agy-table__value {
	color: var(--agy-gray-700);
}

.agy-table__hint {
	margin-top: var(--space-sm);
	font-size: var(--fs-caption);
	color: var(--agy-gray-500);
}

@media (min-width: 900px) {
	.agy-table__hint {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   7. NOTES
   -------------------------------------------------------------------------- */
.agy-note {
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--agy-gray-200);
	font-size: var(--fs-caption);
	color: var(--agy-gray-500);
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5. HERO PILLS
   -------------------------------------------------------------------------- */
.agy-pills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-md);
}

.agy-pill {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--agy-gray-200);
	border-radius: 999px;
	background: var(--agy-white);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--agy-gray-700);
}

/* --------------------------------------------------------------------------
   6. METHODOLOGY
   -------------------------------------------------------------------------- */
.agy-method__head {
	max-width: 720px;
	margin-bottom: var(--space-xl);
}

.agy-method__head h2 {
	margin-block: var(--space-sm) var(--space-md);
}

.agy-method {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-lg) var(--space-md);
	counter-reset: agy-method;
}

.agy-method__step {
	position: relative;
	padding-top: var(--space-md);
	border-top: 1px solid var(--agy-gray-300);
}

/* Node marking the start of each step on the construction line. */
.agy-method__step::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--agy-white);
	border: 2px solid var(--agy-purple);
	transition: background var(--dur-base) var(--ease);
}

.agy-method__step:hover::before {
	background: var(--agy-purple);
}

.agy-method__index {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--agy-black);
	margin-bottom: 0.2rem;
}

.agy-method__index em {
	font-style: normal;
	color: var(--agy-purple);
}

.agy-method__label {
	font-size: var(--fs-caption);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--agy-gray-500);
	margin-bottom: var(--space-sm);
}

.agy-method__text {
	font-size: var(--fs-small);
	color: var(--agy-gray-700);
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. NOTES
   -------------------------------------------------------------------------- */
.agy-note {
	margin-top: var(--space-md);
	font-size: var(--fs-caption);
	color: var(--agy-gray-500);
	margin-bottom: 0;
}

.agy-table__note {
	max-width: 78ch;
	padding-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.agy-method {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.agy-pricing-hero {
		padding-block: var(--space-xl) var(--space-lg);
	}

	.agy-cta__actions .agy-btn {
		width: 100%;
		justify-content: center;
	}

	/*
	 * Mobile pricing comparison is converted from the desktop-wide table
	 * into stacked, viewport-safe feature rows. This prevents the desktop
	 * 720px table minimum from expanding the mobile layout viewport.
	 */
	.agy-table-scroll {
		width: 100%;
		max-width: 100%;
		overflow-x: visible;
		border: 0;
		border-radius: 0;
	}

	.agy-table {
		display: block;
		width: 100%;
		min-width: 0;
		table-layout: fixed;
		font-size: var(--fs-small);
	}

	.agy-table thead {
		display: none;
	}

	.agy-table tbody {
		display: block;
		width: 100%;
	}

	.agy-table tbody tr {
		display: block;
		width: 100%;
		margin-bottom: var(--space-sm);
		border: 1px solid var(--agy-gray-200);
		border-radius: var(--radius-md);
		background: var(--agy-white);
		overflow: hidden;
	}

	.agy-table tbody tr:not(.agy-table__group):not(.agy-table__cta) > th {
		display: block;
		width: 100%;
		padding: 0.8rem var(--space-sm);
		background: var(--agy-gray-100);
		white-space: normal;
		font-weight: 700;
		line-height: 1.35;
	}

	.agy-table tbody tr:not(.agy-table__group):not(.agy-table__cta) > td {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--space-sm);
		align-items: center;
		width: 100%;
		padding: 0.72rem var(--space-sm);
		border-top: 1px solid var(--agy-gray-200);
		text-align: right;
	}

	.agy-table tbody tr:not(.agy-table__group):not(.agy-table__cta) > td::before {
		content: attr(data-plan);
		justify-self: start;
		font-family: var(--font-display);
		font-size: var(--fs-caption);
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--agy-gray-700);
		text-align: left;
	}

	.agy-table tbody tr.agy-table__group {
		margin-top: var(--space-md);
		margin-bottom: var(--space-xs);
		border: 0;
		background: transparent;
		border-radius: 0;
	}

	.agy-table tbody tr.agy-table__group th {
		display: block;
		width: 100%;
		padding: 0.45rem 0;
		background: transparent;
		border: 0;
		white-space: normal;
	}

	.agy-table tbody tr.agy-table__cta {
		border: 0;
		background: transparent;
		border-radius: 0;
		margin-bottom: var(--space-sm);
	}

	.agy-table tbody tr.agy-table__cta > th {
		display: none;
	}

	.agy-table tbody tr.agy-table__cta > td {
		display: block;
		width: 100%;
		padding: 0.2rem 0;
		border: 0;
	}

	.agy-table tbody tr.agy-table__cta .agy-btn {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.agy-table__hint {
		margin-top: var(--space-sm);
	}
}

/* Comparison table CTA row */
.agy-table__cta td {
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}


/* --------------------------------------------------------------------------
   9. PACKAGE CARD RESPONSIVE REFINEMENT — STAGE 18
   Scoped to the full pricing package grid only.
   Keeps package content intact while improving readability at every width.
   -------------------------------------------------------------------------- */

/* Desktop: use the available container efficiently and keep all four plans
   visually equal without forcing a fixed height. */
.agy-pricing-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
}

.agy-pricing-grid .agy-pricing-card {
	min-width: 0;
	height: 100%;
	padding: clamp(1.25rem, 1.7vw, 1.6rem);
}

.agy-pricing-grid .agy-pricing-card__name,
.agy-pricing-grid .agy-pricing-card__sub,
.agy-pricing-grid .agy-pricing-card__price,
.agy-pricing-grid .agy-pricing-card__terms,
.agy-pricing-grid .agy-pricing-card__list,
.agy-pricing-grid .agy-pricing-card__scope {
	min-width: 0;
}

.agy-pricing-grid .agy-pricing-card__sub {
	min-height: 3.1rem;
}

.agy-pricing-grid .agy-pricing-card__terms {
	min-height: 1.45rem;
}

.agy-pricing-grid .agy-pricing-card__action {
	margin-top: 0.15rem;
}

.agy-pricing-grid .agy-pricing-card__action .agy-btn {
	min-height: 48px;
	white-space: nowrap;
}

.agy-pricing-grid .agy-pricing-card__list {
	gap: 0.55rem;
}

.agy-pricing-grid .agy-pricing-card__list li {
	display: grid;
	grid-template-columns: 13px minmax(0, 1fr);
	align-items: start;
	column-gap: 0.55rem;
	min-width: 0;
}

.agy-pricing-grid .agy-pricing-card__list li .agy-tick {
	grid-column: 1;
}

.agy-pricing-grid .agy-pricing-card__scope {
	max-width: 42ch;
}

/* Tablet / smaller desktop: two columns before the cards become too narrow. */
@media (max-width: 1100px) {
	.agy-pricing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet: keep two columns where possible, with slightly tighter card
   padding so the feature lists have room to breathe. */
@media (min-width: 769px) and (max-width: 860px) {
	.agy-pricing-grid .agy-pricing-card {
		padding: var(--space-lg);
	}

	.agy-pricing-grid .agy-pricing-card__sub {
		min-height: 0;
	}
}

/* Mobile: one full-width card at a time. Natural card height; no forced
   equal-height whitespace and no horizontal pricing carousel. */
@media (max-width: 768px) {
	.agy-pricing-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.agy-pricing-grid .agy-pricing-card {
		width: 100%;
		min-width: 0;
		height: auto;
		padding: var(--space-lg) var(--space-md);
	}

	.agy-pricing-grid .agy-pricing-card__sub,
	.agy-pricing-grid .agy-pricing-card__terms {
		min-height: 0;
	}

	.agy-pricing-grid .agy-pricing-card__price {
		font-size: clamp(1.35rem, 7vw, 1.8rem);
	}

	.agy-pricing-grid .agy-pricing-card__list {
		gap: 0.5rem;
	}

	.agy-pricing-grid .agy-pricing-card__list li {
		font-size: var(--fs-small);
		line-height: 1.45;
		column-gap: 0.5rem;
	}

	.agy-pricing-grid .agy-pricing-card__action .agy-btn {
		min-height: 48px;
	}

	.agy-pricing-grid .agy-pricing-card__scope {
		margin-top: var(--space-lg);
	}
}

/* Narrow phones: tighten horizontal padding without shrinking the
   typography into an unreadable scale. */
@media (max-width: 430px) {
	.agy-pricing-grid {
		gap: 0.9rem;
	}

	.agy-pricing-grid .agy-pricing-card {
		padding: 1.15rem 1rem;
	}

	.agy-pricing-grid .agy-pricing-card__name {
		font-size: clamp(1.25rem, 7vw, 1.55rem);
	}

	.agy-pricing-grid .agy-pricing-card__sub {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.agy-pricing-grid .agy-pricing-card__list li {
		font-size: 0.88rem;
	}
}

@media (max-width: 375px) {
	.agy-pricing-grid .agy-pricing-card {
		padding-inline: 0.9rem;
	}

	.agy-pricing-grid .agy-pricing-card__list {
		gap: 0.46rem;
	}

	.agy-pricing-grid .agy-pricing-card__list li {
		font-size: 0.86rem;
	}
}


/* --------------------------------------------------------------------------
   10. PACKAGE GRID WIDTH — DESKTOP BALANCE
   The four detailed package cards need more horizontal room than the
   standard content container. Keep the rest of the pricing page at the
   normal reading width while allowing the package grid to breathe.
   -------------------------------------------------------------------------- */
.agy-pricing-package-container {
	width: 100%;
	max-width: var(--container-wide);
}

/* Preserve the normal mobile reading gutter even with the wide container. */
@media (max-width: 768px) {
	.agy-pricing-package-container {
		max-width: var(--container);
	}
}