/* Duas seções que mostram telas do produto: a de modos e a da retrospectiva.
   Mesmo esqueleto das outras seções de imagem mais texto, com a imagem trocando
   de lado e o fundo mudando, para o ritmo não repetir três vezes seguidas. */
.screen-section{padding:var(--space) calc(var(--gutter) - 20px);background:var(--cream);color:var(--ink);border-radius:20px}
.screen-grid{max-width:1376px;margin:auto;display:grid;grid-template-columns:.88fr 1.12fr;gap:9%;align-items:center}
.screen-section--image-left .screen-grid{grid-template-columns:1.12fr .88fr}
.screen-section--image-left .screen-copy{order:2}
.screen-section--image-left .screen-shot{order:1}

.screen-copy>.eyebrow{display:block;color:var(--green-dark);font:600 11px Asap,sans-serif;letter-spacing:.09em;text-transform:uppercase;margin-bottom:30px}
.screen-copy>h2{margin:0}
.screen-copy>p{font-size:17px;line-height:1.68;color:var(--secondary);max-width:410px;margin-top:24px;letter-spacing:-.018em}

.screen-shot{margin:0}
.screen-shot img{width:100%;height:auto;border-radius:12px;box-shadow:0 18px 55px #12191324}
.screen-shot figcaption{margin-top:16px;font-size:11px;line-height:1.6;color:var(--muted)}

/* A retrospectiva sai no verde escuro, porque ela fecha o argumento e porque a
   tela é clara e ganha contraste no fundo. */
.screen-section--dark{background:#252e28;border-radius:20px;color:var(--cream)}
.screen-section--dark .screen-copy>.eyebrow{color:#9fb097}
.screen-section--dark .screen-copy>p{color:#c6ccc3}
.screen-section--dark .screen-shot figcaption{color:#8f9a89}
.screen-section--dark .screen-shot img{box-shadow:0 26px 70px #0d130d5c}

@media(max-width:1050px){.screen-grid{gap:6%}.screen-copy>p{font-size:15.5px}}
@media(max-width:860px){
  .screen-grid,.screen-section--image-left .screen-grid{grid-template-columns:1fr;gap:36px}
  .screen-copy,.screen-section--image-left .screen-copy{order:1}
  .screen-shot,.screen-section--image-left .screen-shot{order:2}
  .screen-copy>p{max-width:none}
  .screen-copy>.eyebrow{margin-bottom:22px}
}
@media(max-width:600px){.screen-section{padding:56px 22px}.screen-section--dark{margin-inline:12px;border-radius:9px}}

/* Variante com a captura em cima, ocupando as duas colunas, e embaixo o título
   à esquerda com o texto à direita. Mesma grade da seção "A Amia não substitui". */
.screen-wrap{max-width:1560px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}
.screen-wrap .screen-shot{grid-column:1/-1;margin:0 0 clamp(38px,4.4vw,62px)}
.screen-wrap .screen-copy>h2{margin:0}
.screen-context p{font-size:16px;line-height:1.68;color:var(--secondary);margin:0;letter-spacing:-.018em}
.screen-context p+p{margin-top:16px}
@media(max-width:860px){
  .screen-wrap{grid-template-columns:1fr;gap:26px}
  .screen-wrap .screen-shot{margin-bottom:8px}
}

/* Texto mais perto da captura. */
.screen-wrap .screen-shot{margin-bottom:clamp(18px,2.1vw,30px)}
.screen-note{margin-top:22px;font-size:11px;line-height:1.6;color:var(--muted)}
.screen-section--dark .screen-note{color:#8f9a89}

/* A borda de cima deixa de ser um corte e vira passagem: a cor da seção
   anterior desce por 200px até virar a cor desta. */
.screen-section{background-repeat:no-repeat}
.screen-section:not(.screen-section--dark){background-image:linear-gradient(#eeebe6 0,#f6f4f1 210px)}
.screen-section--dark{background-image:linear-gradient(#e9e6df 0,#252e28 230px)}
@media(max-width:860px){
  .screen-section:not(.screen-section--dark){background-image:linear-gradient(#eeebe6 0,#f6f4f1 130px)}
  .screen-section--dark{background-image:linear-gradient(#e9e6df 0,#252e28 140px)}
}

/* As duas seções passaram a ocupar a largura inteira, sem cartão e sem canto
   arredondado. Com o cartão, sobrava uma tira do fundo da página ao lado dele e
   a passagem de cor era cortada no meio. */
.screen-section{border-radius:0}
@media(max-width:600px){.screen-section--dark{margin-inline:0;border-radius:0}}

/* CORREÇÃO: a retrospectiva sai do verde e volta para o creme, com tipografia
   escura. A mudança de cor passa a ser só de fundo e acontece durante a rolagem:
   o creme vai esquentando ao longo da seção e chega na areia bem quando começam
   as perguntas frequentes, que seguem na mesma cor até o convite do piloto. */
.screen-section--dark{background-color:#e5dfd3;color:var(--ink);border-radius:0;margin-inline:0}
.screen-section--dark{background-image:linear-gradient(#f6f4f1 0,#e5dfd3 100%)}
.screen-section--dark .screen-copy>h2{color:var(--ink)}
.screen-section--dark .screen-context p{color:var(--secondary)}
.screen-section--dark .screen-note{color:var(--muted)}
.screen-section--dark .screen-shot img{box-shadow:0 18px 55px #12191324}
@media(max-width:860px){.screen-section--dark{background-image:linear-gradient(#f6f4f1 0,#e5dfd3 100%)}}

/* A areia continua nas perguntas frequentes, para a passagem não parar no meio. */
.faq{background:#e5dfd3}

/* Mais respiro entre o fim do texto e o bloco da conversa com o gestor. */
.screen-section:not(.screen-section--dark){padding-bottom:calc(var(--space) * 1.5)}

/* A tela de início entra sozinha, sem título e sem texto: a frase que importa
   está dentro da própria captura. */
.screen-section--solo{background-image:none;background-color:var(--cream);padding-bottom:var(--space)}
.screen-section--solo .screen-wrap{grid-template-columns:1fr}
/* a tela de início passou a ter texto embaixo, então volta a ter margem */

/* AJUSTES DE REVISÃO
   1. A tela de início fica no mesmo verde do fundo em volta dela. Em creme, ela
      abria duas emendas duras, uma acima e outra abaixo, no meio de um trecho
      escuro. No verde as duas somem e a captura clara ganha contraste.
   2. A passagem da retrospectiva passa a começar na cor exata da seção de cima
      (#e9e6df), e não no creme da página, que deixava um fio claro na emenda. */
.screen-section--solo{background-color:#252e28;background-image:none}
.screen-section--dark{background-image:linear-gradient(#e9e6df 0,#e5dfd3 100%)}
@media(max-width:860px){.screen-section--dark{background-image:linear-gradient(#e9e6df 0,#e5dfd3 100%)}}

/* No verde, a captura recua e ganha moldura de fundo, senão vira uma faixa clara
   quase da largura inteira, com dois filetes verdes nas beiradas. */
.screen-section--solo .screen-shot{max-width:78%;margin-inline:auto}
.screen-section--solo .screen-shot img{box-shadow:0 30px 80px #0d130d66}
@media(max-width:860px){.screen-section--solo .screen-shot{max-width:100%}}

/* A regra do degradê usa :not(), que pesa mais que uma classe só. Por isso a
   tela de início precisa de duas classes no seletor para o verde valer. */
.screen-section.screen-section--solo{background-color:#252e28;background-image:none}

/* A tela de início volta para o creme liso, sem verde e sem degradê. */
.screen-section.screen-section--solo{background-color:var(--cream);background-image:none}
.screen-section--solo .screen-shot{max-width:100%}
.screen-section--solo .screen-shot img{box-shadow:0 18px 55px #12191324}

/* Metade a mais de respiro entre o fim do texto e o bloco da conversa com o gestor. */
.screen-section:not(.screen-section--dark):not(.screen-section--solo){padding-bottom:calc(var(--space) * 2.25)}

/* A retrospectiva empilha centralizado: captura, título e, embaixo, o texto.
   E sai com folga grande antes das perguntas frequentes. */
.screen-section--dark .screen-wrap{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
.screen-section--dark .screen-shot{order:1;width:100%}
.screen-section--dark .screen-copy{order:2}
.screen-section--dark .screen-context{order:3;max-width:660px;margin-top:26px}
.screen-section--dark .screen-context p{max-width:none}
.screen-section--dark{padding-bottom:calc(var(--space) * 2.25)}
@media(max-width:860px){.screen-section--dark .screen-context{margin-top:20px}}

/* Mais folga ainda antes das perguntas frequentes. */
.screen-section--dark{padding-bottom:calc(var(--space) * 3)}

/* AJUSTE: a retrospectiva usa o mesmo creme claro da seção "Cada situação tem
   uma porta" e do fundo em volta do bloco do gestor. Sem degradê e sem areia.
   As perguntas frequentes seguem no mesmo creme. */
.screen-section.screen-section--dark{background-color:var(--cream);background-image:none}
.faq{background:var(--cream)}

/* A captura descola do título, e a folga até o FAQ volta a um tamanho razoável. */
.screen-section--dark .screen-shot{margin-bottom:clamp(52px,5.6vw,84px)}
.screen-section--dark{padding-bottom:calc(var(--space) * 1.6)}

/* TAMANHO DAS CAPTURAS
   Antes as três eram exibidas com 1183px, o mesmo tamanho da janela em que foram
   feitas: escala 1:1, e o aplicativo competia com a página. Agora cada uma foi
   recapturada numa janela mais estreita e é exibida menor, sempre acima de 0,8
   da escala real, que é o limite onde o texto de 13px do produto ainda se lê. */
.screen-shot{margin-inline:auto}
.screen-section--solo .screen-shot{max-width:830px}
.screen-section:not(.screen-section--dark):not(.screen-section--solo) .screen-shot{max-width:890px}
.screen-section--dark .screen-shot{max-width:760px}
@media(max-width:980px){
  .screen-section--solo .screen-shot,
  .screen-section:not(.screen-section--dark):not(.screen-section--solo) .screen-shot,
  .screen-section--dark .screen-shot{max-width:100%}
}

/* O atalho `margin:0 0 X` lá de cima zera as margens laterais e vencia o
   `margin-inline:auto`, então a captura encostava na esquerda em vez de centrar. */
.screen-wrap .screen-shot{margin-inline:auto}

/* TAMANHO DAS CAPTURAS, versão final
   Um teto único para as três, como a página do Codex faz: a captura cresce até
   1020px e para. Abaixo disso ela acompanha a largura da coluna de texto.
   As três foram capturadas em 4:3, então todas fecham na mesma altura. */
.screen-section--solo .screen-shot,
.screen-section:not(.screen-section--dark):not(.screen-section--solo) .screen-shot,
.screen-section--dark .screen-shot{max-width:1020px}

/* COMPOSIÇÃO FINAL das três seções de captura.
   Título centralizado em cima, captura no meio, texto centralizado embaixo.
   Antes só a retrospectiva era centralizada, e a de modos tinha título à
   esquerda com texto à direita, o que dava duas composições diferentes para o
   mesmo tipo de bloco. */
.screen-section .screen-wrap{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
.screen-section .screen-copy{order:1;max-width:none}
.screen-section .screen-copy>h2{margin:0}
.screen-section .screen-shot{order:2;width:100%;margin-top:clamp(32px,3.6vw,52px);margin-bottom:clamp(46px,5vw,74px)}
.screen-section--solo .screen-shot{margin-bottom:0}
.screen-section .screen-context{order:3;max-width:660px}
.screen-section .screen-context p{max-width:none}

/* Corpo das três seções de captura: 19px com entrelinha de 27px, centralizado.
   Antes era 16px, e a entrelinha de 1,68 já dava os mesmos 27px, então o que
   muda é só o tamanho da letra. */
.screen-context p{font-size:19px;line-height:27px}
@media(max-width:600px){.screen-context p{font-size:17px;line-height:25px}}

/* A MESMA distância da captura até o texto nas três seções.
   Havia uma regra antiga zerando essa margem só na tela de início, e outra com
   valor próprio na retrospectiva. Este bloco é o último e vale para as três. */
.screen-section .screen-shot,
.screen-section--solo .screen-shot,
.screen-section--dark .screen-shot{margin-bottom:clamp(46px,5vw,74px)}

/* O vão de cima, do título até a captura, passa a ser o mesmo de baixo, da
   captura até o texto. A captura fica centrada no próprio bloco. */
.screen-section .screen-shot,
.screen-section--solo .screen-shot,
.screen-section--dark .screen-shot{margin-top:clamp(46px,5vw,74px)}

/* O título desta versão é bem mais longo que o da v8, e as colunas em fr respeitam
   o min-content: a coluna do título ficou com 1214px e espremeu a descrição para
   157px de largura, com nove linhas, o que empurrou o hero para 984px numa tela de
   779px. A coluna passa a poder encolher, e o corpo do título cai para caber nela. */
@media(min-width:861px){
  .hero-loom .hero-content{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .hero-loom #hero-title{font-size:clamp(46px,4.1vw,64px)}
  .hero-loom .hero-content{padding-bottom:38px}
}

/* No celular as três linhas do título são blocos com white-space:nowrap, herdado do
   hero da v8, cujo título era curto. Com o título desta versão elas transbordavam e
   saíam cortadas pela borda do hero. Aqui o texto volta a fluir e quebra sozinho. */
@media(max-width:860px){
  .hero-loom #hero-title>span{display:inline;white-space:normal}
  .hero-loom #hero-title{font-size:clamp(29px,8.2vw,44px)}
}

/* A abertura em forma de ficha: uma linha de contexto e três entradas que a pessoa
   lê de relance. O rótulo repete a definição em versalete das três colunas da seção
   escura, porque lá ela está escopada e não alcança esta seção. */
.opening-facts{margin:30px 0 0;display:grid;gap:0}
.opening-facts>div{display:grid;gap:6px;padding:16px 0;border-top:1px solid var(--line)}
.opening-facts>div:last-child{border-bottom:1px solid var(--line)}
.opening-facts .label{font:600 11px/1.5 Asap,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--secondary);margin:0}
.opening-facts dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink);letter-spacing:-.018em}
@media(max-width:600px){.opening-facts dd{font-size:15px}}