/* ======= Base / Variables ========
====================================*/

/* --- variables --- */

:root {
	--bg: #f5f2e8;
	--ink: #111111;
	--yellow: #f5e400;
	--pink: #ff5c8a;
	--blue: #3d5afe;
	--white: #ffffff;
	--muted: #5a5a52;
	--wrap: 1160px;
	--pad: clamp(18px, 5vw, 56px);
}

/* --- reset --- */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	margin: 0;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

p {
	margin: 0;
}

a {
	color: var(--ink);
	text-decoration: none;
}

img {
	max-width: 100%;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- shared layout helpers --- */

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad);
}

.section {
	padding: 72px 0;
	border-bottom: 3px solid var(--ink);
}

.section-white {
	background: var(--white);
}

.section-yellow {
	background: var(--yellow);
}

.section-dark {
	background: var(--ink);
	color: var(--white);
}

.section-head {
	max-width: 62ch;
	margin-bottom: 38px;
}

.section-head h2 {
	font-size: clamp(28px, 4vw, 46px);
	margin: 16px 0 0;
}

.section-head p {
	font-size: 16.5px;
	line-height: 1.6;
	margin-top: 18px;
	font-weight: 500;
}

.section-dark .section-head p {
	color: #cfcfc6;
}

.box {
	border: 3px solid var(--ink);
	background: var(--white);
}

.stamp {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 6px 12px;
	border: 3px solid var(--ink);
	background: var(--white);
}

.stamp-yellow {
	background: var(--yellow);
}

.stamp-pink {
	background: var(--pink);
	color: var(--white);
}

.stamp-white {
	background: var(--white);
}

.grid {
	display: grid;
	gap: 18px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--yellow);
	border: 3px solid var(--ink);
	padding: 10px 16px;
	font-weight: 700;
	z-index: 999;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
}

/* --- buttons --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 15px 26px;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.btn-cta {
	background: var(--yellow);
	box-shadow: 6px 6px 0 var(--ink);
}

.btn-cta:hover {
	box-shadow: 3px 3px 0 var(--ink);
	transform: translate(3px, 3px);
}

.btn-pink {
	background: var(--pink);
	color: var(--white);
	box-shadow: 6px 6px 0 var(--ink);
}

.btn-pink:hover {
	box-shadow: 3px 3px 0 var(--ink);
	transform: translate(3px, 3px);
}

.btn-outline:hover {
	background: var(--ink);
	color: var(--white);
}

.btn-small {
	font-size: 13px;
	padding: 10px 18px;
}

.btn-block {
	width: 100%;
}

.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- shared layout helpers --- */

	.section {
		padding: 48px 0;
	}

	.section-head {
		margin-bottom: 26px;
	}

	.btn {
		font-size: 14px;
		padding: 13px 20px;
	}

}

/* ======= Header ========
============================*/

/* --- header bar --- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg);
	border-bottom: 3px solid var(--ink);
}

.site-header .header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* --- logo --- */

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}

.site-logo svg {
	width: 34px;
	height: 34px;
	display: block;
}

.site-logo .logo-accent {
	color: var(--pink);
}

/* --- navigation --- */

.site-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.site-nav a:not(.btn):hover {
	color: var(--pink);
}

/* --- mobile menu button --- */

.nav-toggle {
	display: none;
	width: 46px;
	height: 44px;
	padding: 0;
	border: 3px solid var(--ink);
	background: var(--white);
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 20px;
	height: 3px;
	margin: 3px auto;
	background: var(--ink);
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- navigation --- */

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--bg);
		border-bottom: 3px solid var(--ink);
		padding: 10px var(--pad) 20px;
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav a:not(.btn) {
		padding: 12px 0;
		border-bottom: 1px solid var(--ink);
	}

	.site-nav .btn {
		margin-top: 14px;
	}

	/* --- mobile menu button --- */

	.nav-toggle {
		display: block;
	}

}

/* ======= Hero ========
==========================*/

