@charset "utf-8";

:root {
	--spacing: 0.25rem;
	--radius: 0.625rem;
	--container-3xl: 48rem;
	--container-7xl: 80rem;
	--text-sm: 0.875rem;
	--text-sm-line-height: calc(1.25 / 0.875);
	--text-base: 1rem;
	--text-base-line-height: 1.5;
	--text-lg: 1.125rem;
	--text-lg-line-height: calc(1.75 / 1.125);
	--text-3xl: 1.875rem;
	--text-3xl-line-height: 1.2;
	--text-4xl: 2.25rem;
	--text-4xl-line-height: calc(2.5 / 2.25);
	--font-weight-medium: 500;
	--font-weight-normal: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--leading-relaxed: 1.625;
	--color-white: #fff;
	--color-neutral-50: oklch(98.5% 0 0deg);
	--color-neutral-100: oklch(97% 0 0deg);
	--color-neutral-200: oklch(92.2% 0 0deg);
	--color-neutral-600: oklch(43.9% 0 0deg);
	--color-neutral-700: oklch(37.1% 0 0deg);
	--color-blue-50: oklch(97% 0.014 254.604deg);
	--color-blue-200: oklch(88.2% 0.059 254.128deg);
}

.price-check-list {
	list-style: none;
	padding-left: 0;
}

.price-check-list li {
	position: relative;
	padding-left: 1.25rem;
}

.price-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #20b573;
	font-weight: 600;
}

/* Exact wrapper/table geometry from MHTML for tariff tables */
.price-table-shell {
	margin-bottom: calc(var(--spacing) * 8);
	overflow: hidden;
	border-radius: var(--radius);
	border-style: var(--tw-border-style, solid);
	border-width: 1px;
	border-color: var(--color-neutral-200);
	background-color: var(--color-white);
}

.price-table-shell .w-full {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
	width: 100%;
}

/* Exact neutral header background behavior from design */
.price-table-shell .bg-neutral-50 {
	text-indent: 0;
	border-collapse: collapse;
	background-color: var(--color-neutral-50);
}

/* Exact header-cell style from design:
   px-6 py-4 text-left text-sm font-semibold text-[#22313F] */
.price-table-header-cell {
	text-indent: 0;
	border-collapse: collapse;
	padding-inline: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 4);
	text-align: left;
	font-size: var(--text-sm);

	--tw-font-weight: var(--font-weight-semibold);
	line-height: var(--tw-leading, var(--text-sm-line-height));
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

/* Exact baseline/reset style for tbody divider block:
   divide-y divide-neutral-200 */
.price-table-dividers {
	text-indent: 0;
	border-collapse: collapse;
	border-color: var(--border);
}

.price-table-dividers > :not(:last-child) {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-color: var(--color-neutral-200);
}

/* Exact row style for:
   hover:bg-neutral-50 transition-colors */
.price-table-row {
	--tw-divide-y-reverse: 0;
	border-bottom-style: var(--tw-border-style, solid);
	border-top-style: var(--tw-border-style, solid);
	border-top-width: calc(1px * var(--tw-divide-y-reverse));
	border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
	border-color: var(--color-neutral-200);
	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.price-table-row:hover {
	background-color: var(--color-neutral-50);
}

/* Exact primary table-cell style from design:
   px-6 py-4 text-base text-[#22313F] font-medium */
.price-table-cell-primary {
	text-indent: 0;
	border-collapse: collapse;
	padding-inline: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 4);
	font-size: var(--text-base);

	--tw-font-weight: var(--font-weight-medium);
	line-height: var(--tw-leading, var(--text-base-line-height));
	font-weight: var(--font-weight-medium);
	color: #22313f;
}

/* Exact neutral table-cell style from design:
   px-6 py-4 text-base text-neutral-700 */
.price-table-cell-neutral {
	text-indent: 0;
	border-collapse: collapse;
	padding-inline: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 4);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));
	color: var(--color-neutral-700);
}

/* Exact grid behavior for:
   grid grid-cols-1 md:grid-cols-2 gap-6 */
.price-two-col-grid {
	display: grid;
	align-items: start;
	gap: calc(var(--spacing) * 6);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.price-two-col-grid,
	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Exact title style for:
   text-base font-semibold text-[#22313F] mb-3 */
.price-card-title {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);
	margin-bottom: calc(var(--spacing) * 3);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));

	--tw-font-weight: var(--font-weight-semibold);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

/* Exact list text style for:
   space-y-2 text-sm text-neutral-700 */
