/* ==========================================================================
	 LUT Generator — sale page
	 IWLTBAP · styles aligned with LUTs Previewer (previewer.iwltbap.com)
	 ========================================================================== */

:root {
	/* Ground & surfaces */
	--bg: #0A1120;
	--bg-alt: #0C1424;
	--panel: #0F182B;
	--panel-raised: #152038;
	--card-pricing: #121A28;
	--line: #1B2740;
	--line-card: #1E2B46;
	--line-strong: #2A3A5C;
	--line-inner: #22304A;

	/* Text */
	--text: #F1F4F9;
	--text-soft: #E3E8F0;
	--text-body: #D6DDEA;
	--text-on-hero: #C3CCD9;
	--text-muted: #9AA6BC;
	--text-muted-2: #A3AEC0;

	/* Accents */
	--accent-light: #A9CCFF;
	--green: #00B040;
	--teal: #4CC9A6;
	--amber: #E5B13A;
	--menu-active: #4F6A99;

	/* Footer (light) */
	--footer-bg: #F3F5F8;
	--footer-text: #3C4655;
	--footer-text-2: #4A5566;
	--footer-strong: #151B24;
	--footer-line: #DDE2E9;
	--footer-faint: #5A6575;

	/* Type */
	--font-display: "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;

	/* Layout */
	--container: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

a { color: var(--accent-light); transition: color 0.15s; }
a:hover { color: #FFFFFF; }
a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; border-radius: 4px; }

::selection {
	color: #fff;
	background-color: #00b040;
}

.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--bg);
	z-index: 999;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

.section { border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-alt); }
.section__inner {
	padding-top: 96px;
	padding-bottom: 96px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.section-head--wide { max-width: 760px; }

.eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-light);
}

.h2 {
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.lead { font-size: 18px; color: var(--text-muted); }

/* ---------- Buttons (from LUTs Previewer) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
	color: #FFFFFF;
	font-weight: 700;
	letter-spacing: -0.25px;
	background: linear-gradient(#2F7EF0 0%, #0B56CC 100%);
	box-shadow: 0 8px 24px rgba(40, 120, 255, 0.3), inset 0 1px 0 rgba(200, 228, 255, 0.4);
}
.btn--primary:hover {
	color: #FFFFFF;
	box-shadow: 0 12px 30px rgba(40, 120, 255, 0.45), inset 0 1px 0 rgba(200, 228, 255, 0.4);
}

.btn--hero {
	min-height: 56px;
	padding: 16px 30px;
	gap: 10px;
	font-size: 17px;
	background: linear-gradient(#3D8BFF 0%, #0B5CE0 100%);
	box-shadow: 0 0 0 4px rgba(168, 212, 255, 0.28), 0 14px 40px rgba(40, 120, 255, 0.55), inset 0 1px 0 rgba(200, 228, 255, 0.55);
}
.btn--hero:hover {
	box-shadow: 0 0 0 6px rgba(168, 212, 255, 0.32), 0 18px 50px rgba(40, 120, 255, 0.7), inset 0 1px 0 rgba(200, 228, 255, 0.55);
}

.btn--ghost {
	color: #FFFFFF;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn--ghost:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }

.btn--small { min-height: 44px; padding: 10px 22px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }

.btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.spectrum {
	height: 3px;
	background: linear-gradient(90deg, #f2a35e, #e05a4f 25%, #a046d2 45%, #5483d6 65%, #3fd0c9 85%, #e9eef5);
}

/* ---------- Pills ---------- */
.badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--green);
	padding: 5px 12px;
	border-radius: 99px;
}

.chip {
	font-size: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--panel-raised);
	color: var(--text-body);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Header + Hero ---------- */
