/* =============================================================================
 * /platform — folha propria da pagina. Carregada SO nesta rota.
 * =============================================================================
 * Por que existe: as tres folhas de assets/chunks/ sao COMPILADAS e trazem um
 * conjunto FECHADO de classes Tailwind. A pagina de produto precisa de cinco
 * estruturas que aquele conjunto nao cobre (registro numerado, trilho vertical,
 * faixa de portoes, painel de limites e trilho de conexao). Escrever regra
 * propria e mais honesto do que torcer utilitario que nao existe.
 *
 * REGRAS QUE ESTA FOLHA SEGUE
 *   1. ZERO hexadecimal. Toda cor sai de `var(--gs-*)` (ou de `--gv-*`, que as
 *      folhas compiladas ja derivam dos mesmos tokens). Nenhuma cor nova entra
 *      no site por aqui.
 *   2. Zero fonte nova: so `var(--font-heading)` (Sora) e `var(--font-mono)`
 *      (IBM Plex Mono), os dois tokens que o build ja declara.
 *   3. Zero imagem. Onde o template pedia foto, o desenho e geometria.
 *   4. Nada de `!important`. Nenhuma regra sai da rota: o alcance e sempre um
 *      prefixo `.gsp-*` ou o `id` de uma secao DESTA pagina (`#overview`,
 *      `#how-it-works`, `#capabilities`, `#skill-studio`, `#integrations`,
 *      `#governance`, `#platform-questions`). O bloco 12 usa a segunda forma
 *      para alcancar listas montadas com utilitario, que nao tem classe propria
 *      — nunca `nth-of-type` em <section>, que quebraria em silencio se alguem
 *      inserir uma secao.
 *
 * TEMA CLARO/ESCURO
 * Cada raiz de componente leva `gsp-scope`, que declara as variaveis locais.
 * Dentro de uma secao escura o site ja marca `.gs-ring-dark`; e so isso que
 * inverte a paleta abaixo. Nenhum componente precisa de variante no HTML.
 * ========================================================================== */

.gsp-scope {
	--gsp-line: var(--gs-border);
	--gsp-line-strong: var(--gs-border-strong);
	--gsp-ink: var(--gs-text);
	--gsp-ink-dim: var(--gs-text-muted);
	--gsp-accent: var(--gs-primary-deep);
	--gsp-panel: var(--gs-surface-2);
	--gsp-surface: var(--gs-surface);
}

.gs-ring-dark .gsp-scope {
	--gsp-line: var(--gs-border-dark);
	--gsp-line-strong: var(--gs-border-strong-dark);
	--gsp-ink: var(--gs-text-on-dark);
	--gsp-ink-dim: var(--gs-text-muted-on-dark);
	--gsp-accent: var(--gs-mint);
	--gsp-panel: var(--gs-overlay-on-dark);
	--gsp-surface: var(--gs-surface-dark-2);
}

/* -----------------------------------------------------------------------------
 * 0. DIVISAO INVERTIDA (coluna estreita a ESQUERDA)
 * -----------------------------------------------------------------------------
 * O tema compilado so traz a divisao larga-esquerda/estreita-direita
 * (`min-[992px]:grid-cols-[minmax(0,1fr)_minmax(0,0.86fr)]`). Duas secoes desta
 * pagina precisam do inverso, para o fluxo alternar de lado em vez de descer
 * sempre no mesmo eixo. A classe abaixo e so isso: a mesma proporcao, espelhada.
 * -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.gsp-split-rev {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
	}

	/* ⚠️ SO NO s03Squads, e o `#how-it-works` NAO E ENFEITE: `.gsp-split-rev` e
	 * usada tambem no s08Budgets, e la a coluna estreita e o painel de limites —
	 * estreitar aquela coluna desfaria a regua que o bloco 7 acabou de alargar.
	 *
	 * POR QUE ESTREITAR AQUI. O trilho e o bloco com MENOS conteudo da pagina:
	 * cinco rotulos curtos numa coluna de 580,7px. MEDIDO em 1440, sobravam 294px
	 * de branco continuo entre o fim do rotulo mais longo e o inicio da coluna de
	 * texto — um corredor vertical no meio da secao, que le como falha de
	 * montagem e nao como respiro. Em 0,62fr a coluna cai para 480,6px e o
	 * corredor para ~195px, que e vao de grade e nao buraco. */
	/* ⚠️ O ESTREITAMENTO SO VALE DE 1200 PARA CIMA — ver bloco abaixo.
	 * Aqui, na faixa 992-1199, a coluna fica como a casa manda (0,86fr). */
}

/* O corredor de 294px so existe em tela larga. Aplicar 0,62fr ja em 992
 * estreitava uma coluna que ali ja estava justa: medido em 992 (clientW 977),
 * a grade ia de 408,3/474,7 para 337,9/545,1 e DOIS dos cinco rotulos passavam
 * a quebrar em duas linhas — "Sequential, parallel and DAG topologies" e
 * "Model flexibility by task and requirement". O trilho perdia o ritmo dos
 * pontos para fechar um buraco que naquela largura nao existia.
 *
 * 1200px e o degrau que a casa ja usa (768 / 992 / 1200), entao a mudanca
 * entra junto com o resto da pagina em vez de criar um degrau proprio. */
@media (min-width: 1200px) {
	#how-it-works .gsp-split-rev {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	}

	/* Contrapartida obrigatoria da linha acima: a coluna de texto cresce para
	 * 775px e o `max-w-[62ch]` do template (783px, medido) deixaria o paragrafo
	 * passar dos 675px de medida maxima da pagina — 79 caracteres por linha. O
	 * teto e escrito aqui em vez de no template porque o seletor alcanca o alvo,
	 * e o alvo e unico: o <p> desta grade e um so. */
	#how-it-works .gsp-split-rev p {
		max-width: 675px;
	}
}

/* -----------------------------------------------------------------------------
 * 1. REGISTRO DE MODULOS — s02Overview
 * -----------------------------------------------------------------------------
 * Substitui a grade de cartoes. Dez modulos em cartao viram dez caixas iguais e
 * a leitura vira varredura; em registro numerado viram um indice, que e o que
 * a pagina de produto precisa ser. A partir de 1200px a linha abre em tres
 * colunas (ordinal / nome / descricao) e passa a ler como tabela.
 * -------------------------------------------------------------------------- */

.gsp-register {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* ⚠️ O `margin:0` que estava aqui zerava o vao ENTRE o cabecalho da secao e o
	 * registro. O template pede `mt-10 min-[992px]:mt-12`, mas utilitario e regra
	 * de folha propria tem a MESMA especificidade (0,1,0) e esta folha carrega
	 * depois — entao quem ganhava era o zero. MEDIDO em 1440: o topo do registro
	 * caia exatamente no rodape do bloco de titulo, 0,0px de respiro. Ver 12.1. */
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.gsp-register__row {
	border-top: 1px solid var(--gsp-line);
}

.gsp-register__row:last-child {
	border-bottom: 1px solid var(--gsp-line);
}

.gsp-register__inner {
	display: grid;
	grid-template-columns: 3ch minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 4px;
	align-items: baseline;
	padding-block: 16px;
	text-decoration: none;
	color: inherit;
}

.gsp-register__ord {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--gsp-accent);
}

.gsp-register__name {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gsp-ink);
}

.gsp-register__desc {
	grid-column: 2;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gsp-ink-dim);
}

a.gsp-register__inner:hover .gsp-register__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 992px) {
	.gsp-register {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 56px;
	}

	.gsp-register__row:last-child {
		border-bottom: 0;
	}

	.gsp-register__row:nth-last-child(-n + 2) {
		border-bottom: 1px solid var(--gsp-line);
	}

	.gsp-register__inner {
		padding-block: 18px;
	}
}

@media (min-width: 1200px) {
	.gsp-register {
		/* RIMA COM O CABECALHO. O cabecalho desta secao e a grade compilada
		 * `minmax(0,1fr) minmax(0,0.86fr)` com 64px de vao; o registro era
		 * `repeat(2,1fr)` com 72px. MEDIDO em 1440: a segunda coluna do registro
		 * comecava em x=756 e a do cabecalho logo acima em x=799,3 — 43,3px de
		 * erro, grande demais para passar por acaso e pequeno demais para ler
		 * como intencao. Com a MESMA grade e o MESMO vao, as duas colunas caem no
		 * mesmo eixo e o bloco inteiro passa a ter dois prumos, nao quatro.
		 * Efeito colateral bem-vindo: a metade esquerda, que carrega as descricoes
		 * mais longas ("Controlled document and spreadsheet outputs"), cresce de
		 * 624 para 675px. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
		column-gap: 64px;
	}

	.gsp-register__inner {
		/* Proporcional, nao em `ch`: "Template Builder" e "Qualifications" nao
		 * cabem numa medida fixa curta e quebrariam em duas linhas so nessas
		 * duas linhas do registro, desalinhando a coluna inteira. */
		grid-template-columns: 3ch minmax(0, 0.36fr) minmax(0, 0.64fr);
		column-gap: 20px;
		row-gap: 0;
	}

	.gsp-register__desc {
		grid-column: 3;
	}
}

