/*
Theme Name: ONOVO
Theme URI: https://onovopharma.com
Author: GG Solutions Hub
Author URI: https://ggsolutionshub.com
Description: Custom lightweight theme for the ONOVO "Her Phase" presale landing page. All landing texts and images are editable in Appearance → Customize → ONOVO Landing; footer links are managed in Appearance → Menus; email sign-ups are stored under Subscribers.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onovo
*/

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

/* ==========================================================================
   Tokens
   Desktop values are measured from the 1440px-wide design and scale down
   uniformly with --s (1px at ≥1440px) until the mobile layout takes over.
   ========================================================================== */

:root {
	--bg: #ffffff;
	--ink: #100f0d;
	--logo: #211d1d;
	--primary: #e7e3ed;
	--box: #efedf3;
	--hero-bg: #c7c5c1;
	--card: var(--primary);
	--pill-fill: var(--box);
	--on-card: var(--ink);
	--form-bg: var(--box);
	--btn: #000000;
	--btn-text: var(--primary);
	--btn-hover: #2a2730;
	--media-bg: #ffffff;
	--error: #9b2c4a;

	--font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

	--s: min(1px, calc(100vw / 1440));
	--ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

h1,
h2,
h3,
p,
ul,
figure {
	margin: 0;
}

ul[role="list"],
.footer-menu {
	list-style: none;
	padding: 0;
}

.display {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -.02em;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	z-index: 1000;
	background: #fff;
	color: var(--ink);
	border-radius: 8px;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site > main {
	flex: 1 0 auto;
}

/* Logo ------------------------------------------------------------------ */

.onovo-logo {
	display: inline-block;
	color: var(--logo);
	line-height: 0;
	text-decoration: none;
}

.onovo-logo__svg,
.onovo-logo__img {
	width: 100%;
	height: auto;
}

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

.hero {
	position: relative;
	margin: calc(34 * var(--s)) calc(27 * var(--s)) 0;
	aspect-ratio: 1386 / 860;
	min-height: 520px;
	border-radius: calc(24 * var(--s));
	overflow: hidden;
	background: var(--hero-bg);
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Photo is zoomed and offset so the bottle sits exactly where it is in the design. */
.hero__img {
	position: absolute;
	top: -7.08%;
	left: -34.25%;
	width: 145.48%;
	max-width: none;
	height: auto;
}

.hero__inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: calc(56 * var(--s)) calc(40 * var(--s)) 0;
	text-align: center;
}

.hero__logo {
	width: calc(208 * var(--s));
	min-width: 120px;
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(190 * var(--s));
	width: 100%;
}

.hero__title {
	font-size: max(24px, calc(46 * var(--s)));
	line-height: 1.2;
}

.hero__subtitle {
	margin-top: calc(24 * var(--s));
	font-size: max(14px, calc(18 * var(--s)));
	line-height: 1.33;
}

/* Signup form ------------------------------------------------------------ */

.signup {
	position: relative;
	display: flex;
	align-items: center;
	width: calc(722 * var(--s));
	min-width: 420px;
	height: calc(71 * var(--s));
	min-height: 52px;
	margin-top: calc(49 * var(--s));
	padding: calc(5 * var(--s));
	background: var(--form-bg);
	border-radius: 999px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
	transition: box-shadow .25s var(--ease);
}

.signup:focus-within {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 30px -12px rgba(16, 15, 13, .25);
}

.signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.signup__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 0 0 calc(30 * var(--s));
	border: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: max(16px, calc(24 * var(--s)));
	outline: none;
}

.signup__input::placeholder {
	color: var(--ink);
	opacity: 1;
}

.signup__input:focus::placeholder {
	opacity: .45;
}

.signup__button {
	flex: 0 0 calc(325 * var(--s));
	min-width: 170px;
	height: 100%;
	border: 0;
	border-radius: 999px;
	background: var(--btn);
	color: var(--btn-text);
	font-family: var(--font-body);
	font-size: max(14px, calc(18 * var(--s)));
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.signup__button:hover {
	background: var(--btn-hover);
}

.signup__button:active {
	transform: scale(.985);
}

.signup.is-loading .signup__button {
	opacity: .75;
	cursor: progress;
}

.signup.is-done .signup__input {
	pointer-events: none;
	opacity: .6;
}

.hero__note {
	margin-top: calc(18 * var(--s));
	font-size: max(13px, calc(15 * var(--s)));
	line-height: 1.4;
}

.signup__message {
	min-height: 1.4em;
	margin-top: calc(14 * var(--s));
	font-size: max(13px, calc(15 * var(--s)));
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.signup__message.is-ok,
.signup__message.is-error {
	opacity: 1;
	transform: none;
}

.signup__message.is-error {
	color: var(--error);
}

/* ==========================================================================
   Intro
   ========================================================================== */

.intro {
	padding: calc(145 * var(--s)) calc(64 * var(--s)) 0 calc(67 * var(--s));
}

.intro__title {
	font-size: max(30px, calc(59 * var(--s)));
	line-height: 1.237;
}

.intro__text {
	margin-top: calc(31 * var(--s));
	margin-left: auto;
	max-width: max(320px, calc(560 * var(--s)));
	text-align: right;
	font-size: max(13px, calc(19.5 * var(--s)));
	line-height: 1.18;
	letter-spacing: .01em;
}

/* ==========================================================================
   Features
   ========================================================================== */

.features {
	padding: calc(73 * var(--s)) calc(64 * var(--s)) 0;
}

.features__stage {
	position: relative;
	min-height: calc(590 * var(--s));
}

.features__circle {
	position: absolute;
	top: 0;
	left: 50%;
	width: calc(550 * var(--s));
	aspect-ratio: 1;
	margin-left: calc(-275 * var(--s));
	border-radius: 50%;
	overflow: hidden;
	background: #e9e6ec;
}

.features__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.features__circle:hover .features__img {
	transform: scale(1.04);
}

.feature {
	position: absolute;
	z-index: 1;
	max-width: calc(470 * var(--s));
}

.feature--1 {
	top: calc(10 * var(--s));
	left: calc(3 * var(--s));
}

.feature--2 {
	top: calc(192 * var(--s));
	right: 0;
	text-align: right;
}

.feature--3 {
	top: calc(436 * var(--s));
	left: calc(19 * var(--s));
}

.feature--4 {
	top: calc(436 * var(--s));
	right: 0;
	text-align: right;
}

/* Feature icons – Lucide (ISC licence, lucide.dev): refresh-cw, sparkles, pill, leaf. */
.feature__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max(40px, calc(56 * var(--s)));
	height: max(40px, calc(56 * var(--s)));
	border-radius: 50%;
	background: var(--box);
	font-size: 0;
	color: transparent;
}

.feature__num::before {
	content: "";
	width: 46%;
	height: 46%;
	background-color: var(--ink);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.feature--1 .feature__num {
	--icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8%22 /%3E%3Cpath d=%22M21 3v5h-5%22 /%3E%3Cpath d=%22M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16%22 /%3E%3Cpath d=%22M8 16H3v5%22 /%3E%3C/svg%3E");
}

.feature--2 .feature__num {
	--icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z%22 /%3E%3Cpath d=%22M20 3v4%22 /%3E%3Cpath d=%22M22 5h-4%22 /%3E%3Cpath d=%22M4 17v2%22 /%3E%3Cpath d=%22M5 18H3%22 /%3E%3C/svg%3E");
}

.feature--3 .feature__num {
	--icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z%22 /%3E%3Cpath d=%22m8.5 8.5 7 7%22 /%3E%3C/svg%3E");
}

.feature--4 .feature__num {
	--icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22 /%3E%3Cpath d=%22M2 21c0-3 1.850-5.36 5.08-6C9.5 14.52 12 13 13 12%22 /%3E%3C/svg%3E");
}

.feature__title {
	margin-top: calc(14 * var(--s));
	font-size: max(16px, calc(28 * var(--s)));
	line-height: 1.15;
}

.feature__text {
	margin-top: calc(6 * var(--s));
	font-size: max(12px, calc(15 * var(--s)));
	line-height: 1.35;
}

/* ==========================================================================
   Benefits card
   ========================================================================== */

.benefits {
	padding: calc(209 * var(--s)) calc(27 * var(--s)) 0;
}

.benefits__card {
	display: grid;
	grid-template-columns: calc(657 * var(--s)) 1fr calc(525 * var(--s));
	padding: calc(87 * var(--s)) calc(51 * var(--s)) calc(60 * var(--s)) calc(50 * var(--s));
	background: var(--card);
	border-radius: calc(67 * var(--s));
	color: var(--on-card);
}

.benefits__content {
	grid-column: 1;
	align-self: end;
	padding-top: calc(58 * var(--s));
	margin-bottom: calc(12 * var(--s));
}

.benefits__title {
	font-size: max(24px, calc(47 * var(--s)));
	line-height: 1.225;
}

.benefits__text {
	max-width: calc(600 * var(--s));
	margin-top: calc(24 * var(--s));
	font-size: max(14px, calc(22 * var(--s)));
	line-height: 1.3;
	letter-spacing: .01em;
}

.benefits__pills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(31 * var(--s)) calc(13 * var(--s));
	margin-top: calc(44 * var(--s));
}

.benefits__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(71 * var(--s));
	min-height: 48px;
	margin-top: calc(40 * var(--s));
	padding: 0 calc(44 * var(--s));
	border-radius: 999px;
	background: var(--btn);
	color: var(--btn-text);
	font-size: max(14px, calc(18 * var(--s)));
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.benefits__cta:hover {
	background: var(--btn-hover);
}

.benefits__cta:active {
	transform: scale(.985);
}

.pill {
	display: flex;
	align-items: center;
	height: calc(108 * var(--s));
	min-height: 52px;
	padding: 0 calc(31 * var(--s));
	border: 1.5px solid var(--ink);
	border-radius: calc(29 * var(--s));
	font-size: max(14px, calc(22 * var(--s)));
	line-height: 1.2;
	font-weight: 500;
	color: var(--ink);
	transition: background-color .3s var(--ease), color .3s var(--ease);
}

.pill:nth-child(4n + 2),
.pill:nth-child(4n + 3) {
	background: var(--pill-fill);
	border-color: var(--pill-fill);
}

.benefits__media {
	grid-column: 3;
	aspect-ratio: 525 / 626;
	border-radius: calc(53 * var(--s));
	overflow: hidden;
	background: var(--media-bg);
}

.benefits__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 100%;
}

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

.site-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: calc(120 * var(--s));
	padding: calc(110 * var(--s)) 24px calc(110 * var(--s));
	background: var(--primary);
	text-align: center;
	font-size: max(15px, calc(27 * var(--s)));
	line-height: 1.15;
	letter-spacing: .01em;
}

