/* ============================================================
   Ejavol — static rebuild of the Framer hero + nav block
   Fonts: Raleway (logo, heading, top bar) + Inter (body/UI)
   ============================================================ */

/* ---------- Fonts (self-hosted, variable woff2) ---------- */
@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/raleway-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/raleway-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Variables ---------- */
:root {
	--black: #000000;
	--white: #ffffff;
	--yellow: #f0d20e;
	--font-body: "Inter", "Inter Placeholder", sans-serif;
	--font-display: "Raleway", sans-serif;
	/* yellow glow used on both buttons */
	--glow:
		rgba(247, 220, 90, 0.294) 0px 0.602187px 1.80656px -1px,
		rgba(247, 220, 90, 0.28) 0px 2.28853px 6.8656px -2px,
		rgba(247, 220, 90, 0.2) 0px 10px 30px -3px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.guarantee-page,
.reviews-page,
.faq-page,
.contact-page { overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* ============================================================
   Header / Nav
   ============================================================ */
.nav {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90px;
	padding: 0 50px;
	background: var(--black);
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}
.nav-logo__icon {
	width: 46px;
	height: 46px;
	object-fit: contain;
}
.nav-logo__text {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: 23px;
	line-height: 1;
	color: var(--white);
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 34px;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: 30px;
}
.nav-links a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--white);
	transition: opacity 0.2s ease;
}
.nav-links a:hover { opacity: 0.7; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 20px;
	color: var(--black);
	background: var(--yellow);
	border: 0;
	border-radius: 12px;
	box-shadow: var(--glow);
	cursor: pointer;
	transition: transform 0.2s ease, filter 0.2s ease;
	white-space: nowrap;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--shop-now {
	font-size: 14px;
	padding: 12px 25px;
}
.btn--shop-pills {
	width: 472px;
	max-width: 100%;
	font-size: 17px;
	padding: 15px 25px;
}

/* ---------- Hamburger (mobile only) ---------- */
.hamburger {
	display: none;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
}
.hamburger span {
	position: absolute;
	left: 4px;
	width: 24px;
	height: 2px;
	background: var(--white);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.hamburger span:nth-child(1) { top: 8px; }
.hamburger span:nth-child(2) { top: 15px; }
.hamburger span:nth-child(3) { top: 22px; }
.hamburger.is-open span:nth-child(1) { top: 15px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 15px; transform: rotate(-45deg); }

/* ---------- Mobile dropdown menu ---------- */
.mobile-menu {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: var(--black);
	padding: 0 24px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, padding 0.35s ease;
}
.mobile-menu a {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--white);
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu.is-open {
	max-height: 320px;
	padding: 8px 24px 18px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
	background: var(--black);
	padding: 60px 20px 0;
}
.hero-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.hero-col {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* lifts the vertically-centred column to match the original (heading at y200) */
	padding-bottom: 30px;
}

/* Title group */
.hero-title { display: flex; flex-direction: column; }
.hero-heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 45px;
	line-height: 67.5px;
	letter-spacing: -0.5px;
	color: var(--white);
}
.hero-sub {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 24px;
	line-height: 36px;
	letter-spacing: -0.5px;
	color: var(--white);
}

/* Bullets */
.hero-bullets {
	margin-top: 84px;
	display: flex;
	flex-direction: column;
}
.hero-bullets li {
	display: flex;
	align-items: center;
	gap: 15px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 40px;
	letter-spacing: -0.5px;
	color: var(--white);
}
.bi {
	flex: 0 0 auto;
	width: 25px;
	height: 25px;
	fill: var(--yellow);
}

/* Shop pills button */
.btn--shop-pills { margin-top: 27px; }

/* Social proof */
.hero-social {
	margin-top: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.hero-social__avatars img {
	width: 236px;
	height: 42px;
	object-fit: contain;
}
.hero-social__rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: 20px;
}
.hero-social__stars {
	width: 275px;
	height: 27px;
	object-fit: contain;
	object-position: left center;
}
.hero-social__text {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: -0.5px;
	color: var(--white);
}

/* Product image */
.hero-image { flex: 0 0 500px; }
.hero-image img {
	width: 500px;
	height: 600px;
	max-width: 100%;
	object-fit: contain;
}

/* text that only shows on one breakpoint */
.m-only { display: none; }
.d-only { display: inline; }

/* ============================================================
   Section: Why We've Sold  (white)
   ============================================================ */
.why {
	background: var(--white);
	color: var(--black);
	padding: 70px 20px;
}
.why-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 60px;
	max-width: 1100px;
	margin: 0 auto;
}
.why-left, .why-right { flex: 1 1 0; min-width: 0; }

.why-heading {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 56px;
	line-height: 1.56;
	letter-spacing: -1px;
	color: var(--black);
}
/* highlighted words */
.hl {
	display: inline-block;
	border-radius: 12px;
	padding: 0.06em 0.3em;
	font-weight: 900;
}
.hl--dark   { background: var(--black);  color: var(--yellow); }
.hl--yellow { background: var(--yellow); color: var(--black); }

.why-right {
	display: flex;
	flex-direction: column;
	gap: 38px;
}
.why-right__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 45px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--black);
}
.why-list {
	display: flex;
	flex-direction: column;
	gap: 46px;
}
.why-list li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
.check {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-top: 2px;
}
.check svg { width: 100%; height: 100%; display: block; }
.check circle { fill: var(--yellow); }
.why-list__text h4 {
	margin: 0 0 4px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 24px;
	line-height: 1.2;
	color: var(--black);
}
.why-list__text p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.4;
	color: #111111;
}

/* scroll reveal */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Section: Testimonials  (light grey)
   ============================================================ */
