/* ==========================================================================
   PrecificarApp theme — base styles
   ========================================================================== */

:root {
	--pa-color-bg: #ffffff;
	--pa-color-text: #16181d;
	--pa-color-text-muted: #565d6d;
	--pa-color-primary: #1a56e8;
	--pa-color-primary-dark: #0f3ebf;
	--pa-color-accent: #16b378;
	--pa-color-surface: #f4f6fb;
	--pa-color-border: #e2e6ee;
	--pa-max-width: 1200px;
	--pa-radius: 12px;
	--pa-space-1: 8px;
	--pa-space-2: 16px;
	--pa-space-3: 24px;
	--pa-space-4: 40px;
	--pa-space-5: 64px;
	--pa-space-6: 96px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--pa-color-text);
	background: var(--pa-color-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

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

a {
	color: inherit;
}

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

.section-title {
	font-size: 1.75rem;
	margin: 0 0 var(--pa-space-3);
	text-align: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--pa-radius);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-1px);
}

.btn--primary {
	background: var(--pa-color-primary);
	color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--pa-color-primary-dark);
}

.btn--store {
	background: var(--pa-color-text);
	color: #fff;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--pa-color-primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

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

.site-header__inner {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	padding: var(--pa-space-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-space-2);
}

.site-header__logo {
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--pa-color-text);
}

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.site-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--pa-color-border);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}

.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: var(--pa-color-text);
}

.site-header__burger::before {
	transform: translateY(-6px);
}

.site-header__burger::after {
	transform: translateY(4px);
}

.site-header__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--pa-color-bg);
	border-bottom: 1px solid var(--pa-color-border);
}

.site-header__menu.is-open {
	display: block;
}

.site-header__menu-list {
	list-style: none;
	margin: 0;
	padding: var(--pa-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--pa-space-1);
}

.site-header__menu-list a {
	display: block;
	padding: var(--pa-space-1) 0;
	text-decoration: none;
}

.site-header__cta {
	white-space: nowrap;
	padding: 10px 18px;
}

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

.hero {
	background: var(--pa-color-surface);
}

.hero__inner {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	padding: var(--pa-space-5) var(--pa-space-2);
	display: grid;
	gap: var(--pa-space-4);
	align-items: center;
}

.hero__badge {
	display: inline-block;
	font-size: 0.8125rem;
	color: var(--pa-color-text-muted);
	background: #fff;
	border: 1px solid var(--pa-color-border);
	border-radius: 999px;
	padding: 4px 12px;
	margin: 0 0 var(--pa-space-2);
}

.hero__title {
	font-size: clamp(1.75rem, 5vw, 3rem);
	margin: 0 0 var(--pa-space-2);
	line-height: 1.15;
}

.hero__subtitle {
	color: var(--pa-color-text-muted);
	font-size: 1.0625rem;
	margin: 0 0 var(--pa-space-3);
}

.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-space-2);
}

.hero__media img {
	margin: 0 auto;
	max-width: 320px;
}

/* --------------------------------------------------------------------------
   How it works / social proof
   -------------------------------------------------------------------------- */

.how-it-works {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	padding: var(--pa-space-5) var(--pa-space-2);
}

.how-it-works__social-proof {
	text-align: center;
	color: var(--pa-color-text-muted);
	margin: 0 0 var(--pa-space-4);
}

.how-it-works__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pa-space-3);
	counter-reset: steps;
}

.how-it-works__step {
	background: var(--pa-color-surface);
	border-radius: var(--pa-radius);
	padding: var(--pa-space-3);
	text-align: center;
}

.how-it-works__step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pa-color-primary);
	color: #fff;
	font-weight: 700;
	margin: 0 0 var(--pa-space-1);
}

.how-it-works__step-title {
	margin: var(--pa-space-1) 0;
	font-size: 1.125rem;
}