/* --- hero layout --- */

.hero {
	padding: 70px 0 56px;
	border-bottom: 3px solid var(--ink);
}

.hero .hero-inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 44px;
	align-items: start;
}

.hero h1 {
	font-size: clamp(38px, 6.2vw, 74px);
	margin-top: 20px;
}

.hero h1 .hero-kicker {
	display: block;
	font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 14px;
	color: var(--muted);
}

.hero h1 .hero-mark {
	background: var(--pink);
	color: var(--white);
	padding: 0 10px;
}

.hero .hero-lead {
	font-size: 17.5px;
	line-height: 1.6;
	margin: 24px 0 0;
	max-width: 50ch;
	font-weight: 500;
}

.hero .hero-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 32px;
}

.hero .hero-meta {
	margin-top: 26px;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted);
}

/* --- hero stats card --- */

.hero-card {
	padding: 22px;
	box-shadow: 8px 8px 0 var(--ink);
}

.card-title {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.05em;
	margin-bottom: 14px;
}

.hero-card .stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.hero-card .stat {
	border: 3px solid var(--ink);
	padding: 14px 10px;
	text-align: center;
}

.hero-card .stat .stat-value {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 26px;
	line-height: 1;
}

.hero-card .stat .stat-label {
	font-size: 11px;
	margin-top: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.hero-card .stat-yellow {
	background: var(--yellow);
}

.hero-card .stat-pink {
	background: var(--pink);
	color: var(--white);
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- hero layout --- */

	.hero .hero-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

}

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

	/* --- hero layout --- */

	.hero {
		padding: 44px 0 40px;
	}

	.hero .hero-buttons .btn {
		width: 100%;
	}

}

/* ======= Replaces Strip ========
====================================*/

/* --- strip wrap --- */

.replaces-strip {
	background: var(--ink);
	color: var(--white);
	border-bottom: 3px solid var(--ink);
	padding: 18px 0;
	overflow: hidden;
}

.replaces-strip .strip-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.replaces-strip .strip-label {
	background: var(--yellow);
	color: var(--ink);
	padding: 5px 10px;
	font-weight: 700;
}

.replaces-strip .strip-item {
	color: #d8d8d0;
}

.replaces-strip .strip-item::after {
	content: "/";
	margin-left: 14px;
	color: #5a5a52;
}

.replaces-strip .strip-item:last-child::after {
	content: "";
}

/* ======= Problem ========
=============================*/

/* --- problem cards --- */

.problem-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.problem-card {
	padding: 24px;
}

.problem-card .problem-num {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 30px;
	color: var(--pink);
	line-height: 1;
	margin-bottom: 12px;
}

.problem-card h3 {
	font-size: 16px;
	margin-bottom: 10px;
}

.problem-card p {
	font-size: 14px;
	line-height: 1.6;
}

/* ======= Comparison Table ========
======================================*/

/* --- table wrap --- */

.compare-wrap {
	border: 3px solid var(--ink);
	background: var(--white);
	overflow-x: auto;
}

.compare-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 14.5px;
}

.compare-table th,
.compare-table td {
	padding: 13px 18px;
	text-align: left;
	border-bottom: 1px solid var(--ink);
}

.compare-table thead th {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	border-bottom: 3px solid var(--ink);
}

.compare-table th + th,
.compare-table td + td {
	border-left: 3px solid var(--ink);
	text-align: center;
	width: 22%;
}

.compare-table .col-us {
	background: var(--yellow);
	font-weight: 700;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
	border-bottom: none;
}

.compare-table tbody th {
	font-weight: 600;
}

/* ======= Steps ========
===========================*/

/* --- step cards --- */