.testi {
	background: #f4f4f4;
	color: var(--black);
	padding: 70px 20px;
}
.svg-sprite { position: absolute; width: 0; height: 0; }
.testi__title {
	margin: 0 0 50px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 33px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--black);
}
.testi-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}
.testi-photo { flex: 0 0 500px; max-width: 500px; }
.testi-photo img { width: 100%; height: auto; display: block; }
.testi-right {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.testi-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.rcard {
	background: var(--white);
	border: 1px solid rgba(240, 210, 14, 0.55);
	border-radius: 20px;
	padding: 16px;
}
.rcard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.rcard__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: #333333;
}
.rcard__stars { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.star { width: 18px; height: 18px; fill: var(--yellow); display: block; }
.star.is-empty { fill: #d6d6d6; }
.rcard__verified {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: #008000;
}
.vchk { width: 13px; height: 13px; flex: 0 0 auto; }
.vchk circle { fill: #008000; }
.rcard__text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.45;
	color: #555555;
}
.testi-cta { width: 100%; margin-top: 4px; }

/* ============================================================
   Section: Trust badges  (black)
   ============================================================ */
.badges {
	background: var(--black);
	padding: 40px 20px;
}
.badges-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto;
}
.badge {
	display: flex;
	align-items: center;
	gap: 18px;
}
.badge img { width: 48px; height: 48px; flex: 0 0 auto; }
.badge span {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	color: var(--white);
	max-width: 160px;
}

/* ============================================================
   Section: See Ejavol in Action  (video carousel, white)
   ============================================================ */
.action {
	background: var(--white);
	color: var(--black);
	padding: 70px 0;
}
.action__title {
	margin: 0 0 44px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 33px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--black);
}
.carousel {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}
.carousel__track {
	display: flex;
	gap: 25px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.vcard {
	flex: 0 0 350px;
	position: relative;
	scroll-snap-align: start;
}
.vcard video {
	width: 100%;
	aspect-ratio: 350 / 622;
	border-radius: 20px;
	object-fit: cover;
	background: #000;
	cursor: pointer;
	display: block;
}
.vcard--touch-video::before,
.vcard--touch-video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.vcard--touch-video::before {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.46);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
	transform: translate(-50%, -50%);
}
.vcard--touch-video::after {
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 24px solid var(--white);
	transform: translate(-35%, -50%);
}
.vcard--touch-video.vcard--is-playing::before,
.vcard--touch-video.vcard--is-playing::after {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.9);
}
.vcard--touch-video.vcard--is-playing::after {
	transform: translate(-35%, -50%) scale(0.9);
}
.carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	color: var(--black);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.carousel__nav:hover { transform: translateY(-50%) scale(1.08); }
.carousel__nav svg { width: 22px; height: 22px; }
.carousel__nav--prev { left: 6px; }
.carousel__nav--next { right: 6px; }
.carousel__nav[hidden] { display: none; }

/* ============================================================
   Section: How Will You Finish  (grey)
   ============================================================ */
.finish {
	background: #f4f4f4;
	color: var(--black);
	padding: 70px 20px 0;
}
.finish-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	max-width: 1100px;
	margin: 0 auto;
}
.finish-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.finish__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 45px;
	line-height: 67.5px;
	letter-spacing: -0.5px;
	color: var(--black);
}
.finish__body { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.finish__body p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 27px;
	color: var(--black);
}
.finish__body strong { font-weight: 700; }
.finish__cta { margin-top: 28px; }
.finish__rating {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
}
.finish__rating img { width: 160px; height: auto; }
.finish__rating span {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--black);
}
.finish-img { flex: 0 0 500px; }
.finish-img img { width: 500px; max-width: 100%; height: auto; display: block; }

/* ============================================================
   Section: Risk-Free Guarantee  (black)
   ============================================================ */
.guarantee {
	background: var(--black);
	color: var(--white);
	padding: 70px 20px;
}
.guarantee-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 50px;
	max-width: 1100px;
	margin: 0 auto;
}
.guarantee-seal { flex: 0 0 auto; }
.guarantee-seal img { width: 340px; height: auto; display: block; }
.guarantee-text {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.guarantee__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 45px;
	line-height: 1.4;
	letter-spacing: -0.5px;
	color: var(--white);
}
.guarantee__body { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.guarantee__body p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 27px;
	color: var(--white);
}
.guarantee__body strong { font-weight: 700; }
.guarantee__cta { margin-top: 28px; width: 100%; max-width: 525px; }

/* ============================================================
   Section: Reviews wall  (white, 3-column masonry)
   ============================================================ */
.wall {
	background: var(--white);
	color: var(--black);
	padding: 70px 20px;
}
.wall__title {
	margin: 0 0 44px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 33px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--black);
}
.wall-grid {
	display: flex;
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
	align-items: flex-start;
}
.wall-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.rev2 {
	background: var(--white);
	border-radius: 20px;
	padding: 30px;
	box-shadow:
		0 0.8px 2.4px -0.6px rgba(0, 0, 0, 0.05),
		0 2.4px 7.2px -1.25px rgba(0, 0, 0, 0.05),
		0 6.4px 19px -1.9px rgba(0, 0, 0, 0.05),
		0 20px 60px -2.5px rgba(0, 0, 0, 0.05);
}
.rev2__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.rev2__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: #333333;
}
.rev2__stars { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.rev2__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 14px;
}
.rev2__verified {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: #008000;
}
.rev2__supply {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.4px;
	color: #9a9a9a;
	white-space: nowrap;
}
.rev2__text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	color: #555555;
}
.rev2__img { width: 100%; border-radius: 12px; margin-top: 14px; display: block; }

/* ============================================================
   Section: How to Use  (grey)
   ============================================================ */
.howto {
	background: #f4f4f4;
	color: var(--black);
	padding: 70px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.howto__title {
	width: 100%;
	margin: 0 0 48px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 33px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--black);
}
.howto-row {
	width: 100%;
	max-width: 1100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 40px;
}
.howto-steps {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.howto-step {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}
.howto-step__num {
	flex: 0 0 auto;
	width: 78px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 110px;
	line-height: 1;
	color: #e6e6e6;
	text-align: center;
}
.howto-step__text h3 {
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.2;
	color: var(--black);
}
.howto-step__text p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--black);
}
.howto-img { flex: 0 0 400px; }
.howto-img img { width: 400px; max-width: 100%; height: auto; display: block; }
.howto__cta { margin-top: 44px; }

/* ============================================================
   Section: FAQ  (white, 2-column)
   ============================================================ */