.price-list-neutral {
	box-sizing: border-box;
	border: 0 solid;
	list-style: none;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	font-size: var(--text-sm);
	line-height: var(--tw-leading, var(--text-sm-line-height));
	color: var(--color-neutral-700);
}

.price-list-neutral > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
	margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}

.price-list-disc {
	list-style: disc;
	padding-inline-start: calc(var(--spacing) * 5);
}

.price-text-sm-neutral,
.price-flex-row-start-gap-2 > span {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);
	font-size: var(--text-sm);
	line-height: var(--tw-leading, var(--text-sm-line-height));
	color: var(--color-neutral-700);
}

.price-text-sm-relaxed {
	line-height: var(--text-base-line-height);
}

.price-inline-link {
	color: #20b573;
	text-decoration: none;
	white-space: nowrap;
}

.price-list-base-neutral {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);
	list-style: none;
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));
	color: var(--color-neutral-700);
}

.price-list-base-neutral > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
	margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

.price-list-base-neutral > li {
	list-style: none;
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));
	color: var(--color-neutral-700);
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);
	display: flex;
	align-items: flex-start;
	gap: calc(var(--spacing) * 3);
}

.price-link-medium-green {
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);
	text-decoration: inherit;

	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: #20b573;
}

.price-inline-link:hover,
.price-link-medium-green:hover {
	text-decoration: underline;
}

.price-conditions-list {
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* Exact row layout for:
   flex items-start gap-2 */
.price-flex-row-start-gap-2 {
	list-style: none;
	font-size: var(--text-sm);
	line-height: var(--tw-leading, var(--text-sm-line-height));
	color: var(--color-neutral-700);
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	padding: 0;
	border-color: var(--border, #0000001a);
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);
	display: flex;
	align-items: flex-start;
	gap: calc(var(--spacing) * 2);
}

/* Tight matching for SMS pricing table/card block from design */

@media (min-width: 640px) {
	.sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
	.sm\:py-20 { padding-block: calc(var(--spacing) * 20); }
}

@media (min-width: 768px) {
	.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.lg\:px-8 { padding-inline: calc(var(--spacing) * 8); }
}

/* Exact card style from design for:
   bg-gradient-to-br from-[#20B573]/5 to-neutral-50 p-6 rounded-lg border border-neutral-200 */
.price-gradient-card {
	color: var(--foreground, oklch(14.5% 0 0deg));
	font-family: var(
		--default-font-family,
		ui-sans-serif,
		system-ui,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol",
		"Noto Color Emoji"
	);
	font-size: var(--font-size, 16px);
	line-height: 1.5;
	box-sizing: border-box;
	border: 0 solid;
	margin: 0;
	outline-color: color-mix(in oklab, var(--ring, oklch(70.8% 0 0deg)) 50%, transparent);

	--tw-border-style: solid;
	border-radius: var(--radius);
	border-style: var(--tw-border-style);
	border-width: 1px;
	border-color: var(--color-neutral-200);

	--tw-gradient-position: to bottom right in oklab;
	background-image: linear-gradient(var(--tw-gradient-stops));

	--tw-gradient-from: oklab(68.3972% -0.1419 0.0586 / 0.05);
	--tw-gradient-to: var(--color-neutral-50);
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
	padding: calc(var(--spacing) * 6);
}

.price-gradient-card-neutral {
	--tw-gradient-position: to bottom right in oklab;
	--tw-gradient-from: var(--color-neutral-50);
	--tw-gradient-to: var(--color-neutral-100);
	--tw-gradient-stops: var(
		--tw-gradient-via-stops,
		var(--tw-gradient-position),
		var(--tw-gradient-from) var(--tw-gradient-from-position),
		var(--tw-gradient-to) var(--tw-gradient-to-position)
	);
}

.price-gradient-card-conditions {
	background-color: var(--color-neutral-50);
	background-image: linear-gradient(
		to bottom right,
		rgb(32 181 115 / 0.05),
		var(--color-neutral-50)
	) !important;
}

.price-payment-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--spacing) * 2);
	min-height: 104px;
}

.price-payment-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
}

.price-payment-logos-double {
	gap: calc(var(--spacing) * 2);
}

.price-payment-logo {
	max-height: 26px;
	width: auto;
	object-fit: contain;
}

/* Keep hero exactly like design export: full-width subtle gradient without card chrome */
.price-hero-section {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-image: linear-gradient(
		to bottom right in oklab,
		oklab(68.3972% -0.1419 0.0586 / 0.05),
		var(--color-white),
		oklab(30.6227% -0.0126 -0.0298 / 0.05)
	) !important;
}