/* =============================================================================
   /method/ — "O painel pinado que redesenha o ciclo"
   =============================================================================
   Folha POR ROTA. functions.php (guidse_assets) a enfileira so quando
   guidse_current_route() === 'method', depois de guidse-efeitos, no fim da
   cascata. Em nenhuma outra pagina este arquivo existe.

   POR QUE ESTA PAGINA TEM CSS PROPRIO, e as outras 13 nao
   ---------------------------------------------------------------------------
   As 13 sao HTML colhido do build original: o Tailwind compilado em
   assets/chunks/ ja tem, byte a byte, todas as classes delas. Esta pagina nunca
   existiu la. O dono viu a primeira versao — montada so com classes compiladas
   — e a recusou ("o visual ficou um cu"). Escolheu entre seis maquetes, e a que
   ele escolheu depende de coisas que nao existem no build: um palco pinado,
   um anel SVG que se desenha com a rolagem, uma grade de 24 colunas. Nenhuma
   delas sai de uma classe utilitaria que ja esteja compilada — e uma classe de
   valor arbitrario que NAO esteja no build nao pinta nada, em silencio.

   Entao o layout e escrito a mao, aqui, uma vez. O theme.js do tema continua
   a gerir o reveal generico (.tj-fade-anim) dos textos. Na v2.0.4, apenas o
   circulo do METHOD em mobile ganha um controlador proprio de visibilidade,
   assets/js/method-mobile-cycle.js. O desktop nao foi alterado — ver 7b/8.

   TUDO FICA DENTRO DE .gs-method
   ---------------------------------------------------------------------------
   Os nomes abaixo (.step, .node, .frame, .lead...) sao genericos de proposito:
   descrevem a pagina, nao o tema. Mas o cabecalho e o rodape do site estao no
   MESMO documento, cheios de classes compiladas. Por isso toda regra e
   prefixada por .gs-method, a classe do <main>: assim nenhuma delas pode
   alcancar o cabecalho, o rodape ou o menu, e a especificidade a mais ainda
   ajuda a vencer as utilitarias compiladas. As variaveis tambem moram em
   .gs-method, nao em :root, pelo mesmo motivo.

   As UNICAS regras fora desse escopo sao o fundo do <body>, logo abaixo, porque
   o <body> nao esta dentro do <main> e esta pagina e escura de ponta a ponta, e
   o cabecalho encolhido (secao 9, prefixo .gs-mini), que fica antes do <main>.

   O ESTADO FINAL E O ESTADO BASE
   ---------------------------------------------------------------------------
   Toda a secao 9 (MOVIMENTO) e ACRESCIMO. Quem desliga animacao, ou usa um
   navegador sem animation-timeline, ve o ciclo inteiro desenhado e os seis
   passos completos — nao uma pagina em branco. Isso foi medido: no modo
   'prefers-reduced-motion: reduce', zero textos ficam em opacidade 0. Sem
   JavaScript vale o mesmo, por @media (scripting: none) na secao 8.

   MEDIDO NO TEMA SERVIDO (27/10/2026), e por isso os numeros sao estes:
     - o <header> do tema e `fixed`, e mede 79px ate 992px, 87px de 992 a
       1199, e 91px de 1200 para cima. E dele que vem --header-h: e o que o
       palco pinado usa de `top`, e o que a primeira dobra usa de folga.
     - .tj-container tem max-width 1350px e padding-inline 15px, ou seja
       1320px de conteudo. A grade daqui usa os MESMOS 1320px e --inset:15px,
       para o texto desta pagina nascer na mesma linha vertical do logotipo do
       cabecalho. Mudar --inset desalinha a pagina do cabecalho.
     - o rodape do tema e bg-gs-surface-dark-3 = rgb(11,13,14), que e
       exatamente o --d0 daqui. Por isso a pagina encosta no rodape sem costura.
     - Lenis (modules/smooth-scroll.js) escreve o scrollTop REAL do documento,
       diferente do ScrollSmoother, que move um transform. Por isso
       `position: sticky` e `animation-timeline: view()` funcionam nesta pagina.
       Se um dia o tema voltar a rolar por transform, o palco pinado e o anel
       param de responder — e aqui que se vem olhar.
   ========================================================================== */

/* Um numero acende um no inteiro do anel (disco, borda, letra e rotulo).
   Nome com prefixo de proposito: @property e GLOBAL, nao da para prender a
   um escopo, e zz-white-label.css ja usa um --lit proprio. As duas folhas
   nunca carregam juntas, mas um nome colidir por sorte nao e contrato. */
@property --gs-lit { syntax: "<number>"; inherits: true; initial-value: 1; }

/* A pagina e escura de ponta a ponta. O <body> do tema e branco, e aparece
   atras do conteudo enquanto a rolagem passa de uma secao para outra. */
body { background: #0b0d0e; }

.gs-method {
  /* superficies — degraus minimos, nunca #000 */
  --d0: #0b0d0e;
  --d1: #101819;
  --d2: #111a1b;
  --tint-1: rgba(255, 255, 255, .02);
  --tint-2: rgba(255, 255, 255, .035);

  /* fios — 6% e o padrao de trabalho, 16% e foco */
  --line-1: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .10);
  --line-3: rgba(255, 255, 255, .16);

  /* tinta da marca */
  --mint: #45e8c8;

  /* texto */
  --ink: #f2f6f5;
  --ink-72: rgba(242, 246, 245, .72);
  --ink-52: rgba(242, 246, 245, .52);
  --ink-38: rgba(242, 246, 245, .38);

  /* derivados, na mesma familia cromatica */
  --mint-06: color-mix(in oklab, var(--mint) 6%, transparent);
  --mint-14: color-mix(in oklab, var(--mint) 14%, transparent);
  --mint-44: color-mix(in oklab, var(--mint) 44%, transparent);
  --mint-ink: color-mix(in oklab, var(--mint) 62%, #ffffff);

  /* tipo */
  --fs-h1: clamp(2.25rem, 1.0092rem + 3.4466vi, 4.025rem);
  --fs-h2: clamp(1.75rem, 1.4904rem + 1.1538vi, 2.5rem);
  --fs-h3: clamp(1.375rem, 1.2452rem + .5769vi, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1.0192rem + .1923vi, 1.1875rem);
  --fs-label: clamp(.6875rem, .6467rem + .1815vi, .75rem);
  --fs-glyph: clamp(3rem, 1.6rem + 3.9vi, 5.75rem);

  /* ritmo vertical — assimetrico, topo > base */
  --sp-xs: 32px;
  --sp-s: 56px;
  --sp-m: 88px;
  --sp-l: 112px;
  --sp-xl: 152px;

  /* os dois numeros do tema: gutter do .tj-container e altura do <header> */
  --inset: 15px;
  --header-h: 79px;

  --gs-lit: 1;

  background: var(--d0);
  color: var(--ink);
  display: block;
}

@media (min-width: 62rem) {  /* 992px: o cabecalho cresce para 87px */
  .gs-method { --header-h: 87px; }
}
@media (min-width: 64rem) {  /* 1024px: a pagina ganha a coluna dupla */
  .gs-method {
    --sp-xs: 40px;
    --sp-s: 80px;
    --sp-m: 112px;
    --sp-l: 128px;
    --sp-xl: 160px;
  }
}
@media (min-width: 75rem) {  /* 1200px: o cabecalho cresce para 91px */
  .gs-method { --header-h: 91px; }
}

.gs-method *,
.gs-method *::before,
.gs-method *::after { box-sizing: border-box; }

/* A cor dos titulos e DITA, nao herdada. Medido no tema servido: as folhas
 * compiladas pintam h1/h2/h3 de rgb(30,35,38) — o texto escuro das paginas
 * claras — e uma cor escrita no elemento vence a que ele herdaria de .gs-method.
 * Sem esta linha, todo titulo desta pagina sai preto sobre preto. */
.gs-method h1,
.gs-method h2,
.gs-method h3 { margin: 0; font-weight: 400; text-wrap: balance; color: var(--ink); }
.gs-method p { margin: 0; text-wrap: pretty; }
.gs-method ol,
.gs-method ul,
.gs-method dl,
.gs-method dd,
.gs-method dt { margin: 0; padding: 0; }
.gs-method li { list-style: none; }
.gs-method a { color: inherit; text-decoration: none; }

.gs-method :focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* alvo de ancora nao fica embaixo do cabecalho flutuante */
.gs-method [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.gs-method .mono {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  font-variant-numeric: lining-nums tabular-nums slashed-zero;
  font-feature-settings: "zero";
}

/* rotulo de secao */
.gs-method .eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mint);
  display: block;
  margin-bottom: 1.1em;
}

.gs-method .h-display { font-size: var(--fs-h1); font-weight: 400; line-height: 1.0; letter-spacing: -.034em; }
.gs-method .h-section { font-size: var(--fs-h2); font-weight: 500; line-height: 1.08; letter-spacing: -.024em; }
.gs-method .lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -.005em; color: var(--ink-72); }

/* =============================================================================
   1 — GRADE: uma moldura, 24 colunas, gutter zero, tres larguras
   As tres larguras so existem a partir de 64rem; abaixo disso tudo ocupa a
   coluna de conteudo inteira, que e o que uma tela estreita pede.
   ========================================================================== */
.gs-method .frame {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--inset), 1fr)
    [content-start] repeat(24, minmax(0, calc(1320px / 24)))
    [content-end] minmax(var(--inset), 1fr) [full-end];
  column-gap: 0;
}
.gs-method .frame > * { grid-column: content; min-width: 0; }

@media (min-width: 64rem) {
  .gs-method .frame > .w-read { grid-column: content-start 1 / span 15; }  /* ~825px */
  .gs-method .frame > .w-mid { grid-column: content-start 1 / span 12; }   /* ~660px */
  .gs-method .frame > .w-short { grid-column: content-start 1 / span 8; }  /* ~440px */
}