/* -----------------------------------------------------------------------------
 * 2. TRILHO VERTICAL — s03Squads
 * -----------------------------------------------------------------------------
 * Mesma gramatica do ProcessFlow compilado (circulo de 26px + fio de 1px), so
 * que na vertical e em qualquer largura: o ProcessFlow vira horizontal a partir
 * de 768px, e aqui o bloco fica na coluna da ESQUERDA, estreita.
 * -------------------------------------------------------------------------- */

.gsp-branch {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsp-branch__item {
	position: relative;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	/* 22px era numero solto. 24px poe o trilho na mesma escada do resto e, de
	 * quebra, alonga o bloco em 8px — parte do que faltava para ele fazer par
	 * com a coluna de texto ao lado. */
	padding-bottom: 24px;
}

.gsp-branch__item:last-child {
	padding-bottom: 0;
}

.gsp-branch__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 26px;
	bottom: 0;
	left: 13px;
	width: 1px;
	background-color: var(--gsp-line-strong);
}

.gsp-branch__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--gsp-line-strong);
	border-radius: 50%;
	background-color: var(--gsp-surface);
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--gsp-ink-dim);
}

.gsp-branch__label {
	padding-top: 4px;
	/* 16px, nao 15px. O trilho e o unico conteudo da metade esquerda desta secao
	 * e estava um degrau abaixo do corpo de texto que ele acompanha (17px em
	 * 992+): lia como legenda de figura em vez de lista de pares. */
	font-size: 16px;
	line-height: 1.55;
	color: var(--gsp-ink);
}

/* -----------------------------------------------------------------------------
 * 3. FAIXA DE PORTOES — s04Qualifications
 * -----------------------------------------------------------------------------
 * Os cinco criterios de prontidao como uma regua horizontal de cinco casas,
 * dividida por fios verticais. E o bloco de RESPIRO da pagina: uma faixa larga
 * e rasa entre duas secoes densas.
 * -------------------------------------------------------------------------- */

.gsp-gates {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* Mesmo defeito e mesma correcao do registro — ver 12.1. */
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--gsp-line);
}

.gsp-gates__gate {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	align-items: baseline;
	padding-block: 16px;
	border-bottom: 1px solid var(--gsp-line);
}

.gsp-gates__ord {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gsp-accent);
}

.gsp-gates__label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--gsp-ink);
}

/* A regua so abre em cinco casas a partir de 992px, nao de 768px.
 * MEDIDO em 768px: a casa fica com 104px uteis e "Separate experimentation from
 * production use" mede 118px na palavra mais longa — o texto vazava da coluna.
 * Em 992px a casa vai a 152px uteis e a mesma palavra mede 105px. */
@media (min-width: 992px) {
	.gsp-gates {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		border-bottom: 1px solid var(--gsp-line);
	}

	.gsp-gates__gate {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		align-content: start;
		padding: 22px 20px 26px;
		border-bottom: 0;
		border-left: 1px solid var(--gsp-line);
	}

	.gsp-gates__gate:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.gsp-gates__label {
		text-wrap: balance;
	}
}

/* -----------------------------------------------------------------------------
 * 4. NOTA ENCOSTADA A DIREITA — s04Qualifications
 * -----------------------------------------------------------------------------
 * A microcopy nao fica sob o titulo, como nas outras paginas: ela desce para a
 * borda direita do container. E o que quebra o eixo unico a esquerda sem trocar
 * nenhuma cor.
 * -------------------------------------------------------------------------- */

.gsp-note-end {
	padding-left: 16px;
	border-left: 2px solid var(--gsp-line-strong);
	font-size: 15px;
	line-height: 1.6;
	font-style: italic;
	color: var(--gsp-ink-dim);
}

@supports (color: color-mix(in srgb, red, red)) {
	.gsp-note-end {
		border-left-color: color-mix(in srgb, var(--gsp-accent) 55%, transparent);
	}
}

@media (min-width: 992px) {
	.gsp-note-end {
		max-width: 46ch;
		margin-left: auto;
	}
}

/* -----------------------------------------------------------------------------
 * 5. FAIXA SANGRADA — s05Pipelines
 * -----------------------------------------------------------------------------
 * O diagrama do pipeline sai do `tj-container` e vai de borda a borda. E o
 * unico bloco da pagina que rompe a caixa; e ele que da o corte de ritmo no
 * meio das onze secoes.
 *
 * ⚠️ ESTE BLOCO E FILHO DIRETO DA `<section>`, NAO do `.tj-container`. E dai
 * que vem a largura total — sem `100vw` e sem margem negativa, que sao as duas
 * receitas que fazem a pagina ganhar rolagem horizontal quando a barra de
 * rolagem do sistema ocupa espaco. Se alguem mover isto para dentro do
 * container, o bloco volta a caber nos 1350px e o efeito some.
 * -------------------------------------------------------------------------- */

.gsp-bleed {
	/* 15px e o mesmo respiro lateral do `.tj-container` no celular: ate 1200px o
	 * bloco fica alinhado com o resto da pagina, e so acima disso ele comeca a
	 * passar da caixa. O container trava em 1350px; e essa a folga que sobra. */
	padding-inline: clamp(15px, 1.2vw, 40px);
}

.gsp-bleed__inner {
	max-width: 1760px;
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 6. BANDA DE ESTADOS — s06Approvals
 * -----------------------------------------------------------------------------
 * Os quatro estados de aprovacao em quatro casas iguais, largura total. Nao e
 * uma lista de cartoes nem um amontoado de pilulas: e uma legenda de estados,
 * que e o que os quatro rotulos sao.
 * -------------------------------------------------------------------------- */

.gsp-states {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Mesmo defeito e mesma correcao do registro — ver 12.1. */
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--gsp-line);
	border-bottom: 1px solid var(--gsp-line);
}

.gsp-states__cell {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 0 18px 18px;
	border-left: 1px solid var(--gsp-line);
}

.gsp-states__cell:nth-child(2n + 1) {
	padding-left: 0;
	border-left: 0;
}

.gsp-states__dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border: 1px solid var(--gsp-accent);
	border-radius: 50%;
}

.gsp-states__name {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gsp-ink);
}

@media (min-width: 768px) {
	.gsp-states {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.gsp-states__cell:nth-child(2n + 1) {
		padding-left: 18px;
		border-left: 1px solid var(--gsp-line);
	}

	.gsp-states__cell:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

/* -----------------------------------------------------------------------------
 * 7. PAINEL DE LIMITES — s08Budgets
 * -----------------------------------------------------------------------------
 * ⚠️ O painel NAO tem numero, e isso e uma decisao. O bloco equivalente do
 * template de origem era um grafico de barras com valores inventados; aqui a
 * GUIDSE nao tem numero publico para mostrar, e escrever um seria mentir na
 * tela. O que cada linha desenha e um VAO com tampa a direita — a leitura e
 * "existe um teto", que e exatamente o que a copy da secao diz, e nada alem.
 * -------------------------------------------------------------------------- */

.gsp-console {
	overflow: hidden;
	border: 1px solid var(--gsp-line);
	border-radius: 18px;
	background-color: var(--gsp-surface);
}

.gsp-console__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--gsp-line);
	background-color: var(--gsp-panel);
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gsp-ink-dim);
}

.gsp-console__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsp-console__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px;
	column-gap: 18px;
	align-items: center;
	padding: 15px 18px;
	border-top: 1px solid var(--gsp-line);
}

.gsp-console__row:first-child {
	border-top: 0;
}

.gsp-console__label {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--gsp-ink);
}

.gsp-console__span {
	position: relative;
	height: 12px;
}

.gsp-console__span::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
	background-color: var(--gsp-line-strong);
}

/* A TAMPA. E o unico desenho que carrega o argumento da secao ("existe um
 * teto"), entao ela e o unico ponto de `--gs-primary` desta faixa clara: 2px de
 * geometria nao-textual marcando um limite, que e exatamente o uso que o verde
 * puro tem permissao de ter sobre fundo claro. Nao e decoracao — apague a tampa
 * e o painel deixa de dizer qualquer coisa. */