.faq {
	background: var(--white);
	color: var(--black);
	padding: 70px 20px;
}
.faq__title {
	margin: 0 0 44px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 33px;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--black);
}
.faq-grid {
	display: flex;
	gap: 20px;
	max-width: 1000px;
	margin: 0 auto;
	align-items: flex-start;
}
.faq-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.faq-card {
	background: var(--white);
	padding: 30px;
	display: flex;
	flex-direction: column;
	box-shadow:
		0 0.6px 2.5px -1px rgba(0, 0, 0, 0.06),
		0 2.3px 9.4px -2px rgba(0, 0, 0, 0.06),
		0 10px 42px -3px rgba(0, 0, 0, 0.07);
}
.faq-card__label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.5px;
	color: #898989;
}
.faq-card__q {
	margin: 8px 0 20px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.4;
	letter-spacing: -0.3px;
	color: var(--black);
}
.faq-card__q strong { font-weight: 800; }
.faq-card__a {
	margin: 8px 0 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	color: var(--black);
}
.faq-card__a a { color: var(--black); text-decoration: underline; }
.faq-card__img { width: 100%; height: auto; margin-top: 8px; display: block; }
.faq-card__shipping-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	margin-top: 28px;
}
.faq-card__carrier {
	display: block;
	flex: 0 0 auto;
	object-fit: contain;
}
.faq-card__carrier--fedex { width: 50px; height: 70px; }
.faq-card__carrier--dhl { width: 60px; height: 60px; }
.faq-card__carrier--ups,
.faq-card__carrier--usps { width: 50px; height: 35px; }

/* ============================================================
   Section: Final CTA  (black)
   ============================================================ */
.finalcta {
	background: var(--black);
	color: var(--white);
	padding: 70px 20px 0;
}
.finalcta-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 600px;
	max-width: 1100px;
	margin: 0 auto;
}
.finalcta-col {
	flex: 0 0 600px;
	width: 600px;
	height: 100%;
	min-width: 0;
	padding-right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.finalcta__brand {
	margin: 0;
	width: 100%;
	max-width: 590px;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 45px;
	line-height: 67.5px;
	letter-spacing: -0.5px;
	color: var(--white);
}
.finalcta__trust-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin: 12px 0 0;
	padding: 10px 30px;
	border-radius: 50px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 19.2px;
	letter-spacing: 0;
	color: var(--yellow);
}
.finalcta__trust-pill::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--yellow);
	border-radius: inherit;
	pointer-events: none;
}
.finalcta__title {
	margin: 12px 0 0;
	width: 100%;
	max-width: 590px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 30px;
	line-height: 45px;
	letter-spacing: 0;
	color: var(--white);
}
.finalcta-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 34px;
	width: 100%;
	max-width: 590px;
}
.finalcta-list li {
	display: flex;
	align-items: center;
	gap: 19px;
	height: 43px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 21.6px;
	letter-spacing: 0;
	color: var(--white);
}
.finalcta-list .check {
	width: 40px;
	height: 43px;
	margin-top: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.finalcta-list .check svg {
	width: 33px;
	height: 33px;
	margin-top: 4px;
}
.finalcta__cta {
	height: 45px;
	margin-top: 34px;
	padding: 0 25px;
}
.finalcta__rating {
	display: flex;
	align-items: center;
	gap: 19px;
	width: 100%;
	max-width: 590px;
	min-height: 32px;
	margin-top: 12px;
}
.finalcta__rating img { width: 160px; height: auto; }
.finalcta__rating span {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 21.6px;
	color: var(--white);
}
.finalcta-img {
	flex: 0 0 500px;
	width: 500px;
	height: 600px;
}
.finalcta-img img {
	width: 500px;
	max-width: 100%;
	height: 600px;
	display: block;
	object-fit: contain;
	object-position: 50% 100%;
}

/* ============================================================
   Footer  (white)
   ============================================================ */
.site-footer {
	background: var(--white);
	color: var(--black);
	padding: 54px 20px 34px;
}
.footer-top {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}
.footer-links { display: flex; gap: 56px; }
.footer-links ul { display: flex; flex-direction: column; gap: 11px; }
.footer-links ul::before {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	background: #cfcfcf;
	margin-bottom: 9px;
}
.footer-links a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	color: #6b6b6b;
	transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--black); }
.footer-current { color: var(--black) !important; }
.footer-shop { font-weight: 700; color: var(--black) !important; }
.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.footer-brand__row { display: flex; align-items: center; gap: 12px; }
.footer-logo { width: 30px; height: auto; }
.footer-brand__name {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.2;
	color: var(--black);
}
.footer-brand__name strong { font-weight: 700; }
.footer-brand__copy {
	margin: 3px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	color: #8a8a8a;
}
.footer-disclaimer {
	max-width: 1000px;
	margin: 42px auto 0;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.65;
	color: #9a9a9a;
}

/* ============================================================
   Guarantee page  (white hero, support strip, grey details)
   ============================================================ */
.gpage-hero {
	background: var(--white);
	color: var(--black);
	padding: 96px 20px 100px;
}
.gpage-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.gpage-hero__title {
	margin: 0 0 58px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 42px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--black);
}
.gpage-hero__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 74px;
}
.gpage-seal {
	flex: 0 0 360px;
	display: flex;
	justify-content: center;
}
.gpage-seal img { width: 300px; height: auto; display: block; }
.gpage-copy {
	flex: 1 1 0;
	max-width: 580px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.gpage-copy p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.45;
	color: #222222;
}
.gpage-copy strong { font-weight: 900; color: var(--black); }

.gpage-support {
	background: var(--black);
	color: var(--white);
	padding: 36px 20px;
}
.gpage-support__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	max-width: 1100px;
	min-height: 48px;
	margin: 0 auto;
}
.gpage-support p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.45;
	color: #d8d8d8;
}
.gpage-support strong { color: var(--white); font-weight: 900; }
.gpage-support__btn {
	width: 260px;
	padding: 14px 25px;
	background: var(--white);
	color: var(--black);
	box-shadow: none;
	font-size: 18px;
	font-weight: 900;
}

.gpage-details {
	background: #f4f4f4;
	color: var(--black);
	padding: 70px 20px 76px;
}
.gpage-details__grid {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 58px;
	max-width: 1100px;
	margin: 0 auto;
}
.gpage-detail {
	flex: 1 1 0;
	min-width: 0;
}
.gpage-detail h2 {
	margin: 0 0 22px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 27px;
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: var(--black);
}
.gpage-detail p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.45;
	color: #222222;
}
.gpage-detail p + p { margin-top: 24px; }
.gpage-detail strong { font-weight: 900; color: var(--black); }

/* ============================================================
   Reviews page  (customer reviews hero + rating summary)
   ============================================================ */