/* =============================================================================
   2 — A PRIMEIRA DOBRA
   Cobre a tela toda e centra o miolo. O cabecalho e `fixed`: a folga do topo (e
   a de baixo, igual) e a altura dele MAIS o respiro.
   ========================================================================== */
.gs-method .banner {
  position: relative;
  /* A primeira dobra cobre a tela toda (pedido do dono). svh, e nao vh: no
   * celular, vh conta a barra de enderecos e a dobra passaria da tela; a linha
   * de cima e o plano B de quem nao conhece svh. */
  min-height: 100vh;
  min-height: 100svh;
  /* Folga IGUAL em cima e embaixo, de proposito: assim o miolo fica no centro
   * da tela de verdade, e nao deslocado pelo cabecalho fixo. */
  padding-block: calc(var(--header-h) + var(--sp-s));
  /* Rotulo + titulo (linha 2) e subtitulo (linha 3) ficam juntos no MEIO: as
   * linhas 1 e 4 ficam vazias e sao iguais (1fr), entao o par sobra exatamente
   * no centro, nao importa a altura da janela. */
  grid-template-rows: 1fr auto auto 1fr;
  isolation: isolate;
}
.gs-method .banner.frame > .w-read { grid-row: 2; }
.gs-method .banner.frame > .lead { grid-row: 3; }
.gs-method .banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(0, 197, 137, .12), transparent 65%);
  pointer-events: none;
}

.gs-method .banner h1 { margin-bottom: 1.2rem; }

/* =============================================================================
   2b — O FUNDO ANIMADO DA PRIMEIRA DOBRA: a orbita
   =============================================================================
   Pedido do dono: "um background animado para o fundo da section", UMA opcao,
   no estilo do site. Feito so com o que a pagina ja usa: a grade de 48px do
   palco dos passos (aqui mais fraca, porque fica atras do titulo), o fio branco
   de 1px das linhas, o disco escuro e o mint dos nos e o brilho verde do topo.
   Nenhum JS, nenhuma imagem.

   O desenho e o proprio metodo, sem repetir o anel de baixo: uma elipse com
   seis nos (um por passo, SEM letras — o dono ja cortou repeticao duas vezes
   nesta pagina) e um cometa que da a volta em sentido horario, comecando no
   norte, como o anel dos passos. Cada no acende quando o cometa passa e se
   apaga devagar. Uma volta = --lap = 30s, 5s por passo.

   O cometa anda por `offset-path: ellipse()`, e os nos ficam presos no MESMO
   caminho, a 1/6 de distancia um do outro. Como o cometa anda em velocidade
   constante pelo comprimento do caminho, ele chega ao no n exatamente em n/6
   da volta — por isso o atraso de cada no e (n - 6) * lap / 6.
   O caminho de ellipse() comeca no LESTE (3 horas) e anda em sentido horario
   (medido no Chrome); o norte fica a 75% dele. Por isso nos e cometa somam
   75%: num caminho fechado, distancia acima de 100% da a volta e continua.

   ONDE A ELIPSE PASSA: no computador ela e mais larga que o titulo e fica
   inteira em volta dele; no celular ela e mais larga que a tela (170vw), entao
   so os arcos de cima e de baixo aparecem e nada cruza o texto.

   O ESTADO BASE E PARADO: elipse, grade e nos apagados, sem cometa. Todo o
   movimento esta no @media (prefers-reduced-motion: no-preference) do fim
   desta secao. Para tirar o fundo inteiro: apagar esta secao e o
   <div class="orbit"> de page-method.php. */

/* A div e filha da grade do banner, mas e absoluta: com grid-area auto o
 * "bloco que a contem" e a caixa inteira da secao, folgas incluidas. Sem isto
 * ela herdaria grid-column: content (1320px) da regra geral de .frame. */
.gs-method .banner.frame > .orbit { grid-area: auto; }

.gs-method .orbit {
  --lap: 30s;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;              /* no celular a elipse passa da tela */
  pointer-events: none;
  /* A BASE SOME ANTES DA EMENDA. O `overflow: hidden` acima corta tudo numa
   * linha reta no fim da secao, e com a nebulosa nova (secao 2b-bis) esse
   * corte virou um degrau de luz bem onde a costura (2c-bis) comeca — media
   * de luz visivelmente diferente de um lado e do outro de uma reta.
   * Esta mascara apaga os ultimos 14% do fundo de cima para baixo, entao a
   * secao chega na costura ja escura e a passagem fica continua. */
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

/* grade, mascarada para sumir nas bordas */
.gs-method .orbit__grid {
  position: absolute;
  inset: 0;
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 10%, transparent 72%);
}
/* Uma casa a mais em cima e a esquerda: o deslize de 48px (uma casa) volta
 * ao comeco sem emenda e nunca mostra a borda da camada. */
.gs-method .orbit__grid::before {
  content: "";
  position: absolute;
  inset: -48px 0 0 -48px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.gs-method .orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170vw;
  height: 62vh;
  height: 62svh;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}
@media (min-width: 64rem) {
  .gs-method .orbit__ring {
    width: min(1180px, 88vw);
    height: min(66vh, 640px);
    height: min(66svh, 640px);
  }
}

/* nos e cometa: presos ao mesmo caminho, a borda da elipse */
.gs-method .orbit__node,
.gs-method .orbit__comet {
  position: absolute;
  top: 0;
  left: 0;
  offset-path: ellipse(50% 50% at 50% 50%);
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
}
.gs-method .orbit__node {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0c1314;                   /* o disco apagado dos nos do anel */
  box-shadow: 0 0 0 1px var(--line-3);
  offset-distance: calc(75% + var(--n) * 100% / 6);   /* no 0 = norte */
}
.gs-method .orbit__node::after {         /* o no aceso, por cima do apagado */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(69, 232, 200, .12), 0 0 18px 2px rgba(69, 232, 200, .45);
  opacity: 0;
}
/* O cometa e um risco de 44px que se apaga para tras. offset-rotate: auto o
 * deita na direcao do caminho; a ponta da frente (100% 50%) e que fica em cima
 * da elipse, e a bolinha ::after e a cabeca. O risco e reto e a elipse e
 * curva: nas pontas (curva mais fechada) uma cauda de 64px ja descolava ~14px
 * da linha; com 44px o descolamento fica em ~6px, no trecho ja apagado. */
.gs-method .orbit__comet {
  width: 44px;
  height: 2px;
  border-radius: 2px;
  offset-anchor: 100% 50%;
  offset-rotate: auto;
  background: linear-gradient(to right, transparent, rgba(69, 232, 200, .85));
  opacity: 0;                            /* parado: sem cometa */
}
.gs-method .orbit__comet::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #eafffa;
  box-shadow: 0 0 10px 2px rgba(69, 232, 200, .75);
}

