/* =============================================================================
 * /solutions — CAMADA DE LAYOUT DA PAGINA
 * =============================================================================
 * Carregada DEPOIS das tres folhas compiladas e depois de zz-correcoes.css.
 * Existe porque o CSS do build tem um conjunto FECHADO de utilitarias: metade
 * das medidas que esta pagina precisa (grades 1fr/2fr, 2.57fr/1.67fr, tiles de
 * 280x120, cartao de 260px de altura minima) nao tem classe correspondente la.
 * Escrever a regra aqui e mais barato e mais legivel do que empilhar dez
 * utilitarias que talvez nem existam.
 *
 * REGRAS QUE ESTA FOLHA SEGUE
 * ---------------------------------------------------------------------------
 * 1. ZERO hex cru. Toda cor sai de um token --gs-*; quando precisei de uma
 *    opacidade que nao tem token, usei color-mix() SOBRE o token. O tema ja usa
 *    color-mix (ver .gs-btn-outline:hover no chunk compilado), entao nao e
 *    tecnica nova aqui.
 * 2. Tipografia so var(--font-heading) (Sora) e var(--font-mono) (IBM Plex
 *    Mono). Nenhuma familia literal.
 * 3. Tudo escopado em .gs-sol, que so existe no <main> desta pagina. Nada
 *    daqui pode vazar para outra rota.
 * 4. As medidas de grade/espacamento vieram do ESQUELETO da pagina de
 *    referencia (proporcoes 1fr/2fr, 2fr/1fr, 2.57fr/1.67fr, gaps de 8/10/12px,
 *    cartao 32px de padding, tile 280x120). O ACABAMENTO — cor, tipo, raio,
 *    sombra, glifo — e todo GUIDSE.
 * ========================================================================== */

.gs-sol {
  /* Derivados de token. Nenhum valor solto: se o token mudar, isto acompanha. */
  --sol-tile-on-dark: color-mix(in srgb, var(--gs-text-on-dark) 8%, transparent);
  --sol-tile-on-dark-hi: color-mix(in srgb, var(--gs-text-on-dark) 12%, transparent);
  --sol-line-on-dark: color-mix(in srgb, var(--gs-text-on-dark) 16%, transparent);
  --sol-line-on-dark-hi: color-mix(in srgb, var(--gs-text-on-dark) 26%, transparent);
  /* 55%, nao 32%. Os ordinais 01-05 do indice mediam 2,84:1 sobre a faixa
   * escura — abaixo do minimo de 3:1 que ate elemento nao-textual precisa — e
   * ficavam a 8px de distancia do MESMO dado impresso em mint puro dentro do
   * painel, que mede 11:1. Nao era hierarquia, era um dos dois ilegivel. O
   * hover continua promovendo para 100%, entao o degrau de estado sobrevive
   * inteiro; ele so passa a partir de um piso que se le. */
  --sol-ordinal-on-dark: color-mix(in srgb, var(--gs-text-on-dark) 55%, transparent);
  --sol-ghost-number: color-mix(in srgb, var(--gs-text) 13%, var(--gs-surface));
  --sol-wash-mint: color-mix(in srgb, var(--gs-mint) 14%, transparent);
  --sol-ink-6: color-mix(in srgb, var(--gs-text) 6%, transparent);
  --sol-radius-lg: 20px;
  --sol-radius-md: 16px;
  --sol-radius-sm: 12px;
}

/* -----------------------------------------------------------------------------
 * RITMO VERTICAL
 * -----------------------------------------------------------------------------
 * Mesmos quatro degraus que o resto do site usa (64 / 88 / 112 / 128). Aqui
 * viram uma classe so porque a pagina tem oito secoes e repetir quatro
 * utilitarias em cada uma nao ajuda ninguem a ler o template.
 * -------------------------------------------------------------------------- */
.gs-sol-sec {
  padding-block: 64px;
  position: relative;
}
/* --flush-top: o segundo movimento de uma faixa que ja abriu.
 * --tight-top: secao irma na MESMA faixa de fundo — meio respiro, para os dois
 *   blocos lerem como um so e nao como duas secoes coladas. */
.gs-sol-sec--flush-top { padding-top: 0; }
.gs-sol-sec--tight-top { padding-top: 44px; }

@media (min-width: 768px)  { .gs-sol-sec { padding-block: 88px; }  .gs-sol-sec--flush-top { padding-top: 0; } .gs-sol-sec--tight-top { padding-top: 56px; } }
@media (min-width: 992px)  { .gs-sol-sec { padding-block: 112px; } .gs-sol-sec--flush-top { padding-top: 0; } .gs-sol-sec--tight-top { padding-top: 68px; } }
@media (min-width: 1200px) { .gs-sol-sec { padding-block: 128px; } .gs-sol-sec--flush-top { padding-top: 0; } .gs-sol-sec--tight-top { padding-top: 76px; } }

/* Cabecalho curto de secao: rotulo + H2, largura de leitura curta. O
 * esqueleto de referencia limita este bloco a 700px e e o que ele faz aqui. */
.gs-sol-head { max-width: 700px; }
.gs-sol-head h2 { margin-top: 16px; text-wrap: balance; color: var(--gs-text); }
.gs-sol-head--on-dark h2 { color: var(--gs-text-on-dark); }

/* O header e fixo; sem isto o link de ancora para na altura errada. Mesmo
 * valor que as secoes atuais usam (scroll-mt-[110px] / [120px]). */
.gs-sol-anchor { scroll-margin-top: calc(var(--gs-anchor-offset, 96px) + 14px); }
@media (min-width: 992px) { .gs-sol-anchor { scroll-margin-top: calc(var(--gs-anchor-offset, 96px) + 24px); } }

/* -----------------------------------------------------------------------------
 * SOBRANCELHA
 * -------------------------------------------------------------------------- */
.gs-sol-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gs-primary-deep);
}
.gs-sol-eyebrow--on-dark { color: var(--gs-mint); }
@media (min-width: 768px) { .gs-sol-eyebrow { font-size: 12px; } }

/* -----------------------------------------------------------------------------
 * 1. HERO
 * -----------------------------------------------------------------------------
 * O esqueleto de referencia usa 290px de respiro no topo e 190px embaixo, com
 * uma FOTO sangrando atras do titulo. Aqui o respiro e maior que o da pagina
 * antiga (164/100) mas nao chega aos 290 — o header do GUIDSE e mais baixo e
 * 290px deixaria o H1 abaixo da dobra em notebook.
 *
 * No lugar da foto entra o campo de orbitas que o tema JA TEM (.gs-orbits, com
 * grade, aneis, nucleo e feixes). Nenhuma imagem importada: e desenho do
 * proprio site, ja escrito nos tokens, e some sozinho abaixo de 768px.
 * -------------------------------------------------------------------------- */
.gs-sol-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0 60px;
}
@media (min-width: 768px)  { .gs-sol-hero { padding: 128px 0 80px; } }
@media (min-width: 992px)  { .gs-sol-hero { padding: 168px 0 108px; } }
@media (min-width: 1200px) { .gs-sol-hero { padding: 196px 0 130px; } }

.gs-sol-hero__inner { position: relative; z-index: 1; }

/* O H1 do hero e maior que um H1 comum — o token existe para isto. */
.gs-sol-hero h1 {
  font-size: var(--gs-fs-h1-hero);
  line-height: var(--gs-lh-h1);
  letter-spacing: var(--gs-tr-h1);
}

/* Trilha de migalhas: no esqueleto ela e uma pilula com borda e um degrade
 * vertical, DEPOIS do titulo. Mesma construcao, cores do tema. */
.gs-sol-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 9px 16px;
  list-style: none;
  border: 1px solid var(--gs-border-dark);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--gs-overlay-on-dark), transparent);
}
.gs-sol-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gs-text-muted-on-dark);
}
.gs-sol-crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--gs-mint);
  border-right: 1px solid var(--gs-mint);
  transform: rotate(45deg);
  opacity: 0.7;
}
.gs-sol-crumbs a {
  color: var(--gs-text-muted-on-dark);
  border-radius: 4px;
  text-underline-offset: 4px;
  transition: color var(--motion-fast) var(--motion-ease);
}
.gs-sol-crumbs a:hover { color: var(--gs-mint); text-decoration: underline; }
.gs-sol-crumbs [aria-current="page"] { color: var(--gs-mint); }

/* -----------------------------------------------------------------------------
 * 2. FAIXA DO PADRAO OPERACIONAL  (padrao + jornada, uma faixa so)
 * -----------------------------------------------------------------------------
 * O esqueleto poe o rotulo colado na esquerda do container e EMPURRA o bloco
 * de titulo para a direita (max-width 880px, margin-left auto). Aquele
 * desalinhamento e o que da o ritmo do bloco; foi o que eu copiei. O painel
 * claro no canto inferior esquerdo ocupa o lugar da imagem de fundo do
 * esqueleto (35.5% de largura), desenhado com degrade + a grade de pontos.
 * -------------------------------------------------------------------------- */
