/* ============================================================
   Pricing - the site design over the pricing page's own styles.
   Loaded after the page's <style> block and changes only the look: the markup, the price data,
   tabs, billing toggles, size selectors, comparison table and FAQ scripts are untouched.
   Frame lines down both sides, sections on the frame width, cells divided by thin lines,
   dashed rules between bands, the Rubik type and the site's buttons.
   ============================================================ */

.tnv-page {
	--pr-frame: min(1344px, calc(100% - 2 * clamp(12px, 3.4vw, 48px)));
	--pr-pad: clamp(20px, 5.5vw, 80px);
	--pr-line: #e6e7ea;
	--pr-ink: #2c2b36;
	--pr-muted: #66656f;
	--pr-soft: #f8f8fb;
	--pr-gap: clamp(72px, 8vw, 112px);
	--l-bg-alt: var(--pr-soft);
	--l-text: var(--pr-ink);
	--l-muted: var(--pr-muted);
	--l-border: var(--pr-line);
	--l-border-strong: var(--pr-line);
	--tnv-accent-deep: #7b3bd6;
	font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.tnv-page .tnvcta-section,
.tnv-page .tnv-steps__num,
.tnv-page .tnvcta-accent {
	font-family: inherit;
}

/* The two vertical frame lines, through the whole page */
.tnv-page::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	z-index: 20;
	width: var(--pr-frame);
	transform: translateX(-50%);
	border-inline: 1px solid var(--pr-line);
	pointer-events: none;
}

.tnv-page .tnv-inner {
	width: var(--pr-frame);
	max-width: none;
	padding: 0 var(--pr-pad);
}

/* ---------- Hero ---------- */

.tnv-page .tnv-hero {
	padding-top: calc(68px + clamp(56px, 6vw, 88px));
}