@media (prefers-reduced-motion: no-preference) {
  .gs-method .orbit__grid::before { animation: gs-orbit-drift 16s linear infinite; }
  .gs-method .orbit__comet {
    opacity: 1;
    animation: gs-orbit-lap var(--lap) linear infinite;
  }
  .gs-method .orbit__node::after {
    animation: gs-orbit-ping var(--lap) linear infinite;
    animation-delay: calc((var(--n) - 6) * var(--lap) / 6);
  }
  .gs-method .banner::before { animation: gs-orbit-breathe 9s ease-in-out infinite alternate; }
}
@keyframes gs-orbit-drift { to { transform: translate(48px, 48px); } }
@keyframes gs-orbit-lap {
  from { offset-distance: 75%; }        /* parte do norte */
  to { offset-distance: 175%; }
}
/* chega o cometa: acende num estalo e se apaga ao longo de 40% da volta (12s) */
@keyframes gs-orbit-ping {
  0% { opacity: 1; transform: scale(1.6); }
  4% { opacity: 1; transform: scale(1); }
  40% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes gs-orbit-breathe {
  from { opacity: .55; }
  to { opacity: 1; }
}

/* =============================================================================
   2b-bis — A NEBULOSA: a camada de tras do fundo da primeira dobra
   =============================================================================
   Pedido do dono, 29/10/2026: "o fundo de 'how we work' ta maneiro com essa
   orbita, mas precisamos adicionar uma especie de degrade fluido (espacial) na
   camada atras das orbitas/textos... algo dinamico, como se fossem nebulosas,
   mas ainda no estilo meio 'matrix' que a guidse tem no site".

   Sao DUAS coisas, em camadas separadas, e nenhuma e imagem:

   1. AS NEBULOSAS (.orbit__neb > span): tres manchas de `radial-gradient`, nas
      cores que a pagina ja tem (o mint da marca e um azul-petroleo frio que sai
      do mesmo --d1). Cada uma anda devagar num caminho proprio, em tempos
      PRIMOS entre si (41s, 53s, 67s): assim o conjunto demora minutos para
      repetir o mesmo arranjo e nunca se ve o "loop".
   2. A CHUVA (.orbit__rain): fios verticais finissimos que descem devagar, com
      a vinheta do topo mais clara. E o aceno ao "matrix" — de proposito muito
      fraco, porque ele passa ATRAS de um h1 de ate 64px.

   O CUSTO: tudo que se move aqui e `transform` e `opacity`, as duas
   propriedades que o compositor resolve sozinho, sem passar pela linha
   principal. Nenhum `filter: blur` (caro por quadro, e a borda de um
   radial-gradient ja e macia de graca) e nenhum `mix-blend-mode`. Alem disso a
   .orbit inteira leva `data-fundo-vivo`, entao sai da tela e PARA — ver o
   rodape do zz-paginas.css e o modulo fundo-vivo.js.

   A ORDEM DAS CAMADAS dentro da .orbit (que ja e z-index: -1 na secao):
   nebulosa (-3) < chuva (-2) < grade (-1) < elipse, nos e cometa (auto).
   O texto da secao fica acima de tudo porque a .orbit e que esta atras dele.

   PARADO (prefers-reduced-motion: reduce) a nebulosa continua la, bonita e
   imovel: ela e um degrade, nao uma animacao com comeco e fim. */
.gs-method .orbit__neb,
.gs-method .orbit__rain {
  position: absolute;
  pointer-events: none;
}
.gs-method .orbit__neb {
  /* Transborda de proposito: as manchas andam ate 10% para fora, e um
   * `inset: 0` deixaria a borda delas entrar na tela. */
  inset: -22%;
  z-index: -3;
}
.gs-method .orbit__neb span {
  position: absolute;
  border-radius: 50%;
  /* `will-change` so nas tres manchas: promove cada uma a uma camada propria
   * do compositor, que e o que torna o passeio de graca na rolagem. Tres
   * camadas e pouco; polvilhar isto pela pagina inteira seria o contrario. */
  will-change: transform;
}
/* mancha 1 — a grande, mint, no alto a esquerda */
.gs-method .orbit__neb span:nth-child(1) {
  left: 4%;
  top: 2%;
  width: 62%;
  height: 58%;
  background: radial-gradient(closest-side, rgba(69, 232, 200, .17), rgba(69, 232, 200, .07) 46%, transparent 72%);
}
/* mancha 2 — a fria, azul-petroleo, descendo pela direita */
.gs-method .orbit__neb span:nth-child(2) {
  right: -4%;
  top: 18%;
  width: 56%;
  height: 64%;
  background: radial-gradient(closest-side, rgba(36, 120, 160, .2), rgba(36, 120, 160, .08) 44%, transparent 74%);
}
/* mancha 3 — a pequena e quente, embaixo, para o fundo nao ficar simetrico */
.gs-method .orbit__neb span:nth-child(3) {
  left: 26%;
  bottom: -6%;
  width: 48%;
  height: 46%;
  background: radial-gradient(closest-side, rgba(120, 232, 180, .14), rgba(120, 232, 180, .05) 50%, transparent 76%);
}

/* A chuva: uma faixa com o DOBRO da altura, com os fios repetidos duas vezes.
 * Ela desce 50% da propria altura e volta ao comeco — como os fios se repetem
 * a cada metade, a volta nao tem emenda. */
.gs-method .orbit__rain {
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* mais forte no alto, some antes de chegar ao subtitulo */
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 38%, transparent 78%);
}
.gs-method .orbit__rain::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 200%;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 46px,
    rgba(69, 232, 200, .085) 46px 47px,
    transparent 47px 93px
  );
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .gs-method .orbit__neb span:nth-child(1) { animation: gs-neb-a 41s ease-in-out infinite alternate; }
  .gs-method .orbit__neb span:nth-child(2) { animation: gs-neb-b 53s ease-in-out infinite alternate; }
  .gs-method .orbit__neb span:nth-child(3) { animation: gs-neb-c 67s ease-in-out infinite alternate; }
  .gs-method .orbit__rain::before { animation: gs-rain 26s linear infinite; }
}
/* Cada mancha anda poucos por cento e respira de escala: o olho le isso como
 * gas se movendo, nao como uma bola andando pela tela. */
@keyframes gs-neb-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 6%, 0) scale(1.16); }
}
@keyframes gs-neb-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-8%, -7%, 0) scale(.92); }
}
@keyframes gs-neb-c {
  from { transform: translate3d(-5%, 0, 0) scale(.94); }
  to   { transform: translate3d(7%, -5%, 0) scale(1.2); }
}
@keyframes gs-rain { to { transform: translate3d(0, -50%, 0); } }

/* =============================================================================
   2c — A PROMESSA DE TEMPO (primeira dobra e CTA final)
   =============================================================================
   Pedido do dono em 28/10/2026, depois de falar com o Kevin: a pagina tem de
   dizer, NO INICIO e NO FIM, o tempo de trabalho que o metodo devolve. Uma so
   classe para os dois lugares, porque e a mesma frase em dois momentos.

   Na primeira dobra ela entra como quarta linha da grade do banner (as linhas
   1 e 4 vazias e iguais seguram o miolo no centro — ver a secao 2), por isso
   `grid-template-rows` do banner ganha uma faixa a mais aqui, e nao la, junto
   do resto: assim a secao 2 continua descrevendo o banner sem esta frase.
   ========================================================================== */
.gs-method .time-line {
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--ink);
  border-left: 2px solid var(--mint);
  padding-left: 1rem;
}
/* Nos DOIS lugares o texto e CENTRADO, e um risco so de um lado ficaria torto:
   a marca passa a ser um tracinho mint EM CIMA, centrado como o resto.
   Na primeira dobra isso sempre foi assim; no fecho da pagina passou a ser em
   29/10/2026, quando o dono pediu "'you leave knowing...' precisa ser
   centralizado" (o bloco em si e centrado na secao 6b). */
.gs-method .banner.frame { grid-template-rows: 1fr auto auto auto 1fr; }
.gs-method .banner.frame > .time-line { grid-row: 4; }
.gs-method .banner.frame > .time-line,
.gs-method .cta.frame > .time-line {
  margin-top: 1.9rem;
  padding: 1.5rem 0 0;
  border: 0;
  position: relative;
}
.gs-method .banner.frame > .time-line::before,
.gs-method .cta.frame > .time-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 2px;
  background: var(--mint);
  transform: translateX(-50%);
}

/* =============================================================================
   2c-bis — A COSTURA: a passagem de "How we work" para "What you win back"
   =============================================================================
   Pedido do dono, 29/10/2026: "vamos pensar em uma transicao diferente da
   secao 'how we work' pra sessao 'what you win back'".

   O que havia era um fio de 1px (`border-top` da .clocks) — o mesmo corte que
   separa qualquer secao de qualquer site. Aqui ele ainda por cima cortava o
   melhor momento da pagina: a primeira dobra e espaco (orbita e nebulosa), a
   segunda e tempo (os dois relogios).

   A COSTURA CONTA ESSA PASSAGEM. Tres pecas, todas CSS:
     - o HORIZONTE (.seam__arc): uma elipse larguissima e baixa, so com a borda
       de cima acesa. Lida como a curva de um planeta visto rente — o fim do
       trecho espacial.
     - o FIO (.seam__line): desce do centro da dobra de cima ate esse horizonte.
     - a GOTA (.seam__drop): cai pelo fio e POUSA no horizonte; no instante do
       pouso o ANEL (.seam__ring) se abre. A queda dura --seam-lap e recomeca,
       com a pausa embutida no proprio @keyframes.
   E a mesma gramatica dos relogios logo abaixo (um anel que se fecha), dita
   uma vez antes de eles aparecerem.

   O fundo da costura vai de --d0 (a cor do banner) a --d1 (a cor da secao dos
   relogios), entao nao ha corte de cor nenhum: a emenda some.

   DECORACAO PURA: a <div class="seam"> leva aria-hidden e NAO entra na ordem
   de leitura. Para tirar: apagar esta secao e a div de page-method.php, e
   devolver o `border-top` a .clocks.
   ========================================================================== */
.gs-method .seam {
  /* --seam-h e a altura da faixa; --seam-fall e quanto a gota cai (ate o
   * horizonte, 40px acima da base). Os dois andam juntos: trocar um sem o
   * outro faz a gota pousar no vazio. */
  --seam-h: 118px;
  --seam-fall: 78px;
  position: relative;
  height: var(--seam-h);
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  /* ⚠️ A CAMADA DE CIMA TERMINA TRANSPARENTE, nao em `var(--d1)`.
   * Num `background` com varias camadas a primeira fica POR CIMA, opaca: se
   * ela acabasse no d1 solido, o tint de baixo nunca apareceria e a base da
   * costura ficaria um fio mais escura que a .clocks logo abaixo (que e
   * tint + d1). Medido: dava um degrau visivel bem na emenda — o contrario do
   * que esta peca existe para fazer. Transparente no fim, as duas secoes
   * encostam na mesma cor. --d0 e #0b0d0e. */
  background: linear-gradient(to bottom, var(--d0) 0%, rgba(11, 13, 14, 0) 86%),
              linear-gradient(var(--tint-1), var(--tint-1)),
              var(--d1);
}
@media (min-width: 64rem) {
  .gs-method .seam { --seam-h: 156px; --seam-fall: 116px; }
}

/* O horizonte. Largura de 240% para que a curvatura que aparece na tela seja
 * so o topo da elipse — uma linha quase reta, levemente abaulada. */
.gs-method .seam__arc {
  position: absolute;
  left: 50%;
  bottom: -220px;
  width: 240%;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 1px solid var(--line-2);
  /* o brilho mint so no meio, onde a gota pousa */
  background: radial-gradient(ellipse 22% 60% at 50% 0%, rgba(69, 232, 200, .16), transparent 70%);
}

.gs-method .seam__line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: var(--seam-fall);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--mint-44));
}

.gs-method .seam__drop {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #eafffa;
  box-shadow: 0 0 10px 2px rgba(69, 232, 200, .75);
  opacity: 0;
}

.gs-method .seam__ring {
  position: absolute;
  left: 50%;
  top: var(--seam-fall);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1px solid var(--mint);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .gs-method .seam { --seam-lap: 5.2s; }
  .gs-method .seam__drop { animation: gs-seam-drop var(--seam-lap) ease-in infinite; }
  .gs-method .seam__ring { animation: gs-seam-ring var(--seam-lap) ease-out infinite; }
}
/* A queda ocupa 46% do ciclo; o resto e pausa, para a costura nao virar um
 * pisca-pisca atras do titulo da secao seguinte. */
