/* The pricing page (`app/pricing_page.py`), loaded on top of `landing.css`: its tokens,
   type, buttons, section labels and FAQ are the landing page's own, so this file draws
   only what that page has no need of. */

main.pricing-page {
	/* `landing.css` clips `main` with overflow: hidden, which would also stop the
	   comparison's header row from sticking. Clipping only sideways keeps both. */
	overflow: visible;
	overflow-x: clip;
}

.pricing-page .sr-only,
.billing-switch input,
.compare-picker input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Hero */

.pricing-hero {
	padding: 88px max(24px, 50vw - 620px) 44px;
	text-align: center;
}
.pricing-hero h1 {
	max-width: 980px;
	margin: 22px auto;
	font-size: clamp(44px, 6.4vw, 88px);
	letter-spacing: -0.06em;
	line-height: 0.98;
}
.pricing-hero h1 span {
	display: block;
	color: var(--green);
}
.pricing-hero > p {
	max-width: 640px;
	margin: 0 auto;
	color: var(--text);
	font-size: 18px;
	line-height: 1.6;
}

/* ── Billing period: two radio buttons the stylesheet reads, no script.
   Yearly shows first. With :has() unsupported the switch does nothing and the yearly
   prices stay, rather than both showing at once. */

.billing-switch {
	display: flex;
	gap: 5px;
	width: fit-content;
	margin: 0 auto 36px;
	padding: 6px;
	border: 0;
	border-radius: 40px;
	background: #edf3f0;
}
.billing-switch label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border-radius: 30px;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s,
		box-shadow 0.2s;
}
.billing-switch input:checked + label {
	background: var(--green);
	color: #fff;
	box-shadow: 0 5px 14px #0e7a6d20;
}
.billing-switch input:focus-visible + label {
	outline: 2px solid var(--green-2);
	outline-offset: 2px;
}
.billing-save {
	padding: 3px 8px;
	border-radius: 20px;
	background: var(--mint);
	color: var(--green-2);
	font-size: 12px;
	font-weight: 700;
}
/* White on the chosen pill: the tinted white it replaced fell short of AA contrast. */
.billing-switch input:checked + label .billing-save {
	background: #fff;
	color: var(--green-2);
}

.pricing-page .when-monthly {
	display: none;
}
.pricing-page:has(#billing-monthly:checked) .when-yearly {
	display: none;
}
.pricing-page:has(#billing-monthly:checked) span.when-monthly {
	display: inline;
}
.pricing-page:has(#billing-monthly:checked) .plan-price .when-monthly {
	display: flex;
}

/* ── Plan cards */

.pricing-plans {
	padding: 4px max(24px, 50vw - 620px) 96px;
}
.plan-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
.plan {
	display: flex;
	flex-direction: column;
	padding: 28px 26px 26px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
}
.plan.is-recommended {
	padding: 27px 25px 25px;
	border: 2px solid var(--green);
	box-shadow: 0 22px 48px -30px #0e7a6d66;
}
/* Every card is the same seven parts (`pricing_page._card`), and here they share the
   grid's rows, so each part lines up with the same part of the cards beside it: the
   buttons sit level however long the text above them runs. Without subgrid each card
   stacks on its own. */