.gs-sol-process__panel {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  /* LARGURA INTEIRA. Com 35,5% o lavado terminava numa borda vertical no meio
   * da faixa, e a 1440px aquilo lia como fundo que nao terminou de carregar em
   * vez de como luz vindo do canto. O gradiente radial ja nasce no canto
   * inferior esquerdo e se apaga em 70%, entao esticar a caixa nao espalha
   * verde pela secao — so tira a linha de corte. O raio de canto sai junto:
   * cobrindo de borda a borda nao ha canto para arredondar. */
  width: 100%;
  height: 62%;
  max-height: 640px;
  border-radius: 0;
  background:
    radial-gradient(ellipse 90% 60% at 0% 100%, var(--sol-wash-mint), transparent 70%),
    linear-gradient(180deg, transparent, var(--gs-surface-2));
  pointer-events: none;
}
@media (max-width: 991px) { .gs-sol-process__panel { display: none; } }

.gs-sol-secsplit {
  max-width: 880px;
  margin-left: auto;
  margin-top: 28px;
}
@media (min-width: 992px) { .gs-sol-secsplit { margin-top: 36px; } }

/* DUAS FAIXAS, 70 e 30 — pedido do dono.
 *
 * Antes o bloco todo media 880px encostado a direita, com a triade em cima e o
 * paragrafo embaixo. Agora a secao usa a largura inteira: a triade (que ja era
 * de tres colunas) ocupa 70% e o corpo desce para a coluna de 30%, ao lado.
 *
 * `7fr 3fr` e nao `70% 30%` porque a proporcao tem de valer sobre o espaco que
 * SOBRA depois do vao; com porcentagem, 70 + 30 + 48 do gap passa de 100% e a
 * grade transborda. */
@media (min-width: 992px) {
  .gs-sol-secsplit {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 0 48px;
    align-items: start;
    max-width: none;
    margin-left: 0;
  }
  .gs-sol-secsplit__body {
    margin-top: 0;
    max-width: none;
  }
}

/* A triade: o H2 desta secao e UMA frase do dicionario partida em tres
 * oracoes por guidse_sentence(). Continua sendo o mesmo dispositivo do site —
 * o que mudou foi so a caixa onde ele mora. */
.gs-sol-triad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
}
.gs-sol-triad > span { display: block; border-top: 1px solid var(--gs-border); padding-top: 16px; }
.gs-sol-triad__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--gs-primary-deep);
}
/* CAIXA ALTA, por pedido do dono. Com o texto todo em maiuscula a mancha fica
 * mais pesada e as palavras perdem o contorno do ascendente/descendente, entao
 * o corpo cai um degrau e o espacejamento abre um pouco — sem isso "STRUCTURE
 * THE OPERATION." vira um bloco solido. */
.gs-sol-triad__t {
  display: block;
  margin-top: 16px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gs-text);
}

/* A SEGUNDA ORACAO EM GRADIENTE VERDE — tambem pedido do dono.
 *
 * `background-clip: text` pinta o texto com o gradiente. O `color:
 * transparent` e o que revela a pintura; sem ele o texto tapa o proprio
 * fundo.
 *
 * ⚠️ O gradiente NAO vai ate `--gs-primary` puro. Sobre branco, #00c589 mede
 * 2,2:1 — reprova ate no criterio de texto grande, que pede 3:1. O fim da
 * rampa e uma mistura que segura o contraste; continua lendo como verde da
 * marca clareando da esquerda para a direita, sem entregar uma frase que parte
 * dos leitores nao consegue ler.
 *
 * `:nth-child(2)` alcanca a segunda oracao porque as tres saem do mesmo laco
 * do template — nao ha classe propria para ela, e criar uma so para isto
 * exigiria mexer no PHP sem ganho. */
.gs-sol-triad > span:nth-child(2) .gs-sol-triad__t {
  background-image: linear-gradient(
    100deg,
    var(--gs-primary-deep) 0%,
    color-mix(in srgb, var(--gs-primary) 62%, var(--gs-primary-deep)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 992px) {
  .gs-sol-triad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .gs-sol-triad > span { padding-top: 22px; }
  .gs-sol-triad__t { margin-top: 20px; font-size: 25px; }
}

.gs-sol-secsplit__body {
  max-width: 540px;
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gs-text-muted);
}
@media (min-width: 992px) { .gs-sol-secsplit__body { margin-top: 44px; font-size: 17px; } }

/* Sub-cabecalho da jornada — abre o segundo movimento da mesma faixa.
 * 40 abaixo de 992, 48 acima: e o mesmo par que a s07Families, a s03Pain e a
 * s06Measurement usam. Era 52 aqui; 52 nao esta na escada e fazia esta faixa
 * respirar 4px a mais que as irmas sem que nada justificasse. */
.gs-sol-subhead { margin-bottom: 40px; }
@media (min-width: 992px) { .gs-sol-subhead { margin-bottom: 48px; } }
.gs-sol-subhead h2 { margin-top: 16px; max-width: 22ch; text-wrap: balance; color: var(--gs-text); }

/* Trilha de passos. No esqueleto sao 4 colunas com 12px de gap; aqui sao seis
 * passos, entao 3 x 2 a partir de 992px e 2 colunas no tablet. */
.gs-sol-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* O respiro do cartao mora AQUI, no <ol>, e nao no cartao: o conector neon
   * fica no <li> e precisa da mesma medida para acertar o centro do quadro do
   * glifo. Declarada no pai, os dois herdam do mesmo lugar — duas copias do
   * numero divergiriam na primeira vez que alguem mexesse numa. */
  --sol-step-pad: 28px;
}
/* O vao entre cartoes passou de 12 para 28px: e nele que o conector neon
 * aparece, e 12px nao davam comprimento para o brilho ler como conector. */
@media (min-width: 576px) {
  .gs-sol-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}
@media (min-width: 992px) { .gs-sol-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -----------------------------------------------------------------------------
 * 2b-conn. CONECTOR NEON ENTRE CARTOES
 * -----------------------------------------------------------------------------
 * Substitui o fio que morava DENTRO de cada cartao. Aquele nascia e morria no
 * mesmo cartao — nao ligava nada — e o `overflow: hidden` do cartao cortava o
 * halo num degrau reto. Este vive no VAO, entao liga mesmo um cartao ao
 * seguinte.
 *
 * Mora no <li> e nao no .gs-sol-step justamente por causa daquele
 * `overflow: hidden`: o <li> nao corta nada, o cartao corta tudo.
 *
 * As tres camadas do sistema de luz, aqui em CSS em vez de SVG: o fundo de 2px
 * e o NUCLEO, e as duas sombras sao o BRILHO e o HALO. Em superficie clara o
 * nucleo usa o verde profundo — o verde da marca puro sobre branco mede 2,2:1
 * e sumiria.
 *
 * A altura acompanha o centro do quadro do glifo: `padding + 36`. Por isso
 * --sol-step-pad subiu para o <ol> — o <li> precisa enxergar a mesma medida
 * que o cartao usa, e duas copias do mesmo numero divergem na primeira vez que
 * alguem mexe numa.
 *
 * QUAIS cartoes recebem: todos menos o ultimo de cada fileira. Duas colunas ->
 * 1, 3, 5. Tres colunas -> 1, 2, 4, 5. O desenho e escrito uma vez; o que
 * troca por faixa e so o `content`, que e o que liga e desliga o pseudo. */
@media (min-width: 576px) {
  .gs-sol-steps > li { position: relative; }
  .gs-sol-steps > li::after {
    position: absolute;
    top: calc(var(--sol-step-pad) + 35px);
    right: -28px;
    width: 28px;
    height: 2px;
    border-radius: 1px;
    background: var(--gs-primary-deep);
    box-shadow:
      0 0 4px color-mix(in srgb, var(--gs-primary) 75%, transparent),
      0 0 12px color-mix(in srgb, var(--gs-primary) 45%, transparent);
    pointer-events: none;
  }
/* FAIXA FECHADA, e nao um reset em 992.
 *
 * A primeira tentativa foi ligar 1,3,5 em `min-width: 576` e desligar tudo em
 * `min-width: 992` com `.gs-sol-steps > li::after { content: none }` antes de
 * religar 1,2,4,5. Nao funcionou, e o cartao 03 ficou com um conector saindo
 * pela borda direita da tela: acima de 992 as DUAS consultas valem, e o reset
 * tem especificidade (0,1,2) contra (0,2,2) da regra de duas colunas — o
 * `:not()` carrega a especificidade do argumento. O reset perdia.
 *
 * Com a faixa fechada em 991 a regra de duas colunas simplesmente deixa de
 * existir onde ha tres, e nao ha nada para cancelar. */
@media (min-width: 576px) and (max-width: 991px) {
  .gs-sol-steps > li:not(:nth-child(2n))::after { content: ""; }
}
@media (min-width: 992px) {
  .gs-sol-steps > li:not(:nth-child(3n))::after { content: ""; }
}

.gs-sol-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  height: 100%;
  min-height: 260px;
  padding: var(--sol-step-pad);
  border: 1px solid var(--gs-border);
  border-radius: var(--sol-radius-lg);
  background: var(--gs-surface);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--gs-text) 5%, transparent);
  overflow: hidden;
  position: relative;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
}
@media (min-width: 992px) { .gs-sol-steps { --sol-step-pad: 32px; } }
/* SEM DESLOCAMENTO. O cartao de passo nao e clicavel — nao ha <a>, <button>
 * nem tabindex dentro dele — e subir 3px no hover promete um clique que nao
 * existe. O retorno de "esta sob o ponteiro" continua inteiro em cor: borda,
 * sombra, aro do quadro e o halo que respira. */
