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

.hero {
	padding-block: clamp(2.5rem, 7vw, 5rem);
}

.hero-inner {
	display: grid;
	gap: clamp(2rem, 6vw, 4rem);
	align-items: center;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hero-text {
	max-width: 34rem;
}

.hero-text .eyebrow {
	margin-bottom: var(--space-4);
}

.hero-text h1 {
	font-size: var(--fs-3xl);
	line-height: 1.1;
}

.hero-lead {
	margin-top: var(--space-5);
	font-size: var(--fs-md);
	line-height: 1.65;
	color: var(--text-muted);
	max-width: 46ch;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

/* em telas estreitas os dois CTAs ocupam a linha inteira,
   em vez de virarem dois botõezinhos apertados lado a lado */
.hero-actions .btn {
	flex: 1 1 14rem;
}

@media (min-width: 480px) {
	.hero-actions .btn {
		flex: 0 0 auto;
	}
}

.hero-trust {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.hero-trust li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.hero-trust li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	background: var(--accent-ink);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero-visual {
	justify-self: center;
	width: min(100%, 22rem);
}

@media (min-width: 620px) {
	.hero-trust {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-3) var(--space-6);
	}
}

@media (min-width: 900px) {
	.hero-inner {
		grid-template-columns: 1fr minmax(0, 24rem);
	}

	.hero-visual {
		justify-self: end;
	}
}

/* ---------- Como funciona ---------- */

.steps {
	padding-block: clamp(2.5rem, 7vw, 4.5rem);
	border-top: 1px solid var(--border);
	background: var(--surface-alt);
	/* compensa o cabeçalho fixo quando se chega aqui pela âncora */
	scroll-margin-top: var(--header-h);
}

.steps-inner {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.steps-title {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-8);
}

.steps-list {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.step {
	padding: var(--space-6);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: var(--space-4);
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	font-size: var(--fs-sm);
	font-weight: 700;
}

.step h3 {
	font-size: var(--fs-md);
	margin-bottom: var(--space-2);
}

.step p {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	line-height: 1.6;
}