@keyframes gs-seam-drop {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: 1; }
  44%  { transform: translateY(var(--seam-fall)); opacity: 1; }
  47%  { transform: translateY(var(--seam-fall)); opacity: 0; }
  100% { transform: translateY(var(--seam-fall)); opacity: 0; }
}
@keyframes gs-seam-ring {
  0%, 44% { transform: scale(.2); opacity: 0; }
  48%     { transform: scale(.6); opacity: .9; }
  70%     { transform: scale(2.6); opacity: 0; }
  100%    { transform: scale(2.6); opacity: 0; }
}

/* =============================================================================
   2d — OS DOIS RELOGIOS
   =============================================================================
   Desenho do dono, 29/10/2026, que SUBSTITUI o de 28/10 ("um rapido, um
   lento"). E uma corrida:

     t=0     os dois partem das 00h;
     t=2,6s  'With GUIDSE' completa a corrida ilustrativa: anel verde, ponteiros,
             pontos e horas somem, e no meio do mostrador aparece "15 MIN";
     t=10s   'By hand' completou 7 dias (uma semana): fecha do mesmo jeito,
             dizendo "1 WEEK".

   A LABEL DE 15 MIN FOI ALTERADA EM 29/10/2026 SEM ALTERAR TEMPOS,
   GIROS OU ESTADOS DA ANIMACAO. Ela e ilustrativa, nao medicao.

   O QUE A CENA VENDE nao e o fim, e a ESPERA: o cartao do metodo passa 7,4 dos
   10 segundos ja pronto, parado, enquanto o outro ainda roda. Quem mexer nos
   tempos precisa manter essa sobra; sem ela a secao nao diz nada.

   POR QUE 2,6s E NAO 1,43s (= 10s/7, a proporcao exata): a primeira versao
   usava a escala literal, e o dono reprovou — "mal da pra ver ao abrir o
   site". A 1,43s o cartao do metodo fechava antes de o olho chegar nele. A
   troca foi deliberada: o desenho agora SUBESTIMA a diferenca (mostra ~3,8x
   quando a frase diz 7x), e errar para menos e o lado seguro. O numero de
   verdade esta escrito no letreiro, e a legenda da secao avisa que isto e
   ilustracao.

   O EFEITO COLATERAL E BOM: com o mesmo dia em mais tempo, os ponteiros do
   cartao do metodo giram mais devagar que os do outro. 'By hand' fica
   afobado, 'With GUIDSE' fica calmo e para. Era exatamente a leitura do
   desenho antigo, agora sem precisar de um relogio lento que nunca termina.

   O QUE CADA PONTEIRO DIZ: o das horas e o que conta — 2 voltas = 1 dia, como
   em qualquer mostrador de 12h, nos dois cartoes. O dos minutos NAO mantem a
   razao real de 12:1 com ele: no cartao da semana isso daria quase 17 voltas
   por segundo, que no olho nao e relogio, e tremedeira. Ele gira a 4 voltas
   por segundo (2 no cartao do dia) e com menos opacidade, para ler como
   borrao de pressa.

   O ANEL que se desenha e o indicador honesto: 1 volta = o prazo inteiro
   daquele cartao, independente de quantas voltas os ponteiros deram. Ninguem
   consegue contar 14 voltas de ponteiro; todo mundo le um anel pela metade.

   Roda UMA VEZ, quando a secao aparece (.is-revealed, que o reveal do tema
   poe), e FICA no estado final. A frase e o remate: nao faria sentido apagar a
   resposta para recomecar a pergunta. Para repetir em laco, trocar 'forwards'
   por 'infinite' nas animacoes da secao 10 e somar uma pausa no fim de cada
   @keyframes. Sem JS e sem imagem, como o resto da pagina.
   ========================================================================== */
.gs-method .clocks {
  /* Menos folga em cima: a costura (secao 2c-bis) ja e um respiro de 118/156px
   * antes desta secao, e o `border-top` de 1px que havia aqui saiu com ela —
   * quem faz a passagem agora e o horizonte, nao um corte. */
  padding-block: var(--sp-s) var(--sp-m);
  background: linear-gradient(var(--tint-1), var(--tint-1)), var(--d1);
}
/* 29/10/2026 — "centraliza esses textos no meio da pagina" (dono). Vale para o
   cabecalho e para a legenda do fim; os DOIS CARTOES ficam onde estavam, como
   ele pediu. A largura de leitura (os ~660px do antigo .w-mid) fica aqui, com
   margem automatica dos dois lados — e o que centra o bloco, e nao so o texto
   dentro dele. */
.gs-method .clocks__head {
  max-width: 41.25rem;
  margin: 0 auto var(--sp-xs);
  text-align: center;
}
.gs-method .clocks__head h2 { margin-bottom: .7em; }