.rpage-hero {
	background: var(--white);
	color: var(--black);
	padding: 180px 40px 40px;
}
.rpage-hero__inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}
.rpage-hero__title {
	margin: 0;
	width: 100%;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 42px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.rpage-hero__title a { color: inherit; text-decoration: none; }
.rpage-rating {
	width: 100%;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.rpage-rating__intro,
.rpage-write p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.rpage-rating__intro strong { font-weight: 700; }
.rpage-rating__rows {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 30px;
}
.rpage-rating__row {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 100%;
	padding: 10px;
	color: var(--black);
	overflow: hidden;
}
.rpage-rating__stars {
	flex: 0 0 125px;
	display: flex;
	align-items: center;
	gap: 0;
}
.rpage-rating__stars .star {
	width: 25px;
	height: 25px;
}
.rpage-rating__bar {
	flex: 0 0 200px;
	display: flex;
	height: 12px;
	overflow: hidden;
	border-radius: 20px;
	background: #f4f4f4;
}
.rpage-rating__bar span {
	display: block;
	height: 100%;
	background: var(--yellow);
}
.rpage-rating__count {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--black);
}
.rpage-write {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	margin-top: 30px;
	text-align: left;
}
.rpage-write__btn {
	width: 220px;
	padding: 15px 25px;
	background: var(--black);
	color: var(--white);
	box-shadow: none;
	font-size: 17px;
	font-weight: 700;
}
.rpage-write__btn:hover { filter: none; }
.wall--reviews-page { padding-top: 40px; padding-bottom: 36px; }
.rpage-hidden-note {
	margin: 34px auto 0;
	max-width: 600px;
	text-align: left;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--black);
}
.rpage-review-form {
	background: var(--white);
	color: var(--black);
	padding: 0 20px 100px;
}
.rpage-review-form .cpage-title { margin-bottom: 40px; }
.rpage-review-form .cpage-form { margin: 40px auto 0; }

/* ============================================================
   FAQ page  (white hero, category index, reused FAQ cards)
   ============================================================ */