@supports (grid-template-rows: subgrid) {
	.plan {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}
.plan-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
}
.plan-head h3 {
	font-size: 20px;
	font-weight: 750;
	letter-spacing: -0.02em;
}
.plan-tag {
	padding: 5px 10px;
	border: 1px solid var(--lime);
	border-radius: 100px;
	background: var(--mint);
	color: var(--green-2);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.plan-price {
	margin-top: 22px;
}
.plan-price p {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.plan-price strong {
	font-size: 44px;
	font-variant-numeric: tabular-nums;
	font-weight: 750;
	letter-spacing: -0.045em;
	line-height: 1;
}
.plan-price span {
	color: var(--text);
	font-size: 15px;
}
.plan-billing {
	min-height: 20px;
	margin-top: 8px;
	color: var(--text);
	font-size: 13px;
}
.plan-volume {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.5;
}
.plan-volume b {
	font-weight: 750;
}
.plan .button {
	width: 100%;
	margin-top: 20px;
}
.button.outline {
	border: 1px solid #cad6d1;
	background: #fff;
	color: var(--ink);
}
.button.outline:hover {
	border-color: var(--green);
	color: var(--green-2);
	transform: translateY(-1px);
}
.plan-list {
	display: grid;
	align-content: start;
	gap: 11px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.45;
}
.plan-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.plan-list .icon-check {
	flex: none;
	margin-top: 2px;
	color: var(--green);
}
.plan-extra {
	display: grid;
	gap: 4px;
	margin-top: auto;
	padding-top: 22px;
	color: var(--text);
	font-size: 13px;
}
.plan-footnote {
	margin-top: 22px;
	color: var(--text);
	font-size: 13px;
	text-align: center;
}

/* ── Trial */

.pricing-trial {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 40px 7vw;
	align-items: center;
	margin: 0 max(24px, 50vw - 620px);
	padding: 56px;
	border-radius: 28px;
	background: var(--mint);
}
.pricing-trial h2 {
	margin-top: 18px;
	font-size: clamp(34px, 4vw, 52px);
	letter-spacing: -0.05em;
	line-height: 1.02;
}
.pricing-trial h2 span {
	display: block;
	color: var(--green);
}
.trial-copy .button {
	margin-top: 28px;
}
.trial-steps {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.trial-steps li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 16px;
	padding: 18px 20px;
	border: 1px solid #cce8e0;
	border-radius: 16px;
	background: #fff;
	counter-increment: step;
}
.trial-steps li::before {
	content: counter(step);
	display: grid;
	grid-row: span 2;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mint);
	color: var(--green-2);
	font-weight: 750;
}
.trial-steps h3 {
	font-size: 16px;
	font-weight: 750;
}
.trial-steps p {
	margin-top: 3px;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
}

/* ── Comparison */

.pricing-compare {
	padding: 96px max(24px, 50vw - 620px) 112px;
}
.pricing-compare h2 {
	margin-top: 18px;
	font-size: clamp(32px, 3.6vw, 46px);
	letter-spacing: -0.045em;
	line-height: 1.05;
}
.compare-lede {
	margin-top: 14px;
	color: var(--text);
	font-size: 15px;
	line-height: 1.7;
}
.compare-lede .tag-coming {
	margin: 0 3px;
	vertical-align: 1px;
}
.compare-scroll {
	/* Positioned, so the screen-reader labels in its cells (absolutely placed) are held
	   inside the frame; otherwise they escape it and widen the page on a phone. */
	position: relative;
	margin-top: 36px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
}
.compare-scroll:focus-visible {
	outline: 2px solid var(--green-2);
	outline-offset: 3px;
}
.compare-table {
	/* Fixed, so the plan columns share the width evenly and stay put when the billing
	   period swaps their prices for shorter ones. The header row sets the widths. */
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}
.compare-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 20px 16px;
	border-bottom: 1px solid var(--line);
	background: #fff;
	font-size: 15px;
	font-weight: 750;
	text-align: left;
}
.compare-table thead th:first-child {
	width: 34%;
	border-top-left-radius: 20px;
}
.compare-table thead th:last-child {
	border-top-right-radius: 20px;
}
.compare-table thead th.is-recommended {
	color: var(--green-2);
}
.compare-table th[scope="row"] {
	padding: 13px 16px 13px 22px;
	background: #fff;
	color: var(--ink);
	font-weight: 500;
	text-align: left;
}
/* Rounded like the frame's corner it sits in, as the header row's are, so its white does
   not paint over that corner. */