.gs-method .clocks__pair {
  display: grid;
  gap: var(--sp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .gs-method .clocks__pair { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.gs-method .clock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 24px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: var(--d2);
}
/* O mostrador e o seu letreiro ocupam a MESMA caixa, empilhados: o letreiro so
   existe depois que a maquina apaga, entao os dois nunca disputam o espaco. */
.gs-method .clock__dial {
  grid-row: 1 / span 2;
  position: relative;
  width: 104px;
  height: 104px;
}
.gs-method .clock__face { display: block; width: 100%; height: 100%; }
.gs-method .clock__done {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0 14px;
  text-align: center;
  opacity: 0;                 /* a secao 10 revela quando o prazo fecha */
}
.gs-method .clock__done-k {
  font-size: 8px;
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.gs-method .clock__done-v {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;      /* em caixa alta e miudo, o numero cola na palavra */
  text-transform: uppercase;
  color: var(--ink);
}
/* "O PRAZO DESTACADO" (15 MIN): unico em mint, tipografia maior.
   E a unica diferenca entre os dois letreiros, e e de proposito — o resto da
   cena ja e identico nos dois cartoes. */
.gs-method .clock--day .clock__done-v {
  font-size: 1.1875rem;
  color: var(--mint-ink);
}
.gs-method .clock__title {
  align-self: end;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.gs-method .clock__body {
  align-self: start;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-72);
}
/* O cartao do metodo e o que a pagina quer que o olho pare: so ele ganha mint. */
.gs-method .clock--day { border-color: var(--mint-44); }
.gs-method .clock--day .clock__title { color: var(--mint-ink); }

.gs-method .clock__rim { fill: none; stroke: var(--line-1); stroke-width: 1.5; }
/* A lavagem verde de dentro, que entra junto com o anel fechado: e ela que faz
   o mostrador virar um CIRCULO verde, e nao so uma borda verde. Fraca de
   proposito, para o letreiro por cima continuar legivel. */
.gs-method .clock__wash { fill: var(--mint-14); opacity: 0; }
/* O anel do prazo. Comeca em 12h (o -90deg) e e desenhado pela secao 10. */
.gs-method .clock__arc {
  fill: none;
  stroke: var(--mint);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.gs-method .clock__tick { stroke: var(--ink-38); stroke-width: 1; }
.gs-method .clock__tick--big { stroke: var(--ink-52); stroke-width: 2; stroke-linecap: round; }
.gs-method .clock__pin { fill: var(--ink-52); }
.gs-method .clock__hand {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-origin: 60px 60px;
}
.gs-method .clock__hand--hour { stroke-width: 3.5; stroke: var(--ink-72); }
/* O dos minutos vai borrar de tao rapido (ver o cabecalho da secao): mais fino
   e mais apagado, para ler como pressa e nao como piscada. */
.gs-method .clock__hand--min { stroke-width: 2; stroke: var(--ink-52); }
.gs-method .clock--day .clock__hand--min { stroke: var(--mint-44); }

.gs-method .clocks__note {
  margin-top: var(--sp-xs);
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-38);
}

/* =============================================================================
   3 — OS SEIS PASSOS: palco pinado + passos rolando ao lado
   ========================================================================== */
.gs-method .steps {
  padding-block: var(--sp-xl) var(--sp-m);   /* o unico respiro grande da pagina */
  background: linear-gradient(var(--tint-1), var(--tint-1)), var(--d2);
  border-top: 1px solid var(--line-1);
}
.gs-method .steps__head { margin-bottom: var(--sp-s); }
/* O titulo carrega a frase do ciclo logo abaixo, que antes vivia na secao das
   letras (removida a pedido do dono). Mesmo respiro que ela tinha la. */
.gs-method .steps__head h2 { margin-bottom: .7em; }

.gs-method .act { position: relative; }

/* --- o palco --- */
.gs-method .act__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 0 var(--sp-s);
  isolation: isolate;
}
.gs-method .act__stage::before {           /* grade tecnica de 1px, mascarada */
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(#000 34%, #0000 70%);
  pointer-events: none;
}

/* O bloco chama-se 'cycle', e NAO 'ring', embora desenhe um anel: '.ring' ja
 * existe nas folhas compiladas como utilitaria do Tailwind (box-shadow de 1px
 * na cor corrente). Como esta folha nunca declara box-shadow aqui, a utilitaria
 * vencia por omissao e o SVG saia com um retangulo claro de 1px em volta.
 * Medido no tema servido antes da troca:
 *   box-shadow: rgb(242, 246, 245) 0 0 0 1px   (currentcolor = --ink)
 * Regra geral para esta pagina: nome de bloco de uma palavra so pode ser usado
 * depois de conferir que nao existe em assets/chunks/*.css. Conferidos todos os
 * nomes usados aqui; 'ring' era o unico que batia. */
.gs-method .cycle {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 100%;
  overflow: visible;
}

/* trilho e arco */
.gs-method .cycle__track { fill: none; stroke: var(--line-1); stroke-width: 1; }
.gs-method .cycle__hub { fill: none; stroke: var(--line-1); stroke-width: 1; }
.gs-method .cycle__arc {
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6;                 /* pathLength=6 -> 1 unidade = 1 passo */
  stroke-dashoffset: 0;                /* ESTADO FINAL: ciclo inteiro desenhado */
  transform-box: view-box;
  transform-origin: 280px 230px;
  transform: rotate(-90deg);           /* comeca no G, ao norte */
}

/* ponteiro: aponta a ponta do arco */
.gs-method .cycle__hand {
  transform-box: view-box;
  transform-origin: 280px 230px;
  transform: rotate(360deg);           /* ESTADO FINAL: laco fechado, de volta ao G */
}
.gs-method .cycle__spoke { stroke: var(--line-2); stroke-width: 1; }
.gs-method .cycle__head { fill: var(--mint); }

/* a aresta E -> G, desenhada por dentro: "Evolve feeds the next Gather." */
.gs-method .cycle__feed {
  fill: none;
  stroke: var(--mint-44);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;                /* ESTADO FINAL: visivel */
}
.gs-method .cycle__feed-tip {
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;                          /* ESTADO FINAL: visivel */
}

/* os seis nos — um numero (--gs-lit) acende o no inteiro */
.gs-method .node__halo { fill: var(--mint); opacity: calc(var(--gs-lit) * .07); }
.gs-method .node__disc { fill: color-mix(in oklab, var(--mint) calc(var(--gs-lit) * 13%), #0c1314); }
.gs-method .node__edge {
  fill: none;
  stroke-width: 1;
  stroke: color-mix(in oklab, var(--mint) calc(var(--gs-lit) * 100%), rgba(255, 255, 255, .12));
}
.gs-method .node__glyph {
  font-family: Sora, ui-sans-serif, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.02em;
  text-anchor: middle;
  dominant-baseline: central;
  fill: color-mix(in oklab, var(--mint-ink) calc(var(--gs-lit) * 100%), rgba(255, 255, 255, .3));
}
.gs-method .node__label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 19px;
  letter-spacing: .02em;
  fill: color-mix(in oklab, var(--mint) calc(var(--gs-lit) * 72%), rgba(255, 255, 255, .3));
}
@media (min-width: 64rem) {
  .gs-method .node__label { font-size: 14px; }
}

/* --- os passos --- */
.gs-method .act__steps { display: grid; }

.gs-method .step {
  position: relative;
  padding-block: var(--sp-xs);
  padding-left: 22px;
  border-top: 1px solid var(--line-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gs-method .step::before {             /* fio esquerdo do passo */
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 1px;
  background: var(--line-1);
}
.gs-method .step:last-child { border-bottom: 1px solid var(--line-1); }

.gs-method .step__num {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ink-38);
  display: block;
  margin-bottom: .5em;
}
.gs-method .step__name {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin-bottom: 1.3em;
}
.gs-method .step__glyph {
  font-size: var(--fs-glyph);
  font-weight: 300;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--mint-ink);              /* ESTADO FINAL: preenchida */
  -webkit-text-stroke: 1px transparent;
}
.gs-method .step__word {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.022em;
}
.gs-method .step__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 32px;
}
.gs-method .field dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mint);
  opacity: .78;
  margin-bottom: .45em;
}
.gs-method .field dd { font-size: .9375rem; line-height: 1.55; color: var(--ink-72); }

@media (min-width: 48rem) {
  .gs-method .step__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .gs-method .act {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  /* O PIN: o palco para, a rolagem continua sendo da pessoa. */
  .gs-method .act__stage {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    padding-block: 0;
  }
  .gs-method .step { padding-left: 28px; }
  .gs-method .step:first-child { border-top: 0; }
  .gs-method .step:first-child::before { top: 0; }
}

/* =============================================================================
   4 — "The difference is in the U." — coluna estreita, austera
   ========================================================================== */
.gs-method .why {
  position: relative;
  padding-block: var(--sp-l) var(--sp-m);
  background: linear-gradient(var(--tint-2), var(--tint-2)), var(--d1);
  border-top: 1px solid var(--line-1);
  overflow: hidden;
}
.gs-method .why__u {
  position: absolute;
  right: calc(var(--inset) - .06em);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(11rem, 6rem + 22vi, 26rem);
  font-weight: 300;
  line-height: .7;
  letter-spacing: -.06em;
  color: var(--mint-06);
  user-select: none;
  pointer-events: none;
}
.gs-method .why__in { position: relative; }
.gs-method .why h2 { margin-bottom: 1em; }
.gs-method .why .lead { max-width: 54ch; }
/* O 'U' em verde dentro do titulo. A classe e a mesma que guidse_accent_span()
   recebe no template — o PHP fatia o acento de dentro do proprio titulo. */
.gs-method .why__fill { color: var(--mint); font-weight: 500; }

/* =============================================================================
   5 — TABELA COMPARATIVA
   ========================================================================== */
.gs-method .compare {
  padding-block: var(--sp-l) var(--sp-m);
  background: linear-gradient(var(--tint-1), var(--tint-1)), var(--d0);
  border-top: 1px solid var(--line-1);
}
.gs-method .compare__head { margin-bottom: var(--sp-s); }
.gs-method .compare__head h2 { margin-bottom: 1em; }
.gs-method .mint-run { color: var(--mint); }

.gs-method .cmp {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: .9375rem;
}
.gs-method .cmp th,
.gs-method .cmp td {
  padding: 18px 16px;
  vertical-align: top;
  border-top: 1px solid var(--line-1);
}
.gs-method .cmp thead th {
  position: sticky;
  top: calc(var(--header-h) - 1px);
  z-index: 10;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-block: 14px;
  border-top: 0;
  border-bottom: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--d0) 94%, transparent);
  backdrop-filter: blur(12px);
}
.gs-method .cmp thead th:first-child { color: var(--ink-38); }
.gs-method .cmp thead th:last-child { color: var(--mint); }
.gs-method .cmp td:first-child { color: var(--ink-52); width: 50%; }
.gs-method .cmp td:last-child { color: var(--ink); width: 50%; }
.gs-method .cmp tbody tr td:last-child {
  background: var(--mint-06);
  box-shadow: inset 1px 0 0 0 var(--mint-14);
}
.gs-method .cmp tbody tr:last-child td { border-bottom: 1px solid var(--line-1); }

@media (max-width: 35.99rem) {
  .gs-method .cmp { font-size: .8125rem; }
  .gs-method .cmp th,
  .gs-method .cmp td { padding: 14px 10px; }
}

/* =============================================================================
   6 — A ENTRADA
   O botao e o do TEMA (gs-btn-primary, Tailwind compilado), nao um botao
   proprio desta pagina: ele e o mesmo de todas as outras 13, e trocar so o
   desta pagina daria ao site dois botoes primarios diferentes.
   ========================================================================== */
.gs-method .cta {
  padding-block: var(--sp-l) var(--sp-m);
  background: linear-gradient(var(--tint-1), var(--tint-1)), var(--d2);
  border-top: 1px solid var(--line-1);
  position: relative;
  isolation: isolate;
}
.gs-method .cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(0, 197, 137, .10), transparent 65%);
  pointer-events: none;
}
.gs-method .cta h2 { margin-bottom: var(--sp-s); }

/* -----------------------------------------------------------------------------
   6a — O MOSTRADOR DE 45 MINUTOS E OS TRES ITENS EM LEQUE
   -----------------------------------------------------------------------------
   Ordem do dono, 29/10/2026: "a ultima sessao deve falar de tempo num sentido
   de vantagem e deve vender bem aos olhos essa questao de economia de tempo...
   quem sabe um '45 min' grandao com um relogio mostrando eficiencia", e, sobre
   os tres cartoes de antes, "estao muito feios... faca de uma maneira
   interativa e posicionada dinamicamente".

   O QUE SAIU: a grade de tres caixas iguais, separadas por fios de 1px. Era
   honesta e era chata — tres retangulos do mesmo tamanho nao dizem nada sobre
   o que a pessoa ganha.

   O QUE ENTROU, e por que:

   1. UM MOSTRADOR, nao um icone. O ponteiro parte das 12 e varre TRES QUARTOS
      da volta: 45 de 60 minutos. Ele PARA ali, antes de fechar o circulo, e o
      quarto que falta fica visivel e vazio. E o argumento inteiro em uma
      imagem: a reuniao acaba antes de a hora acabar.

   2. O ANEL E DIVIDIDO EM TRES, um terco por item. Nao ha rotulo de horario em
      nenhuma fatia, de proposito: o briefing nao reparte os 45 minutos, e
      escrever "0-15" seria inventar uma agenda. As fatias espelham a LISTA
      (que ja e 1, 2, 3), nao um cronograma.

   3. OS ITENS EM LEQUE. Cada um entra mais um degrau para a direita e sai um
      fio horizontal da sua borda esquerda em direcao ao mostrador. Os tres
      fios terminam na mesma coluna, do lado do anel, entao leem-se como tres
      raios saindo do centro — "posicionada dinamicamente" sem posicao
      absoluta nenhuma: e grade mais um recuo por filho, e isso nao quebra
      quando o texto cresce.

   4. INTERATIVO NOS DOIS SENTIDOS, sem uma linha de JS. O vinculo item <->
      fatia e `:has()`: apontar o item acende a fatia dele e apaga as outras;
      apontar a fatia acende o item. Quem anda de teclado chega pelo
      `tabindex="0"` do <li> e ve o mesmo realce (`:focus-visible`).
      `:has()` roda em todo navegador atual; onde nao rodar, as tres fatias
      ficam acesas no estado calmo e nada se perde — o realce e enfase, nao
      informacao.
   -------------------------------------------------------------------------- */
.gs-method .entry {
  display: grid;
  justify-items: center;
  gap: var(--sp-s);
  margin-block: var(--sp-s) var(--sp-s);
}