.gsp-console__span::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2px;
	background-color: var(--gs-primary);
}

@media (min-width: 992px) {
	.gsp-console__row {
		/* O VAO PRECISA DE ESPACO PARA SER UM VAO. Com 96px de casa o desenho
		 * ocupava 17% da linha e lia como um tique de caneta ao lado do rotulo —
		 * o leitor via uma lista com sujeira a direita, nao uma regua. Em 200px
		 * ele passa a 35% e a tampa vira instrumento de medida.
		 * O vao de 18px tambem sai: 24px poe a linha na mesma escada de todo o
		 * resto do pacote. */
		/* PROPORCAO, NAO MEDIDA FIXA. Com `200px` cravado, a regua ficava fluida
		 * ao contrario: quanto MENOR a tela, maior a fatia dela. Medido —
		 * 992: 138,3 + 200 (a regua era 55% da linha e maior que o rotulo)
		 * 1115: 202,1 + 200 (47%)   ·   1440: 310,7 + 200 (37%)
		 * Um desenho que nao carrega dado nenhum (as cinco reguas tem o mesmo
		 * comprimento) crescia ate dominar a linha justo onde falta espaco.
		 *
		 * Em `0.62fr` a razao passa a ser a mesma em qualquer largura: 38% da
		 * area livre. Em 1440 da praticamente o valor pretendido (≈195px), e em
		 * 992 encolhe junto com o rotulo em vez de sufoca-lo. O piso de 96px
		 * impede que ela deixe de ser legivel. */
		grid-template-columns: minmax(0, 1fr) minmax(96px, 0.62fr);
		column-gap: 24px;
		padding: 17px 22px;
	}

	.gsp-console__head {
		padding: 15px 22px;
	}
}

/* -----------------------------------------------------------------------------
 * 8. TRILHO DE CONEXAO — s10Integrations
 * -----------------------------------------------------------------------------
 * Ocupa o lugar que, no template de origem, era uma fileira de logotipos de
 * cliente. A GUIDSE nao tem essa fileira para mostrar e inventar uma seria
 * fraude; o que sobra e verdadeiro: os cinco caminhos por onde o trabalho entra
 * e sai. Empilha na vertical no celular e vira trilho horizontal a partir de
 * 768px.
 * -------------------------------------------------------------------------- */

.gsp-rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gsp-rail__node {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	padding-bottom: 20px;
}

.gsp-rail__node:last-child {
	padding-bottom: 0;
}

.gsp-rail__node:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 44px;
	bottom: 0;
	left: 22px;
	width: 1px;
	background-color: var(--gsp-line-strong);
}

.gsp-rail__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--gsp-line-strong);
	border-radius: 12px;
	background-color: var(--gsp-panel);
	color: var(--gsp-accent);
}

.gsp-rail__glyph {
	width: 20px;
	height: 20px;
}

.gsp-rail__label {
	font-size: 14px;
	line-height: 1.45;
	color: var(--gsp-ink);
}

/* Mesmo motivo da regua acima: em 768px o rotulo do no fica com 121px e
 * "Document and spreadsheet workflows" quebra em quatro linhas. Vira trilho
 * horizontal so em 992px; abaixo disso desce em pilha, que le melhor. */