.compare-table tbody:last-child tr:last-child th[scope="row"] {
	border-bottom-left-radius: 20px;
}
.compare-table td {
	padding: 13px 16px;
	color: var(--ink);
	vertical-align: middle;
}
.compare-table tbody tr + tr > * {
	border-top: 1px solid #edf2f0;
}
.compare-group th {
	padding: 28px 22px 10px;
	color: var(--green);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
}
.compare-table .icon-check {
	display: block;
	color: var(--green);
}
.cell-none {
	color: #b3c0bb;
}
.tag-coming {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: var(--soft);
	color: #4f625c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* The phone's plan picker: hidden until the table is too narrow for four plans. */
.compare-picker {
	display: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ── Closing */

.pricing-cta {
	padding: 104px max(24px, 50vw - 620px) 120px;
	text-align: center;
}
.pricing-cta h2 {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(34px, 4.4vw, 58px);
	letter-spacing: -0.05em;
	line-height: 1.02;
}
.pricing-cta > p {
	margin-top: 18px;
	color: var(--text);
	font-size: 18px;
}
.pricing-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

/* ── Narrower screens */

@media (max-width: 1120px) {
	.plan-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.pricing-trial {
		grid-template-columns: minmax(0, 1fr);
		padding: 36px 26px;
	}
	/* The table scrolls sideways inside its frame, and the feature names stay put. */
	.compare-scroll {
		overflow-x: auto;
	}
	.compare-table {
		min-width: 720px;
	}
	.compare-table thead th:first-child,
	.compare-table th[scope="row"] {
		position: sticky;
		left: 0;
		z-index: 1;
	}
	.compare-table thead th:first-child {
		z-index: 2;
		width: 220px;
	}
	/* A group's name spans the whole table; held at the left edge, it stays readable
	   while the plans scroll past under it. */
	.compare-group th span {
		display: inline-block;
		position: sticky;
		left: 22px;
	}
}
@media (max-width: 640px) {
	.pricing-hero {
		padding-top: 64px;
	}
	.plan-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.billing-switch label {
		padding: 11px 16px;
	}
	/* One plan at a time, picked with the switch above the table, which stays in view
	   while the table scrolls; every row then reads at full width. Without :has() the
	   table scrolls sideways instead, as it does on a tablet. */
	@supports selector(:has(*)) {
		.compare-picker {
			display: block;
			position: sticky;
			top: 0;
			z-index: 3;
			margin: 28px -24px 0;
			padding: 10px 24px;
			background: #fff;
		}
		.compare-picker-track {
			display: flex;
			gap: 4px;
			padding: 5px;
			border-radius: 40px;
			background: #edf3f0;
		}
		.compare-picker label {
			flex: 1 1 auto;
			padding: 10px 4px;
			border-radius: 30px;
			color: var(--text);
			font-size: 14px;
			font-weight: 600;
			text-align: center;
			cursor: pointer;
		}
		.compare-picker input:checked + label {
			background: var(--green);
			color: #fff;
		}
		.compare-picker input:focus-visible + label {
			outline: 2px solid var(--green-2);
			outline-offset: 2px;
		}
		.compare-scroll {
			margin-top: 8px;
			overflow: visible;
		}
		.compare-table {
			min-width: 0;
			table-layout: auto;
		}
		.compare-table thead {
			display: none;
		}
		.compare-table th[scope="row"] {
			position: static;
			width: 56%;
			padding-left: 18px;
		}
		.compare-table tr > :not(:first-child) {
			display: none;
		}
		.pricing-compare:has(#compare-lite:checked) tr > :nth-child(2),
		.pricing-compare:has(#compare-standard:checked) tr > :nth-child(3),
		.pricing-compare:has(#compare-plus:checked) tr > :nth-child(4),
		.pricing-compare:has(#compare-enterprise:checked) tr > :nth-child(5) {
			display: table-cell;
		}
		.compare-group th {
			padding-left: 18px;
		}
	}
}
@media (prefers-reduced-motion: reduce) {
	.billing-switch label,
	.plan .button,
	.pricing-cta .button {
		transition: none;
	}
}