.hero-wrap {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(55% 45% at 12% 8%, rgba(242, 140, 80, 0.55), rgba(242, 140, 80, 0) 70%),
		radial-gradient(45% 40% at 88% 4%, rgba(170, 70, 210, 0.55), rgba(170, 70, 210, 0) 70%),
		radial-gradient(60% 50% at 55% 30%, rgba(84, 131, 214, 0.55), rgba(84, 131, 214, 0) 70%),
		radial-gradient(35% 35% at 30% 40%, rgba(63, 208, 201, 0.35), rgba(63, 208, 201, 0) 70%),
		var(--bg);
}
.hero-wrap::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 420px;
	background: linear-gradient(180deg, rgba(10, 17, 32, 0) 0%, var(--bg) 85%);
	pointer-events: none;
}

.site-header { position: relative; z-index: 2; }
.nav {
	position: fixed;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 18px;
	padding-bottom: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text);
}
.brand:hover { color: var(--text); }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand span { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

.nav__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 26px;
	font-size: 14px;
	font-weight: 500;
}
.nav__links a:not(.btn) { color: var(--text-soft); text-decoration: none; padding: 10px 0; }
.nav__links a:not(.btn):hover { color: #FFFFFF; }

.hero {
	position: relative;
	z-index: 1;
	padding-top: 168px;
	padding-bottom: 96px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
}
.hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hero__meta-text { font-size: 14px; color: var(--text-soft); }
.hero h1 {
	font-size: clamp(42px, 6vw, 68px);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.hero__lead { font-size: 19px; color: var(--text-on-hero); max-width: 540px; }
.hero__lead strong { color: var(--text); font-weight: 600; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero__platforms { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--text-on-hero); }
.hero__platforms span { display: inline-flex; align-items: center; gap: 8px; }
.hero__visual { flex: 1 1 520px; min-width: 0; display: flex; justify-content: center; }
.hero__visual img { width: 100%; max-width: 620px; }

/* ---------- Key facts ---------- */
.facts { padding-bottom: 96px; }
.facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
}
.fact { background: var(--panel); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.fact__value { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.fact__label { font-size: 14px; color: var(--text-muted); }

/* ---------- Cards ---------- */
.card {
	background: var(--panel);
	border: 1px solid var(--line-card);
	border-radius: 18px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.card h3 { font-size: 22px; font-weight: 700; }
.card p { font-size: 15px; color: var(--text-muted); }
.card__body { display: flex; flex-direction: column; gap: 8px; }
.step-label { font-size: 13px; font-weight: 700; color: var(--accent-light); }

/* ---------- 01 Workflow ---------- */
#workflow {
	background: radial-gradient(70% 60% at 85% 0%, rgba(84, 131, 214, 0.35), rgba(84, 131, 214, 0) 70%), radial-gradient(50% 50% at 0% 100%, rgba(63, 208, 201, 0.12), rgba(63, 208, 201, 0) 70%), linear-gradient(320deg, #0a1730 0%, #0b2552 100%);
}

#workflow .card {
	background: rgba(255, 255, 255, 0.045);
	border-color: rgba(140, 185, 255, 0.2);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.hald {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	border: 1px solid var(--line-inner);
	image-rendering: pixelated;
}
.lut-files {
	aspect-ratio: 1;
	border-radius: 10px;
	border: 1px solid var(--line-inner);
	background: var(--bg);
	background: rgb(10 17 32 / 55%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 24px;
}
.lut-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--panel-raised);
	border: 1px solid var(--line-strong);
}
.lut-file__name { font-size: 15px; font-weight: 600; flex: 1; }
.lut-file__size { font-size: 13px; color: var(--text-muted); }

/* ---------- 02 Convert ---------- */
.split {
	padding-top: 96px;
	padding-bottom: 96px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
}
.split__media { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.split__media img { width: 100%; max-width: 520px; }
.split__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.features { display: flex; flex-direction: column; gap: 22px; }
.feature { display: flex; gap: 16px; }
.feature__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--panel-raised);
	display: flex;
	align-items: center;
	justify-content: center;
}
.feature__text { display: flex; flex-direction: column; gap: 4px; }
.feature__text h3 { font-size: 18px; font-weight: 700; }
.feature__text p { font-size: 15px; color: var(--text-muted); }

/* ---------- 03 Use cases ---------- */
#uses {
	/*background: radial-gradient(70% 60% at 85% 0%, rgba(84, 131, 214, 0.35), rgba(84, 131, 214, 0) 70%), radial-gradient(50% 50% at 0% 100%, rgba(63, 208, 201, 0.12), rgba(63, 208, 201, 0) 70%), linear-gradient(320deg, #0a1730 0%, #0b2552 100%);*/
}

#uses .card,
#uses .note {
	/*background: hsl(221deg 48% 11% / 55%);*/
}