.tnv-page .tnv-hero__eyebrow-text {
	margin-bottom: 14px;
	color: var(--pr-muted);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.tnv-page .tnv-hero__title {
	font-size: clamp(2.375rem, 1.5rem + 2.6vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.tnv-page .tnv-hero__proof {
	max-width: 600px;
	margin-bottom: 40px;
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Category tabs: the site's segmented switch */
.tnv-page .tnv-tabs {
	width: fit-content;
	max-width: 100%;
	margin-bottom: 48px;
	padding: 5px;
	gap: 4px;
	border: 1px solid var(--pr-line);
	border-radius: 999px;
	background: #ffffff;
}

.tnv-page .tnv-tab {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	color: var(--pr-muted);
	font-size: 1rem;
	font-weight: 500;
}

.tnv-page .tnv-tab[aria-selected="true"] {
	background: var(--pr-ink);
	color: #ffffff;
	font-weight: 500;
}

.tnv-page .tnv-tabs-mobile {
	margin-bottom: 40px;
}

/* ---------- Plans: the intro and the two cards in cells, inside a dashed band ---------- */

.tnv-page .tnv-category-wrap {
	padding: 0;
	border-block: 1px dashed var(--pr-line); /* taste-skill-ignore: dashed rules from the site design */
	background: var(--pr-soft);
}

.tnv-page .tnv-category-wrap::before,
.tnv-page .tnv-category-wrap::after {
	content: none;
}

.tnv-page .tnv-category-wrap > .tnv-inner {
	padding: 0;
}

.tnv-page .tnv-category {
	grid-template-columns: minmax(300px, 0.9fr) minmax(0, 2.1fr);
	gap: 0;
	align-items: stretch;
}

.tnv-page .tnv-category__intro {
	align-self: start;
	top: 100px;
	padding: 48px clamp(24px, 2.6vw, 40px);
}

.tnv-page .tnv-category__title {
	font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.tnv-page .tnv-category__desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	text-wrap: pretty;
}

.tnv-page .tnv-why__icon {
	background: #f1e9fd;
}

.tnv-page .tnv-why__title {
	font-size: 0.9375rem;
	font-weight: 500;
}

.tnv-page .tnv-why__desc {
	font-size: 0.875rem;
}

.tnv-page .tnv-category__link {
	color: #7b3bd6;
	text-underline-offset: 3px;
}

/* A 1px gap over the line colour draws the lines between the cards and toward the intro */
.tnv-page .tnv-cards-wrap {
	padding: 0;
	border-inline-start: 1px solid var(--pr-line);
}

.tnv-page .tnv-cards {
	gap: 1px;
	align-items: stretch;
	height: 100%;
	background: var(--pr-line);
}

.tnv-page .tnv-card {
	padding: 44px clamp(24px, 3vw, 40px) 40px;
	border: 0;
	border-radius: 0;
	background: #ffffff;
}

.tnv-page .tnv-card:hover {
	transform: none;
}

/* "Recommended": a purple line across the top of the cell and a small tag, instead of a floating pill */
.tnv-page .tnv-card--featured {
	box-shadow: inset 0 3px 0 #8e56dc;
}

.tnv-page .tnv-card__badge {
	top: 18px;
	left: auto;
	inset-inline-end: clamp(24px, 3vw, 40px);
	transform: none;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f1e9fd;
	color: #6c3bbe;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: normal;
}

.tnv-page .tnv-card__name {
	font-size: 1.125rem;
	font-weight: 500;
}

.tnv-page .tnv-card__price {
	font-weight: 500;
	letter-spacing: -0.02em;
}

.tnv-page .tnv-card__selector-label,
.tnv-page .tnv-card__features-label {
	color: var(--pr-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.tnv-page .tnv-billing__btn[aria-checked="true"] {
	color: #6c3bbe;
}

/* Buttons: the site's rounded buttons */
.tnv-page .tnv-card__cta {
	min-height: 48px;
	border-color: #d4d5db;
	font-size: 1rem;
	font-weight: 500;
}

.tnv-page .tnv-card__cta:hover {
	border-color: #a9aab3;
	background: var(--pr-soft);
}

.tnv-page .tnv-card--featured .tnv-card__cta {
	background: #8e56dc;
}

.tnv-page .tnv-card--featured .tnv-card__cta:hover {
	background: #7b3bd6;
}

.tnv-page .tnv-card__features,
.tnv-page .tnv-card__features-group {
	border-top: 1px dashed var(--pr-line); /* taste-skill-ignore: dashed rules from the site design */
}

.tnv-page .tnv-card__features-divider {
	background: var(--pr-line);
}

.tnv-page .tnv-feat-icon {
	border: 0;
	border-radius: 50%;
	background: #8e56dc;
}

.tnv-page .tnv-feat-icon svg {
	stroke: #ffffff;
}

.tnv-page .tnv-feat-icon--addon {
	border: 1px dashed #8e56dc;
	background: transparent;
}

.tnv-page .tnv-feat-icon--addon svg {
	stroke: #7b3bd6;
}

/* ---------- Section headings: the site's two-tone headings ---------- */

.tnv-page .tnv-compare__heading h2,
.tnv-page .tnv-steps__heading h2,
.tnv-page .tnv-faq__heading h2 {
	font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.25rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.tnv-page .tnv-compare__heading p,
.tnv-page .tnv-steps__heading p,
.tnv-page .tnv-faq__heading p {
	font-size: 1.0625rem;
}

/* ---------- Comparison table ---------- */

.tnv-page .tnv-compare {
	padding: var(--pr-gap) 0;
	background: #ffffff;
}

.tnv-page .tnv-compare__wrap,
.tnv-page .tnv-compare__scroll {
	border-radius: 0;
}

.tnv-page .tnv-compare__wrap {
	border-color: var(--pr-line);
}

.tnv-page .tnv-compare__table thead th:first-child,
.tnv-page .tnv-compare__table thead th:last-child {
	border-radius: 0;
}

.tnv-page .tnv-compare__table thead th:not(:first-child),
.tnv-page .tnv-compare__table tbody td:not(:first-child) {
	border-inline-start: 1px solid var(--pr-line);
}

.tnv-page .tnv-compare__col-name,
.tnv-page .tnv-compare__table thead th {
	font-weight: 500;
}

.tnv-page .tnv-compare__col-price {
	font-weight: 500;
}

.tnv-page .tnv-compare__group-row td {
	background: var(--pr-soft);
	color: var(--pr-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.tnv-page .tnv-compare__th--featured {
	background: #ffffff;
	box-shadow: inset 0 3px 0 #8e56dc;
}

.tnv-page .tnv-compare__th--featured::after {
	content: none;
}

.tnv-page .tnv-compare__fade {
	border-radius: 0;
	background: linear-gradient(to top, #ffffff 15%, rgba(255, 255, 255, 0) 100%);
}

.tnv-page .tnv-compare__expand {
	min-height: 44px;
	border-color: #d4d5db;
	color: var(--pr-ink);
	font-weight: 500;
}

.tnv-page .tnv-check-dark {
	border-radius: 50%;
}

.tnv-page .tnv-addon-badge {
	font-weight: 500;
}

/* ---------- Customer logos (the shared grid) ---------- */

.tnv-page .pr-logos {
	padding: 0;
}

.tnv-page .pr-logos .acn {
	background: transparent;
}

.tnv-page .pr-logos .hp-marquee--grid .hp-marquee__window {
	border-bottom: 1px solid var(--pr-line);
}

/* ---------- Steps: one ruled list ---------- */

.tnv-page .tnv-steps {
	margin: 0;
	padding: var(--pr-gap) 0;
}

.tnv-page .tnv-steps__heading {
	margin-bottom: 40px;
}

.tnv-page .tnv-steps__group-title {
	color: #7b3bd6;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.tnv-page .tnv-steps__list {
	gap: 0;
	max-width: 920px;
}

.tnv-page .tnv-steps__item {
	margin-top: -1px;
	padding: 26px clamp(20px, 3vw, 36px);
	border: 1px solid var(--pr-line);
	border-radius: 0;
}

.tnv-page .tnv-steps__item:hover {
	border-color: var(--pr-line);
	background: var(--pr-soft);
}

.tnv-page .tnv-steps__item:not(:last-child)::after {
	content: none;
}

.tnv-page .tnv-steps__num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
}

.tnv-page .tnv-steps__title {
	font-size: 1.125rem;
	font-weight: 500;
}

.tnv-page .tnv-steps__icon {
	border-radius: 10px;
	background: #f1e9fd;
}

/* ---------- Closing call to action: the site's dark card ---------- */

.tnv-page .tnvcta-section {
	--tnvcta-card: #2c2b36;
	--tnvcta-ink: #ffffff;
	--tnvcta-body: rgba(255, 255, 255, 0.72);
	--tnvcta-radius: clamp(20px, 3vw, 32px);
	padding: 0;
}

.tnv-page .tnvcta-card {
	width: var(--pr-frame);
	max-width: none;
	min-height: 520px;
}

.tnv-page .tnvcta-headline {
	font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.tnv-page .tnvcta-accent {
	color: rgba(255, 255, 255, 0.72);
	font-style: normal;
	font-weight: 500;
}

.tnv-page .tnvcta-sub {
	font-weight: 400;
}

.tnv-page .tnvcta-btn {
	min-height: 48px;
	padding: 12px 26px;
	font-size: 1rem;
	font-weight: 500;
}

.tnv-page .tnvcta-btn--primary:hover {
	background: #7b3bd6;
}

.tnv-page .tnvcta-btn:focus-visible {
	outline-color: #c9a8ff;
}

/* ---------- FAQ: one ruled list ---------- */

.tnv-page .tnv-faq {
	margin: 0;
	padding: var(--pr-gap) 0;
}

.tnv-page .tnv-faq__list {
	gap: 0;
	max-width: 760px;
}

.tnv-page .tnv-faq__item {
	margin-top: -1px;
	border: 1px solid var(--pr-line);
	border-radius: 0;
}

.tnv-page .tnv-faq__item.is-open {
	border-color: var(--pr-line);
}

.tnv-page .tnv-faq__q {
	min-height: 64px;
	font-size: 1.0625rem;
	font-weight: 500;
}

.tnv-page .tnv-faq__q:hover {
	background: var(--pr-soft);
}

.tnv-page .tnv-faq__q:focus-visible {
	border-radius: 0;
}

.tnv-page .tnv-faq__icon {
	border-radius: 50%;
}

.tnv-page .tnv-faq__a {
	font-size: 1rem;
	line-height: 1.7;
}

.tnv-page .tnv-faq__a a {
	color: #7b3bd6;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.tnv-page .tnv-category {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnv-page .tnv-category__intro {
		position: static;
		padding: 36px var(--pr-pad);
		border-bottom: 1px solid var(--pr-line);
	}

	.tnv-page .tnv-cards-wrap {
		border-inline-start: 0;
	}
}

@media (max-width: 767px) {
	.tnv-page .tnv-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.tnv-page .tnvcta-card {
		min-height: 0;
	}
}

/* The yearly saving tag: 4.5:1 or better on its grey */
.tnv-page .tnv-billing__save {
	background: #e6e5ec;
	color: #4a4858;
}

/* Add-on tags in the comparison table: the deeper purple, readable on the featured column's tint */
.tnv-page .tnv-addon-badge {
	border-color: #7b3bd6;
	color: #6c3bbe;
}

/* The intro's feature rows: even, compact lines (the list item inherited the theme's 18.5px text and 31px line) */
.tnv-page .tnv-why__item,
.tnv-page .tnv-why__item > span:not(.tnv-why__icon) {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tnv-page .tnv-why__title,
.tnv-page .tnv-why__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.tnv-page .tnv-why {
	gap: 18px;
}