.site-footer__logo {
	width: calc(208 * var(--s));
	min-width: 120px;
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px calc(46 * var(--s));
	margin-top: calc(86 * var(--s));
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
}

.footer-menu--social {
	gap: 8px calc(56 * var(--s));
}

.footer-menu--legal {
	gap: 8px calc(34 * var(--s));
}

.footer-menu a,
.text-link {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .3s var(--ease);
}

.footer-menu a:hover,
.footer-menu a:focus-visible,
.text-link:hover {
	background-size: 100% 1px;
}

.site-footer__disclaimer {
	max-width: 900px;
	margin-top: calc(48 * var(--s));
	font-size: max(12px, calc(14 * var(--s)));
	line-height: 1.5;
	opacity: .75;
}

.site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px calc(24 * var(--s));
	margin-top: calc(33 * var(--s));
}

/* ==========================================================================
   Inner pages (Privacy policy, Terms, Contact)
   ========================================================================== */

.site-header {
	display: flex;
	justify-content: center;
	padding: 48px 24px 0;
}

.site-header__logo {
	width: 160px;
}

.page-main {
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding: 72px 24px 0;
}

.page-main--center {
	text-align: center;
}

.page-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.2;
	margin-bottom: 32px;
}

.entry-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	margin: 32px 0 8px;
}