/* --- o mostrador --- */
.gs-method .entry__dial {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: none;
}
.gs-method .dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gs-method .dial__track {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
}
.gs-method .dial__tick {
  stroke: var(--line-3);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.gs-method .dial__seg {
  fill: none;
  stroke: var(--mint);
  stroke-width: 3;
  stroke-linecap: round;
  /* ⚠️ O `stroke-dashoffset="1"` do atributo no HTML deixa a fatia APAGADA —
   * ele existe so para o caso de o CSS da pagina nao chegar. Aqui o estado de
   * repouso e 0, a fatia inteira: sem animacao (movimento desligado, ou
   * navegador antigo) o anel aparece completo em vez de vazio. */
  stroke-dashoffset: 0;
  /* o estado calmo: as tres fatias acesas, meio apagadas. O realce TIRA
   * brilho das outras duas em vez de dar brilho a uma — assim a diferenca se
   * ve sem precisar de cor nova. */
  opacity: .42;
  transition: opacity .3s ease, stroke-width .3s ease, stroke-dashoffset .3s ease;
}
.gs-method .dial__hand line {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.gs-method .dial__hand {
  transform-box: view-box;
  transform-origin: 110px 110px;
  /* 270 graus = 45 min. O estado final e ESTE, nao o zero: sem animacao (ou
   * com movimento desligado) o ponteiro ja aparece parado nos 45. */
  transform: rotate(270deg);
}

/* o 45 min no meio */
.gs-method .entry__big {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .18em;
  line-height: 1;
  pointer-events: none;
}
.gs-method .entry__num {
  font-size: clamp(3.75rem, 13vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.gs-method .entry__unit {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
}

/* --- os tres itens --- */
.gs-method .deliver {
  display: grid;
  gap: 2px;
  width: 100%;
  max-width: 560px;
}
.gs-method .deliver__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  outline: none;
  transition: background .28s ease, border-color .28s ease, transform .28s ease;
}
.gs-method .deliver__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--mint-14);
  background: var(--mint-06);
  color: var(--mint);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background .28s ease, border-color .28s ease, color .28s ease;
}
.gs-method .deliver h3 {
  margin-bottom: .4em;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.gs-method .deliver p {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-72);
}

/* o realce, igual para mouse e teclado */
.gs-method .deliver__item:hover,
.gs-method .deliver__item:focus-visible {
  background: linear-gradient(var(--tint-1), var(--tint-1)), rgba(69, 232, 200, .035);
  border-color: var(--mint-14);
}
.gs-method .deliver__item:focus-visible { border-color: var(--mint); }
.gs-method .deliver__item:hover .deliver__n,
.gs-method .deliver__item:focus-visible .deliver__n {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--mint-ink);
}

@media (min-width: 64rem) {
  .gs-method .entry {
    /* As duas colunas tem a largura do que ha dentro delas, e o PAR e que se
     * centra na faixa (`justify-content`). Com `1fr` na segunda, o conjunto
     * era empurrado para a esquerda e sobrava um vazio grande do lado direito,
     * fora de esquadro com o titulo e o fecho, que sao centrados. */
    grid-template-columns: auto minmax(0, 34rem);
    align-items: center;
    justify-content: center;
    justify-items: start;
    gap: 0 clamp(40px, 5vw, 76px);
    /* Pouco em cima e muito embaixo de proposito: o titulo e o mostrador sao
     * a mesma frase dita duas vezes ("45 minutos") e tem de se ler juntos,
     * enquanto o fecho logo abaixo e outro assunto e precisa de ar. */
    margin-block: var(--sp-xs) var(--sp-m);
  }
  .gs-method .entry__dial { width: clamp(280px, 26vw, 360px); }
  .gs-method .deliver { max-width: none; gap: 6px; }

  /* O LEQUE. O recuo cresce por filho e o fio encurta na mesma medida, entao
   * as tres pontas de fio param na MESMA coluna — a do mostrador. */
  .gs-method .deliver__item { --fan: 0px; margin-left: var(--fan); }
  .gs-method .deliver__item:nth-child(2) { --fan: 34px; }
  .gs-method .deliver__item:nth-child(3) { --fan: 68px; }
  .gs-method .deliver__item::before {
    content: "";
    position: absolute;
    top: 31px;
    right: calc(100% + 4px);
    width: calc(var(--fan) + 22px);
    height: 1px;
    background: linear-gradient(to left, var(--mint-44), transparent);
    opacity: .5;
    transition: opacity .28s ease, background .28s ease;
  }
  .gs-method .deliver__item:hover::before,
  .gs-method .deliver__item:focus-visible::before {
    opacity: 1;
    background: linear-gradient(to left, var(--mint), var(--mint-44));
  }
  .gs-method .deliver__item:hover,
  .gs-method .deliver__item:focus-visible { transform: translateX(4px); }
}

/* --- o vinculo item <-> fatia, nos dois sentidos --- */
/* item apontado -> a fatia dele fica cheia, as outras recuam */
.gs-method .entry:has(.deliver__item:nth-child(1):hover) .dial__seg--1,
.gs-method .entry:has(.deliver__item:nth-child(1):focus-visible) .dial__seg--1,
.gs-method .entry:has(.deliver__item:nth-child(2):hover) .dial__seg--2,
.gs-method .entry:has(.deliver__item:nth-child(2):focus-visible) .dial__seg--2,
.gs-method .entry:has(.deliver__item:nth-child(3):hover) .dial__seg--3,
.gs-method .entry:has(.deliver__item:nth-child(3):focus-visible) .dial__seg--3 {
  opacity: 1;
  stroke-width: 5;
}
.gs-method .entry:has(.deliver__item:hover) .dial__seg,
.gs-method .entry:has(.deliver__item:focus-visible) .dial__seg { opacity: .16; }

/* fatia apontada -> o item dela se acende. O <path> do svg aceita :hover como
 * qualquer elemento; `pointer-events: stroke` faz so o traco valer, nao o
 * retangulo em volta dele. */
.gs-method .dial__seg { pointer-events: stroke; }
.gs-method .entry:has(.dial__seg--1:hover) .deliver__item:nth-child(1),
.gs-method .entry:has(.dial__seg--2:hover) .deliver__item:nth-child(2),
.gs-method .entry:has(.dial__seg--3:hover) .deliver__item:nth-child(3) {
  background: linear-gradient(var(--tint-1), var(--tint-1)), rgba(69, 232, 200, .035);
  border-color: var(--mint-14);
}
.gs-method .entry:has(.dial__seg--1:hover) .deliver__item:nth-child(1) .deliver__n,
.gs-method .entry:has(.dial__seg--2:hover) .deliver__item:nth-child(2) .deliver__n,
.gs-method .entry:has(.dial__seg--3:hover) .deliver__item:nth-child(3) .deliver__n {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--mint-ink);
}
.gs-method .entry:has(.dial__seg--1:hover) .dial__seg--1,
.gs-method .entry:has(.dial__seg--2:hover) .dial__seg--2,
.gs-method .entry:has(.dial__seg--3:hover) .dial__seg--3 {
  opacity: 1;
  stroke-width: 5;
}

/* --- o giro, so para quem aceita movimento ---
 * O ponteiro sai das 12, varre os 45 minutos e PARA. Cada fatia se desenha no
 * instante em que ele passa por ela, entao parece que e o ponteiro que a
 * pinta. Depois tudo fica parado uns bons segundos (a pausa esta DENTRO do
 * @keyframes, nos trechos que repetem o mesmo valor) e recomeca: um fundo de
 * secao nao pode ficar piscando sem parar embaixo do texto. */
@media (prefers-reduced-motion: no-preference) {
  .gs-method .entry__dial { --dial-lap: 11s; }
  .gs-method .dial__hand { animation: gs-dial-hand var(--dial-lap) ease-in-out infinite; }
  .gs-method .dial__seg { animation: gs-dial-seg var(--dial-lap) linear infinite; }
  /* Cada fatia espera a sua vez: 12% do ciclo entre uma e a outra, que e um
   * terco da varredura de 40%.
   *
   * O ATRASO E NEGATIVO de proposito. Um atraso positivo deixaria a fatia no
   * estado de repouso (anel cheio) durante a espera, e ela apareceria cheia,
   * apagaria e se desenharia de novo — um tranco na primeira volta. Negativo,
   * a animacao ja comeca adiantada: -.88 e o mesmo que +.12 dentro de um ciclo
   * que se repete, sem o tranco. */
  .gs-method .dial__seg--2 { animation-delay: calc(var(--dial-lap) * -.88); }
  .gs-method .dial__seg--3 { animation-delay: calc(var(--dial-lap) * -.76); }
  /* ⚠️ `animation: none`, e NAO `animation-play-state: paused`.
   * Medido no navegador: com a animacao so pausada o realce nao aparecia —
   * uma animacao, mesmo parada, VENCE qualquer declaracao normal do autor na
   * cascata, entao as regras de `:has()` logo abaixo mudavam a opacidade e o
   * navegador continuava pintando o valor congelado do @keyframes (0.3 no
   * lugar de 1). Tirando a animacao, o valor volta a ser o da regra, e o
   * realce funciona. A transicao de .3s cobre o salto. */
  .gs-method .entry:has(.deliver__item:hover) .dial__seg,
  .gs-method .entry:has(.deliver__item:focus-visible) .dial__seg,
  .gs-method .entry:has(.dial__seg:hover) .dial__seg { animation: none; }
}
/* O ponteiro varre os 45 minutos em 40% do ciclo, PARA ali (e esse e o ponto:
 * sobra um quarto de volta), fica parado, e no fim dos 10% finais completa a
 * volta ate as 12. Terminar em 360 em vez de voltar para 0 e o que evita o
 * tranco do laco: 360 e 0 sao o mesmo lugar. */