.gs-sol-step:hover {
  border-color: color-mix(in srgb, var(--gs-text) 35%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--gs-text) 9%, transparent);
}

/* O `z-index` mora AQUI, no bloco do glifo, e nao no quadro.
 *
 * Enquanto ele estava em .gs-sol-step__icon, aquele elemento formava contexto
 * de empilhamento proprio — e um filho com z-index negativo nao consegue
 * descer ABAIXO do fundo do elemento que forma o contexto. O halo do ::after
 * ficava entao pintado por cima do branco do quadro: os seis quadros da
 * jornada tinham o miolo esverdeado, que e o contrario do desenho (o ponto
 * borrado existe para vazar em volta do quadro, nao para tinge-lo por dentro).
 *
 * Com o z-index no .gs-sol-step__mark — item flex, entao z-index vale mesmo
 * sem `position` — o contexto passa a ser o bloco inteiro e o halo desce para
 * o fundo dele: fica sobre o cartao e sob o quadro, que e o lugar certo. O
 * valor 1 continua sendo o mesmo de antes, so mudou de dono; o fio do passo
 * (z-index 0) segue passando por baixo. */
.gs-sol-step__mark { display: flex; align-items: center; z-index: 1; }
.gs-sol-step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border: 1px solid var(--gs-border);
  border-radius: 8px;
  background: var(--gs-surface);
  color: var(--gs-primary-deep);
  transition: border-color var(--motion-base) var(--motion-ease);
}
/* O ponto borrado ATRAS do quadro — e atras de verdade desde que o z-index
 * mudou de dono, logo acima. Em repouso ele fica inteiramente coberto pelo
 * branco do quadro (24px de nucleo com 14 de desfoque cabem dentro dos 72px),
 * o que e o desejado: o cartao em repouso e limpo. No hover o `scale: 1.45`
 * leva o desfoque para alem da borda e o brilho aparece em volta do quadro —
 * ele passou a ser o retorno do hover em vez de uma mancha permanente. */
.gs-sol-step__icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gs-mint);
  filter: blur(14px);
  opacity: 0.72;
  /* `scale` e `opacity` sao as duas unicas coisas que mudam no hover: o ponto
   * ja existia, so respira. `scale` autonomo (nao `transform`) porque e o que o
   * resto desta folha usa nos aneis do painel — uma convencao so. */
  transition:
    scale var(--motion-swap) var(--motion-ease),
    opacity var(--motion-swap) var(--motion-ease);
}
.gs-sol-step:hover .gs-sol-step__icon::after { scale: 1.45; opacity: 1; }
.gs-sol-step:hover .gs-sol-step__icon { border-color: color-mix(in srgb, var(--gs-primary) 45%, transparent); }
.gs-sol-step__icon svg { width: 26px; height: 26px; }
/* O NUMERO NAO ENCOSTA MAIS NO QUADRO.
 *
 * A ideia antiga era "numero fantasma": ele passava por tras do quadro do
 * glifo, mordido de proposito. Na pratica, com a margem negativa, o quadro
 * comia a lateral do "0" e a leitura ficava ambigua — o dono leu como defeito,
 * nao como profundidade, e tem razao: um ordinal que precisa ser adivinhado
 * nao esta cumprindo funcao nenhuma.
 *
 * Agora ele fica INTEIRO, com 14px de respiro depois do quadro. A hierarquia
 * continua resolvida pela cor (`--sol-ghost-number`, bem apagada) e pelo
 * tamanho, que era o que de fato separava o ordinal do titulo. */
.gs-sol-step__n {
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sol-ghost-number);
}
.gs-sol-step__title {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: var(--gs-tr-h4);
  color: var(--gs-text);
  max-width: 22ch;
}
.gs-sol-step__body { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--gs-text-muted); }
@media (min-width: 992px) { .gs-sol-step__title { font-size: 21px; } }

/* -----------------------------------------------------------------------------
 * 3. FAMILIAS DE OPERACAO  (esqueleto: lista numerada 1fr | paineis 2fr)
 * -----------------------------------------------------------------------------
 * O bloco de referencia e um tab: rotulos numerados a esquerda, painel unico a
 * direita. Sem JS novo eu nao troco painel — e esconder texto atras de clique
 * seria pior do que nao ter aba. Entao os cinco paineis ficam TODOS abertos,
 * empilhados, e a coluna da esquerda vira indice ancorado: mesma grade, mesmo
 * peso visual, nada escondido.
 *
 * O realce da aba ativa e :has() + :target — progressivo. Onde nao houver
 * :has(), a pagina so fica sem o realce; nada quebra.
 * -------------------------------------------------------------------------- */
.gs-sol-ser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 40px;
}
/* 48, nao 52: mesmo vao de cabecalho->conteudo das outras tres secoes. */
@media (min-width: 992px)  { .gs-sol-ser { grid-template-columns: 1fr 2fr; margin-top: 48px; } }

.gs-sol-ser__rail { align-self: start; }
/* O sticky comeca em 992, junto com a grade de duas colunas — nao em 1200.
 *
 * A partir de 992 o indice ja divide a linha com 975px de paineis e tem 413px
 * de altura: entre 992 e 1199 ele ficava parado no topo e a coluna esquerda
 * abria 562px de faixa escura vazia — o maior buraco de um lado so da rota.
 * Com o sticky o indice acompanha a leitura dos cinco paineis, que e o unico
 * motivo dele existir. Cabe: 505px de trilho (indice + fio) contra 584px de
 * viewport util em 992x700, ja descontado o offset do header. */
@media (min-width: 992px) {
  .gs-sol-ser__rail { position: sticky; top: calc(var(--gs-anchor-offset, 96px) + 20px); }
}

.gs-sol-ser__index { margin: 0; padding: 0; list-style: none; }
/* Abaixo de 992px o indice e navegacao redundante: os mesmos titulos estao
 * logo abaixo, dentro dos paineis. Some para nao duplicar leitura. */
@media (max-width: 991px) { .gs-sol-ser__nav { display: none; } }

/* O FIO QUE CONTINUA A COLUNA DEPOIS DA ULTIMA ABA.
 *
 * Abaixo da aba 05 a coluna simplesmente acabava, e o corte reto era o que
 * fazia o vazio ler como falta em vez de respiro. Um fio de 1px descendo e
 * apagando diz que a coluna continua e que nao ha mais nada nela — e o mesmo
 * recurso da margem de leitura, nao um enfeite novo: a cor sai do
 * --sol-line-on-dark que as proprias abas usam na borda.
 *
 * 96px, abaixo do piso de 100px em que a regra de celular manda esconder
 * geometria decorativa; e o <nav> ja some inteiro abaixo de 992, entao o fio
 * nunca chega a existir no telefone. */
.gs-sol-ser__nav::after {
  content: "";
  display: block;
  margin-left: 24px;
  width: 1px;
  height: 96px;
  background: linear-gradient(180deg, var(--sol-line-on-dark), transparent);
}

.gs-sol-ser__tab {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
  padding: 22px 24px;
  border: 1px solid var(--sol-line-on-dark);
  border-radius: var(--sol-radius-sm);
  background: var(--sol-tile-on-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--gs-text-on-dark);
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: var(--gs-tr-h5);
  transition:
    color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    background-color var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}
@media (min-width: 1200px) { .gs-sol-ser__tab { font-size: 19px; padding: 26px 28px; } }
.gs-sol-ser__tab span {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--sol-ordinal-on-dark);
  transition: color var(--motion-base) var(--motion-ease);
}
/* 4px, nao 8: o indice fica GRUDADO na coluna dos paineis e um deslocamento
 * maior abriria uma fresta visivel entre a aba e o painel que ela aponta. */
.gs-sol-ser__tab:hover,
.gs-sol-ser__tab:focus-visible {
  color: var(--gs-mint);
  border-color: var(--sol-line-on-dark-hi);
  box-shadow: inset 0 0 16px 0 color-mix(in srgb, var(--gs-primary) 30%, transparent);
  transform: translateX(4px);
}
.gs-sol-ser__tab:hover span,
.gs-sol-ser__tab:focus-visible span { color: var(--gs-text-on-dark); }

.gs-sol-ser__panels { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.gs-sol-ser__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 768px) { .gs-sol-ser__panel { grid-template-columns: minmax(0, 1fr) 200px; } }
@media (min-width: 1200px) { .gs-sol-ser__panel { grid-template-columns: minmax(0, 1fr) 240px; } }

.gs-sol-ser__card {
  padding: 28px 28px 26px;
  border: 1px solid color-mix(in srgb, var(--gs-text-on-dark) 20%, transparent);
  border-radius: var(--sol-radius-md);
  background: var(--sol-tile-on-dark);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: border-color var(--motion-base) var(--motion-ease);
}
@media (min-width: 992px) { .gs-sol-ser__card { padding: 34px 36px 30px; } }
.gs-sol-ser__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--gs-mint);
}
.gs-sol-ser__title {
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: var(--gs-tr-h3);
  color: var(--gs-text-on-dark);
}
@media (min-width: 992px) { .gs-sol-ser__title { font-size: 26px; } }
.gs-sol-ser__body {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gs-text-muted-on-dark);
}
@media (min-width: 992px) { .gs-sol-ser__body { font-size: 17px; } }