.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.use { padding: 28px; gap: 12px; }
.use h3 { font-size: 20px; }
.use p { flex: 1; }
.link-play {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 0;
}

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.note {
	border: 1px solid var(--line-card);
	border-radius: 18px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.note h3 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.note p { font-size: 14px; color: var(--text-muted); }

/* ---------- 04 Toolkit ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.flow__step { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line-strong); }
.flow__step--current { padding: 10px 18px; border: 0; border-radius: 10px; color: var(--bg); background: var(--accent-light); }

.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.product {
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	padding: clamp(24px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.product__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.product__title { display: flex; flex-direction: column; gap: 6px; }
.product__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); }
.product__title h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.product__tagline { font-size: 16px; color: var(--text-muted); }
.product__price { text-align: right; }
.product__amount { font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.product__price-note { font-size: 13px; color: var(--text-muted); }
.product__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

.tools-menu {
	border-radius: 12px;
	background: var(--bg);
	border: 1px solid var(--line-inner);
	padding: 8px;
	display: flex;
	flex-direction: column;
	font-size: 14px;
}
.tools-menu__title { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.tools-menu__item { padding: 9px 12px; border-radius: 8px; }
.tools-menu__item--active { background: var(--menu-active); color: #FFFFFF; font-weight: 600; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--text-body); }
.checklist li { display: flex; gap: 10px; }
.checklist svg { margin-top: 3px; }

.strips {
	border-radius: 12px;
	background: var(--bg);
	border: 1px solid var(--line-inner);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.strip { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; }
.strip__color { height: 26px; }
.strip__luma { height: 7px; background: linear-gradient(90deg, #000000, #6E6E6E 45%, #FFFFFF); }

.strip:nth-child(1) .strip__color { background: linear-gradient(90deg, #E2541E 0%, #F0942E 9%, #CFCFCF 22%, #E4E4E4 50%, #8FB6E8 62%, #1C8CFF 70%, #0A3A9E 84%, #1B2B5A 100%); }
.strip:nth-child(2) .strip__color { background: linear-gradient(90deg, #E5501F 0%, #F2C531 17%, #E9A23A 26%, #12A08F 42%, #1F6E8A 58%, #152C45 76%, #E0477A 100%); }
.strip:nth-child(3) .strip__color { background: linear-gradient(90deg, #E07A28 0%, #F2A81C 12%, #F0A818 46%, #0E8FA0 50%, #1C6A84 72%, #2B4566 86%, #7E4FB8 100%); }
.strip:nth-child(4) .strip__color { background: linear-gradient(90deg, #E8461C 0%, #FF5A2A 18%, #F0702E 40%, #00B596 52%, #0F6C8E 68%, #163A5C 84%, #C04BE6 100%); }
.strip:nth-child(5) .strip__color { background: linear-gradient(90deg, #C8431E 0%, #E04FB8 20%, #F08A3A 32%, #0A9FD8 48%, #0A6DB0 66%, #0B2E5E 82%, #A22FC8 100%); }
.strip:nth-child(6) .strip__color { background: linear-gradient(90deg, #D9402E 0%, #F08A4A 14%, #8FD6E8 36%, #2E9CC8 52%, #1A4E86 70%, #2A2F50 86%, #E8366A 100%); }

.bundle {
	border: 1px solid var(--line-card);
	border-radius: 16px;
	padding: 20px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.bundle p { font-size: 16px; color: var(--text-body); }
.bundle strong { color: var(--text); }
.bundle a { font-size: 15px; font-weight: 600; text-decoration: none; padding: 10px 0; }

/* ---------- Download / pricing ---------- */
.pricing { position: relative; overflow: hidden; background: var(--bg); }
.pricing__halo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1400px;
	max-width: 100%;
	height: 760px;
	transform: translate(-50%, -50%);
	background:
		radial-gradient(45% 50% at 50% 50%, rgba(40, 120, 255, 0.65), rgba(40, 120, 255, 0) 72%),
		radial-gradient(28% 42% at 22% 58%, rgba(63, 208, 201, 0.38), rgba(63, 208, 201, 0) 70%),
		radial-gradient(28% 42% at 78% 42%, rgba(160, 70, 210, 0.4), rgba(160, 70, 210, 0) 70%);
	pointer-events: none;
}
.pricing__inner {
	position: relative;
	z-index: 1;
	padding-top: 140px;
	padding-bottom: 130px;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
}
.pricing__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pricing__copy p { font-size: 18px; color: var(--text-soft); }