@media (min-width: 992px) {
	.gsp-rail {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.gsp-rail__node {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		/* MEDIDO: sem isto os ladrilhos NAO ficam na mesma linha. O no e um item
		 * de grade esticado a altura da fileira (98,6px em 1440), e a sobra e
		 * distribuida entre as duas faixas — quem tem rotulo de uma linha empurra
		 * o ladrilho 5px para baixo, quem tem duas ("Document and spreadsheet
		 * workflows") fica no lugar. Com o fio de 1px cinza o desalinho passava;
		 * com o conector aceso de 16px de halo ele ficaria obvio. `start`
		 * empacota as faixas no topo e crava o centro do ladrilho em y=22 nos
		 * cinco — que e onde o conector do 11.5 desenha o barramento. */
		align-content: start;
		row-gap: 14px;
		padding: 0 12px;
		text-align: center;
	}

	.gsp-rail__node:not(:last-child)::before {
		top: 21px;
		right: calc(-50% + 30px);
		bottom: auto;
		left: calc(50% + 30px);
		width: auto;
		height: 1px;
	}

	.gsp-rail__label {
		text-wrap: balance;
	}
}

/* -----------------------------------------------------------------------------
 * 9. PILHA DE PERGUNTAS EM DUAS COLUNAS — s12Questions
 * -----------------------------------------------------------------------------
 * O ITEM e o <details>/<summary> nativo do site, com as mesmas classes de
 * /solutions e /white-label — o padrao proprio, nao um terceiro. O que muda e
 * so a CAIXA: /solutions poe o titulo numa coluna estreita a esquerda e empilha
 * as perguntas numa coluna unica a direita; aqui o titulo fica em cima e as
 * cinco perguntas abrem em DUAS colunas.
 *
 * `align-items:start` e obrigatorio: sem ele o item fechado estica ate a altura
 * do vizinho aberto e a caixa fica com um vao vazio embaixo da pergunta.
 *
 * Por isso o <details> desta pagina NAO leva `name`: em duas colunas, o
 * acordeao exclusivo fecharia um item da outra coluna e a tela saltaria em dois
 * lugares ao mesmo tempo. O proprio assets/js/modules/faq.js diz que omitir o
 * atributo — varios abertos ao mesmo tempo — e a escolha certa para lista
 * curta, e cinco perguntas sao uma lista curta.
 * -------------------------------------------------------------------------- */

.gsp-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

@media (min-width: 992px) {
	.gsp-faq {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
		row-gap: 14px;
	}

	/* O QUINTO ITEM NAO FICA SOZINHO. Cinco perguntas em duas colunas deixavam a
	 * ultima com um buraco retangular de 670x76,6 ao lado — orfa e nao estilo.
	 * O ultimo item atravessa as duas colunas e a grade volta a ter pe.
	 * `:nth-child(odd)` e a trava: se um dia entrar uma sexta pergunta a conta
	 * fica par, a regra deixa de casar sozinha e ninguem precisa lembrar de
	 * apaga-la. */
	.gsp-faq > *:nth-child(odd):last-child {
		grid-column: 1 / -1;
	}
}

/* -----------------------------------------------------------------------------
 * 9.1 O CHEVRON DIZ EM QUE ESTADO ELE ESTA
 * -----------------------------------------------------------------------------
 * Os cinco <summary> sao os UNICOS controles de verdade desta faixa e nao tinham
 * sinal proprio: no hover nada mudava, e aberto so a seta girava — o mesmo giro
 * que ela faria por acaso. Agora o glifo troca de cor nas duas situacoes, que e
 * o padrao unico dos tres FAQs do pacote.
 *
 * ⚠️ A COR E `--gs-primary-deep` NA MAO, NAO `var(--gsp-accent)`. Conferido no
 * template: a caixa `.gsp-faq` (page-platform.php, l.547) NAO leva `gsp-scope`,
 * entao `--gsp-accent` nao esta declarada nesta subarvore e resolveria para
 * vazio — o hover simplesmente nao aconteceria. Esta faixa e clara e fixa, logo
 * o verde profundo (6,3:1) e o valor certo e nao ha caso escuro a cobrir.
 *
 * FORA da media query de proposito: estado de controle nao pode existir so a
 * partir de 992px. Abaixo disso a coluna e uma so, mas o <details> continua
 * sendo o mesmo controle.
 * -------------------------------------------------------------------------- */

/* ⚠️ CONTRAPARTIDA DO ITEM QUE ATRAVESSA AS DUAS COLUNAS. Assim que o quinto
 * <details> passou a ocupar 1320px, a resposta dentro dele foi de 592px para
 * 780,1px — o `max-w-[70ch]` do template deixa. Ficaria a unica linha de 79
 * caracteres da rota, e dentro do cartao que o olho ja repara por ser diferente
 * dos outros quatro. O teto vale em QUALQUER largura e nao so em 992+: abaixo
 * disso a coluna e unica e o cartao tambem passa dos 675px. */
.gsp-faq p {
	max-width: 675px;
}

/* O `transform` PRECISA continuar nesta lista.
 *
 * O template poe `transition-transform duration-[var(--motion-base)]` no
 * proprio svg — e o que faz a seta GIRAR 180 graus ao abrir a pergunta.
 * Escrever aqui so `transition: color` nao acrescenta a cor: substitui a
 * propriedade inteira. Este seletor tem especificidade (0,1,2) contra (0,1,0)
 * do utilitario, e a folha carrega depois, entao o utilitario nao tem chance:
 * a seta passava a pular 180 graus de um quadro para o outro.
 *
 * Medido no `getComputedStyle`: com a regra curta, `transitionProperty` saia
 * como `color` e nada mais. Com as duas, sai `color, transform`. */
.gsp-faq summary svg {
	transition:
		color var(--motion-fast) var(--motion-ease),
		transform var(--motion-base) var(--motion-ease);
}

.gsp-faq summary:hover svg,
.gsp-faq details[open] summary svg {
	color: var(--gs-primary-deep);
}

/* -----------------------------------------------------------------------------
 * 10. AJUSTES DE DIAGRAMA
 * -----------------------------------------------------------------------------
 * `OperationalLayerDiagram` e `ProcessRunVisual` sao componentes das folhas
 * COMPILADAS que nenhuma outra pagina do tema usa. Nao os reescrevo — o que
 * segue e so o encaixe: largura maxima no heroi e rolagem lateral no painel de
 * execucao, para o registro nao espremer o rotulo em tela estreita.
 * -------------------------------------------------------------------------- */

.gsp-figure {
	margin: 0;
}

/* Os tres "papeis" dentro do campo de execucao do OperationalLayerDiagram vem
 * com `flex-shrink:0` e largura fixa de 32px: 3 x 32 + 2 x 20 de ligacao = 136px.
 * MEDIDO em 992px de viewport, a coluna do heroi deixa 127px para o campo (103px
 * uteis, ja fora o padding) e os papeis vazavam 5px pela direita. Deixar
 * encolher resolve sem tocar no componente compilado: em 992px cada papel fica
 * com ~21px, e de 1200px para cima volta sozinho aos 32px. */
.gsp-figure .OperationalLayerDiagram-module__BRF-EG__roleGroup {
	justify-content: center;
	min-width: 0;
}

.gsp-figure .OperationalLayerDiagram-module__BRF-EG__role {
	flex: 0 1 32px;
	min-width: 16px;
}

.gsp-figure__scroll {
	overflow-x: auto;
}

.gsp-caption {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* =============================================================================
 * 11. MOVIMENTO E LUZ
 * =============================================================================
 * Camada de POLIMENTO. Nada aqui muda o layout aprovado: sao tres coisas, e so
 * tres — a luz do conector, o tecido de fios do heroi, e as transicoes que
 * faltavam nos desenhos que esta folha ja tinha.
 *
 * O SISTEMA DE LUZ NAO E MEU. Ele vem de `assets/chunks/zz-efeitos.css`, que e
 * global e carrega ANTES desta folha (a dependencia esta em functions.php:
 * `guidse-<rota>` depende de `guidse-efeitos`). Eu nao redeclaro `.fx-halo`,
 * `.fx-glow`, `.fx-core`, `.fx-bead`, `.fx-pulse` nem `.fx-field`, e nao invento
 * variante propria para superficie clara: para isso existe `.fx-on-light`, que a
 * camada central passou a oferecer. O que esta folha faz e POSICIONAR.
 *
 * DIVISAO DE TRABALHO COM A CAMADA CENTRAL — vale ler antes de mexer:
 *   . a COR e o BRILHO sao dela (`--fx`, `--fx-core`, `--fx-off`, `--fx-surface`,
 *     e a classe `.fx-on-light` para as secoes brancas);
 *   . o PAUSE DO SMIL do campo de fios e dela: `efeitos.js` chama
 *     `svg.pauseAnimations()` por visibilidade e, com movimento reduzido, de vez.
 *     CSS nao para SMIL — nao escreva regra achando que para;
 *   . a POSICAO, a GEOMETRIA e o pause das animacoes CSS de terceiros sao meus.
 *
 * -----------------------------------------------------------------------------
 * ONDE CADA EFEITO ENTRA, E QUE RELACAO ELE COMUNICA
 * -----------------------------------------------------------------------------
 *   s01Banner   campo de fios (`.fx-field`)  — O UNICO da pagina. Fundo, canto
 *               inferior direito, nucleo FORA da caixa. Ver 11.2.
 *   s05Pipelines conector neon sobre o trilho do ProcessFlow. Os sete passos
 *               deixam de ser sete caixas e viram UMA execucao: e literalmente
 *               o que o h2 da secao diz ("Connect the whole process, not only
 *               the AI step"). A bolinha que percorre esses passos ja existe —
 *               e o `gvFlowAdvance` do proprio componente compilado. Eu acendo
 *               o fio por onde ela anda; nao acrescento uma segunda bolinha.
 *   s10Integrations conector neon sobre o trilho de conexao (`.gsp-rail`). As
 *               cinco portas — API, webhook, dado externo, sistema de negocio,
 *               documento — nao sao cinco itens de lista: sao cinco tomadas do
 *               MESMO barramento, e a bolinha atravessando as cinco e o
 *               "receive inputs and return outputs" do corpo da secao.
 *
 * NAO ha campo de fios em nenhuma outra secao (a regra do dono: um por pagina),
 * e NAO existe burst completo em lugar nenhum — `data-fx-burst="full"` nao
 * aparece neste tema.
 *
 * -----------------------------------------------------------------------------
 * POR QUE O CONECTOR SO EXISTE NESSAS DUAS SECOES
 * -----------------------------------------------------------------------------
 * `.gsp-branch` (s03) e um trilho vertical e tambem seria candidato. Ficou de
 * fora de proposito: tres conectores na mesma pagina transformam o recurso em
 * padrao decorativo, e ai ele para de significar "relacao". s03 ganha so o
 * desenho da linha na entrada (11.7), que e transicao, nao laco.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 11.1 MOVIMENTO SO QUANDO ESTA NA TELA
 * -----------------------------------------------------------------------------
 * Esta pagina ja tinha 34 animacoes INFINITAS antes de eu encostar nela, todas
 * dentro dos tres diagramas compilados e nenhuma delas minha:
 *
 *     s01  OperationalLayerDiagram   3 x gvRolePulse          =  3
 *     s05  ProcessFlow               7 x gvFlowAdvance        =  7
 *     s07  ProcessRunVisual          6 linhas x 4 elementos   = 24
 *
 * Todas rodavam o tempo inteiro, inclusive com a secao fora da tela — que e
 * exatamente o que a referencia proibe ("movimento so quando algo esta de fato
 * acontecendo"). O `efeitos.js` ja tem o observador que resolve isso: ele vira
 * `data-fx-flow` para "running" na entrada e "idle" na saida. Basta pendurar o
 * atributo nas tres `<figure>` e PAUSAR o que nao esta correndo.
 *
 * `animation-play-state` e a ferramenta certa aqui e nao `animation:none`: a
 * animacao retoma de onde parou em vez de saltar para o quadro zero, e o custo
 * de compositor cai a zero enquanto pausada. Nenhum pixel muda de aparencia.
 *
 * O campo de fios NAO aparece nesta lista: quem o pausa e o `efeitos.js`, pelo
 * `data-fx-field`. Ver 11.2.
 *
 * Efeito medido: nenhum instante de rolagem tem mais de 34 elementos animando ao
 * mesmo tempo, contra 68 declarados na pagina inteira.
 * -------------------------------------------------------------------------- */

.gsp-figure:not([data-fx-flow="running"]) .OperationalLayerDiagram-module__BRF-EG__role,
.gsp-figure:not([data-fx-flow="running"]) .ProcessFlow-module__ZHn9Ya__marker,
.gsp-figure:not([data-fx-flow="running"]) .ProcessRunVisual-module__RCjp3G__marker,
.gsp-figure:not([data-fx-flow="running"]) .ProcessRunVisual-module__RCjp3G__glyph,
.gsp-figure:not([data-fx-flow="running"]) .ProcessRunVisual-module__RCjp3G__glyphDone,
.gsp-figure:not([data-fx-flow="running"]) .ProcessRunVisual-module__RCjp3G__ordinal,
.gsp-wire-host:not([data-fx-flow="running"]) .gsp-pulse {
	animation-play-state: paused;
}

/* -----------------------------------------------------------------------------
 * 11.2 O TECIDO DE FIOS — s01Banner, e so aqui
 * -----------------------------------------------------------------------------
 * O dono foi explicito: gosta dos fios capilares com bolinhas, desconfia do
 * burst, e quer NO MAXIMO UM por pagina, de fundo. Este e o um.
 *
 * POR QUE O HEROI: e o unico bloco da pagina com area vazia de verdade. O
 * registro de dez modulos (s02), a regua de portoes (s04) e o painel de limites
 * (s08) sao densos de texto — um tecido atras deles competiria com a leitura, e
 * e disso que o dono desconfiou. O heroi tambem e escuro, que e onde o
 * `mix-blend-mode:screen` da camada central soma em vez de lavar.
 *
 * POR QUE O NUCLEO FICA FORA DA CAIXA: `data-fx-origin="103 96"` poe a origem
 * do leque a DIREITA e ABAIXO da area visivel. Nenhum ponto de luz aparece na
 * tela — o que entra e so o meio dos fios, ja aberto e ja apagando. E o "tecido
 * sem nucleo aceso" que a camada central descreve, levado ao literal.
 *
 * POR QUE 14 RAIOS E NAO OS 30 PADRAO: 30 raios geram 44 bolinhas em movimento
 * e 17 cintilando — 61 elementos animados, num grupo que passa por um filtro
 * `feGaussianBlur` duplo que rerasteriza a cada quadro. Com 14 raios sao 22 + 9
 * = 31, e o desenho continua lendo como tecido. O dono avisou que e caro em
 * pixel; ele tem razao, e este e o preco que a pagina paga.
 *
 * O leque abre de -100 graus (quase para cima) a -170 graus (quase para a
 * esquerda): sai do canto morto inferior direito e varre a diagonal, passando
 * por TRAS do painel do diagrama, que e opaco. Na coluna do texto so chegam as
 * pontas, onde o gradiente `#fxFade` ja esta em opacidade zero.
 *
 * ⚠️ NAO PONHA `data-fx-flow` NO CAMPO, e nao tente pausa-lo daqui. Cheguei a
 * fazer as duas coisas e as duas estao erradas agora que a camada central
 * cuida disso:
 *   . as bolinhas do campo sao SMIL, e CSS nao para SMIL. Quem para e o
 *     `efeitos.js`, com `svg.pauseAnimations()`, disparado pelo `data-fx-field`
 *     — por visibilidade e, com movimento reduzido, de vez;
 *   . com movimento reduzido o `efeitos.js` forca TODO `[data-fx-flow]` para
 *     "idle" e volta. Um campo marcado com esse atributo ficaria preso em idle,
 *     com `--fx-core` no cinza de apagado — ou seja, o heroi perderia a textura
 *     justamente para quem pediu menos movimento. O atributo certo aqui e um so:
 *     `data-fx-field`.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * ⚠️ POR QUE ESTA SECAO NAO LEVA `.fx-host` — MEDIDO, NAO OPINADO
 * -----------------------------------------------------------------------------
 * A camada central passou a oferecer `.fx-host` para o problema de o campo
 * (`position:absolute`) tapar o texto. O problema e real e a classe resolve na
 * maioria das secoes. AQUI ELA QUEBRA O HEROI, e a conta e esta:
 *
 *   `.fx-host > :not(.fx-field)` tem especificidade (0,2,0) e passa por cima do
 *   `.absolute` e do `.z-\[-1\]` do Tailwind, que sao (0,1,0). O heroi tem MAIS
 *   DUAS decoracoes irmas que sao `absolute z-[-1]` de proposito — o halo
 *   radial e a grade de pontos, ambas parte do layout aprovado.
 *
 *   MEDIDO em 1600x900, com a classe aplicada:
 *     . a secao vai de 618px para 918px de altura;
 *     . o halo radial sai de `absolute z:-1 top:-90` para `relative z:1 top:74`
 *       — ou seja, entra no fluxo como um bloco de 300px e passa a pintar POR
 *       CIMA do h1, que e o oposto do que ele existe para fazer;
 *     . a grade de pontos vira `relative` com altura 0 e some;
 *     . o `.tj-container` desce de 164px para 464px.
 *
 * E ESTA SECAO NAO PRECISA DA CLASSE. As duas declaracoes que `.fx-host` faz em
 * si mesma — `position:relative` e `isolation:isolate` — o heroi ja tem, pelas
 * utilitarias `relative isolate` que estavam no template antes de mim. O que
 * sobra da classe e so o levantamento dos filhos, que e justamente a parte que
 * quebra.
 *
 * Entao o campo desce em vez de o texto subir: `z-index:-1`, exatamente o mesmo
 * valor das outras duas decoracoes. Nao e remendo paralelo — e a convencao de
 * decoracao que esta pagina ja seguia. Com `isolate` na secao, -1 fica atras do
 * conteudo e ainda assim na frente do fundo da propria secao.
 *
 * Sugestao levada a camada central: como `.fx-host` ja isola, bastaria
 * `.fx-host > .fx-field { z-index: -1 }` e nenhum levantamento de irmao. Chega
 * no mesmo lugar e nao tem como colidir com decoracao nenhuma.
 * -------------------------------------------------------------------------- */
.fx-field.gsp-fx-bg {
	z-index: -1;
}

/* No celular o leque nao cabe: a caixa fica quase quadrada, o `slice` corta a
 * abertura e sobra um punhado de riscos soltos. Alem de feio, e o aparelho mais
 * fraco pagando o filtro mais caro. */
@media (max-width: 767px) {
	.fx-field.gsp-fx-bg {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * 11.3 O CONECTOR NEON — regras comuns as duas instancias
 * -----------------------------------------------------------------------------
 * O conector e um `<svg>` sobreposto ao trilho que JA existe no DOM, nao um
 * desenho novo ao lado dele. O trilho antigo (o fio de 1px) e escondido; o novo
 * ocupa exatamente a mesma linha, nos mesmos centros.
 *
 * ⚠️ `preserveAspectRatio="none"` E DELIBERADO, e a conta esta feita:
 * o `viewBox` tem a ALTURA REAL em pixels (26 no s05, 44 no s10), entao a escala
 * vertical e sempre 1 e so o eixo X estica. Numa linha HORIZONTAL isso e
 * inofensivo: a espessura do traco e medida na vertical, logo halo/glow/core
 * saem com 16 / 5 / 2 px exatos em qualquer largura. O que sofre anisotropia e
 * a bolinha, que e circulo — por isso ela so existe no s10, onde a largura do
 * trilho vai de 962px (viewport 992) a 1320px (container travado) contra um
 * `viewBox` de 1140: fator 0,84 a 1,16, ou seja no MAXIMO 16% de achatamento num
 * ponto de 3,4px de raio. Invisivel.
 * No s05 a faixa e sangrada e vai de 698px a 1720px — fator 0,50 a 1,23. Ali a
 * bolinha SERIA visivelmente ovalada, e e por isso que o s05 nao tem bolinha
 * propria: quem viaja naquele trilho e o `gvFlowAdvance` do componente.
 * -------------------------------------------------------------------------- */

.gsp-wire-host {
	position: relative;
}

.gsp-wire {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	/* ⚠️ SEM `z-index` DE PROPOSITO. Um `z-index` aqui criaria contexto de
	 * empilhamento e ISOLARIA o `.fx-layer` de dentro — `mix-blend-mode:screen`
	 * passaria a somar contra o nada em vez de somar contra o fundo escuro da
	 * secao, e a camada central perderia a funcao para a qual existe.
	 * A ordem de pintura ja esta correta sem ele: o SVG vem ANTES do `<ol>` no
	 * DOM e os dois sao posicionados, entao os ladrilhos e os marcadores (que
	 * ainda tem `z-index:1` proprio) pintam por cima. Conferido nos dois casos. */
	/* O halo tem 16px de traco mais 7px de desfoque: ele PASSA da altura do
	 * `viewBox` nos dois lados. Sem isto o recorte do SVG corta justamente a
	 * parte mais suave, e o brilho ganha uma borda reta. */
	overflow: visible;
}

/* Acender e apagar e uma TRANSICAO de cor, nao um corte. Quando o observador
 * vira o estado para "running", o fio sai do cinza da propria regua e vai para
 * o verde da marca em 420ms — le como "este barramento esta vivo", que e o que
 * o conector tem de dizer. As duas propriedades sao de pintura e correm uma vez
 * por entrada, nao em laco. */
.gsp-wire .fx-halo,
.gsp-wire .fx-glow,
.gsp-wire .fx-core {
	transition:
		stroke var(--motion-swap) var(--motion-ease),
		opacity var(--motion-swap) var(--motion-ease);
}

/* -----------------------------------------------------------------------------
 * 11.4 CONECTOR — s05Pipelines (superficie ESCURA)
 * -----------------------------------------------------------------------------
 * Geometria, conferida contra o CSS compilado do ProcessFlow:
 *   . a partir de 768px `.track` vira `flex-direction:row` e cada `.step` e
 *     `flex:1` — sete colunas iguais, centros em (i+0,5)/7;
 *   . o marcador tem 26px e fica no topo, logo o eixo do fio esta em y=13;
 *   . o fio original e o `::after` de cada passo, de `left:-50%` a `right:50%`,
 *     tambem em `top:13px`.
 * Com `viewBox="0 0 1400 26"` os centros caem em 100, 300 … 1300 e o fio novo
 * assenta em cima do antigo com erro zero.
 *
 * Abaixo de 768px o ProcessFlow empilha na vertical e o fio passa a ser o
 * `::before` de cada passo: a sobreposicao horizontal nao faz sentido nenhum ali
 * e sai da tela.
 * -------------------------------------------------------------------------- */

.gsp-wire--flow {
	display: none;
	height: 26px;
}

@media (min-width: 768px) {
	.gsp-wire--flow {
		display: block;
	}

	/* O fio de 1px do componente sai de cena: dois tracos na mesma linha, um
	 * cinza e um verde, dao uma borda suja no core. */
	.gsp-wire-host .ProcessFlow-module__ZHn9Ya__step:not(:first-child)::after {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * 11.5 CONECTOR — s10Integrations (superficie CLARA)
 * -----------------------------------------------------------------------------
 * ⚠️ AQUI ESTA A UNICA ADAPTACAO REAL DA CAMADA DE EFEITOS, e ela nao e capricho:
 * `mix-blend-mode:screen` sobre BRANCO devolve branco. O `.fx-layer` da camada
 * central existe para somar cruzamentos sobre fundo escuro e some por completo
 * numa secao clara. Este conector portanto NAO usa `.fx-layer` — e nao precisa:
 * o barramento e uma linha so, nao ha cruzamento para somar.
 *
 * A COR tambem precisa mudar no claro, e AQUI EU NAO ESCREVO NADA: a camada
 * central passou a oferecer `.fx-on-light`, e essa classe esta na `<section>` do
 * template. Ela sozinha resolve os tres pontos —
 *
 *     --fx-surface  vira a superficie clara   (o furo do anel deixa de ser preto)
 *     --fx-off      vira `--gs-border-strong` (o apagado ESCURECE em vez de
 *                                              clarear; e o mesmo cinza do fio de
 *                                              1px que ja estava neste trilho)
 *     --fx-core     desce para o verde profundo (mint sobre branco mede 1,5:1)
 *
 * O efeito colateral e o melhor pedaco: como o apagado da camada central agora
 * bate exatamente com o cinza da regua, o barramento NASCE identico ao fio que
 * ja existia e ACENDE quando a secao entra. A transicao virou a mensagem.
 *
 * ⚠️ Eu tinha escrito uma variante clara propria aqui (`.gsp-wire-host--ink`,
 * trocando `--fx` e `--fx-core` na mao). Foi apagada. Quatro paginas com quatro
 * variantes claras caseiras e exatamente o que a camada central existe para
 * impedir — e a dela ainda cobre o furo do anel, que a minha esquecia.
 *
 * Geometria: `.gsp-rail` e `repeat(5, minmax(0,1fr))` sem `gap`, os ladrilhos
 * tem 44px e `justify-items:center`, logo o centro de cada um esta em
 * (i+0,5)/5 e em y=22. Com `viewBox="0 0 1140 44"`: 114, 342, 570, 798, 1026.
 * -------------------------------------------------------------------------- */

.gsp-wire--bus {
	display: none;
	height: 44px;
}

/* -----------------------------------------------------------------------------
 * A BOLINHA DO BARRAMENTO — e por que ela NAO e SMIL
 * -----------------------------------------------------------------------------
 * A camada central usa `<animateMotion>` nos fios do campo, e faz sentido la:
 * sao 22 curvas diferentes, e o `efeitos.js` pausa aquele SVG pelo
 * `data-fx-field`. Aqui nao serve, e o motivo e duro: **CSS nao para SMIL**.
 * Uma bolinha `<animateMotion>` neste barramento continuaria viajando com
 * movimento reduzido ligado — que e, letra por letra, o defeito que a equipe do
 * /white-label mediu — e eu nao tenho como chamar `pauseAnimations()` daqui: o
 * barramento nao e um campo, e o JS e da camada central.
 *
 * Como o barramento e uma RETA HORIZONTAL, nao ha nada que `animateMotion` faca
 * que um `translateX` nao faca: mesmo percurso, mesma velocidade, mesmo
 * comportamento nas pontas. E, sendo animacao CSS, ela obedece as duas alavancas
 * que importam — `animation-play-state` (11.1, pausa fora da tela) e o bloco de
 * movimento reduzido (11.9). A APARENCIA continua inteira da camada central: a
 * classe `.fx-pulse` e quem da o verde e as duas sombras.
 *
 * ⚠️ Os 114 e 1026 sao os mesmos centros de ladrilho do atributo `d` das tres
 * camadas, no template. Se o barramento mudar de extremos, mudam nos dois
 * lugares — nao ha como derivar um do outro em CSS.
 *
 * O `animation-delay` NEGATIVO por bolinha e o que impede as duas de sairem
 * juntas: a cena ja comeca no meio do percurso, dessincronizada.
 * -------------------------------------------------------------------------- */

.gsp-pulse {
	animation: gsp-bus-run var(--gsp-dur, 5.6s) linear var(--gsp-lag, 0s) infinite;
}

@keyframes gsp-bus-run {
	0% {
		opacity: 0;
		transform: translateX(114px);
	}

	8%,
	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateX(1026px);
	}
}

@media (min-width: 992px) {
	.gsp-wire--bus {
		display: block;
	}

	/* Mesmo motivo do s05: o fio antigo sai para o novo entrar no lugar exato.
	 * So a partir de 992px — abaixo disso o trilho empilha e o `::before`
	 * vertical continua sendo a ligacao correta. */
	.gsp-wire-host .gsp-rail__node:not(:last-child)::before {
		display: none;
	}

	/* Os ladrilhos sao as TOMADAS do barramento. Quando o fio acende, a borda
	 * deles acompanha e ganha um anel de 4px — e o `.fx-port` da referencia dito
	 * no elemento que ja fazia esse papel, em vez de um segundo desenho por
	 * cima. Estatico: acende uma vez na entrada e fica. */
	.gsp-wire-host .gsp-rail__tile {
		transition:
			border-color var(--motion-swap) var(--motion-ease),
			box-shadow var(--motion-swap) var(--motion-ease);
	}

	/* A BASE DO ANEL E `--gs-primary`, NAO `--gsp-accent`. Numa faixa clara
	 * `--gsp-accent` resolve para o verde profundo, que e cor de TEXTO: misturado
	 * a 50% com o cinza da borda ele virava um verde-oliva sem identidade nenhuma
	 * — a tomada acendia e ninguem via. Aqui o anel e geometria pura de 1px mais
	 * um halo de 4px a 7%, exatamente o caso em que o verde de marca tem
	 * permissao de aparecer sobre branco, e ele marca um ESTADO (o barramento
	 * esta vivo), que e a outra condicao. Nenhum texto muda de cor. */
	.gsp-wire-host[data-fx-flow="running"] .gsp-rail__tile {
		border-color: color-mix(in srgb, var(--gs-primary) 50%, var(--gsp-line-strong));
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-primary) 7%, transparent);
	}
}

/* -----------------------------------------------------------------------------
 * 11.6 O VAO QUE SE MEDE — s08Budgets
 * -----------------------------------------------------------------------------
 * O painel desenha "existe um teto" e ate agora ele aparecia pronto. Na entrada
 * o vao passa a ser MEDIDO: a regua corre da esquerda para a direita e so entao
 * a tampa desce. E a frase da secao encenada uma vez — "set cost boundaries
 * BEFORE volume scales" —, nao um laco.
 *
 * Anima `transform` e `opacity`, nunca `width`. O escalonamento vem de
 * `--gsp-i`, escrito pelo template em cada linha.
 * -------------------------------------------------------------------------- */

.gsp-console__span::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--motion-entrance) var(--motion-ease)
		calc(var(--gsp-i, 0) * 90ms);
}

.gsp-console__span::after {
	opacity: 0;
	transform: scaleY(0.3);
	transition:
		opacity var(--motion-base) var(--motion-ease)
			calc(var(--motion-entrance) + var(--gsp-i, 0) * 90ms),
		transform var(--motion-base) var(--motion-ease)
			calc(var(--motion-entrance) + var(--gsp-i, 0) * 90ms);
}

.gsp-console.is-revealed .gsp-console__span::before {
	transform: scaleX(1);
}

.gsp-console.is-revealed .gsp-console__span::after {
	opacity: 1;
	transform: scaleY(1);
}

/* -----------------------------------------------------------------------------
 * 11.7 A TOPOLOGIA QUE SE MONTA — s03Squads
 * -----------------------------------------------------------------------------
 * O trilho vertical ja entrava escalonado (os itens tem `tj-fade-anim` com 70ms
 * de passo). O que faltava era o FIO entre eles, que aparecia inteiro desde o
 * primeiro quadro. Agora ele desce junto com o item, e a leitura fica sendo a
 * da propria copy: "the topology defines how the work moves between them".
 *
 * `is-revealed` e posto pelo `reveal.js` no mesmo elemento que tem o
 * `tj-fade-anim`, entao o fio e o item entram sincronizados de graca.
 * -------------------------------------------------------------------------- */

.gsp-branch__item:not(:last-child)::before {
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform var(--motion-entrance) var(--motion-ease);
}

.gsp-branch__item.is-revealed:not(:last-child)::before {
	transform: scaleY(1);
}

/* -----------------------------------------------------------------------------
 * 11.8 O UNICO ITEM CLICAVEL DO REGISTRO — s02Overview
 * -----------------------------------------------------------------------------
 * Das dez linhas do registro so "Template Builder" e link. As outras nove NAO
 * ganham estado de hover: dar realce a uma linha que nao leva a lugar nenhum e
 * prometer o que nao existe. Aqui e so a cor acompanhando o sublinhado que ja
 * havia, para a troca deixar de ser um corte seco.
 * -------------------------------------------------------------------------- */

a.gsp-register__inner .gsp-register__ord,
a.gsp-register__inner .gsp-register__name {
	transition: color var(--motion-fast) var(--motion-ease);
}

a.gsp-register__inner:hover .gsp-register__ord {
	color: var(--gsp-ink);
}

a.gsp-register__inner:hover .gsp-register__name {
	color: var(--gsp-accent);
}

/* -----------------------------------------------------------------------------
 * 11.9 MOVIMENTO REDUZIDO
 * -----------------------------------------------------------------------------
 * O CAMPO DE FIOS NAO ESTA AQUI, e isso e a correcao mais importante desta
 * rodada. Eu tinha escrito um `display:none` no grupo das bolinhas, achando que
 * era a unica forma de parar o SMIL. Estava errado duas vezes: `display:none`
 * NAO para `<animateMotion>` (so esconde), e a camada central agora faz a coisa
 * certa — `efeitos.js` chama `svg.pauseAnimations()` no campo quando o visitante
 * pede menos movimento. As bolinhas congelam onde estao, os fios continuam
 * desenhados, e a textura do heroi sobrevive. Nada a fazer daqui.
 *
 * O que segue e so o que EU escrevi, e tudo que escrevi e CSS de proposito —
 * exatamente para caber neste bloco.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	/* O conector: sem marcha e sem bolinha viajando. A marcha ja e zerada pela
	 * camada central; repito aqui porque a regra dela alcanca `.fx-core` pelo
	 * estado `running`, e um conector meu pode estar em qualquer estado. */
	.gsp-wire .fx-core {
		animation: none;
		stroke-dasharray: none;
	}

	/* A bolinha do barramento. Sendo animacao CSS e nao SMIL, `animation:none`
	 * PARA de verdade — foi por isso que ela nao e SMIL. Ver 11.5. */
	.gsp-pulse {
		animation: none;
	}

	.gsp-wire .fx-pulses {
		display: none;
	}

	/* Tudo que EU escrevi como transicao vai direto para o estado final. */
	.gsp-wire .fx-halo,
	.gsp-wire .fx-glow,
	.gsp-wire .fx-core,
	.gsp-wire-host .gsp-rail__tile,
	a.gsp-register__inner .gsp-register__ord,
	a.gsp-register__inner .gsp-register__name,
	.gsp-faq summary svg {
		transition: none;
	}

	.gsp-branch__item:not(:last-child)::before,
	.gsp-console__span::before,
	.gsp-console__span::after {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

/* =============================================================================
 * 12. LAPIDACAO — ritmo, prumo e a cor da marca nas faixas claras
 * =============================================================================
 * Camada de REFINO, escrita depois de medir a rota inteira em 1440, 992, 768 e
 * 390. Nada aqui muda estrutura, texto ou secao: sao vaos, alinhamentos, fins de
 * lista, estados de controle e quatro pontos de verde. Cada bloco diz o numero
 * que motivou a regra, porque numero e o unico argumento que sobrevive a
 * proxima pessoa que abrir este arquivo.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 12.1 O VAO ENTRE O CABECALHO E O BLOCO ESTRUTURAL
 * -----------------------------------------------------------------------------
 * As tres regras de topo (`.gsp-register`, `.gsp-gates`, `.gsp-states`) traziam
 * `margin:0` no atalho, e esse zero apagava em silencio o `mt-10 / mt-12 /
 * min-[992px]:mt-16` que o template pedia: utilitario e regra de folha propria
 * empatam em especificidade (0,1,0) e esta folha carrega depois. MEDIDO em 1440,
 * o resultado era 0,0px de respiro em TRES secoes — o titulo encostava no fio de
 * cima do bloco seguinte e as duas coisas viravam um bloco so.
 *
 * O valor final e 48px em 992+ e 40px abaixo, e nao os 64px que o template pedia
 * em duas das tres: a rota inteira passa a ter UM vao de cabecalho, igual nas
 * quatro paginas do pacote, em vez de tres medidas diferentes por secao.
 *
 * Os utilitarios FICAM no template de proposito. Se alguem apagar as regras
 * daqui, o `mt-*` volta a valer e o vao degrada para uma medida errada em vez de
 * degradar para zero.
 * -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.gsp-register,
	.gsp-gates,
	.gsp-states {
		margin-top: 48px;
	}
}

/* -----------------------------------------------------------------------------
 * 12.2 VAZIO DE COLUNA — s06Approvals e s07Observability
 * -----------------------------------------------------------------------------
 * As duas maiores sobras sem intencao da pagina, as duas em grade de duas
 * colunas com `items-start`, as duas MEDIDAS em 1440:
 *
 *     s07  coluna esquerda 458px   x  painel 258px   ->  200px de branco morto
 *     s06  coluna esquerda 240,5px x  frase  84px    ->  156,5px
 *
 * A saida NAO e esticar (alongar moldura vazia nao preenche nada) nem inventar
 * conteudo para tapar. E repartir: a coluna curta centra no eixo da longa, a
 * sobra vira margem simetrica em cima e embaixo, e o desequilibrio deixa de ler
 * como item que faltou carregar.
 *
 * No s06 ha um ganho de leitura junto: a frase de valor e o unico texto da
 * pagina em `font-heading` de 24px, e centrada ela passa a fazer par optico com
 * o h2 ao lado, que e o papel que ela sempre teve na secao.
 *
 * ⚠️ O s07 tem uma segunda leitura possivel — as seis dimensoes aparecem duas
 * vezes, como lista mono a esquerda e como linhas do painel a direita. Esconder
 * a lista fecharia o vao tambem, e seria remocao de conteudo. O vao se fecha
 * aqui; a duplicacao e assunto de copy, nao de folha de estilo.
 * -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	#capabilities .gsp-figure__scroll {
		align-self: center;
	}

	.gsp-valueline {
		align-self: center;
	}
}

/* -----------------------------------------------------------------------------
 * 12.3 AS LISTAS DE FILETE PRECISAM TERMINAR
 * -----------------------------------------------------------------------------
 * O mesmo idioma — item com fio em cima, sem fio embaixo — aparece em cinco
 * lugares da rota e so estava FECHADO em dois (`.gsp-register` e `.gsp-gates`,
 * que ja tinham borda de pe). Nos outros tres a lista simplesmente se dissolvia
 * no fundo: o ultimo item nao terminava, parava.
 *
 * Cada regra usa o MESMO token que o proprio template ja aplica no topo dos seus
 * itens — `--gs-border` nas faixas claras, `--gs-border-dark` nas escuras.
 * Nenhuma cor nova entra, e o fio de baixo e indistinguivel do de cima.
 *
 * A media query do s07 NAO e capricho: aquela lista tem seis itens e vira duas
 * colunas em 576px. Fechar `:last-child` la deixaria a coluna da esquerda aberta;
 * fechar `-n+2` na coluna unica de celular riscaria dois itens em vez de um.
 * -------------------------------------------------------------------------- */

#skill-studio .tj-container ul.grid > li:last-child,
#governance .tj-container ul.grid > li:last-child {
	border-bottom: 1px solid var(--gs-border-dark);
}

@media (min-width: 576px) {
	#capabilities .tj-container ul.grid > li:nth-last-child(-n + 2) {
		border-bottom: 1px solid var(--gs-border);
	}
}

@media (max-width: 575.98px) {
	#capabilities .tj-container ul.grid > li:last-child {
		border-bottom: 1px solid var(--gs-border);
	}
}

/* -----------------------------------------------------------------------------
 * 12.4 MEDIDA DE TEXTO — s04Qualifications e s05Pipelines
 * -----------------------------------------------------------------------------
 * Sao os dois unicos cabecalhos de coluna UNICA da pagina, e por isso os dois
 * unicos em que o `max-w-[62ch]` do template chega ao fim: MEDIDO, 783,1px, ou
 * 79 caracteres por linha, contra 54 a 73 em todo o resto da rota. O olho perde
 * a volta da linha e o paragrafo passa a exigir esforco justamente nas duas
 * secoes que servem de respiro entre blocos densos.
 *
 * 675px e a medida larga que a pagina ja usa em todas as colunas de grade — nao
 * e um terceiro numero, e o numero que ja estava la. Com isto a rota inteira tem
 * duas medidas de texto (581 e 675) e nenhuma terceira.
 *
 * A classe e pendurada no template porque nao ha seletor estavel para esses dois
 * <p>: as duas secoes nao tem `id` e ancorar em `nth-of-type` de <section>
 * quebraria em silencio no dia em que alguem inserir uma secao.
 * -------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.gsp-medida {
		max-width: 675px;
	}
}

/* -----------------------------------------------------------------------------
 * 12.5 O VERDE DA MARCA NAS FAIXAS CLARAS
 * -----------------------------------------------------------------------------
 * Sao ~4.700px de rolagem clara nesta rota e, antes disto, nenhum pixel de
 * `--gs-primary` em nenhum deles: o verde puro so aparecia nas tres faixas
 * escuras, e as claras viviam de cinza mais o verde profundo do texto. A pagina
 * de PRODUTO era a menos marcada do site.
 *
 * A regra da casa e estreita e esta sendo seguida a letra: sobre fundo claro o
 * verde puro nao encosta em texto, tem no maximo 2px de espessura e SEMPRE marca
 * alguma coisa. Os quatro pontos, e so estes quatro:
 *
 *   . a tampa do painel de limites (bloco 7)      marca um TETO
 *   . o anel das tomadas do barramento (11.5)     marca um ESTADO
 *   . o ponto dos estados de aprovacao (aqui)     marca uma LEGENDA
 *   . o filete das dimensoes de execucao (aqui)   marca um ITEM
 *
 * Nenhum deles e decoracao: apague qualquer um e alguma coisa deixa de ser
 * legivel. E nenhum e texto, entao nao ha uma unica regressao de contraste —
 * todo o texto verde da pagina continua em `--gs-primary-deep` (6,3:1).
 * -------------------------------------------------------------------------- */

/* O ponto de estado e um anel de 1px, nao um disco: o vazio no meio e o que o
 * faz ler como marcador de legenda e nao como bolinha de lista. Sao quatro numa
 * banda so, que e o teto de ocorrencias por secao. */
.gsp-states__dot {
	border-color: var(--gs-primary);
}

/* O filete que abre cada dimensao de execucao vinha em `--gs-primary-deep` a
 * 60%, que sobre `--gs-surface-2` some. Em verde de marca a 70% ele volta a ser
 * um marcador. Continua com 1px de altura — geometria, nao faixa. */
#capabilities .tj-container ul.grid > li > span[aria-hidden="true"] {
	background-color: color-mix(in srgb, var(--gs-primary) 70%, transparent);
}