/* O painel de referencia termina numa foto. Aqui termina num bloco geometrico:
 * grade de pontos + halo mint + dois aneis concentricos, girados um pouco a
 * cada painel para que os cinco nao fiquem identicos. */
.gs-sol-ser__art {
  position: relative;
  overflow: hidden;
  min-height: 130px;
  border: 1px solid var(--sol-line-on-dark);
  border-radius: var(--sol-radius-md);
  background:
    radial-gradient(circle at 70% 30%, var(--sol-wash-mint), transparent 62%),
    linear-gradient(160deg, var(--sol-tile-on-dark-hi), transparent 70%);
}
@media (min-width: 768px) { .gs-sol-ser__art { min-height: 0; } }
.gs-sol-ser__art::before,
.gs-sol-ser__art::after {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--gs-mint) 26%, transparent);
  border-radius: 50%;
  rotate: calc(var(--sol-i, 0) * 24deg);
  transition:
    rotate var(--motion-swap) var(--motion-ease),
    scale var(--motion-swap) var(--motion-ease),
    border-color var(--motion-swap) var(--motion-ease);
}
.gs-sol-ser__art::before { inset: 22% -18% 12% 34%; }
.gs-sol-ser__art::after { inset: 38% 8% 26% 58%; border-color: color-mix(in srgb, var(--gs-mint) 44%, transparent); }

/* ABAIXO DE 768 O BLOCO GEOMETRICO SAI DA PAGINA.
 *
 * Ele e `aria-hidden`, nao nomeia nada e nao e ancora de nada; e decoracao
 * pura. No desktop ele paga o proprio espaco porque divide a linha com o
 * cartao e porque ACENDE — o par :has()/:hover/:target que liga a aba ao
 * painel so existe a partir de 992px. Empilhado no celular ele nao acende
 * nunca e vira uma faixa de 138px depois de CADA um dos cinco paineis: 690px
 * de rolagem morta, cerca de 35% da secao, para mostrar dois aneis a 26% de
 * mint que mal se distinguem do fundo. */
@media (max-width: 767px) { .gs-sol-ser__art { display: none; } }

/* -----------------------------------------------------------------------------
 * 3b. O ELO ENTRE O INDICE E O PAINEL
 * -----------------------------------------------------------------------------
 * Aqui e o unico lugar da pagina onde existe uma relacao DE UM PARA UM entre
 * dois blocos separados na tela: a aba 03 aponta para o painel 03 e para mais
 * nada. Numa aba de verdade isso e obvio, porque so um painel esta aberto. Com
 * os cinco abertos, o vinculo precisa ser mostrado.
 *
 * Poderia ser um conector desenhado, mas o vao entre as duas colunas e de 8px:
 * uma linha ali seria um risco, nao um fio. Entao o elo e LUZ — apontar a aba
 * acende o painel, apontar o painel acende a aba. E o mesmo conector, feito de
 * estado em vez de traco.
 *
 * E deliberadamente uma TRANSICAO e nao uma animacao: esta e a secao onde o
 * leitor esta comparando cinco opcoes lado a lado. Movimento continuo aqui
 * competiria com a leitura.
 *
 * `:has()` e progressivo: sem ele a pagina so nao acende, e nada quebra. Os
 * cinco pares estao escritos um a um porque o CSS nao sabe casar "a aba cujo
 * href e o id do painel apontado" — nao ha como generalizar.
 * -------------------------------------------------------------------------- */
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-1"]:hover) #family-1 .gs-sol-ser__card,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-2"]:hover) #family-2 .gs-sol-ser__card,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-3"]:hover) #family-3 .gs-sol-ser__card,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-4"]:hover) #family-4 .gs-sol-ser__card,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-5"]:hover) #family-5 .gs-sol-ser__card {
  border-color: color-mix(in srgb, var(--gs-mint) 55%, transparent);
}

.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-1"]:hover) #family-1 .gs-sol-ser__art,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-2"]:hover) #family-2 .gs-sol-ser__art,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-3"]:hover) #family-3 .gs-sol-ser__art,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-4"]:hover) #family-4 .gs-sol-ser__art,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-5"]:hover) #family-5 .gs-sol-ser__art,
.gs-sol-ser__panel:hover .gs-sol-ser__art,
.gs-sol-ser__panel:target .gs-sol-ser__art {
  border-color: var(--sol-line-on-dark-hi);
}

/* Os aneis do bloco geometrico ganham 8 graus e 6% de escala. E pouco de
 * proposito: o painel responde, mas nao se mexe. */
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-1"]:hover) #family-1 .gs-sol-ser__art::before,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-2"]:hover) #family-2 .gs-sol-ser__art::before,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-3"]:hover) #family-3 .gs-sol-ser__art::before,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-4"]:hover) #family-4 .gs-sol-ser__art::before,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-5"]:hover) #family-5 .gs-sol-ser__art::before,
.gs-sol-ser__panel:hover .gs-sol-ser__art::before,
.gs-sol-ser__panel:target .gs-sol-ser__art::before {
  rotate: calc(var(--sol-i, 0) * 24deg + 8deg);
  scale: 1.06;
  border-color: color-mix(in srgb, var(--gs-mint) 46%, transparent);
}

.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-1"]:hover) #family-1 .gs-sol-ser__art::after,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-2"]:hover) #family-2 .gs-sol-ser__art::after,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-3"]:hover) #family-3 .gs-sol-ser__art::after,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-4"]:hover) #family-4 .gs-sol-ser__art::after,
.gs-sol-ser:has(.gs-sol-ser__tab[href="#family-5"]:hover) #family-5 .gs-sol-ser__art::after,
.gs-sol-ser__panel:hover .gs-sol-ser__art::after,
.gs-sol-ser__panel:target .gs-sol-ser__art::after {
  rotate: calc(var(--sol-i, 0) * 24deg - 8deg);
  scale: 1.06;
  border-color: color-mix(in srgb, var(--gs-mint) 70%, transparent);
}