.pricing__card {
	flex: 1 1 480px;
	min-width: 0;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba(168, 212, 255, 0.35);
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(84, 131, 214, 0.28), rgba(84, 131, 214, 0) 70%),
		radial-gradient(50% 70% at 0% 100%, rgba(242, 140, 80, 0.18), rgba(242, 140, 80, 0) 70%),
		var(--card-pricing);
	box-shadow: 0 0 0 6px rgba(120, 170, 255, 0.16), 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 100px rgba(40, 120, 255, 0.45), 0 0 150px rgba(40, 120, 255, 0.25);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.pricing__product { display: flex; align-items: center; gap: 18px; }
.pricing__product img { width: 72px; height: 72px; border-radius: 18px; }
.pricing__name { display: flex; flex-direction: column; gap: 2px; }
.pricing__name strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.pricing__name span { font-size: 15px; color: var(--text-muted-2); }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price__amount { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.price__meta { font-size: 15px; color: var(--text-muted-2); }

.pricing__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px; }
.pricing__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--text-body); }
.pricing__col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pricing__version { color: var(--text-muted); }

/* ---------- FAQ ---------- */
.faq__inner { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.faq__title { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
.faq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 48px; }
.faq__item { display: flex; flex-direction: column; gap: 8px; }
.faq__item h3 { font-size: 18px; font-weight: 700; }
.faq__item p { font-size: 15px; color: var(--text-muted); }

/* ---------- Footer (light, from LUTs Previewer) ---------- */
.footer { background: var(--footer-bg); color: var(--footer-text); }
.footer a { color: var(--footer-text); text-decoration: none; }
.footer a:hover { color: #0B0F16; }
.footer a:focus-visible { outline-color: var(--footer-strong); }
.footer__inner { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer__about { display: flex; flex-direction: column; gap: 14px; max-width: 380px; flex: 1 1 260px; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { width: 40px; height: 40px; border-radius: 10px; }
.footer__brand span { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.25px; color: var(--footer-strong); }
.footer__about p { font-size: 14px; line-height: 1.65; color: var(--footer-text-2); }
.footer__cols { display: flex; flex-wrap: wrap; gap: 48px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer__col h2 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--footer-strong); }
.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid var(--footer-line);
	font-size: 12px;
	color: var(--footer-faint);
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
	.section__inner, .split, .faq__inner { padding-top: 72px; padding-bottom: 72px; }
	.pricing__inner { padding-top: 96px; padding-bottom: 96px; }
	.products { grid-template-columns: 1fr; }
	.hero__ctas .btn { width: 100%; }
	.btn { white-space: normal; text-align: center; }

	.nav__links a { display: none; }
	.hero { padding-top: 78px; }
	.lft { text-align: left; }
}