/* -----------------------------------------------------------------------------
 * 12. DIAGRAMA DA CAMADA OPERACIONAL — uma caixa por celula, nao tres
 * -----------------------------------------------------------------------------
 * A primeira celula ("Trigger or intake") era a UNICA das quatro com duas
 * folhas decorativas atras do quadro — um motivo de "pilha de documentos" que
 * o componente compilado desenha so ali:
 *
 *   .stackSheet      { position: absolute; inset: 0; border: 1px; radius: 12px }
 *   .stackSheetNear  { transform: translate(-5px, -5px) }
 *   .stackSheetFar   { opacity: .55; transform: translate(-10px, -10px) }
 *
 * Lidas de perto sao tres molduras concentricas deslocadas, e e assim que o
 * olho as le: quadro repetido, nao pilha. As outras tres celulas da mesma
 * fileira nao tem isso, entao a primeira ainda destoava das irmas.
 *
 * `display: none` e nao `opacity: 0`: as folhas sao `position: absolute` e
 * transbordam a celula em 10px para cima e para a esquerda; deixa-las no fluxo
 * invisiveis manteria a area de transbordo. Sao `aria-hidden`, entao nada se
 * perde para leitor de tela.
 *
 * O seletor usa prefixo de atributo porque o nome da classe do CSS Module
 * carrega um hash gerado no build (`__BRF-EG__`) que pode mudar se o pacote for
 * recompilado. `[class*="stackSheet"]` sobrevive a isso. */