/* O caminho de volta: apontar o painel acende a aba que o nomeia. */
.gs-sol-ser:has(#family-1:hover) .gs-sol-ser__tab[href="#family-1"],
.gs-sol-ser:has(#family-2:hover) .gs-sol-ser__tab[href="#family-2"],
.gs-sol-ser:has(#family-3:hover) .gs-sol-ser__tab[href="#family-3"],
.gs-sol-ser:has(#family-4:hover) .gs-sol-ser__tab[href="#family-4"],
.gs-sol-ser:has(#family-5:hover) .gs-sol-ser__tab[href="#family-5"] {
  color: var(--gs-mint);
  border-color: var(--sol-line-on-dark-hi);
  box-shadow: inset 0 0 16px 0 color-mix(in srgb, var(--gs-primary) 30%, transparent);
}

.gs-sol-ser:has(#family-1:hover) .gs-sol-ser__tab[href="#family-1"] span,
.gs-sol-ser:has(#family-2:hover) .gs-sol-ser__tab[href="#family-2"] span,
.gs-sol-ser:has(#family-3:hover) .gs-sol-ser__tab[href="#family-3"] span,
.gs-sol-ser:has(#family-4:hover) .gs-sol-ser__tab[href="#family-4"] span,
.gs-sol-ser:has(#family-5:hover) .gs-sol-ser__tab[href="#family-5"] span {
  color: var(--gs-text-on-dark);
}

/* Realce da entrada apontada pela ancora. */
.gs-sol-ser:has(#family-1:target) .gs-sol-ser__tab[href="#family-1"],
.gs-sol-ser:has(#family-2:target) .gs-sol-ser__tab[href="#family-2"],
.gs-sol-ser:has(#family-3:target) .gs-sol-ser__tab[href="#family-3"],
.gs-sol-ser:has(#family-4:target) .gs-sol-ser__tab[href="#family-4"],
.gs-sol-ser:has(#family-5:target) .gs-sol-ser__tab[href="#family-5"] {
  color: var(--gs-mint);
  border-color: var(--sol-line-on-dark-hi);
  box-shadow: inset 0 0 16px 0 color-mix(in srgb, var(--gs-primary) 45%, transparent);
}
.gs-sol-ser__panel:target .gs-sol-ser__card { border-color: color-mix(in srgb, var(--gs-mint) 55%, transparent); }

/* -----------------------------------------------------------------------------
 * 4. FAIXA DE MEDICAO  (esqueleto: duas fileiras de tiles desencontradas)
 * -----------------------------------------------------------------------------
 * No original sao logotipos de cliente: fileira de tres + um paragrafo a
 * direita, depois uma fileira alinhada a direita. Mesmo desenho, mas o tile
 * carrega a METRICA em vez de uma marca — que e o conteudo que esta pagina tem
 * para provar resultado.
 * -------------------------------------------------------------------------- */
.gs-sol-proof__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 1200px) { .gs-sol-proof__row { gap: 60px; } }
/* 48px: o vao unico do pacote entre o cabecalho de secao e o primeiro elemento
 * estrutural, valendo de 992 para cima (40 abaixo disso). Esta secao era a
 * unica das quatro irmas que ficava em 40 nas duas faixas. */
@media (min-width: 992px) { .gs-sol-proof__row { margin-top: 48px; } }

/* A SEGUNDA FILEIRA — E POR QUE O ENCOSTE COMECA EM 1360, NAO EM 1200.
 *
 * O -1px cola a borda de baixo da primeira fileira na borda de cima da segunda:
 * as duas viram uma parede continua de tiles, que e o desenho do esqueleto.
 * So que isso pressupoe que a PRIMEIRA fileira nao embrulhou. Quando ela
 * embrulha, o <p> desce para a segunda linha do flex e o -1px o joga em cima
 * dos tiles de baixo — nao uma quase-colisao, uma sobreposicao de 1px medida.
 *
 * O limiar de embrulho e aritmetica, nao chute: 3 tiles de 280 com -1px de
 * margem = 838, mais 60 de gap, mais 420 do paragrafo = 1318px. O conteudo do
 * .tj-container e `min(1350, vw) - 30`, entao cabe a partir de vw = 1348.
 * Medido nas duas beiradas: 1340 embrulha (folga -1px), 1348 nao (folga 6,2px).
 *
 * 1360 e o limiar com 12px de sobra, para uma diferenca de metrica de fonte ou
 * de barra de rolagem nao virar a chave sozinha. Abaixo dele o vao e 32px, que
 * esta na escada; o desenho da parede continua e um refinamento de 1440 e volta
 * a ser exatamente isso. */
.gs-sol-proof__row--end { justify-content: flex-end; margin-top: 32px; }
@media (min-width: 1360px) { .gs-sol-proof__row--end { margin-top: -1px; } }

.gs-sol-proof__tiles { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.gs-sol-proof__tiles > li { display: flex; width: 100%; }

.gs-sol-proof__tile {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 108px;
  padding: 20px 24px;
  border: 1px solid var(--gs-border-dark);
  background: var(--sol-tile-on-dark);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--gs-text-on-dark);
  /* 0,86 e nao 0,62. As cinco metricas sao o UNICO argumento de prova da
   * pagina e eram o texto mais apagado e mais pequeno da propria secao: 13px a
   * 7,45:1 contra os 16px a 8,07:1 do paragrafo de apoio ao lado. O leitor
   * batia primeiro no comentario e so depois no dado que ele comenta. Pior, a
   * metrica so chegava a opacidade cheia num hover que nao leva a lugar
   * nenhum — informacao nao pode depender de ponteiro. O hover continua
   * existindo como resposta; ele so nao e mais o unico jeito de ler. */
  opacity: 0.86;
  position: relative;
  isolation: isolate;
  transition: opacity var(--motion-base) var(--motion-ease);
}
.gs-sol-proof__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 60% at 50% 100%, var(--sol-wash-mint), transparent 70%);
  transform: scale(0);
  transition: transform 500ms var(--motion-ease);
}
.gs-sol-proof__tile:hover { opacity: 1; }
.gs-sol-proof__tile:hover::before { transform: scale(1); }
@media (min-width: 576px) {
  .gs-sol-proof__tiles > li { width: 220px; margin-left: -1px; }
  .gs-sol-proof__tiles > li:first-child { margin-left: 0; }
  .gs-sol-proof__tile { min-height: 120px; }
}
@media (min-width: 1200px) {
  .gs-sol-proof__tiles > li { width: 280px; }
}
/* A METRICA PASSA A SER MAIOR QUE O COMENTARIO DELA.
 * 14 contra 15: a diferenca continua pequena, porque uma e mono e a outra e
 * texto corrido — mono ocupa mais por caractere no mesmo corpo. O que muda e a
 * ORDEM: o dado deixa de ser o menor elemento da secao. */
@media (min-width: 992px) { .gs-sol-proof__tile { font-size: 14px; } }

.gs-sol-proof__desc {
  max-width: 420px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gs-text-muted-on-dark);
}

/* -----------------------------------------------------------------------------
 * 5. O GARGALO  (esqueleto: cabecalho partido + grade 2fr | 1fr)
 * -----------------------------------------------------------------------------
 * O bloco de referencia tem, dentro do cartao grande, cinco fileiras de
 * pilulas correndo em marquee, alternando esquerda/direita. Sao exatamente
 * cinco constatacoes aqui — entao ficaram cinco fileiras alternadas, PARADAS.
 * Frase que anda e frase que nao se le; o ritmo do desencontro fica, o
 * movimento sai.
 * -------------------------------------------------------------------------- */
.gs-sol-split-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.gs-sol-split-head__title { max-width: 700px; }
.gs-sol-split-head__title h2 { margin-top: 16px; text-wrap: balance; color: var(--gs-text); }
.gs-sol-split-head__desc {
  max-width: 510px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gs-text-muted);
}
@media (min-width: 992px) { .gs-sol-split-head__desc { font-size: 18px; } }

.gs-sol-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 40px;
}
/* 48, nao 52: mesmo vao de cabecalho->conteudo das outras tres secoes. */
@media (min-width: 992px) { .gs-sol-bento { grid-template-columns: 2fr 1fr; margin-top: 48px; } }

/* O esqueleto emoldura este painel com 4px da cor da secao e deixa o miolo no
 * MESMO tom do fundo — o cartao so existe pelo aro. Aqui o cartao e branco
 * sobre a faixa cinza, que e como todo cartao deste site se apresenta. O que eu
 * peguei foi o painel largo com as fileiras desencontradas dentro, nao o aro. */
.gs-sol-pain {
  border: 1px solid var(--gs-border);
  border-radius: var(--sol-radius-md);
  background: var(--gs-surface);
  padding: 26px 20px;
  overflow: hidden;
}
@media (min-width: 992px) { .gs-sol-pain { padding: 34px 30px; } }
.gs-sol-pain__rows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gs-sol-pain__row { display: flex; }
.gs-sol-pain__row:nth-child(2n) { justify-content: flex-end; }
@media (min-width: 992px) {
  .gs-sol-pain__row:nth-child(2n)   { padding-left: 10%; }
  .gs-sol-pain__row:nth-child(2n+1) { padding-right: 10%; }
}
/* O DESENCONTRO E DESLIGADO ABAIXO DE 768.
 *
 * A alternancia so le como ritmo quando ha largura para as duas margens
 * aparecerem. Em 390 as pilulas longas ocupam a linha inteira e nao tem para
 * onde deslocar: sobram quatro alinhadas a esquerda e UMA — a curta,
 * "Exceptions surface too late" — indentada sozinha. Isso nao le como cadencia,
 * le como um item fora do lugar. */
@media (max-width: 767px) { .gs-sol-pain__row:nth-child(2n) { justify-content: flex-start; } }

/* A pilula do esqueleto: quadro pequeno do icone + rotulo, canto pouco
 * arredondado, fundo levemente rebaixado do fundo da secao. */
.gs-sol-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 5px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--gs-border);
  border-radius: 8px;
  background: var(--sol-ink-6);
  -webkit-backdrop-filter: blur(27px);
  backdrop-filter: blur(27px);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gs-text);
  transition: border-color var(--motion-base) var(--motion-ease);
}
/* Mesma razao do cartao de passo: a pilula de dor e um <span>, nao leva a
 * lugar nenhum. Reage em borda, que e cor, e nao em posicao. */
.gs-sol-chip:hover {
  border-color: color-mix(in srgb, var(--gs-text) 35%, transparent);
}
.gs-sol-chip__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--gs-surface);
  color: var(--gs-primary-deep);
}
.gs-sol-chip__icon svg { width: 14px; height: 14px; }

/* Coluna estreita do bento. No original e uma ilustracao com contador; o
 * contador sairia como numero inventado, entao ficou so a geometria: cinco
 * barras que encurtam, com o no mint no fim. */
/* TRES CONSERTOS NO MESMO CARTAO, E OS TRES SAO DE DENSIDADE.
 *
 * 1. `border`. O cartao irmao do bento tem borda; este nao tinha. Sobre a faixa
 *    cinza da secao um retangulo branco sem contorno nao le como cartao, le
 *    como um buraco na faixa. `box-sizing` e border-box e a grade e 2fr/1fr,
 *    entao a borda entra por dentro e a altura do bento nao muda.
 *
 * 2. `justify-content: center`. Com `flex-end` a escada de barras ficava
 *    empoçada no rodape e os 64% de cima do cartao ficavam vazios — sobra
 *    morta muito acima do limite. Centrado, o mesmo vazio vira duas margens de
 *    ~105px e a escada volta a ler como escada em vez de resto.
 *
 * 3. Opacidade das barras. A 0,16 sobre branco as quatro primeiras
 *    praticamente nao existiam: sobrava o cotoco verde do fim, sozinho. A 0,28
 *    a escada inteira aparece e o quinto degrau — o unico em --gs-primary
 *    cheio — continua sendo o acento, porque agora ele contrasta com algo. */
.gs-sol-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--gs-border);
  border-radius: var(--sol-radius-md);
  background:
    radial-gradient(ellipse 80% 55% at 100% 0%, var(--sol-wash-mint), transparent 70%),
    var(--gs-surface);
}
/* Abaixo de 768 o cartao deixa de dividir a linha com nada e passa a ser so um
 * bloco decorativo empilhado: 260px viravam rolagem. 180 mantem a escada
 * legivel com metade do custo. */
