/* ------------------------------------------------------------------ */
/* KTT Technology -- Pricing page.                                     */
/* An editorial, gallery-style treatment of the pricing tables that    */
/* matches the display-serif / blue-accent language introduced on      */
/* website-design.css. Content and prices are unchanged; only the      */
/* presentation is reworked into cards and a bundle band.              */
/* ------------------------------------------------------------------ */

.pricing-page {
	--p-blue: #0878d1;
	--p-ink: #1f2831;
	--p-muted: #65717c;
	--p-paper: #ffffff;
	--p-tint: #f3f6f8;
	--p-line: rgba(31, 40, 49, .14);
	--p-serif: Georgia, "Times New Roman", serif;
}

.pricing-main {
	background: var(--p-paper);
	color: var(--p-ink);
	text-transform: uppercase;
}

.pricing-main p,
.pricing-main li,
.pricing-main summary {
	letter-spacing: .02em;
}

.pricing-main .button {
	font-family: inherit;
}

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

.pricing-hero {
	position: relative;
	padding: clamp(4rem, 8vw, 8.5rem) clamp(1.5rem, 7vw, 8rem) clamp(3rem, 6vw, 6rem);
	overflow: hidden;
	background:
		linear-gradient(90deg, rgba(8, 120, 209, .07) 1px, transparent 1px) 0 0 / 70px 70px,
		linear-gradient(rgba(8, 120, 209, .07) 1px, transparent 1px) 0 0 / 70px 70px,
		#fff;
}

.pricing-hero::before {
	content: "";
	position: absolute;
	right: -12rem;
	top: -16rem;
	width: clamp(420px, 46vw, 760px);
	aspect-ratio: 1;
	border: clamp(60px, 8vw, 120px) solid rgba(8, 120, 209, .07);
	border-radius: 50%;
	pointer-events: none;
}

.pricing-hero > * {
	position: relative;
	z-index: 1;
}