.gsp-figure [class*="stackSheet"] {
	display: none;
}

/* -----------------------------------------------------------------------------
 * 13. SANFONAS DAS CAPACIDADES — seis secoes entre Squads e Integrations
 * -----------------------------------------------------------------------------
 * O controlador (`assets/js/modules/accordion.js`) e generico: agrupa por VALOR
 * de `data-accordion`, entao o grupo "platform-capabilities" convive com o
 * "home-pillars" sem uma linha de JS nova.
 *
 * LARGURA MENOR QUE A DA HOME, por pedido do dono. `.tj-container` mede 1350px;
 * aqui o conjunto vai a 1120px. A capa E o conteudo do painel encolhem JUNTOS —
 * estreitar so a capa deixaria o titulo recuado em relacao ao conteudo que ele
 * abre, que e pior do que nao estreitar nada. Os dois mantem `margin-inline:
 * auto`, entao continuam centrados e alinhados entre si.
 *
 * As secoes que NAO viraram sanfona (heroi, Overview, Squads, Integrations,
 * Operating questions, Governance) seguem nos 1350px. A diferenca de largura e
 * o que marca o miolo como um bloco proprio.
 *
 * FUNDO: nada aqui mexe em cor de fundo. O padrao das sanfonas da home vem de
 * `gs-section-pattern` e do `::before` de `[data-accordion-index]`, e nenhum
 * dos dois foi escrito nestas secoes — cada uma mantem a superficie que ja
 * tinha, clara ou escura, como o dono pediu.
 *
 * O `pb` da secao virou `pb` do painel (a tag <section> ficou so com `pt`),
 * igual a home: com a sanfona fechada nao pode sobrar o rodape de uma secao
 * que nao esta mostrando conteudo nenhum. */