.fpage-hero {
	background: var(--white);
	color: var(--black);
	padding: 79px 40px 48px;
}
.fpage-hero__inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}
.fpage-hero__title {
	margin: 0;
	width: 100%;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 42px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.fpage-index {
	display: block;
	width: 100%;
	max-width: 600px;
}
.fpage-index__group { margin: 0 0 90px; }
.fpage-index__group:last-child { margin-bottom: 0; }
.fpage-index__group h2 {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 25px;
	line-height: 35px;
	letter-spacing: 0;
	color: var(--black);
}
.fpage-index__group a {
	position: relative;
	display: block;
	min-height: 58px;
	padding: 14.5px 52px 14.5px 10px;
	border: 0;
	border-bottom: 2px solid var(--yellow);
	background: transparent;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0;
	color: #333333;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.fpage-index__group a[href="#product-label"] { display: none; }
.fpage-index__group a strong { font-weight: 800; }
.fpage-index__group a::before,
.fpage-index__group a::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 15px;
	height: 15px;
	border-right: 3px solid var(--black);
	border-bottom: 3px solid var(--black);
	transform: translateY(-50%) rotate(-45deg);
}
.fpage-index__group a::before { right: 25px; }
.fpage-index__group a::after { right: 13px; }
.fpage-index__group a:hover { opacity: 0.65; }
.faq--page {
	padding-top: 34px;
	padding-bottom: 78px;
}
.faq--page .faq-grid { max-width: 1050px; }
.faq--page .faq-card { scroll-margin-top: 118px; }
.fpage-support .gpage-support__inner { max-width: 1000px; }

/* ============================================================
   Contact page  (centered form + business address)
   ============================================================ */
.cpage-main {
	background: var(--white);
	color: var(--black);
	padding: 90px 20px 100px;
}
.cpage-content {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}
.cpage-title {
	margin: 0 0 40px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 42px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.cpage-intro {
	margin: 0 0 40px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.cpage-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 500px;
	max-width: 100%;
	margin: 0 0 110px;
}
.cpage-alert {
	padding: 12px 14px;
	border-radius: 10px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
}
.cpage-alert--error {
	border: 1px solid rgba(205, 6, 9, 0.28);
	background: rgba(205, 6, 9, 0.08);
	color: #b10003;
}
.cpage-alert--success {
	border: 1px solid rgba(1, 144, 69, 0.25);
	background: rgba(1, 144, 69, 0.08);
	color: #017237;
}
.cpage-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.cpage-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cpage-input {
	display: block;
	width: 100%;
	height: 40px;
	padding: 12px;
	border: 1px solid rgba(136, 136, 136, 0.1);
	border-radius: 10px;
	background: rgba(187, 187, 187, 0.15);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	color: #111111;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.cpage-input::placeholder { color: #999999; opacity: 1; }
.cpage-input:focus {
	border-color: rgba(0, 153, 255, 0.8);
	background: rgba(187, 187, 187, 0.18);
}
.cpage-input[aria-invalid="true"] {
	border-color: rgba(205, 6, 9, 0.85);
	background: rgba(205, 6, 9, 0.06);
}
.cpage-input--message {
	min-height: 100px;
	resize: vertical;
}
.cpage-error {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.35;
	color: #cd0609;
}
.cpage-error:empty { display: none; }
.cpage-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: #111111;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--white);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.cpage-submit:hover { background: #000000; }
.cpage-submit:disabled {
	opacity: 0.68;
	cursor: wait;
}
.cpage-address h2 {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: 0;
	color: var(--black);
}
.cpage-address__row {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	width: 100%;
	min-height: 100px;
}
.cpage-address__pin {
	flex: 0 0 60px;
	display: flex;
	justify-content: center;
	width: 60px;
	height: 100px;
	padding-top: 18px;
	color: #231f20;
}
.cpage-address__pin svg {
	width: 60px;
	height: 60px;
	display: block;
	fill: currentColor;
}
.cpage-address__pin circle { fill: var(--white); }
.cpage-address__row p {
	margin: 19px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.cpage-address__row strong { font-weight: 700; }

/* ============================================================
   Legal pages  (Privacy Policy · Terms · Shipping · Shipping Details)
   Shared text-document layout — only the inner copy changes per page.
   ============================================================ */
.lpage-main {
	background: var(--white);
	color: #222222;
	padding: 90px 20px 100px;
}
.lpage-content {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}
.lpage-title {
	margin: 0 0 40px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 42px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--black);
}
.lpage-content h2 {
	margin: 48px 0 18px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 28px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--black);
}
.lpage-content h3 {
	margin: 32px 0 12px;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--black);
}
.lpage-content p {
	margin: 0 0 18px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0;
	color: #222222;
}
.lpage-content strong { font-weight: 700; color: var(--black); }
.lpage-content .lpage-label {
	margin: 30px 0 14px;
	font-weight: 700;
	color: var(--black);
}
.lpage-content ul,
.lpage-content ol {
	margin: 0 0 18px;
	padding-left: 26px;
}
.lpage-content li {
	margin: 0 0 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0;
	color: #222222;
}
.lpage-content a { color: inherit; text-decoration: underline; }
.lpage-ol > li { margin-bottom: 18px; padding-left: 6px; }
.lpage-ol > li::marker { font-weight: 700; color: var(--black); }
.lpage-ol p { margin: 12px 0 0; }
/* lettered / dashed sub-points keep their literal label, no bullet */
.lpage-content .lpage-sublist {
	list-style: none;
	margin: 12px 0;
	padding-left: 14px;
}
.lpage-content .lpage-sublist li { margin: 0 0 8px; }

/* ============================================================
   Responsive — matches the original Framer breakpoints
   ============================================================ */

/* large tablet / small desktop */
@media (max-width: 1199.98px) {
	.hero-row { max-width: 850px; }
}

/* tablet */
@media (max-width: 949.98px) {
	.hero-row { max-width: 730px; }
}

/* phone */
@media (max-width: 809.98px) {
	/* --- nav: pinned to the top --- */
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 40;
		height: 64px;
		padding: 0 20px;
	}
	.nav-logo__icon { width: 30px; height: 30px; }
	.nav-logo__text { font-size: 20px; }
	.nav-links { display: none; }
	.nav-right { gap: 16px; }
	.hamburger { display: block; }

	/* --- mobile dropdown menu drops down from under the header --- */
	.mobile-menu {
		display: flex;
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		z-index: 35;
	}

	/* --- hero stacks (offset to clear the fixed header) --- */
	.hero { padding: 84px 0 50px; }
	.hero-row {
		flex-direction: column;
		align-items: stretch;
		max-width: none;
		padding: 0 24px;
		gap: 0;
	}
	.hero-col { align-items: stretch; padding-bottom: 0; }

	.hero-heading { font-size: 45px; line-height: 67.5px; }
	.hero-sub { font-size: 18px; line-height: 27px; }

	.hero-bullets { margin-top: 48px; gap: 5px; }
	.hero-bullets li { font-size: 17px; line-height: 34px; }

	.btn--shop-pills { width: 100%; margin-top: 28px; }

	.hero-social { margin-top: 22px; }
	.hero-social__avatars img { width: 160px; height: auto; }
	.hero-social__stars { width: 150px; height: auto; }
	.hero-social__text { font-size: 10px; line-height: 20px; }

	.hero-image {
		flex: 0 0 auto;
		margin-top: 28px;
		align-self: center;
	}
	.hero-image img { width: 300px; height: 280px; }

	/* swap copy variants */
	.m-only { display: inline; }
	.d-only { display: none; }

	/* --- Why We've Sold --- */
	.why { padding: 50px 0; }
	.why-row {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
		padding: 0 24px;
	}
	.why-heading { font-size: 34px; line-height: 1.5; letter-spacing: -0.5px; }
	.why-right { gap: 24px; }
	.why-right__title { font-size: 30px; }
	.why-list { gap: 22px; }
	.why-list__text h4 { font-size: 20px; }
	.why-list__text p { font-size: 16px; }

	/* --- Testimonials --- */
	.testi { padding: 50px 0; }
	.testi__title { font-size: 26px; line-height: 1.3; margin-bottom: 30px; padding: 0 24px; }
	.testi-row { flex-direction: column; gap: 28px; padding: 0 24px; }
	.testi-photo { flex: none; max-width: 420px; width: 100%; align-self: center; }
	.testi-cards { grid-template-columns: 1fr; gap: 14px; }

	/* --- Trust badges --- */
	.badges { padding: 34px 24px; }
	.badges-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 26px 18px;
		justify-content: stretch;
	}
	.badge span { font-size: 16px; max-width: none; }
	.badge img { width: 40px; height: 40px; }

	/* --- See Ejavol in Action --- */
	.action { padding: 50px 0; }
	.action__title { font-size: 26px; line-height: 1.3; margin-bottom: 30px; padding: 0 24px; }
	.carousel { padding: 0 24px; }
	.vcard { flex: 0 0 78%; }
	.carousel__nav { width: 42px; height: 42px; }
	.carousel__nav svg { width: 19px; height: 19px; }

	/* --- How Will You Finish --- */
	.finish { padding: 50px 0 0; }
	.finish-row { flex-direction: column; align-items: stretch; gap: 30px; padding: 0 24px; }
	.finish-col { align-items: stretch; }
	.finish__title { font-size: 34px; line-height: 1.2; }
	.finish__body p { font-size: 16px; line-height: 1.5; }
	.finish__cta { width: 100%; }
	.finish-img { flex: none; align-self: center; max-width: 360px; }

	/* --- Risk-Free Guarantee --- */
	.guarantee { padding: 50px 24px; }
	.guarantee-row { flex-direction: column; align-items: center; gap: 28px; }
	.guarantee-seal img { width: 230px; }
	.guarantee-text { align-items: stretch; }
	.guarantee__title { font-size: 30px; line-height: 1.25; }
	.guarantee__body p { font-size: 16px; line-height: 1.5; }
	.guarantee__cta { max-width: none; }

	/* --- Reviews wall --- */
	.wall { padding: 50px 24px; }
	.wall__title { font-size: 26px; line-height: 1.3; margin-bottom: 30px; }
	.wall-grid { flex-direction: column; gap: 16px; }
	.wall-col { gap: 16px; }
	.rev2 { padding: 24px; }

	/* --- How to Use --- */
	.howto { padding: 50px 24px; }
	.howto__title { font-size: 26px; line-height: 1.3; margin-bottom: 32px; }
	.howto-row { flex-direction: column; gap: 30px; }
	.howto-steps { gap: 26px; }
	.howto-step { gap: 14px; }
	.howto-step__num { width: 54px; font-size: 76px; }
	.howto-step__text h3 { font-size: 21px; }
	.howto-step__text p { font-size: 16px; }
	.howto-img { flex: none; align-self: center; max-width: 320px; }
	.howto__cta { width: 100%; }

	/* --- FAQ --- */
	.faq { padding: 50px 24px; }
	.faq__title { font-size: 26px; line-height: 1.3; margin-bottom: 30px; }
	.faq-grid { flex-direction: column; gap: 16px; }
	.faq-col { gap: 16px; }
	.faq-card { padding: 24px; }
	.faq-card__q { font-size: 22px; line-height: 1.35; }

	/* --- Final CTA --- */
	.finalcta { padding: 60px 0 0; }
	.finalcta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		height: auto;
		padding: 0 24px;
	}
	.finalcta-col {
		flex: none;
		width: auto;
		height: auto;
		padding-right: 0;
		align-items: stretch;
		justify-content: flex-start;
	}
	.finalcta__brand {
		max-width: none;
		text-align: center;
	}
	.finalcta__trust-pill {
		align-self: stretch;
		margin-top: 6px;
		padding: 9px 26px;
		font-size: 10px;
		line-height: 12px;
	}
	.finalcta__title {
		margin-top: 6px;
		max-width: none;
		text-align: center;
		font-size: 16px;
		line-height: 24px;
	}
	.finalcta-list {
		max-width: none;
		gap: 12px;
		margin-top: 20px;
	}
	.finalcta-list li {
		gap: 10px;
		height: 42px;
		font-size: 15px;
		line-height: 18px;
	}
	.finalcta-list .check {
		width: 30px;
		height: 33px;
	}
	.finalcta-list .check svg {
		width: 25px;
		height: 25px;
		margin-top: 4px;
	}
	.finalcta__cta {
		width: 100%;
		height: 52px;
		margin-top: 18px;
	}
	.finalcta__rating {
		justify-content: center;
		gap: 12px;
		max-width: none;
		min-height: 24px;
		margin-top: 18px;
	}
	.finalcta__rating img { width: 110px; }
	.finalcta__rating span {
		font-size: 15px;
		line-height: 18px;
	}
	.finalcta-img {
		flex: none;
		align-self: center;
		width: 300px;
		height: 280px;
		max-width: 100%;
		margin-top: 0;
	}
	.finalcta-img img {
		width: 300px;
		height: 280px;
	}

	/* --- Footer --- */
	.site-footer { padding: 50px 24px 34px; }
	.footer-top {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-width: none;
	}
	.footer-brand {
		order: 1;
		width: 100%;
		align-items: center;
	}
	.footer-brand__row {
		justify-content: center;
	}
	.footer-links {
		order: 2;
		display: grid;
		grid-template-columns: 0.95fr 1.25fr 0.75fr;
		gap: 0 26px;
		width: 100%;
		margin-top: 60px;
	}
	.footer-links ul {
		min-width: 0;
		gap: 10px;
	}
	.footer-links ul::before {
		width: 100%;
		height: 2px;
		margin-bottom: 0;
		background: #b9b9b9;
	}
	.footer-links a {
		font-size: 13px;
		line-height: 1.2;
		color: #898989;
		white-space: nowrap;
	}
	.footer-links a.footer-current { color: #898989 !important; }
	.footer-links a.footer-shop {
		color: var(--black) !important;
		font-weight: 700;
	}
	.footer-disclaimer {
		max-width: 100%;
		margin-top: 56px;
		font-size: 12px;
		line-height: 1.45;
		color: #898989;
	}

	/* --- Guarantee page --- */
	.gpage-hero { padding: 128px 24px 66px; }
	.gpage-hero__title {
		max-width: 340px;
		margin: 0 auto 40px;
		font-size: 34px;
		line-height: 1.25;
	}
	.gpage-hero__row { flex-direction: column; align-items: stretch; gap: 38px; }
	.gpage-seal { flex: none; }
	.gpage-seal img { width: 230px; }
	.gpage-copy { max-width: none; gap: 20px; }
	.gpage-copy p { font-size: 17px; line-height: 1.55; }
	.gpage-support { padding: 38px 24px; }
	.gpage-support__inner { flex-direction: column; gap: 28px; text-align: center; }
	.gpage-support p { font-size: 17px; }
	.gpage-support__btn { width: 210px; font-size: 17px; }
	.gpage-details { padding: 56px 24px 60px; }
	.gpage-details__grid { flex-direction: column; gap: 42px; }
	.gpage-detail h2 { font-size: 26px; margin-bottom: 14px; }
	.gpage-detail p { font-size: 17px; line-height: 1.52; }
	.gpage-detail p + p { margin-top: 24px; }

	/* --- Reviews page --- */
	.rpage-hero { padding: 118px 24px 34px; }
	.rpage-hero__inner { gap: 34px; }
	.rpage-hero__title { font-size: 32px; line-height: 1.3; }
	.rpage-rating__intro,
	.rpage-write p { font-size: 17px; line-height: 1.52; }
	.rpage-rating__rows { margin-top: 24px; }
	.rpage-rating__row { gap: 12px; padding: 8px 0; }
	.rpage-rating__stars { flex: 0 0 100px; }
	.rpage-rating__stars .star { width: 20px; height: 20px; }
	.rpage-rating__bar { flex: 1 1 auto; min-width: 80px; }
	.rpage-rating__count { flex: 0 0 48px; font-size: 16px; }
	.rpage-write { align-items: stretch; gap: 18px; margin-top: 26px; }
	.rpage-write__btn { width: 100%; }
	.wall--reviews-page { padding-top: 34px; padding-bottom: 30px; }
	.rpage-hidden-note { margin-top: 28px; font-size: 16px; line-height: 1.6; }
	.rpage-review-form { padding: 0 24px 70px; }
	.rpage-review-form .cpage-title { margin-bottom: 30px; }
	.rpage-review-form .cpage-form { margin-top: 0; }

	.fpage-hero { padding: 128px 24px 36px; }
	.fpage-hero__inner { gap: 57px; }
	.fpage-hero__title { font-size: 32px; line-height: 1.4; }
	.fpage-index { max-width: none; }
	.fpage-index__group { margin-bottom: 90px; }
	.fpage-index__group h2 { font-size: 25px; line-height: 35px; margin-bottom: 10px; }
	.fpage-index__group a { min-height: 58px; padding: 15px 45px 15px 10px; font-size: 16px; line-height: 25.6px; }
	.fpage-index__group a::before,
	.fpage-index__group a::after { width: 14px; height: 14px; }
	.fpage-index__group a::before { right: 24px; }
	.fpage-index__group a::after { right: 12px; }
	.faq--page { padding-top: 24px; padding-bottom: 48px; }
	.faq--page .faq-card { scroll-margin-top: 96px; }

	/* --- Contact page --- */
	.cpage-main { padding: 130px 24px 75px; }
	.cpage-title {
		margin-bottom: 50px;
		font-size: 32px;
		line-height: 1.4;
	}
	.cpage-intro {
		margin-bottom: 0;
		font-size: 16px;
		line-height: 1.6;
	}
	.cpage-form {
		width: 100%;
		margin-bottom: 70px;
		padding-top: 30px;
	}
	.cpage-address h2 {
		font-size: 18px;
		line-height: 1.5;
	}
	.cpage-address__row { margin-top: 10px; }

	/* --- Legal pages --- */
	.lpage-main { padding: 130px 24px 75px; }
	.lpage-title { margin-bottom: 30px; font-size: 30px; line-height: 1.4; }
	.lpage-content h2 { margin-top: 38px; font-size: 24px; }
	.lpage-content h3 { margin-top: 26px; font-size: 18px; }
	.lpage-content p,
	.lpage-content li { font-size: 15px; line-height: 1.65; }
	.lpage-content ul,
	.lpage-content ol { padding-left: 22px; }
}