@media (max-width: 767px) { .gs-sol-aside { min-height: 180px; } }
.gs-sol-aside__bar {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gs-primary-deep), transparent);
  opacity: 0.28;
}
.gs-sol-aside__bar:nth-child(1) { width: 100%; }
.gs-sol-aside__bar:nth-child(2) { width: 84%; }
.gs-sol-aside__bar:nth-child(3) { width: 62%; }
.gs-sol-aside__bar:nth-child(4) { width: 44%; }
.gs-sol-aside__bar:nth-child(5) { width: 26%; opacity: 1; background: var(--gs-primary); }
.gs-sol-aside__node {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gs-mint);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gs-mint) 12%, transparent);
}

/* -----------------------------------------------------------------------------
 * 6. SUPERVISAO  (esqueleto: grade 2.57fr | 1.67fr)
 * -------------------------------------------------------------------------- */
/* Sem margin-top. O 10px que estava aqui era valor solto fora da escada de
 * vaos do pacote (8/12/16/24/32/48/64) e nao respondia a nada: esta secao nao
 * tem cabecalho proprio — o H2 mora DENTRO do cartao escuro — entao o unico
 * respiro acima e o padding-top da faixa, que e o mesmo das irmas. */
.gs-sol-control {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 992px) { .gs-sol-control { grid-template-columns: 2.57fr 1.67fr; } }

.gs-sol-control__card { padding: 30px 26px; border-radius: var(--sol-radius-md); }
@media (min-width: 992px) { .gs-sol-control__card { padding: 44px 44px 46px; } }
.gs-sol-control__card h2 { margin-top: 16px; max-width: 24ch; text-wrap: balance; color: var(--gs-text-on-dark); }
.gs-sol-control__card p {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gs-text-muted-on-dark);
}
@media (min-width: 992px) { .gs-sol-control__card p { font-size: 17px; } }

.gs-sol-states { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* `width: 100%` — a pilula preenche a coluna, e nao o proprio texto.
 *
 * O `flex: 1 1 0` dos <li> logo abaixo distribui ALTURA, nao largura: as tres
 * pilulas ficavam do tamanho do rotulo que cada uma carrega — 244,4 / 252,8 /
 * 244,4 numa coluna de 516px. Isso serrilhava a borda direita em 8,4px e
 * deixava 263px de vazio colado ao lado (51% da coluna). Em 768 o mesmo defeito
 * abre 485px de vazio, porque a coluna passa a ser a largura toda.
 *
 * A altura de cada <li> nao muda, entao os tres ramos do leque (secao 9.2)
 * continuam terminando nos mesmos centros verticais. */
.gs-sol-state {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--gs-border);
  border-radius: var(--sol-radius-sm);
  background: var(--gs-surface);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gs-text);
  transition:
    border-color var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}
/* O deslocamento e para a DIREITA, para longe do cartao: o estado se afasta do
 * leque quando voce o aponta, como quem puxa um cabo. */
.gs-sol-state:hover {
  border-color: color-mix(in srgb, var(--gs-text) 35%, transparent);
  transform: translateX(3px);
}
.gs-sol-state:hover .gs-sol-state__glyph { border-color: color-mix(in srgb, var(--gs-primary) 55%, transparent); }
/* `flex: 1 1 0` nos tres: e o que garante que os centros das linhas caiam em
 * 15,8% / 50% / 84,2% da coluna — as MESMAS alturas em que os tres ramos do
 * leque terminam, dentro do cartao ao lado. Se este `flex` mudar, o leque
 * (secao 9.2) deixa de apontar para o estado certo. */
.gs-sol-states > li { display: flex; flex: 1 1 0; }
.gs-sol-state__glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--gs-border);
  background: var(--gs-surface-2);
  color: var(--gs-primary-deep);
  transition: border-color var(--motion-base) var(--motion-ease);
}
.gs-sol-state__glyph svg { width: 18px; height: 18px; }
/* Tres estados, tres pesos: seguir, revisar, parar. */
.gs-sol-states > li:nth-child(1) .gs-sol-state__glyph { border-color: color-mix(in srgb, var(--gs-primary) 45%, transparent); color: var(--gs-primary-deep); }
.gs-sol-states > li:nth-child(2) .gs-sol-state__glyph { border-color: color-mix(in srgb, var(--gs-primary-deep) 35%, transparent); }
.gs-sol-states > li:nth-child(3) .gs-sol-state__glyph { border-color: var(--gs-border-strong); color: var(--gs-text); }

/* -----------------------------------------------------------------------------
 * 7. PERGUNTAS  (mesma grade 1fr | 2fr das familias, para a pagina rimar)
 * -------------------------------------------------------------------------- */
/* Os 8px sao os mesmos da secao 3, de proposito: a coluna de respostas comeca
 * na MESMA linha vertical em que comecam os paineis das familias. O respiro
 * entre o titulo e a lista vem do padding, nao do gap, para nao mover essa
 * linha. */
.gs-sol-faq { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 992px) { .gs-sol-faq { grid-template-columns: 1fr 2fr; gap: 8px; } }
.gs-sol-faq__head h2 { max-width: 16ch; text-wrap: balance; color: var(--gs-text); }
/* O UNICO VERDE DESTA SECAO, E ELE E GEOMETRIA.
 *
 * A s08Faq e a unica das nove sem sobrancelha, e por isso era tambem a unica
 * sem um pixel de marca: uma faixa branca inteira de cinza sobre cinza. O
 * filete devolve o acento sem uma palavra nova e sem imagem — 40x2, marcando o
 * inicio do bloco, alinhado com o topo da coluna de respostas ao lado. Verde
 * profundo porque a superficie e clara, e 2px porque esse e o teto de
 * espessura para geometria de marca em fundo claro. */
.gs-sol-faq__head h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 20px;
  background: var(--gs-primary-deep);
}
@media (min-width: 992px) { .gs-sol-faq__head { padding-right: 28px; } }
/* Sticky a partir de 992, como o indice das familias: as duas secoes usam a
 * MESMA grade 1fr|2fr e nao havia razao para uma grudar em 1200 e a outra
 * tambem so em 1200 enquanto a coluna curta ja abria vazio desde 992. */
@media (min-width: 992px) {
  .gs-sol-faq__head { position: sticky; top: calc(var(--gs-anchor-offset, 96px) + 20px); align-self: start; }
}

/* O CHEVRON RESPONDE — E RESPONDE IGUAL NOS TRES FAQs DO PACOTE.
 *
 * O <summary> e o unico controle de verdade desta faixa clara e era o unico
 * que nao dava sinal nenhum de si: a seta ficava em --gs-text-muted parada,
 * no repouso, no hover e no aberto. A borda do cartao ja troca sozinha (a
 * utilitaria compilada .gs-card-border-hover:hover leva para 35% de --gs-text),
 * entao com a cor do glifo o controle passa a reagir em duas propriedades,
 * como manda a regra.
 *
 * Verde profundo, e nao --gs-primary: aqui o chevron e TEXTO sobre fundo
 * branco, e em superficie clara o texto de marca e sempre --gs-primary-deep.
 * O mesmo par (hover e [open]) vale na /platform e na /white-label, para os
 * tres acordeons lerem como um componente so. */
.gs-sol #faq details > summary:hover svg,
.gs-sol #faq details[open] > summary svg { color: var(--gs-primary-deep); }

/* -----------------------------------------------------------------------------
 * 8. CHAMADA FINAL  (esqueleto: a faixa de CTA encostada na direita)
 * -----------------------------------------------------------------------------
 * No original o convite fica alinhado a direita, ao lado de um botao redondo
 * com tres aneis pulsando. Mantive o alinhamento e os aneis; o botao continua
 * sendo o botao do proprio GUIDSE.
 * -------------------------------------------------------------------------- */
.gs-sol-cta { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 992px) { .gs-sol-cta { grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: end; } }
.gs-sol-cta__text h2 { margin-top: 16px; max-width: 20ch; text-wrap: balance; color: var(--gs-text-on-dark); }
.gs-sol-cta__text p { margin-top: 18px; max-width: 56ch; font-size: 16px; line-height: 1.7; color: var(--gs-text-muted-on-dark); }

.gs-sol-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
@media (min-width: 992px) { .gs-sol-cta__actions { align-items: flex-end; } }

.gs-sol-cta__halo { position: relative; display: inline-flex; }
.gs-sol-cta__halo > span {
  position: absolute;
  inset: -6px;
  border: 1px solid var(--gs-mint);
  border-radius: 999px;
  opacity: 0;
  animation: gsSolPulse 3.9s linear infinite;
  pointer-events: none;
}
.gs-sol-cta__halo > span:nth-child(2) { animation-delay: 1.3s; }
.gs-sol-cta__halo > span:nth-child(3) { animation-delay: 2.6s; }