.entry-title a {
	text-decoration: none;
}

.entry-content {
	font-size: 17px;
	line-height: 1.65;
}

.entry-content > * + * {
	margin-top: 1em;
}

.entry-content h2,
.entry-content h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 1.8em;
}

.entry-content h2 {
	font-size: 28px;
}

.entry-content h3 {
	font-size: 22px;
}

.entry-content a {
	text-underline-offset: 3px;
}

.landing-extra {
	max-width: 1100px;
	margin: 0 auto;
	padding: 120px 24px 0;
}

/* ==========================================================================
   Reveal on scroll (only when JS runs; respects reduced motion)
   ========================================================================== */

.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	transition-delay: var(--delay, 0s);
}

.js .features__circle.reveal {
	transform: scale(.94);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .hero__inner > * {
	animation: onovo-rise 1s var(--ease) both;
}

.js .hero__content {
	animation-delay: .15s;
}

@keyframes onovo-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .reveal,
	.js .features__circle.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.js .hero__inner > * {
		animation: none;
	}

	.features__circle:hover .features__img {
		transform: none;
	}
}

/* ==========================================================================
   Mobile & small tablet (< 900px)
   ========================================================================== */

@media (max-width: 899px) {

	/* Hero: text on the grey card, product photo below it. */
	.hero {
		margin: 12px 12px 0;
		aspect-ratio: auto;
		min-height: 0;
		border-radius: 22px;
		display: flex;
		flex-direction: column;
	}

	.hero__media {
		position: relative;
		order: 2;
		z-index: 0;
		height: clamp(340px, 105vw, 620px);
		margin-top: -8vw;
	}

	.hero__img {
		position: static;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 26% 100%;
	}

	.hero__inner {
		position: relative;
		z-index: 1;
		height: auto;
		padding: 30px 20px 0;
	}

	.hero__logo {
		width: 128px;
		min-width: 0;
	}

	.hero__content {
		margin-top: 52px;
	}

	.hero__title {
		font-size: clamp(22px, 6.6vw, 38px);
	}

	.hero__subtitle {
		margin-top: 14px;
		font-size: 15px;
		max-width: 30ch;
	}

	.signup {
		width: 100%;
		max-width: 520px;
		min-width: 0;
		height: 58px;
		margin-top: 28px;
		padding: 4px;
	}

	.signup__input {
		padding-left: 20px;
		font-size: 16px;
	}

	.signup__button {
		flex-basis: 44%;
		min-width: 0;
		font-size: 15px;
	}

	.hero__note {
		margin-top: 14px;
		max-width: 34ch;
		font-size: 13px;
	}

	.signup__message {
		margin-top: 10px;
		font-size: 14px;
	}

	/* Intro */
	.intro {
		padding: 72px 20px 0;
	}

	.intro__title {
		font-size: clamp(25px, 7vw, 44px);
		line-height: 1.22;
	}

	.intro__text {
		margin-top: 22px;
		max-width: 36ch;
		margin-left: 0;
		text-align: left;
		font-size: 15px;
		line-height: 1.4;
	}

	.intro__text br {
		display: none;
	}

	/* Features: circle first, then the three points alternating sides */
	.features {
		padding: 48px 20px 0;
	}

	.features__stage {
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 34px;
	}

	.features__circle {
		position: relative;
		left: auto;
		width: min(80vw, 440px);
		margin: 0 auto 6px;
	}

	.feature {
		position: static;
		max-width: 300px;
	}

	.feature--2,
	.feature--4 {
		align-self: flex-end;
	}

	.feature__num {
		width: 46px;
		height: 46px;
	}

	.feature__title {
		margin-top: 12px;
		font-size: 21px;
		white-space: normal;
	}

	.feature__text {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.4;
	}

	.feature__text br,
	.feature__title br {
		display: none;
	}

	/* Benefits */
	.benefits {
		padding: 80px 12px 0;
	}

	.benefits__card {
		display: flex;
		flex-direction: column;
		padding: 40px 18px 18px;
		border-radius: 32px;
	}

	.benefits__content {
		padding: 0 4px;
		margin: 0;
	}

	.benefits__title {
		font-size: clamp(22px, 6.4vw, 38px);
		line-height: 1.3;
	}

	.benefits__text {
		max-width: none;
		margin-top: 16px;
		font-size: 15px;
		line-height: 1.45;
	}

	.benefits__pills {
		gap: 10px;
		margin-top: 24px;
	}

	.benefits__cta {
		height: 52px;
		margin-top: 24px;
		padding: 0 28px;
		font-size: 15px;
	}

	.pill {
		height: auto;
		min-height: 60px;
		padding: 12px 14px;
		border-radius: 18px;
		font-size: 14px;
	}

	.benefits__media {
		margin-top: 28px;
		border-radius: 24px;
	}

	/* Footer */
	.site-footer {
		margin-top: 72px;
		padding: 56px 20px 48px;
		font-size: 16px;
	}

	.site-footer__logo {
		width: 128px;
		min-width: 0;
	}

	.site-footer__nav {
		flex-direction: column;
		gap: 12px;
		margin-top: 36px;
	}

	.footer-menu--social,
	.footer-menu--legal {
		gap: 10px 24px;
	}

	.site-footer__disclaimer {
		margin-top: 32px;
		font-size: 12px;
	}

	.site-footer__meta {
		margin-top: 20px;
		gap: 4px 14px;
		font-size: 14px;
	}
}

@media (max-width: 359px) {
	.benefits__pills {
		grid-template-columns: 1fr;
	}

	.pill:nth-child(n) {
		background: transparent;
		border-color: var(--ink);
	}

	.pill:nth-child(even) {
		background: var(--pill-fill);
		border-color: var(--pill-fill);
	}
}