.steps-grid {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.step-card {
	padding: 24px;
}

.step-card .step-num {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 34px;
	color: var(--pink);
	line-height: 1;
	margin-bottom: 12px;
}

.step-card h3 {
	font-size: 15px;
	margin-bottom: 9px;
}

.step-card p {
	font-size: 13.5px;
	line-height: 1.6;
}

/* ======= Modules ========
=============================*/

/* --- filter buttons --- */

.module-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.module-filters .filter-btn {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 10px 16px;
	border: 3px solid var(--ink);
	background: var(--white);
	cursor: pointer;
}

.module-filters .filter-btn.is-active {
	background: var(--ink);
	color: var(--white);
}

/* --- module grid --- */

.modules-grid {
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: 14px;
}

.module-card {
	border: 3px solid var(--ink);
	background: var(--white);
	padding: 18px;
}

.module-card.is-hidden {
	display: none;
}

.module-card .module-icon {
	display: block;
	width: 58px;
	height: 58px;
	border: 3px solid var(--ink);
	background: var(--white);
	margin-bottom: 14px;
}

.module-card h3 {
	font-size: 14.5px;
	margin-bottom: 8px;
}

.module-card p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--muted);
}

.module-card .module-tag {
	display: inline-block;
	margin-top: 12px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border: 2px solid var(--ink);
}

/* ======= Deep Dive ========
===============================*/

/* --- accordion list --- */

.deep-list {
	border: 3px solid var(--ink);
	background: var(--white);
}

.deep-item {
	border-bottom: 3px solid var(--ink);
}

.deep-item:last-child {
	border-bottom: none;
}

.deep-item .deep-heading {
	margin: 0;
	font-size: inherit;
}

.deep-item .deep-trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 15px;
	text-transform: uppercase;
	text-align: left;
	padding: 18px 20px;
	background: var(--white);
	border: none;
	cursor: pointer;
	color: var(--ink);
}

.deep-item .deep-trigger:hover {
	background: var(--yellow);
}

.deep-item .deep-trigger .deep-icon {
	display: block;
	width: 38px;
	height: 38px;
	border: 3px solid var(--ink);
	background: var(--white);
	flex: 0 0 auto;
}

.deep-item .deep-trigger .deep-name {
	flex: 1 1 auto;
}

.deep-item .deep-trigger .deep-sign {
	font-size: 22px;
	line-height: 1;
	flex: 0 0 auto;
}

.deep-item .deep-panel {
	display: none;
	padding: 0 20px 22px;
	border-top: 1px solid var(--ink);
}

.deep-item.is-open .deep-panel {
	display: block;
}

.deep-item.is-open .deep-trigger {
	background: var(--yellow);
}

.deep-item .deep-panel .deep-intro {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 18px 0 14px;
	font-weight: 500;
}

.deep-item .deep-panel ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 8px 26px;
}

.deep-item .deep-panel li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--muted);
}

.deep-item .deep-panel li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 9px;
	height: 9px;
	background: var(--pink);
}

/* ======= Performance ========
=================================*/

/* --- perf cards --- */

.perf-grid {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.perf-card {
	border: 3px solid var(--white);
	padding: 24px;
}

.perf-card h3 {
	font-size: 15px;
	margin-bottom: 10px;
	color: var(--yellow);
}

.perf-card p {
	font-size: 14px;
	line-height: 1.6;
	color: #cfcfc6;
}

/* ======= Free vs Pro ========
=================================*/

/* --- plan table --- */

.plans-wrap {
	border: 3px solid var(--ink);
	background: var(--white);
	overflow-x: auto;
}

.plans-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 14.5px;
}

.plans-table th,
.plans-table td {
	padding: 13px 18px;
	text-align: left;
	border-bottom: 1px solid var(--ink);
}

.plans-table thead th {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	border-bottom: 3px solid var(--ink);
}

.plans-table th + th,
.plans-table td + td {
	border-left: 3px solid var(--ink);
	text-align: center;
	width: 20%;
}

.plans-table .col-pro {
	background: var(--pink);
	color: var(--white);
}

.plans-table td.cell-pro {
	background: #fff0f4;
	font-weight: 700;
}