/* 1.09 e nao 1.3: o anel envolve a pilula INTEIRA, nao um botao redondo de
 * 45px como no esqueleto. Escala grande aqui empurraria o anel para fora do
 * container. */
@keyframes gsSolPulse {
  0%   { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.09); }
}

/* =============================================================================
 * 9. A CAMADA DE LUZ — POSICIONAMENTO DO QUE O KIT DESENHA
 * =============================================================================
 * O desenho (as tres camadas, a bolinha verde, a porta, o tracejado que marcha)
 * vem inteiro de assets/chunks/zz-efeitos.css e nao e reescrito aqui. O que esta
 * folha faz e SO colocar cada peca no lugar certo desta pagina e adaptar as duas
 * variaveis de cor quando o efeito cai sobre fundo claro.
 *
 * Tres pecas, tres relacoes. A justificativa de cada uma esta no cabecalho de
 * page-solutions.php, junto da marcacao.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 9.1 O FIO DO PASSO — REMOVIDO
 * -----------------------------------------------------------------------------
 * Eram seis barras de luz, uma dentro de cada cartao da jornada. Sairam por
 * dois motivos, e o dono viu os dois antes de mim:
 *
 *   . nao conectavam nada. Cada fio nascia e morria dentro do proprio cartao,
 *     entao desenhava sequencia sem ligar um passo ao seguinte;
 *   . o `overflow: hidden` do cartao cortava o halo, e o brilho terminava num
 *     degrau reto — "glow quebrado", nas palavras dele.
 *
 * O que faz o trabalho agora e o CONECTOR NEON do bloco 2b-conn, que vive no
 * vao ENTRE cartoes. Junto sairam `--sol-step-rail-x` (a constante que so
 * existia para posicionar este fio) e o <svg> correspondente no template.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 9.2 O LEQUE DO ROTEAMENTO  (s05HumanControl — uma entrada, tres saidas)
 * -----------------------------------------------------------------------------
 * `isolation: isolate` no cartao existe por causa do `mix-blend-mode: screen`
 * do .fx-layer: sem um contexto de empilhamento proprio, o `screen` procuraria
 * o fundo atras do CARTAO — que aqui e a faixa clara da secao — e o leque
 * estouraria em branco. Com o isolamento, ele soma sobre o preto do cartao, que
 * e o que o efeito espera.
 *
 * A mascara apaga o tronco no terco esquerdo. Duas razoes: o fio passa a
 * NASCER de dentro do cartao em vez de comecar num corte reto, e a unica faixa
 * onde o paragrafo pode chegar perto (entre 1200 e 1400px) fica fora do
 * desenho.
 *
 * ⚠️ ESTE LEQUE NAO LEVA `.fx-on-light`, E A SECAO TAMBEM NAO.
 * A secao e clara, mas o conector nao esta na secao — esta dentro do
 * DarkGridCard, cujo fundo e --gs-surface-dark-3, que resolve para
 * --gs-core-black. Esse e exatamente o valor padrao de --fx-surface, entao o
 * furo do anel ja casa com o fundo em que ele esta pousado. Marcar a secao como
 * clara aqui pintaria o furo de branco no meio de um cartao preto — o mesmo
 * defeito que a classe existe para corrigir, so que ao contrario.
 * -------------------------------------------------------------------------- */
.gs-sol-control__card { isolation: isolate; }

/* Abaixo de 992px os tres estados empilham SOB o cartao. Um ramo apontando para
 * a direita apontaria para a margem. Entao nao ha leque. */
.gs-sol-control__fan { display: none; }

@media (min-width: 992px) {
  .gs-sol-control__fan {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    /* `height: 100%` e obrigatorio, nao cosmetico: com `bottom: 0` e altura
     * automatica o <svg> — que e elemento substituido — assume a altura
     * INTRINSECA da viewBox (400px) e o `bottom` e descartado. O cartao tem 376:
     * a diferenca de 24px empurrava a ponta do ramo de baixo 20px abaixo do
     * centro do terceiro estado. Medido: 5464 contra 5444. Com a altura escrita,
     * os tres ramos voltam a cair em cima dos tres estados. */
    width: 132px;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--gs-core-black) 34%);
    mask-image: linear-gradient(90deg, transparent 0, var(--gs-core-black) 34%);
  }
}

/* -----------------------------------------------------------------------------
 * 9.3 O CAMPO CAPILAR  (s09FinalCta — o unico da pagina)
 * -----------------------------------------------------------------------------
 * O empilhamento NAO esta aqui: quem faz e `.fx-host`, na camada central, posta
 * na propria <section>. Ela sobe o conteudo para z-index 1 (sem isso o campo,
 * que e `position: absolute`, pintaria por cima do titulo e dos botoes mesmo
 * com z-index 0) e isola o contexto para o `screen` somar so com o preto desta
 * faixa. Eu tinha escrito esse remendo a mao; a classe substitui, e passa a ser
 * um problema resolvido em um lugar so.
 *
 * O que sobra de local e `overflow: hidden` — os fios sao desenhados por uma
 * viewBox 1000x625 recortada em `slice`, e a faixa e mais baixa que isso.
 * -------------------------------------------------------------------------- */
.gs-sol-cta-band { overflow: hidden; }

/* A origem do leque e o botao. Abaixo de 992px a coluna de acoes desce para a
 * ESQUERDA, entao o leque e espelhado — um `scaleX(-1)` move a origem de 84%
 * para 16% e vira a abertura junto, sem precisar de um segundo campo. */
@media (max-width: 991px) {
  .gs-sol-cta__field { transform: scaleX(-1); }
}

/* -----------------------------------------------------------------------------
 * MOVIMENTO REDUZIDO
 * -----------------------------------------------------------------------------
 * A camada central ja cuida do que e dela, e cuida em dois lugares:
 *   - CSS zera o tracejado que marcha, o cintilar e a opacidade dos pulsos;
 *   - o efeitos.js chama `svg.pauseAnimations()` nos campos capilares, porque
 *     as bolinhas que viajam sao SMIL e **CSS nao para SMIL** — nem
 *     `animation: none`, nem `display: none` num ancestral.
 *
 * O que fica aqui e so o que esta pagina escreveu: os aneis do CTA, que sao
 * anteriores a camada de luz, e os deslocamentos de hover.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gs-sol-cta__halo > span { animation: none; opacity: 0; }
  .gs-sol-proof__tile::before { transition: none; }

  /* Sem deslocamento nenhum no hover. Cor e borda continuam trocando: isso nao
   * e movimento, e o retorno visivel de que o elemento esta sob o ponteiro.
   * O .gs-sol-step e o .gs-sol-chip sairam desta lista porque nao deslocam
   * mais em largura nenhuma — anular um transform que nao existe deixaria
   * seletor morto na folha. */
  .gs-sol-state:hover,
  .gs-sol-ser__tab:hover,
  .gs-sol-ser__tab:focus-visible { transform: none; }

  .gs-sol-step:hover .gs-sol-step__icon::after { scale: 1; }

  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-1"]:hover) #family-1 .gs-sol-ser__art::before,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-2"]:hover) #family-2 .gs-sol-ser__art::before,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-3"]:hover) #family-3 .gs-sol-ser__art::before,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-4"]:hover) #family-4 .gs-sol-ser__art::before,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-5"]:hover) #family-5 .gs-sol-ser__art::before,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-1"]:hover) #family-1 .gs-sol-ser__art::after,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-2"]:hover) #family-2 .gs-sol-ser__art::after,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-3"]:hover) #family-3 .gs-sol-ser__art::after,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-4"]:hover) #family-4 .gs-sol-ser__art::after,
  .gs-sol-ser:has(.gs-sol-ser__tab[href="#family-5"]:hover) #family-5 .gs-sol-ser__art::after,
  .gs-sol-ser__panel:hover .gs-sol-ser__art::before,
  .gs-sol-ser__panel:hover .gs-sol-ser__art::after,
  .gs-sol-ser__panel:target .gs-sol-ser__art::before,
  .gs-sol-ser__panel:target .gs-sol-ser__art::after {
    rotate: calc(var(--sol-i, 0) * 24deg);
    scale: 1;
  }
}

/* -----------------------------------------------------------------------------
 * 6b. SUPERVISAO — ESCALA
 * -----------------------------------------------------------------------------
 * O dono aprovou o desenho e pediu so mais presenca: "escalar mais". O bloco
 * cresce por dentro, sem mudar a composicao — mesma grade 2.57 | 1.67, mesmo
 * leque, mesmos tres estados.
 *
 * Sobe o respiro do cartao, o corpo do texto, a altura util das pilulas e o
 * aro do glifo. O que NAO muda e a altura relativa das tres pilulas entre si:
 * os tres ramos do leque (bloco 9.2) terminam nos centros verticais delas, e
 * mexer no ritmo interno da coluna desalinharia o desenho do texto.
 *
 * Vai no fim da folha, depois do bloco 6, para sobrepor sem precisar reescrever
 * as regras originais — assim o que era o desenho aprovado continua legivel no
 * lugar onde sempre esteve. */