/* ============================================================
   BUY-EJAVOL PAGE  (grey hero, pricing)
   Appended last so these rules win cascade order over the
   black-theme defaults they share class names with.
   ============================================================ */

/* ---------- Hero variant (image left, grey bg, dark text) ---------- */
.hero--buy {
	background: #f4f4f4;
	padding: 50px 20px 60px;
}
.hero--buy .hero-row { gap: 50px; align-items: center; }
.hero--buy .hero-col { padding-bottom: 0; }

/* product image gallery (left column) */
.hero-gallery { flex: 0 0 504px; max-width: 504px; }
.hero-gallery__main {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--white);
	border-radius: 6px;
	overflow: hidden;
}
.hero-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	transition: transform 0.22s ease, opacity 0.22s ease;
}
.hero-gallery__thumbs { display: flex; gap: 14px; margin-top: 14px; }
.gthumb {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	background: var(--white);
	border: 2px solid #e2e2e2;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	transition: border-color 0.2s ease;
}
.gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gthumb:hover { border-color: #bdbdbd; }
.gthumb.is-active { border-color: var(--black); }
.hero--buy .hero-heading { color: var(--black); line-height: 1.15; }
.hero--buy .hero-sub {
	margin-top: 12px;
	color: var(--black);
	font-size: 18px;
	line-height: 27px;
	font-weight: 700;
}
.hero--buy .hero-bullets { margin-top: 28px; gap: 6px; }
.hero--buy .hero-bullets li { color: var(--black); }
.hero--buy .bi { fill: var(--black); }
.hero--buy .btn--shop-pills { margin-top: 30px; }

.bh-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}
.bh-rating img { width: 150px; height: auto; }
.bh-rating span {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--black);
}