.pricing-eyebrow {
	margin: 0 0 1rem;
	color: var(--p-blue);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.pricing-hero h1 {
	margin: 0;
	color: var(--p-blue);
	font-family: var(--p-serif);
	font-size: clamp(4rem, 9vw, 9.5rem);
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .82;
	text-transform: uppercase;
}

.pricing-hero .pricing-lead {
	max-width: 46rem;
	margin: 1.75rem 0 0;
	color: var(--p-muted);
	font-size: clamp(1rem, 1.25vw, 1.2rem);
	line-height: 1.7;
}

.pricing-jump {
	margin: 2.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.pricing-jump a {
	padding: .6rem 1.15rem;
	display: inline-block;
	border: 1px solid var(--p-line);
	border-radius: 999px;
	color: var(--p-ink);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pricing-jump a:hover,
.pricing-jump a:focus-visible {
	background: var(--p-ink);
	border-color: var(--p-ink);
	color: #fff !important;
}

/* ---- Sections ------------------------------------------------- */

.pricing-section {
	padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 6vw, 6rem);
}

.pricing-section--tint {
	background: var(--p-tint);
	border-top: 1px solid var(--p-line);
	border-bottom: 1px solid var(--p-line);
}

.pricing-section > header {
	max-width: 60rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.pricing-section > header p {
	margin: 0 0 .85rem;
	color: var(--p-blue);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.pricing-section > header h2 {
	margin: 0;
	color: var(--p-ink);
	font-family: var(--p-serif);
	font-size: clamp(1.9rem, 3.4vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.1;
	text-transform: uppercase;
}

#website-packages-title {
	color: #fff;
}

.pricing-section > header .pricing-section-note {
	max-width: 44rem;
	margin: 1.1rem auto 0;
	color: var(--p-muted);
	font-size: .95rem;
	letter-spacing: .02em;
	line-height: 1.65;
	font-weight: 400;
}

/* ---- Card grid ---------------------------------------------- */

.pricing-grid {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.6rem);
	align-items: stretch;
}

.pricing-grid--tri {
	max-width: 1080px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-card {
	position: relative;
	min-width: 0;
	height: 100%;
	padding: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.5rem, 2.2vw, 2.1rem);
	display: flex;
	flex-direction: column;
	background: var(--p-paper);
	border: 1px solid var(--p-line);
	box-shadow: 0 14px 34px rgba(31, 40, 49, .07);
	transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}

.pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 52px rgba(31, 40, 49, .13);
}

.pricing-card__tier {
	margin: 0;
	color: var(--p-ink);
	font-family: var(--p-serif);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.3;
	text-transform: uppercase;
}

.pricing-card__price {
	margin: 1.1rem 0 .2rem;
	color: var(--p-blue);
	font-family: var(--p-serif);
	font-size: clamp(2.35rem, 3vw, 3rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}

.pricing-card__price-prefix {
	margin-bottom: .35rem;
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
}

.pricing-card__price-line {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	white-space: nowrap;
}

.pricing-card__tax {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: .32em;
	font-weight: 700;
	letter-spacing: .08em;
}

.pricing-card__price small {
	display: block;
	margin-top: .55rem;
	color: var(--p-muted);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.pricing-card__renewal {
	margin-top: .55rem;
	display: block;
	color: var(--p-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.45;
}

.pricing-card__rule {
	margin: 1.5rem 0 0;
	border: 0;
	border-top: 1px solid var(--p-line);
}

.pricing-card ul {
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.pricing-card ul li {
	position: relative;
	margin: 0 0 .75rem;
	padding-left: 1.6rem;
	color: var(--p-ink);
	font-size: .82rem;
	letter-spacing: .04em;
	line-height: 1.6;
}

.pricing-card ul li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: .05em;
	color: var(--p-blue);
	font-weight: 700;
}

.pricing-card__extras {
	margin: 1.35rem 0 0;
	border-top: 1px solid var(--p-line);
}

.pricing-card__extras h4 {
	margin: 0;
	padding: .95rem 0 .35rem;
	color: var(--p-muted);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.pricing-card__extras p {
	margin: .35rem 0 .6rem;
	color: var(--p-muted);
	font-size: .72rem;
	letter-spacing: .04em;
	line-height: 1.7;
}

.pricing-card__cta {
	margin: auto 0 0;
	padding-top: 1.6rem;
}

.pricing-card__cta .button {
	width: 100%;
}

.pricing-card:not(.pricing-card--featured) .pricing-card__cta {
	margin: 1rem 0 0;
	padding-top: 0;
}

.pricing-card:not(.pricing-card--featured) .pricing-card__cta .button {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--p-blue);
	color: var(--p-blue);
}

.pricing-card:not(.pricing-card--featured) .pricing-card__cta .button:hover,
.pricing-card:not(.pricing-card--featured) .pricing-card__cta .button:focus-visible {
	background: var(--p-blue);
	box-shadow: inset 0 0 0 2px var(--p-blue);
	color: #fff !important;
}

.pricing-card--featured .pricing-card__cta .button {
	background: #fff;
	box-shadow: inset 0 0 0 2px #fff;
	color: #050b12;
}

.pricing-card--featured .pricing-card__cta .button:hover,
.pricing-card--featured .pricing-card__cta .button:focus-visible {
	background: #fff;
	box-shadow: inset 0 0 0 2px #fff;
	color: #050b12 !important;
}

/* Featured card */

.pricing-card--featured {
	background: #050b12;
	border-color: #050b12;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.pricing-card--featured .pricing-card__tier,
.pricing-card--featured ul li {
	color: #fff;
}

.pricing-card--featured .pricing-card__price {
	color: #fff;
}

.pricing-card--featured .pricing-card__price small,
.pricing-card--featured .pricing-card__renewal,
.pricing-card--featured .pricing-card__extras h4,
.pricing-card--featured .pricing-card__extras p {
	color: rgba(255, 255, 255, .62);
}

.pricing-card--featured .pricing-card__rule,
.pricing-card--featured .pricing-card__extras {
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.pricing-card--featured ul li::before {
	color: #6cc0ff;
}

.pricing-card__flag {
	position: absolute;
	top: -.75rem;
	left: clamp(1.5rem, 2.2vw, 2.1rem);
	padding: .4rem .85rem;
	background: var(--p-blue);
	color: #fff;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---- Bundle band ------------------------------------------- */

.pricing-bundles {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--p-line);
	background: var(--p-paper);
	box-shadow: 0 14px 34px rgba(31, 40, 49, .07);
}

.pricing-bundle {
	padding: clamp(2rem, 3.5vw, 3.25rem) 1.5rem;
	text-align: center;
	border-right: 1px solid var(--p-line);
}

.pricing-bundle:last-child {
	border-right: 0;
}

.pricing-bundle__count {
	display: block;
	color: var(--p-ink);
	font-family: var(--p-serif);
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

.pricing-bundle__label {
	display: block;
	margin-top: .5rem;
	color: var(--p-muted);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.pricing-bundle__price {
	display: block;
	margin-top: 1.25rem;
	color: var(--p-blue);
	font-family: var(--p-serif);
	font-size: clamp(1.6rem, 2.2vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ---- Closing note + CTA ----------------------------------- */

.pricing-closing {
	max-width: 44rem;
	margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
	text-align: center;
	color: var(--p-muted);
	font-size: 1rem;
	line-height: 1.7;
}

.pricing-cta {
	padding: clamp(4rem, 8vw, 7.5rem) clamp(1.5rem, 8vw, 9rem);
	background: var(--p-ink);
	text-align: center;
}

.pricing-cta p {
	margin: 0 0 1rem;
	color: #6cc0ff;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.pricing-cta h2 {
	max-width: 60rem;
	margin: 0 auto 2rem;
	color: #fff;
	font-family: var(--p-serif);
	font-size: clamp(1.9rem, 3.8vw, 4rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.pricing-cta > div {
	display: flex;
	justify-content: center;
	gap: .85rem;
	flex-wrap: wrap;
}

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

@media screen and (min-width: 1281px) {

	#website-packages .pricing-card:not(.pricing-card--featured) .pricing-card__tier {
		min-height: 3em;
	}

	#website-packages .pricing-card:not(.pricing-card--featured) ul {
		min-height: 11.5rem;
	}

	#website-packages .pricing-card:not(.pricing-card--featured) .pricing-card__extras {
		min-height: 13rem;
	}

}

@media screen and (max-width: 1280px) {

	.pricing-grid,
	.pricing-grid--tri {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media screen and (max-width: 900px) {

	.pricing-bundles {
		grid-template-columns: 1fr;
	}

	.pricing-bundle {
		border-right: 0;
		border-bottom: 1px solid var(--p-line);
	}

	.pricing-bundle:last-child {
		border-bottom: 0;
	}

}

@media screen and (max-width: 640px) {

	.pricing-hero {
		padding: 3.5rem 1.25rem 2.5rem;
	}

	.pricing-hero h1 {
		font-size: clamp(3.25rem, 20vw, 5rem);
		line-height: .9;
	}

	.pricing-grid,
	.pricing-grid--tri {
		grid-template-columns: 1fr;
	}

}

@media (prefers-reduced-motion: reduce) {

	.pricing-card,
	.pricing-jump a {
		transition: none;
	}

}