.plans-table tbody tr:last-child th,
.plans-table tbody tr:last-child td {
	border-bottom: none;
}

/* ======= Downloader Tool ========
=====================================*/

/* --- tool wrap --- */

.tool-wrap {
	border: 3px solid var(--ink);
	background: var(--white);
	box-shadow: 10px 10px 0 var(--ink);
	padding: 26px;
}

/* --- tool type switch --- */

.tool-types {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.tool-types .type-btn {
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 10px 18px;
	border: 3px solid var(--ink);
	background: var(--white);
	cursor: pointer;
}

.tool-types .type-btn.is-active {
	background: var(--ink);
	color: var(--white);
}

/* --- tool search form --- */

.tool-form {
	display: flex;
	gap: 12px;
}

.tool-form .tool-input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	padding: 14px 16px;
	border: 3px solid var(--ink);
	background: var(--bg);
	color: var(--ink);
}

.tool-form .tool-input:focus {
	outline: 3px solid var(--pink);
	outline-offset: 2px;
}

.tool-hint {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	margin-top: 12px;
}

/* --- tool status --- */

.tool-status {
	display: none;
	margin-top: 18px;
	border: 3px solid var(--ink);
	background: var(--yellow);
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 600;
}

.tool-status.is-visible {
	display: block;
}

.tool-status.is-error {
	background: var(--pink);
	color: var(--white);
}

/* --- tool results --- */

.tool-results {
	margin-top: 20px;
	display: grid;
	gap: 14px;
}

.result-card {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 16px;
	border: 3px solid var(--ink);
	background: var(--bg);
	padding: 16px;
}

.result-card .result-icon {
	width: 62px;
	height: 62px;
	border: 3px solid var(--ink);
	background: var(--white);
	object-fit: cover;
}

.result-card .result-name {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	line-height: 1.15;
}

.result-card .result-slug {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	margin-top: 4px;
}

.result-card .result-desc {
	font-size: 13.5px;
	line-height: 1.55;
	margin-top: 10px;
	color: var(--muted);
}

.result-card .result-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.result-card .result-fact {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	border: 2px solid var(--ink);
	background: var(--white);
}

.result-card .result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.result-card .result-version {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 11px 12px;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	max-width: 190px;
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- tool wrap --- */

	.tool-wrap {
		padding: 18px;
		box-shadow: 6px 6px 0 var(--ink);
	}

	/* --- tool search form --- */

	.tool-form {
		display: block;
	}

	.tool-form .tool-input {
		width: 100%;
		margin-bottom: 12px;
	}

	.tool-form .btn {
		width: 100%;
	}

	/* --- tool results --- */

	.result-card {
		grid-template-columns: 1fr;
	}

	.result-card .result-version {
		max-width: 100%;
		width: 100%;
	}

	.result-card .result-actions .btn {
		width: 100%;
	}

}

/* ======= Use Cases ========
===============================*/

/* --- use case cards --- */

.usecase-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.usecase-card {
	padding: 24px;
}

.usecase-card h3 {
	font-size: 16px;
	margin-bottom: 12px;
}

.usecase-card p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

.usecase-card ul {
	margin-top: 14px;
}

.usecase-card li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 7px;
	font-weight: 600;
}

.usecase-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 9px;
	height: 9px;
	background: var(--yellow);
	border: 2px solid var(--ink);
}

/* ======= Testimonials ========
==================================*/

/* --- quote cards --- */

.quotes-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.quote-card {
	padding: 24px;
}

.quote-card .quote-text {
	font-size: 14.5px;
	line-height: 1.6;
	font-weight: 500;
	margin-bottom: 16px;
}

.quote-card .quote-author {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12.5px;
	letter-spacing: 0.03em;
}

.quote-card-yellow {
	background: var(--yellow);
}

/* ======= Pricing ========
=============================*/

/* --- price cards --- */