.how-it-works__step-description {
	color: var(--pa-color-text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   What you check
   -------------------------------------------------------------------------- */

.what-you-check {
	background: var(--pa-color-surface);
	padding: var(--pa-space-5) var(--pa-space-2);
}

.what-you-check__grid {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--pa-space-2);
}

.what-you-check__item {
	display: flex;
	align-items: center;
	gap: var(--pa-space-2);
	background: #fff;
	border: 1px solid var(--pa-color-border);
	border-radius: var(--pa-radius);
	padding: var(--pa-space-2);
}

/* --------------------------------------------------------------------------
   Audience
   -------------------------------------------------------------------------- */

.audience {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	padding: var(--pa-space-5) var(--pa-space-2);
}

.audience__grid {
	display: grid;
	gap: var(--pa-space-3);
}

.audience__card {
	border: 1px solid var(--pa-color-border);
	border-radius: var(--pa-radius);
	padding: var(--pa-space-3);
}

.audience__name {
	margin: 0 0 var(--pa-space-2);
	font-size: 1.125rem;
}

.audience__benefits {
	margin: 0;
	padding-left: 1.1em;
	color: var(--pa-color-text-muted);
}

.audience__benefits li + li {
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Benefits
   -------------------------------------------------------------------------- */

.benefits {
	background: var(--pa-color-surface);
	padding: var(--pa-space-5) var(--pa-space-2);
	text-align: center;
}

.benefits__list {
	max-width: var(--pa-max-width);
	margin: 0 auto var(--pa-space-3);
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--pa-space-2);
	text-align: left;
}

.benefits__item {
	background: #fff;
	border: 1px solid var(--pa-color-border);
	border-radius: var(--pa-radius);
	padding: var(--pa-space-2);
}

.benefits__item::before {
	content: "\2713";
	color: var(--pa-color-accent);
	font-weight: 700;
	margin-right: 8px;
}

.benefits__reinforcement {
	font-weight: 600;
	font-size: 1.125rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */

.cta-final {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	padding: var(--pa-space-5) var(--pa-space-2);
	text-align: center;
}

.cta-final__buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--pa-space-2);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--pa-color-text);
	color: #fff;
}

.site-footer__inner {
	max-width: var(--pa-max-width);
	margin: 0 auto;
	padding: var(--pa-space-4) var(--pa-space-2);
	display: grid;
	gap: var(--pa-space-3);
}

.site-footer__logo {
	font-weight: 700;
	font-size: 1.125rem;
}

.site-footer__tagline {
	color: #c3c8d4;
	margin: var(--pa-space-1) 0 0;
}

.site-footer__menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-space-2);
}

.site-footer__menu-list a {
	text-decoration: none;
	color: #c3c8d4;
}

.site-footer__stores {
	display: flex;
	gap: var(--pa-space-2);
	flex-wrap: wrap;
}

.store-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid #454b58;
	border-radius: var(--pa-radius);
	text-decoration: none;
	color: #fff;
}

.site-footer__legal {
	border-top: 1px solid #2a2f3a;
	padding: var(--pa-space-2);
	text-align: center;
	color: #8b90a0;
	font-size: 0.875rem;
}

.site-footer__legal p {
	margin: 4px 0;
}

/* --------------------------------------------------------------------------
   Generic content templates (page / single / archive / 404)
   -------------------------------------------------------------------------- */

.page-content-wrap,
.single-content-wrap,
.archive-content-wrap,
.error-404-wrap {
	max-width: 800px;
	margin: 0 auto;
	padding: var(--pa-space-5) var(--pa-space-2);
}

.error-404-wrap {
	text-align: center;
}

.single-content__meta {
	color: var(--pa-color-text-muted);
	font-size: 0.9375rem;
}

.archive-list {
	display: grid;
	gap: var(--pa-space-3);
}

.archive-list__item {
	border-bottom: 1px solid var(--pa-color-border);
	padding-bottom: var(--pa-space-3);
}

.archive-list__title {
	margin: var(--pa-space-1) 0;
}

.archive-list__title a {
	text-decoration: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 768px) {
	.site-header__toggle {
		display: none;
	}

	.site-header__menu {
		display: block;
		position: static;
		border-bottom: none;
		background: transparent;
	}

	.site-header__menu-list {
		flex-direction: row;
		padding: 0;
		gap: var(--pa-space-3);
	}

	.hero__inner {
		grid-template-columns: 1.1fr 0.9fr;
		text-align: left;
	}

	.hero__ctas {
		justify-content: flex-start;
	}

	.how-it-works__steps {
		grid-template-columns: repeat(3, 1fr);
	}

	.what-you-check__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.audience__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.benefits__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__inner {
		grid-template-columns: 1.2fr 1fr 1fr;
		align-items: start;
	}
}

@media (min-width: 1200px) {
	.what-you-check__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}