@keyframes gs-dial-hand {
  0%          { transform: rotate(0deg); }
  40%         { transform: rotate(270deg); }
  90%         { transform: rotate(270deg); }
  100%        { transform: rotate(360deg); }
}
@keyframes gs-dial-seg {
  0%          { stroke-dashoffset: 1; opacity: 0; }
  4%          { stroke-dashoffset: 1; opacity: .42; }
  16%         { stroke-dashoffset: 0; opacity: .42; }
  86%         { stroke-dashoffset: 0; opacity: .42; }
  92%         { stroke-dashoffset: 0; opacity: 0; }
  100%        { stroke-dashoffset: 1; opacity: 0; }
}

.gs-method .cta__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: var(--sp-s);
}
.gs-method .cta__note {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-38);
}

/* =============================================================================
   6b — TEXTO CENTRALIZADO (pedido do dono, com as zonas marcadas por ele)
   =============================================================================
   Centralizados: a primeira dobra (rotulo, titulo e subtitulo), o
   cabecalho da secao dos passos, o destaque do U, o cabecalho da tabela e o
   titulo + botao + nota da entrada.
   FICAM COMO ESTAO, porque ele nao marcou: as colunas de texto ao lado do anel,
   a tabela e os tres cartoes — texto de leitura e de comparacao alinhado a
   esquerda le melhor.

   COMO: o bloco continua com a LARGURA de antes (825 / 660px), mas passa a
   ocupar a faixa inteira e a se centrar nela (justify-self). A largura nao
   muda porque so o texto de dentro e que ficava largo demais para uma linha
   centrada — e a linha de leitura de cada paragrafo e travada em `ch`.
   A especificidade e (0,4,0), de proposito: a regra da grade, la em cima, e
   (0,3,0) dentro de @media e tem de perder sem depender da ordem do arquivo. */
.gs-method .banner.frame > .w-read,
.gs-method .banner.frame > .w-short,
.gs-method .steps.frame > .steps__head,
.gs-method .why.frame > .why__in,
.gs-method .compare.frame > .compare__head,
.gs-method .cta.frame > h2,
.gs-method .cta.frame > .time-line,
.gs-method .cta.frame > .cta__foot {
  grid-column: content;
  justify-self: center;
  width: 100%;
  text-align: center;
}
.gs-method .banner.frame > .w-read,
.gs-method .compare.frame > .compare__head,
.gs-method .cta.frame > h2 { max-width: 825px; }
/* a linha de leitura travada em `ch` + balance, como nos outros subtitulos
   centrados: sem isso a frase longa do fecho fica com uma palavra sozinha na
   ultima linha, bem no meio da pagina, onde mais se ve. */
.gs-method .cta.frame > .time-line { max-width: 62ch; text-wrap: balance; }
.gs-method .steps.frame > .steps__head,
.gs-method .why.frame > .why__in { max-width: 660px; }
.gs-method .banner.frame > .w-short { max-width: 36rem; }

/* subtitulos: bloco com linha de leitura travada, centrado na faixa */
.gs-method .steps__head .lead,
.gs-method .compare__head .lead,
.gs-method .why .lead { margin-inline: auto; }
.gs-method .steps__head .lead,
.gs-method .compare__head .lead { max-width: 56ch; }
/* linha centrada com sobra de uma palavra sozinha ("its own.") fica torta:
 * balance reparte as palavras pelas linhas. Vale so para estes subtitulos curtos. */
.gs-method .banner.frame > .lead,
.gs-method .steps__head .lead,
.gs-method .why .lead,
.gs-method .compare__head .lead { text-wrap: balance; }

.gs-method .cta.frame > .cta__foot { justify-content: center; }

/* =============================================================================
   7 — MOVIMENTO
   Tudo aqui e ACRESCIMO. O estado final ja esta nas regras acima. Quem desliga
   movimento, ou usa navegador sem animation-timeline, ve o ciclo completo e os
   seis passos inteiros.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* a altura artificial do palco so existe onde a coluna dupla existe */
    @media (min-width: 64rem) {
      .gs-method .act { view-timeline-name: --act; view-timeline-axis: block; }
      .gs-method .step { min-height: min(42svh, 400px); }

      /* O ARCO: 6 unidades, uma por passo.
         animation-range: entry 50% exit 50% -> o progresso e exatamente
         "o que esta no centro da tela", em qualquer tamanho de janela. */
      .gs-method .cycle__arc {
        animation: gs-arc-draw linear both;
        animation-timeline: --act;
        animation-range: entry 50% exit 50%;
      }
      .gs-method .cycle__hand {
        animation: gs-hand-turn linear both;
        animation-timeline: --act;
        animation-range: entry 50% exit 50%;
      }
      .gs-method .cycle__feed {
        animation: gs-feed-draw linear both;
        animation-timeline: --act;
        animation-range: entry 50% exit 50%;
      }
      .gs-method .cycle__feed-tip {
        animation: gs-feed-tip linear both;
        animation-timeline: --act;
        animation-range: entry 50% exit 50%;
      }
      .gs-method .node {
        animation: gs-node-on linear both;
        animation-timeline: --act;
        animation-range: entry 50% exit 50%;
      }
      .gs-method .node--g { animation-name: gs-on-1; }
      .gs-method .node--u { animation-name: gs-on-2; }
      .gs-method .node--i { animation-name: gs-on-3; }
      .gs-method .node--d { animation-name: gs-on-4; }
      .gs-method .node--s { animation-name: gs-on-5; }
      .gs-method .node--e { animation-name: gs-on-6; }
    }

    .gs-method .steps__head,
    .gs-method .why__in,
    .gs-method .compare__head,
    .gs-method .deliver,
    .gs-method .cta__foot {
      animation: gs-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 32%;
    }
  }
}

/* =============================================================================
   7b — CICLO MOBILE (ate 1023px, SEM tocar na animacao de desktop)
   ========================================================================== */
/* Em mobile o anel aparece ANTES dos passos e nao e sticky; animar sua volta
 * pela rolagem dos seis textos deixaria o desenho fora da tela. Por isso o
 * navegador inicia UMA volta de 5.4s quando o SVG fica visivel, sem exigir que
 * a pessoa continue rolando. O JS so adiciona as classes de estado.
 *
 * O estado base continua FINAL e legivel: sem JS / com movimento reduzido /
 * sem IntersectionObserver, o ciclo nao depende de um estado oculto. */
@media (max-width: 63.999rem) and (prefers-reduced-motion: no-preference) {
  .gs-method .act__stage.gs-cycle-mobile-ready {
    --gs-mobile-lap: 5.4s;
  }
  /* A classe ready so e aplicada por JS quando a animacao pode ocorrer.
   * Ela prepara o desenho fora da tela, evitando um salto do estado final
   * para o primeiro frame no instante em que o observer dispara. */
  .gs-method .gs-cycle-mobile-ready:not(.gs-cycle-mobile-active) .cycle__arc {
    stroke-dashoffset: 6;
  }
  .gs-method .gs-cycle-mobile-ready:not(.gs-cycle-mobile-active) .cycle__hand {
    transform: rotate(0deg);
  }
  .gs-method .gs-cycle-mobile-ready:not(.gs-cycle-mobile-active) .cycle__feed {
    stroke-dashoffset: 1;
  }
  .gs-method .gs-cycle-mobile-ready:not(.gs-cycle-mobile-active) .cycle__feed-tip {
    opacity: 0;
  }
  .gs-method .gs-cycle-mobile-ready:not(.gs-cycle-mobile-active) .node {
    --gs-lit: 0;
  }

  /* Keyframes ja usados no desktop. Aqui o relogio corre por TEMPO, nao
   * animation-timeline, e termina definitivamente em seu estado final. */
  .gs-method .gs-cycle-mobile-active .cycle__arc {
    animation: gs-arc-draw var(--gs-mobile-lap) linear both;
  }
  .gs-method .gs-cycle-mobile-active .cycle__hand {
    animation: gs-hand-turn var(--gs-mobile-lap) linear both;
  }
  .gs-method .gs-cycle-mobile-active .cycle__feed {
    animation: gs-feed-draw var(--gs-mobile-lap) linear both;
  }
  .gs-method .gs-cycle-mobile-active .cycle__feed-tip {
    animation: gs-feed-tip var(--gs-mobile-lap) linear both;
  }
  .gs-method .gs-cycle-mobile-active .node {
    animation: gs-node-on var(--gs-mobile-lap) linear both;
  }
  .gs-method .gs-cycle-mobile-active .node--g { animation-name: gs-on-1; }
  .gs-method .gs-cycle-mobile-active .node--u { animation-name: gs-on-2; }
  .gs-method .gs-cycle-mobile-active .node--i { animation-name: gs-on-3; }
  .gs-method .gs-cycle-mobile-active .node--d { animation-name: gs-on-4; }
  .gs-method .gs-cycle-mobile-active .node--s { animation-name: gs-on-5; }
  .gs-method .gs-cycle-mobile-active .node--e { animation-name: gs-on-6; }
}