@media (min-width: 992px) {
  .gs-sol-control { gap: 16px; }
  .gs-sol-control__card { padding: 56px 56px 58px; }
  .gs-sol-control__card h2 { margin-top: 20px; }
  .gs-sol-control__card p { margin-top: 22px; font-size: 19px; line-height: 1.6; }

  .gs-sol-states { gap: 16px; }
  .gs-sol-state {
    gap: 20px;
    padding: 30px 30px;
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  .gs-sol-state__glyph {
    width: 54px;
    height: 54px;
  }
  .gs-sol-state__glyph svg { width: 22px; height: 22px; }
}

/* -----------------------------------------------------------------------------
 * 4b. MEDICAO — CABECALHO CENTRADO E CARTOES NO LUGAR DOS TILES
 * -----------------------------------------------------------------------------
 * Dois pedidos do dono nesta faixa: centralizar o texto e trocar os tiles
 * pelos cartoes da secao "The operational problem" da home.
 *
 * O CABECALHO. Eyebrow, H2 e corpo centrados. O corpo saiu de dentro da
 * fileira de tiles (onde ficava espremido a direita) e subiu para logo abaixo
 * do titulo, que e onde ele explica o que vem em seguida.
 *
 * OS CARTOES. Desenho da home: trilho vertical de 1px, ponto verde com aro na
 * altura de cada item, ordinal em mono e cartao de borda suave. A diferenca
 * sao os tokens — a faixa e escura, entao superficie, borda e texto vem do par
 * "on-dark". O trilho e o ponto continuam no verde da marca, que sobre escuro
 * e onde ele funciona melhor.
 *
 * O trilho some abaixo de 576px: sem largura para o recuo de 36px, o ponto
 * cairia em cima do cartao. -------------------------------------------------- */
/* `margin-inline: auto` E OBRIGATORIO AQUI, e a falta dele foi o meu erro na
 * primeira tentativa. `.gs-sol-head` traz `max-width: 700px` e nenhuma margem
 * automatica — a caixa nasce encostada na esquerda do container. So com
 * `text-align: center` o texto ficava centrado DENTRO de uma caixa de 700px
 * que comeca no canto esquerdo de 1350: parecia levemente torto, que e pior do
 * que assumidamente alinhado a esquerda. A largura sobe para 820px porque o H2
 * desta faixa tem duas linhas longas. */
#measurement .gs-sol-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
#measurement .gs-sol-proof__desc {
  margin: 20px auto 0;
  max-width: 68ch;
  text-align: center;
}

.gs-sol-proof-rail { position: relative; margin-top: 40px; }
@media (min-width: 992px) { .gs-sol-proof-rail { margin-top: 48px; } }

.gs-sol-proof-rail__line {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 1px;
  background: color-mix(in srgb, var(--gs-primary) 40%, transparent);
}
@media (min-width: 576px) { .gs-sol-proof-rail__line { display: block; } }

.gs-sol-proof-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 576px) { .gs-sol-proof-cards { padding-left: 36px; } }
.gs-sol-proof-cards > li { position: relative; }

.gs-sol-proof-cards__dot {
  display: none;
  position: absolute;
  top: 50%;
  left: -31px;
  width: 11px;
  height: 11px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--gs-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-mint) 25%, transparent);
}
@media (min-width: 576px) { .gs-sol-proof-cards__dot { display: block; } }

.gs-sol-proof-card {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px 22px;
  border: 1px solid var(--gs-border-dark);
  border-radius: var(--sol-radius-sm);
  background: var(--gs-surface-dark-3);
  transition: border-color var(--motion-base) var(--motion-ease);
}
.gs-sol-proof-card:hover { border-color: var(--gs-border-strong-dark); }
.gs-sol-proof-card__n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--gs-mint);
}
.gs-sol-proof-card__t {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--gs-text-on-dark);
}
@media (min-width: 992px) {
  .gs-sol-proof-card { padding: 20px 26px; }
  .gs-sol-proof-card__t { font-size: 17px; }
}

/* -----------------------------------------------------------------------------
 * 5b. O GARGALO — LAYOUT DE "TRUST BEFORE SCALE"
 * -----------------------------------------------------------------------------
 * Mesma grade da secao homonima da home: 0,78fr de texto contra 1fr de
 * cartoes, alinhadas pelo topo. Os numeros sao os de la, nao aproximacoes —
 * a ideia e as duas secoes lerem como a mesma peca em paginas diferentes.
 *
 * Os cartoes repetem o desenho do acordeao da home (borda suave, 14px de raio,
 * sombra de contato de 2px) sem o comportamento: cada dor e uma afirmacao,
 * nao uma pergunta, entao nao ha o que abrir. Um <details> aqui prometeria
 * conteudo que nao existe. -------------------------------------------------- */
.gs-sol-painsplit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 992px) {
  .gs-sol-painsplit {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }
}
@media (min-width: 1200px) { .gs-sol-painsplit { gap: 80px; } }

.gs-sol-painsplit h2 { margin-top: 16px; max-width: 20ch; text-wrap: balance; color: var(--gs-text); }
.gs-sol-painsplit__desc {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gs-text-muted);
}
@media (min-width: 992px) { .gs-sol-painsplit__desc { font-size: 17px; } }

.gs-sol-paincards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-sol-paincard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  background: var(--gs-surface);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--gs-text) 5%, transparent);
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--gs-text);
  transition: border-color var(--motion-base) var(--motion-ease);
}
.gs-sol-paincard:hover { border-color: color-mix(in srgb, var(--gs-text) 32%, transparent); }
.gs-sol-paincard__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gs-border);
  border-radius: 50%;
  color: var(--gs-primary-deep);
}
.gs-sol-paincard__icon svg { width: 12px; height: 12px; }
@media (min-width: 992px) {
  .gs-sol-paincard { padding: 22px 26px; font-size: 17px; }
}

/* =============================================================================
 * 10. AJUSTES PEDIDOS PELO DONO — vao no fim para sobrepor sem reescrever os
 *     blocos originais, que continuam legiveis onde sempre estiveram.
 * ========================================================================== */

/* 10.1 A TRIADE EMPILHADA.
 * As tres oracoes voltam a ficar uma sob a outra. A divisao 70/30 do bloco 2
 * continua: o que muda e so o arranjo DENTRO da coluna de 70%. */
@media (min-width: 992px) {
  .gs-sol-triad {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 10.2 e 10.3 CABECALHO DA JORNADA CENTRADO NA PAGINA.
 * `.gs-sol-subhead` nao tinha largura maxima nem margem automatica, entao
 * bastava o `text-align`; o H2, esse tem `max-width: 22ch` e precisa da margem
 * automatica para a caixa dele tambem ir ao centro — foi o erro que cometi na
 * faixa de medicao e nao repito aqui.
 * O eyebrow ganha 0,22em de espacejamento, contra os 0,16em da casa. */
#journey .gs-sol-subhead { text-align: center; }
#journey .gs-sol-subhead h2 { margin-inline: auto; }
#journey .gs-sol-eyebrow { letter-spacing: 0.22em; }

/* 10.4 OS SEIS CARTOES DA JORNADA EM MODO NOTURNO.
 * A faixa continua clara; os cartoes e que viram escuros. Todos os valores
 * saem de token — superficie e borda do par escuro, verde da marca no aro do
 * glifo e no ordinal, texto no par on-dark.
 *
 * O ordinal deixa de usar --sol-ghost-number (calibrado para cartao branco, e
 * invisivel sobre preto) e passa a um mint rebaixado. */
#journey .gs-sol-step {
  border-color: var(--gs-border-dark);
  background: var(--gs-surface-dark-3);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--gs-core-black) 35%, transparent);
}
#journey .gs-sol-step:hover {
  border-color: color-mix(in srgb, var(--gs-mint) 45%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--gs-core-black) 50%, transparent);
}
#journey .gs-sol-step__icon {
  border-color: color-mix(in srgb, var(--gs-mint) 30%, transparent);
  background: color-mix(in srgb, var(--gs-mint) 8%, transparent);
  color: var(--gs-mint);
}
#journey .gs-sol-step:hover .gs-sol-step__icon {
  border-color: color-mix(in srgb, var(--gs-mint) 60%, transparent);
}
#journey .gs-sol-step__n { color: color-mix(in srgb, var(--gs-mint) 32%, transparent); }
#journey .gs-sol-step__title { color: var(--gs-text-on-dark); }
#journey .gs-sol-step__body { color: var(--gs-text-muted-on-dark); }

/* O conector entre cartoes segue no verde profundo: ele atravessa o VAO, que
 * continua sobre a faixa clara. Trocar para mint ali o faria sumir. */

/* 10.5 O FIO DECORATIVO SOB A ULTIMA ABA — REMOVIDO.
 * Eram 96px de linha descendo e apagando abaixo da aba 05, para dizer que a
 * coluna continuava. Lido de fora nao dizia nada: parecia sobra. O dono
 * apontou e sai. */
.gs-sol-ser__nav::after { content: none; }

/* 10.6 O GARGALO — coluna de texto centrada contra a pilha de cartoes.
 * Mesma correcao do s03 da /platform: a coluna curta recebe `align-self`, a
 * outra continua ancorada no topo. */
@media (min-width: 992px) {
  .gs-sol-painsplit > div:first-child { align-self: center; }
}