.pricing-grid {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.price-card {
	padding: 26px;
}

.price-card .price-name {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.price-card .price-value {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 40px;
	line-height: 1;
	margin: 14px 0;
}

.price-card .price-value .price-term {
	font-size: 14px;
	font-family: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
}

.price-card .price-rule {
	border: none;
	border-top: 3px solid var(--ink);
	margin: 0 0 14px;
}

.price-card ul {
	margin-bottom: 20px;
}

.price-card li {
	position: relative;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.5;
	margin-bottom: 8px;
}

.price-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 8px;
	height: 8px;
	background: var(--ink);
}

.price-card-featured {
	background: var(--pink);
	color: var(--white);
	box-shadow: 8px 8px 0 var(--ink);
}

.price-card-featured .price-rule {
	border-top-color: var(--white);
}

.price-card-featured li::before {
	background: var(--white);
}

.pricing-note {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-top: 22px;
	max-width: 80ch;
}

/* ======= Guarantee Strip ========
=====================================*/

/* --- guarantee items --- */

.guarantee-grid {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	text-align: center;
}

.guarantee-item .guarantee-value {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 28px;
	line-height: 1;
}

.guarantee-item .guarantee-label {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 8px;
	font-weight: 600;
}

/* ======= Requirements ========
==================================*/

/* --- spec list --- */

.spec-grid {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}

.spec-item {
	border: 3px solid var(--ink);
	background: var(--white);
	padding: 16px 18px;
}

.spec-item .spec-label {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.spec-item .spec-value {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	margin-top: 7px;
}

/* ======= Changelog ========
===============================*/

/* --- changelog list --- */

.changelog-list {
	border: 3px solid var(--ink);
	background: var(--white);
}

.changelog-item {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 20px;
	padding: 20px;
	border-bottom: 3px solid var(--ink);
}

.changelog-item:last-child {
	border-bottom: none;
}

.changelog-item .changelog-version {
	font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif;
	font-size: 17px;
	text-transform: uppercase;
}

.changelog-item .changelog-date {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 6px;
}

.changelog-item li {
	position: relative;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.6;
	margin-bottom: 6px;
	color: var(--muted);
}

.changelog-item li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	background: var(--pink);
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- changelog list --- */

	.changelog-item {
		grid-template-columns: 1fr;
		gap: 12px;
	}

}

/* ======= FAQ ========
=========================*/

/* --- faq accordion --- */

.faq-list {
	border: 3px solid var(--ink);
	background: var(--white);
}

.faq-item {
	border-bottom: 3px solid var(--ink);
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-item .faq-heading {
	margin: 0;
	font-size: inherit;
	text-transform: none;
}

.faq-item .faq-trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-align: left;
	padding: 17px 20px;
	background: var(--white);
	border: none;
	cursor: pointer;
	color: var(--ink);
}

.faq-item .faq-trigger:hover {
	background: var(--yellow);
}

.faq-item .faq-sign {
	font-size: 22px;
	line-height: 1;
	flex: 0 0 auto;
}

.faq-item .faq-panel {
	display: none;
	padding: 0 20px 20px;
}

.faq-item.is-open .faq-panel {
	display: block;
}

.faq-item.is-open .faq-trigger {
	background: var(--yellow);
}

.faq-item .faq-panel p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--muted);
	padding-top: 4px;
}

/* ======= Final CTA ========
===============================*/

/* --- cta block --- */

.final-cta {
	background: var(--ink);
	color: var(--white);
	text-align: center;
	padding: 64px 0;
}

.final-cta h2 {
	font-size: clamp(28px, 4.4vw, 46px);
	color: var(--white);
}

.final-cta p {
	margin: 18px auto 30px;
	font-size: 15.5px;
	max-width: 56ch;
	color: #cfcfc6;
}

.final-cta .cta-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ======= Footer ========
============================*/

/* --- footer layout --- */

.site-footer {
	background: var(--ink);
	color: #cfcfc6;
	border-top: 3px solid #333333;
}

.site-footer .footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 30px;
	padding: 48px 0 38px;
}