[data-accordion="platform-capabilities"] > .gsp-acc-cover,
[data-accordion="platform-capabilities"] .gs-panel .tj-container {
	max-width: 1120px;
}

/* -----------------------------------------------------------------------------
 * 14. s03 SQUADS — a coluna dos ordinais centrada contra a do texto
 * -----------------------------------------------------------------------------
 * Medido a 1440: a coluna de texto (eyebrow + H2 + corpo + CTA) tem 301px e a
 * lista numerada tem 252px. Com `items-start` na grade, os 49px de diferenca
 * sobravam todos embaixo da lista, e ela parecia ter escorregado para cima.
 *
 * `align-self: center` distribui a diferenca nas duas pontas. Vale so na
 * coluna da esquerda: a de texto continua ancorada no topo, que e onde o
 * cabecalho da secao tem de comecar. -------------------------------------- */
@media (min-width: 992px) {
	#how-it-works .gsp-split-rev > div:has(> .gsp-branch) {
		align-self: center;
	}
}

/* -----------------------------------------------------------------------------
 * 15. SANFONAS — capas com METADE da altura
 * -----------------------------------------------------------------------------
 * Pedido do dono. Medido antes: 155px na maioria das capas (150 numa, 190 na
 * do Skill Studio, que tem titulo de tres linhas). A altura era
 * `2 x 47,2 de linha + 30 + 30 de padding`.
 *
 * Metade de 155 e ~78px, e para chegar la os DOIS termos tem de ceder: so
 * cortar o padding daria 95px de linhas, ja acima do alvo. Entao o corpo do
 * titulo cai de 40 para 25px e o padding de 30 para 12.
 *
 * A conta: 2 x 28,75 de linha + 12 + 12 = 81,5px.
 *
 * O botao inteiro continua sendo a area de clique, entao 81px de altura segue
 * folgado para o dedo. So a capa encolhe — o conteudo do painel nao muda. */
@media (min-width: 992px) {
	[data-accordion="platform-capabilities"] .gs-cover__btn {
		padding-block: 12px;
	}
	[data-accordion="platform-capabilities"] .gs-cover__title {
		font-size: 25px;
		line-height: 1.15;
	}
}