body.srt-modern {
	font-size: 16px;
	line-height: 1.6;
}

body.srt-modern h1,
body.srt-modern h2,
body.srt-modern h3,
body.srt-modern h4,
body.srt-modern p {
	margin-top: 0;
}

body.srt-modern h1,
body.srt-modern h2,
body.srt-modern h3 {
	color: var(--srt-text);
	font-family: var(--srt-font);
	font-weight: 780;
	letter-spacing: 0;
	line-height: 1.05;
}

body.srt-modern h1 {
	font-size: 3.6rem;
}

body.srt-modern h2 {
	font-size: 2.45rem;
}

body.srt-modern h3 {
	font-size: 1.35rem;
	line-height: 1.22;
}

body.srt-modern p {
	color: var(--srt-text-muted);
	font-size: 1rem;
	line-height: 1.75;
}

/* Pill do mockup: borda azul, fundo escuro, texto azul em caixa alta. */
.srt-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	border: 1px solid rgba(32, 176, 248, 0.4);
	border-radius: 999px;
	background: rgba(4, 22, 36, 0.8);
	color: var(--srt-primary);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	padding: 7px 14px;
	text-transform: uppercase;
}

.srt-pill__icon {
	display: grid;
	place-items: center;
}

.srt-pill__icon svg {
	width: 14px;
	height: 14px;
}

.srt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	color: var(--srt-primary);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.srt-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--srt-primary);
	box-shadow: 0 0 18px rgba(32, 176, 248, 0.7);
}

@media (max-width: 1024px) {
	body.srt-modern h1 {
		font-size: 3.1rem;
	}

	body.srt-modern h2 {
		font-size: 2.5rem;
	}
}

@media (max-width: 700px) {
	body.srt-modern {
		font-size: 15px;
	}

	body.srt-modern h1 {
		font-size: 2.6rem;
	}

	body.srt-modern h2 {
		font-size: 2.15rem;
	}
}

@media (max-width: 430px) {
	body.srt-modern h1 {
		font-size: 2.15rem;
	}

	body.srt-modern h2 {
		font-size: 1.9rem;
	}

	body.srt-modern h3 {
		font-size: 1.18rem;
	}
}

/* A pill e quase sempre um <p>, e "body.srt-modern p" (0,2,1) ganha de
   ".srt-pill" (0,1,0) - entao ela herdava 1rem em vez de 0.72rem. No desktop
   sobra largura e ninguem nota; no celular "AUTOMACOES PARA META TRADER 5"
   quebrava em duas linhas e o balao virava um bloco torto. A correcao fica
   dentro do media query para nao mexer no que ja esta aprovado no desktop. */
@media (max-width: 720px) {
	body.srt-modern p.srt-pill,
	body.srt-modern .srt-pill {
		align-items: center;
		font-size: 0.72rem;
		line-height: 1.35;
	}
}