.site-footer .footer-brand .site-logo {
	color: var(--white);
	margin-bottom: 14px;
}

.site-footer .footer-brand p {
	font-size: 13.5px;
	line-height: 1.6;
	max-width: 42ch;
}

.site-footer h4 {
	font-size: 13px;
	color: var(--white);
	margin-bottom: 14px;
	letter-spacing: 0.04em;
}

.site-footer li {
	margin-bottom: 9px;
	font-size: 13.5px;
}

.site-footer a {
	color: #cfcfc6;
}

.site-footer a:hover {
	color: var(--yellow);
}

/* --- footer bottom --- */

.site-footer .footer-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 0;
	border-top: 1px solid #333333;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- footer layout --- */

	.site-footer .footer-top {
		grid-template-columns: 1fr 1fr;
	}

}

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

	/* --- footer layout --- */

	.site-footer .footer-top {
		grid-template-columns: 1fr;
		gap: 24px;
	}

}

/* ======= Buy Now Modal ========
==================================*/

/* --- modal wrap --- */

.infinity23-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 900;
}

.infinity23-modal.infinity23-modal-open {
	display: block;
}

body.infinity23-modal-locked {
	overflow: hidden;
}

/* --- backdrop --- */

.infinity23-modal .infinity23-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(17, 17, 17, 0.7);
}

/* --- modal box --- */

.infinity23-modal .infinity23-modal-box {
	position: relative;
	max-width: 520px;
	width: calc(100% - 36px);
	margin: 0 auto;
	top: 50%;
	transform: translateY(-50%);
	max-height: 92vh;
	overflow-y: auto;
	padding: 30px;
	border: 3px solid var(--ink);
	background: var(--bg);
	box-shadow: 10px 10px 0 var(--ink);
}

.infinity23-modal .infinity23-modal-box h2 {
	margin: 14px 0 12px 0;
	font-size: 26px;
}

.infinity23-modal .infinity23-modal-box p {
	margin: 0 0 14px 0;
}

/* --- close button --- */

.infinity23-modal .infinity23-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	cursor: pointer;
}

/* --- picked package line --- */

.infinity23-modal .infinity23-modal-package {
	font-weight: 700;
	padding: 8px 12px;
	border: 3px solid var(--ink);
	background: var(--yellow);
}

.infinity23-modal .infinity23-modal-package:empty {
	display: none;
}

/* --- form --- */

.infinity23-modal .infinity23-modal-form label {
	display: block;
	margin: 0 0 6px 0;
	font-weight: 700;
}

.infinity23-modal .infinity23-modal-form input[type="email"] {
	display: block;
	width: 100%;
	margin: 0 0 16px 0;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	border: 3px solid var(--ink);
	background: var(--white);
	color: var(--ink);
}

/* --- honeypot field, hidden from real visitors --- */

.infinity23-modal .infinity23-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- answer message --- */

.infinity23-modal .infinity23-modal-message {
	margin: 14px 0 0 0;
	font-weight: 700;
}

.infinity23-modal .infinity23-modal-message:empty {
	display: none;
}

.infinity23-modal .infinity23-modal-message-ok {
	padding: 10px 12px;
	border: 3px solid var(--ink);
	background: var(--yellow);
}

.infinity23-modal .infinity23-modal-message-bad {
	padding: 10px 12px;
	border: 3px solid var(--ink);
	background: var(--pink);
	color: var(--white);
}

/* --- small print --- */

.infinity23-modal .infinity23-modal-small {
	margin: 14px 0 0 0;
	font-size: 13px;
	color: var(--muted);
}

/* ---------------------------------
----------------- Mobile
--------------------------------- */

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

	/* --- modal box --- */

	.infinity23-modal .infinity23-modal-box {
		padding: 22px 18px;
		box-shadow: 6px 6px 0 var(--ink);
	}

	.infinity23-modal .infinity23-modal-box h2 {
		font-size: 21px;
	}

}