/* =============================================================================
   8 — A ENTRADA DOS TEXTOS DOS PASSOS (no tempo, nao na rolagem)
   =============================================================================
   Numero, titulo e os quatro campos de cada passo entram pelo reveal do TEMA:
   o template poe `tj-fade-anim` + --fade-* nos elementos, o reveal.js poe
   `is-revealed` assim que o primeiro pixel do elemento aparece na janela (o template
   manda data-reveal-early="0"; sem isso o tema espera a linha de 90%), e o CSS
   compilado (assets/chunks/17t...css) faz o resto — opacidade e subida de 20px
   em .85s, curva cubic-bezier(.215,.61,.355,1). Apareceu na tela, comecou; e
   termina sozinho. Nada fica pela metade se a pessoa parar de rolar.

   POR QUE NAO "animation-timeline: view()", como o resto da pagina: ele amarra a
   animacao a POSICAO da rolagem. Quem para com o passo a meio caminho do trecho
   fica olhando um texto meio apagado, e ele so completa quando rolar de novo.
   Foi isso que o dono mandou evitar. O anel continua preso a rolagem (e e
   para ser: ele e um indicador de progresso); o TEXTO nao.

   A letra grande acompanha o titulo: nasce so o contorno e se preenche logo
   depois que o titulo termina de subir. Fica atras de no-preference porque a
   regra de reduced-motion do tema ja mostra o titulo pronto, e uma letra so de
   contorno ficaria eternamente por preencher. */
@media (prefers-reduced-motion: no-preference) {
  .gs-method .step__glyph {
    transition:
      color .9s cubic-bezier(.215, .61, .355, 1) .42s,
      -webkit-text-stroke-color .9s cubic-bezier(.215, .61, .355, 1) .42s;
  }
  .gs-method .step__name.tj-fade-anim:not(.is-revealed) .step__glyph {
    color: transparent;
    -webkit-text-stroke-color: rgba(255, 255, 255, .22);
  }

  /* --- Os dois relogios (secao 2d) ---------------------------------------
     A corrida comeca quando a secao aparece, nao no load: `.is-revealed` e a
     classe que o reveal do tema poe, a mesma que faz o cartao surgir. Antes
     disso o mostrador fica parado nas 00h, que e como ele nasce no HTML.

     `--run` e o prazo daquele cartao, e e o unico numero que muda entre os
     dois. Todo o resto (velocidade dos ponteiros, tempo do fecho) e igual.
     1 dia = 10s/7 = 1.4286s; ver a conta no cabecalho da secao 2d. */
  .gs-method .clock--week { --run: 10s; }
  .gs-method .clock--day { --run: 2.6s; }

  /* Os ponteiros. Contagem FINITA, e nao `infinite`: quando o prazo fecha eles
     param de verdade, em vez de seguirem girando invisiveis sob o letreiro
     gastando bateria. Em cada cartao, duracao x voltas = --run, e e so isso
     que precisa continuar fechando se um dia os tempos mudarem:
       semana  horas 0.7143s x 14 = 10s    minutos 0.25s x 40  = 10s
       dia     horas   1.3s x  2  = 2.6s   minutos  0.5s x 5.2 = 2.6s
     Repare que 1 dia = 2 voltas do ponteiro das horas nos DOIS cartoes, como
     em qualquer mostrador de 12h. O que muda e a pressa. */
  .gs-method .clock.is-revealed .clock__hand--hour {
    animation: gs-clock-turn .7143s linear 14 forwards;
  }
  .gs-method .clock.is-revealed .clock__hand--min {
    animation: gs-clock-turn .25s linear 40 forwards;
  }
  .gs-method .clock--day.is-revealed .clock__hand--hour {
    animation-duration: 1.3s;
    animation-iteration-count: 2;
  }
  .gs-method .clock--day.is-revealed .clock__hand--min {
    animation-duration: .5s;
    animation-iteration-count: 5.2;
  }

  /* O anel do prazo: uma volta inteira ao longo de --run. */
  .gs-method .clock.is-revealed .clock__arc {
    animation: gs-clock-arc var(--run) linear forwards;
  }

  /* O FECHO, tudo com atraso --run: a maquina apaga, o verde entra, o letreiro
     chega um pouquinho depois para o olho ver a troca acontecer. */
  .gs-method .clock.is-revealed .clock__works {
    animation: gs-clock-off .4s ease var(--run) forwards;
  }
  .gs-method .clock.is-revealed .clock__wash {
    animation: gs-clock-wash .5s ease var(--run) forwards;
  }
  .gs-method .clock.is-revealed .clock__done {
    animation: gs-clock-say .5s cubic-bezier(.215, .61, .355, 1) calc(var(--run) + .14s) forwards;
  }
}

/* Sem JavaScript o reveal nunca roda, e o CSS do tema deixa tj-fade-anim em
   opacidade 0 para sempre. Nesta pagina isso apagaria o metodo inteiro: aqui o
   texto aparece pronto. */
@media (scripting: none) {
  .gs-method .tj-fade-anim { opacity: 1; transform: none; }
}

/* Os relogios no ESTADO FINAL, sem nada se mexer. Vale nos dois casos em que a
   corrida nunca vai acontecer: quem pede menos movimento, e quem esta sem
   JavaScript (ai a classe .is-revealed nunca e posta e a secao 10 nao dispara).
   O fim e o que a secao tem a dizer — dois prazos, lado a lado —, entao e o fim
   que fica. Sem isto, o mostrador ficaria parado nas 00h e mudo. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .gs-method .clock__arc { stroke-dashoffset: 0; }
  .gs-method .clock__wash { opacity: 1; }
  .gs-method .clock__works { opacity: 0; }
  .gs-method .clock__done { opacity: 1; }
}

/* sem movimento: nada de altura artificial, a pagina encurta sozinha */
@media (prefers-reduced-motion: reduce) {
  .gs-method .step { min-height: 0; }
}

@keyframes gs-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* 1 unidade de stroke-dashoffset = 1 passo. Sem conta de 2*pi*r. */
@keyframes gs-arc-draw {
  0% { stroke-dashoffset: 6; }      /* nada desenhado */
  8% { stroke-dashoffset: 6; }      /* G no centro da tela */
  25% { stroke-dashoffset: 5; }     /* U: a aresta G->U fechou */
  41.5% { stroke-dashoffset: 4; }   /* I */
  58% { stroke-dashoffset: 3; }     /* D */
  74% { stroke-dashoffset: 2; }     /* S */
  88% { stroke-dashoffset: 1; }     /* E */
  100% { stroke-dashoffset: 0; }    /* E->G fecha o laco */
}
/* --- os quatro tempos do relogio (secao 2d) --- */
/* uma volta do ponteiro */
@keyframes gs-clock-turn {
  to { transform: rotate(360deg); }
}
/* o anel do prazo se fechando: 327 = a volta inteira do raio 52 */
@keyframes gs-clock-arc {
  from { stroke-dashoffset: 327; }
  to { stroke-dashoffset: 0; }
}
/* a maquina (horas, pontos, ponteiros, eixo) saindo de cena */
@keyframes gs-clock-off {
  to { opacity: 0; }
}
/* o verde tomando o mostrador */
@keyframes gs-clock-wash {
  to { opacity: 1; }
}
/* o prazo dito no meio, subindo um fio */
@keyframes gs-clock-say {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@keyframes gs-hand-turn {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(0deg); }
  25% { transform: rotate(60deg); }
  41.5% { transform: rotate(120deg); }
  58% { transform: rotate(180deg); }
  74% { transform: rotate(240deg); }
  88% { transform: rotate(300deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gs-feed-draw {
  0%, 86% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}
@keyframes gs-feed-tip {
  0%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gs-node-on { from { --gs-lit: 0; } to { --gs-lit: 1; } }
@keyframes gs-on-1 { 0%, 2% { --gs-lit: 0 } 8%, 100% { --gs-lit: 1 } }
@keyframes gs-on-2 { 0%, 19% { --gs-lit: 0 } 25%, 100% { --gs-lit: 1 } }
@keyframes gs-on-3 { 0%, 35.5% { --gs-lit: 0 } 41.5%, 100% { --gs-lit: 1 } }
@keyframes gs-on-4 { 0%, 52% { --gs-lit: 0 } 58%, 100% { --gs-lit: 1 } }
@keyframes gs-on-5 { 0%, 68% { --gs-lit: 0 } 74%, 100% { --gs-lit: 1 } }
@keyframes gs-on-6 { 0%, 82% { --gs-lit: 0 } 88%, 100% { --gs-lit: 1 } }

/* =============================================================================
   9 — O CABECALHO ENCOLHIDO (so nesta pagina)
   =============================================================================
   Pedido do dono: em /method/ o menu "se contrai" ate sobrar so o logotipo da
   GUIDSE (a palavra "Method" que vinha embaixo saiu, tambem a pedido dele).
   header.php desenha esta versao no lugar do menu inteiro quando a rota e
   method — nao e o menu escondido por CSS: nao ha menu, nem "Login", nem
   hamburguer, nem gaveta no HTML desta pagina. (O header.js do tema nao acha o
   que procurar e nao faz nada; ele ja checa isso. Nao foi tocado.)

   Mesma linguagem do menu de verdade: pilula de vidro (preto a 65%, desfoque
   de 24px, fio branco a 15%, canto de 14px), fixa no topo e centrada, com os
   mesmos 15px de respiro e o mesmo z-index (100). Fica FORA de .gs-method
   porque o <header> esta antes do <main>; por isso as cores sao escritas aqui
   e nao lidas das variaveis da pagina. O prefixo gs-mini foi conferido nas
   folhas compiladas: nao existe la.

   A altura fica em ~52px (menos que os 91px de --header-h), entao nada que esta
   pagina prende abaixo do cabecalho (o palco, o cabecalho da tabela) passa por
   baixo dele. */
.gs-mini {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: 15px;
  display: flex;
  justify-content: center;
  pointer-events: none;                 /* so a pilula recebe clique */
}
.gs-mini__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  background: rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 6px 20px -12px rgba(11, 13, 14, .35);
}
.gs-mini__logo { display: block; border-radius: 2px; }
.gs-mini__logo img { display: block; width: 132px; height: auto; }
@media (min-width: 75rem) {
  .gs-mini__logo img { width: 148px; }
}
.gs-mini__logo:focus-visible { outline: 2px solid #45e8c8; outline-offset: 4px; }