.bh-pill {
	display: inline-block;
	align-self: flex-start;
	margin-top: 22px;
	padding: 10px 30px;
	background: var(--black);
	color: var(--yellow);
	border-radius: 50px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

/* ============================================================
   Section: Choose your package  (white, pricing)
   ============================================================ */
.offer {
	background: var(--white);
	color: var(--black);
	padding: 56px 20px 70px;
}
.offer__title {
	margin: 0 auto 50px;
	max-width: 900px;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--black);
}
.pkg-grid {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}

/* the whole card is the clickable checkout link */
.pkg {
	position: relative;
	flex: 0 0 330px;
	width: 330px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--black);
	border-radius: 20px;
	padding: 30px 28px 26px;
	transition: transform 0.2s ease;
}
.pkg:hover { transform: translateY(-4px); }
.pkg:not(.pkg--feat)::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 4px solid #e8e8e8;
	border-radius: 20px;
	pointer-events: none;
}

.pkg--feat {
	flex: 0 0 380px;
	width: 380px;
	padding: 32px 34px 28px;
	background: linear-gradient(180deg, #ffffff 0%, #fbe6e7 51%);
	border: 4px solid #ec1c23;
}
.pkg__badge {
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0.2px;
	color: #ec1c23;
}

.pkg__count {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 50px;
	line-height: 1;
	color: var(--black);
}
.pkg__supply {
	margin: 4px 0 0;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 26px;
	line-height: 1.1;
	color: #ec1c23;
}
.pkg__img { width: 100%; margin: 14px 0 6px; }
.pkg__img img { width: 100%; height: 200px; object-fit: contain; display: block; }

.pkg__price { margin: 6px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.pkg__amt { font-family: var(--font-body); font-weight: 900; font-size: 60px; line-height: 1; color: var(--black); }
.pkg__per { font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--black); }

.pkg__promo {
	margin: 12px 0 0;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	font-family: var(--font-body); font-weight: 900; font-size: 15px; color: #019045;
}
.pkg__chk { width: 18px; height: 18px; flex: 0 0 auto; }
.pkg__chk circle { fill: #019045; }

.pkg__buy {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 18px 10px;
	background: #ec1c23;
	color: var(--white);
	border-radius: 12px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 23px;
	line-height: 1;
	letter-spacing: 0.3px;
	text-align: center;
	transition: filter 0.2s ease;
}
.pkg:hover .pkg__buy { filter: brightness(1.07); }

.pkg__guar { margin: 16px 0 0; font-family: var(--font-body); font-weight: 900; font-size: 15px; color: #ec1c23; }
.pkg__max { margin: 4px 0 0; font-family: var(--font-body); font-weight: 900; font-size: 19px; color: var(--black); }

.pkg__total {
	margin: 16px 0 0;
	display: flex; align-items: baseline; justify-content: center; gap: 8px;
	font-family: var(--font-body); font-weight: 700; font-size: 19px; color: #555555;
}
.pkg__total s { color: #424242; font-weight: 500; font-size: 26px; text-decoration: line-through; }
.pkg__total b { color: var(--black); font-weight: 900; font-size: 26px; }

.pkg__ship { margin: 10px 0 0; font-family: var(--font-body); font-weight: 700; font-size: 19px; color: var(--black); }

.pkg__pay { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pkg__pay img { width: 42px; height: auto; }

.offer__secure {
	margin: 32px auto 0;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-body); font-weight: 500; font-size: 14px; color: #333333;
}
.offer__secure svg { width: 18px; height: 18px; flex: 0 0 auto; color: #333333; }

/* ---------- "Read more" links under wall / faq ---------- */
.wall__more,
.faq__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	max-width: calc(100% - 48px);
	min-height: 46px;
	margin: 42px auto 0;
	padding: 15px 25px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 17px;
	line-height: 16px;
	color: #666666;
	background: var(--white);
	border-radius: 15px;
	box-shadow:
		rgba(102, 102, 102, 0.54) 0.421531px 0.602187px 1.32311px -0.916667px,
		rgba(102, 102, 102, 0.53) 1.60197px 2.28853px 5.02832px -1.83333px,
		rgba(102, 102, 102, 0.45) 7px 10px 21.9718px -2.75px;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.wall__more:hover,
.faq__more:hover { opacity: 0.86; transform: translateY(-1px); }

/* ============================================================
   Buy page — responsive (phone)
   ============================================================ */
@media (max-width: 809.98px) {
	/* hero: clear the fixed 64px header */
	.hero--buy { padding: 84px 0 40px; }
	.hero--buy .hero-row { flex-direction: column; align-items: stretch; padding: 0 24px; gap: 0; }
	.hero--buy .hero-gallery { order: 1; flex: none; width: 100%; max-width: 420px; align-self: center; }
	.hero--buy .hero-gallery__main { touch-action: pan-y; cursor: grab; }
	.hero--buy .hero-gallery__main.is-dragging { cursor: grabbing; }
	.hero--buy .hero-gallery__main.is-dragging img { transition: none; }
	.hero--buy .hero-col { order: 2; align-items: flex-start; margin-top: 30px; }
	.hero--buy .hero-heading { font-size: 38px; }
	.hero--buy .hero-bullets { margin-top: 22px; }
	.bh-pill {
		max-width: 100%;
		padding: 9px clamp(6px, 2.2vw, 20px);
		font-size: clamp(9px, 2.85vw, 13px);
		letter-spacing: 0;
	}

	/* pricing stacks */
	.offer { padding: 44px 0 50px; }
	.offer__title { font-size: 31px; line-height: 1; padding: 0 24px; margin-bottom: 46px; }
	.pkg-grid { flex-direction: column; align-items: center; gap: 28px; padding: 0 24px; }
	.pkg,
	.pkg--feat {
		flex: none;
		width: 100%;
		max-width: 400px;
		display: grid;
		grid-template-columns: 130px minmax(0, 1fr);
		grid-template-areas:
			"img count"
			"img supply"
			"img price"
			"img promo"
			"buy buy"
			"total total"
			"pay pay";
		column-gap: 20px;
		row-gap: 0;
		align-items: start;
		text-align: left;
		padding: 24px 10px 18px;
		border-radius: 20px;
	}
	.pkg:hover { transform: none; }
	.pkg--feat {
		grid-template-areas:
			"img count"
			"img supply"
			"img price"
			"img promo"
			"img ship"
			"buy buy"
			"guar guar"
			"total total"
			"max max";
		padding: 24px 10px 12px;
	}
	.pkg:not(.pkg--feat)::after,
	.pkg--feat { border-radius: 20px; }
	.pkg__badge {
		top: -34px;
		font-size: 18px;
		line-height: 1.4;
	}
	.pkg__count {
		grid-area: count;
		font-size: 33px;
		line-height: 1;
		text-align: left;
		white-space: nowrap;
	}
	.pkg__supply {
		grid-area: supply;
		margin: 4px 0 0;
		font-size: 18px;
		line-height: 1;
		text-align: left;
		white-space: nowrap;
	}
	.pkg__img {
		grid-area: img;
		width: 130px;
		height: 150px;
		margin: 6px 0 0;
		align-self: start;
	}
	.pkg-grid > .pkg:nth-child(2) .pkg__img { height: 90px; margin-top: 10px; align-self: center; }
	.pkg__img img { width: 100%; height: 100%; object-fit: contain; }
	.pkg__price {
		grid-area: price;
		justify-content: flex-start;
		gap: 4px;
		margin: 0;
		text-align: left;
		white-space: nowrap;
	}
	.pkg__amt { font-size: 45px; line-height: 1; }
	.pkg__per { font-size: 22px; font-weight: 900; }
	.pkg__promo {
		grid-area: promo;
		justify-content: flex-start;
		gap: 6px;
		margin: 0;
		font-size: 0;
		line-height: 1.4;
		text-align: left;
		white-space: nowrap;
	}
	.pkg__promo::after {
		content: "PROMO: 36% OFF";
		font-size: 14px;
		line-height: 1.4;
	}
	.pkg-grid > .pkg:nth-child(3) .pkg__promo::after { content: "PROMO: 7% OFF"; }
	.pkg__chk { width: 17px; height: 17px; }
	.pkg__ship {
		grid-area: ship;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
		margin: 4px 0 0;
		font-size: 14px;
		font-weight: 900;
		line-height: 1.4;
		color: #019045;
		text-align: left;
		white-space: nowrap;
	}
	.pkg__ship::before {
		content: "";
		width: 17px;
		height: 17px;
		flex: 0 0 auto;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23019045' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8.5 12 3 3 8.5v9L12 23l9-5.5z'/%3E%3Cpath d='M3 8.5 12 14l9-5.5M12 14v9M7.5 5.8l9 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.pkg__buy {
		grid-area: buy;
		justify-self: center;
		width: 80%;
		max-width: 260px;
		margin-top: 12px;
		padding: 13px 10px;
		border-radius: 12px;
		font-size: 19px;
		line-height: 1.05;
		text-align: center;
	}
	.pkg__guar {
		grid-area: guar;
		margin: 10px 0 0;
		font-size: 15px;
		line-height: 1.4;
		text-align: center;
		white-space: nowrap;
	}
	.pkg__total {
		grid-area: total;
		justify-content: center;
		margin: 2px 0 0;
		gap: 6px;
		font-size: 19px;
		line-height: 1.35;
		text-align: center;
		white-space: nowrap;
	}
	.pkg__total s,
	.pkg__total b { font-size: 24px; }
	.pkg__max {
		grid-area: max;
		margin: 10px 0 0;
		font-size: 19px;
		line-height: 1.35;
		text-align: center;
		white-space: nowrap;
	}
	.pkg-grid > .pkg:nth-child(2) .pkg__total { display: none; }
	.pkg__pay { grid-area: pay; display: none; margin-top: 14px; }
	.pkg-grid > .pkg:nth-child(3) .pkg__pay {
		display: flex;
		justify-content: center;
		gap: 10px;
	}
	.pkg__pay img { width: 44px; }
	.offer__secure { padding: 0 24px; text-align: center; }

	.wall__more, .faq__more { margin-top: 34px; }
}