.auth-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px
}
.auth-list span{
    padding:15px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    font-size:11px;
    font-weight:900
}
.auth-list span:before{
    content:"✓";
    margin-right:9px;
    color:var(--purple)
}










/* ============================================================
   Fundo em "palco", herdado da Section 3 da LP antiga
   (.ref-practice): metade esquerda off-white, metade direita numa
   superficie lilas para os cards brancos se destacarem, e a palavra
   de fundo translucida cortada pela borda inferior.
   ============================================================ */
.auth-section{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:120px 0 150px;
    /* metade esquerda — era --ref-off-white na LP antiga, mesmo valor */
    background:var(--soft);
    /* fecha o palco antes do fundo branco de #integracoes, como os
       40px de raio dos paineis do stage antigo */
    border-radius:0 0 clamp(28px,2.2vw,40px) clamp(28px,2.2vw,40px);
}

/* metade direita: era a foto do escritorio no template original, virou
   superficie lilas (.ref-practice__office) e agora e chapada.

   Era um degrade de #ded3f7 para #f2edfc. Passa a #f5f3fb, que e o mesmo
   valor de --soft usado no fundo da propria secao: as duas metades ficam
   iguais e a divisao vertical do palco deixa de aparecer. */
.auth-stage{
    position:absolute;
    z-index:-2;
    inset:0 0 0 50%;
    background:#f5f3fb;
    pointer-events:none;
}

/* .ref-practice__ghost: 150px no palco de 1920, ~127px na tela */
.auth-ghost{
    position:absolute;
    z-index:-1;
    /* eram os dois em 0, com a marca d'agua centrada na secao inteira.
       A caixa continua com a mesma largura e escorrega .4em para a
       esquerda, ~51px no tamanho cheio de 127px. Como o deslocamento
       esta em em, ele encolhe junto com a palavra nas telas menores.

       Enquanto a fonte esta em 8.4vw a secao mede 11.9em e as duas
       palavras somam ~10.06em, o que da .92em de folga de cada lado.
       Somando o vazio transparente que cada arquivo tem na ponta, o
       curso util vai de -1.06em (antes do "A" encostar na borda
       esquerda) a +1.13em (antes do "l" encostar na direita). Fora
       disso o overflow:hidden da secao corta a letra. */
    left:-.4em;
    right:.4em;
    /* era -.13em, com a marca d'agua descendo por baixo da borda da
       secao. Sobe para .05em, ~23px no tamanho cheio de 127px: os
       wordmarks passam inteiros para dentro do recorte. */
    bottom:.05em;
    font-weight:800;
    font-size:clamp(46px,8.4vw,127px);
    line-height:1;
    letter-spacing:-.02em;
    text-align:center;
    white-space:nowrap;
    /* era --lilac (#8967db). As duas artes sao #5932c1, que e o proprio
       --purple do projeto. Nao ha mais texto aqui dentro, entao a cor so
       vale para o que venha a ser escrito na marca d'agua depois. */
    color:var(--purple);
    opacity:.3;
    pointer-events:none;
    user-select:none;
}

/* As duas palavras da marca d'agua sao wordmarks da marca. Elas foram
   exportadas na mesma largura (2400px) mas com alturas de arquivo
   diferentes, entao a letra de cada uma sai numa escala diferente e cada
   imagem precisa do proprio tamanho e do proprio acerto de base:

                         Autenticação    Flexível
     arquivo             2400x444        2400x692
     linha de base       y=338           y=603
     altura-x            212px           366px
     altura de maiuscula 274px           478px

   O tamanho vem da altura-x, que e o que o olho compara: "Autenticação"
   fica nos 1.15em que ja estavam, o que poe a altura-x em .5491em, e
   "Flexível" recebe a altura que reproduz essa mesma altura-x
   (.5491 * 692/366 = 1.038em).

   O acerto de base existe porque vertical-align:baseline poe a BORDA de
   baixo do arquivo sobre a linha de base da linha, e nao a base do
   desenho. Cada imagem desce a sobra que tem embaixo da propria base:
   (444-338)/444 * 1.15 = .2745em e (692-603)/692 * 1.038 = .1335em.

   O espaco entre as duas e um espaco de verdade no HTML, do mesmo
   tamanho que separava as palavras quando isto era texto. */
.auth-ghost__word{
    display:inline-block;
    width:auto;
    vertical-align:baseline;
    position:relative;
}

.auth-ghost__word--auth{
    height:1.15em;
    top:.2745em;
    /* so esta palavra anda para a direita, ~38px no tamanho cheio de
       127px. E position:relative, entao o desvio e de pintura e nao de
       layout: "Flexível" fica onde esta e quem encurta e o vao entre as
       duas, dos .608em originais para ~.308em (~39px). */
    left:.3em;
}

.auth-ghost__word--flex{
    height:1.038em;
    top:.1335em;
}



        .auth-grid{
    display:grid;

        /* 1fr 1fr, e nao .8fr 1.2fr: a 46px o h2 precisa de 559px para
           fechar em duas linhas e a coluna estreita dava so 464px.
           Com o gap em 64px sobram 588px de cada lado - o texto fecha
           em duas linhas e os cards nao perdem tanta largura. */
        grid-template-columns:1fr 1fr;

        gap:64px;


        align-items:center;
}




        .auth-intro h2{


        font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;


        /* .ref-practice__heading da LP antiga: 49.64px no palco de 1920,
           escalado por 0.84615 = 42px na tela, peso 700, entrelinha 1.04 */
        font-size:

        clamp(28px,3.1vw,42px);


        font-weight:700;


        line-height:1.04;


        letter-spacing:-.02em;


        margin:25px 0;


        text-wrap:balance;


        /* o titulo inteiro no lilas do bloco: --ref-red-600 (#8967db)
           la, --lilac aqui - mesmo valor */
        color:var(--lilac);


        }



        /* como em .ref-practice__heading em: inline e herdando a cor,
           o titulo deixou de ser bicolor */
        .auth-intro h2 em{


        display:inline;


        font-style:normal;


        font-weight:inherit;


        color:inherit;


        }



        /* .ref-practice__copy: 24px no palco = 20px na tela, entrelinha
           1.5, --ref-ink (#151327, o mesmo valor de --ink aqui). Sem
           max-width proprio: acompanha a largura da coluna */
        .auth-intro p{


        font-size:20px;

        line-height:1.5;

        color:var(--ink);

        text-wrap:pretty;


        }




        /* PAINEL */

        /* ============================================================
           Cards de nivel de risco — mesma pele do bloco de autenticacao
           do palco legacy-ai da LP de referencia (.ref-risk /
           .ref-results__auth-cards, em lp003/eleva-lps).

           Aquele palco e um canvas fixo de 1920px reduzido por
           transform: scale(z), com z=0.795. Entao os px de la sao px de
           desenho, nao px de tela: cada medida abaixo e o valor do
           desenho multiplicado por .795, que e o tamanho com que a
           referencia realmente aparece. As cores ja eram identicas e
           seguem intactas.
           ============================================================ */

        /* 16px de desenho -> 12.7 reais */
        .auth-security{

        display:flex;

        flex-direction:column;

        gap:13px;

        }


        /* superficie escura translucida, borda branca fraca e a mesma
           sombra roxa dos cards de .security-badges. Raio 24 -> 19 e
           padding 24/28 -> 19/22.

           min-height e o alinhamento vertical vem da referencia: la os
           tres cards precisavam somar 512px de desenho para casar com a
           faixa escura atras, e o titulo fica centralizado junto das
           pilulas em vez de colado no topo. */
        .risk-card{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        gap:17px;

        min-height:127px;

        /* era rgba(25,13,57,.84), que sobre o #f5f3fb da secao rendia um
           #3c3258 bem mais claro do que parecia. Agora e chapado em
           #17082f, a mesma cor da faixa escura do palco legacy-ai da LP
           de referencia (.ref-results-bg-dark). Sem alfa, o card nao
           muda mais de tom se o fundo da secao mudar. */
        background:#17082f;

        border:1px solid rgba(255,255,255,.16);

        border-radius:19px;

        padding:19px 22px;

        box-shadow:0 16px 34px rgba(39,17,95,.22);

        transition:border-color .3s ease;

        }


        /* a referencia so acende a borda: nao ha elevacao nem mudanca de
           sombra no hover, porque no palco os cards estao ancorados numa
           faixa e qualquer deslocamento quebraria o alinhamento */
        .risk-card:hover{

        border-color:#9c6cff;

        }


        /* Plus Jakarta Sans na frente (era Space Grotesk), 25 -> 20 */
        .risk-card header{

        color:#fff;

        display:flex;

        align-items:center;

        gap:10px;

        font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;

        font-weight:700;

        font-size:20px;

        line-height:1.2;

        }


        /* bolinha de status: circulo real de 12 -> 10px pintado por
           --risk, no lugar do caractere "●" que era usado antes. O glifo
           dependia da fonte para o tamanho e o alinhamento vertical */
        .risk-card header span{

        width:10px;

        height:10px;

        flex:0 0 auto;

        border-radius:50%;

        background:var(--risk);

        }


        .risk-card.low{

        --risk:#27c46b;

        }


        .risk-card.medium{

        --risk:#e4a501;

        }


        .risk-card.high{

        --risk:#d94b5f;

        }


        /* nowrap como na referencia: as tres pilulas ficam sempre numa
           linha so. Cabe porque as pilulas encolheram junto — a coluna
           aqui tem 588px contra os 566 reais de la, e a linha de medio
           risco mede ~435px. */
        .auth-items{

        display:flex;

        align-items:center;

        flex-wrap:nowrap;

        gap:6px;

        width:100%;

        }


        /* sobre o card escuro as pilulas invertem: branco translucido
           com o texto no cinza-lilas de .security-badges span.
           Padding 10/13 -> 8/10, raio 14 -> 11, corpo 15 -> 12 e a
           altura minima de 44 -> 35. */
        .auth-items div{

        display:flex;

        align-items:center;

        gap:6px;

        min-height:35px;

        padding:8px 10px;

        background:rgba(255,255,255,.09);

        border:1px solid rgba(255,255,255,.14);

        border-radius:11px;

        color:#d6caef;

        font-family:Nunito,sans-serif;

        font-size:12px;

        font-weight:600;

        line-height:1.2;

        white-space:nowrap;

        }


        /* 19 -> 15 */
        .auth-items i{

        flex:0 0 auto;

        color:#9c6cff;

        font-size:15px;

        line-height:1;

        }

/* Faixa estreita das duas colunas. O container e min(1240px,100% - 42px),
   entao a coluna dos cards cai de 588px (viewport >= 1282) para ~488px
   logo acima do breakpoint de 1080. A linha de "Médio risco" e a mais
   larga (~446px com as pilulas do desktop) e passaria do limite; como a
   referencia mantem as tres pilulas sempre numa linha so, aqui elas
   apertam em vez de quebrar. */
@media(min-width:1081px) and (max-width:1240px){
    .auth-items{
        gap:4px;
    }

    .auth-items div{
        gap:5px;
        padding:8px 7px;
    }
}
@media(max-width:1080px){
    .auth-grid{
        grid-template-columns:1fr
    }

    /* com uma coluna so, a divisao vertical do palco perde o sentido:
       o lilas passa a subir por baixo dos cards, que agora ficam embaixo */
    .auth-stage{
        inset:36% 0 0;
        background:linear-gradient(180deg,rgba(222,211,247,0) 0,#e3d9f8 26%,#f2edfc 100%);
    }
}
@media(max-width:700px){
    .auth-list{
        grid-template-columns:1fr
    }

    .auth-section{
        padding:76px 0 118px;
        background:var(--soft);
        border-radius:0 0 26px 26px;
    }

    .auth-stage{
        inset:30% 0 0;
    }

    /* As duas palavras ficam na mesma linha, como no desktop. Antes elas
       empilhavam e cada uma era dimensionada pela largura; agora o
       tamanho volta a sair do font-size, e e ele que precisa caber.

       O par mede 10.056em de largura (6.216 de "Autenticação" + .24 do
       espaco + 3.600 de "Flexível") e a caixa aqui e a tela menos os
       24px de left/right. Dividir por 10.6, e nao por 10.056, e o que
       deixa a folga: sobram ~22px numa tela de 375px e ~19px numa de
       320px. O teto de 58px e o mesmo valor que o desktop tem logo do
       outro lado do corte (8.4vw a 701px = 58.9px), para a troca de
       regra nao dar salto.

       As tres regras de .auth-ghost__word que existiam aqui sairam: sem
       elas valem as do desktop, que ja poem as imagens em inline-block
       com a altura e o acerto de base em em, tudo acompanhando este
       font-size. white-space e line-height tambem voltam a herdar. */
    .auth-ghost{
        left:12px;
        right:12px;
        /* mesma subida do desktop, na proporcao daqui */
        bottom:.04em;
        font-size:min(calc((100vw - 28px) / 10.6),58px);
    }

    .auth-grid{
        gap:38px;
    }

    .auth-intro{
        text-align:center;
    }

    .auth-intro .section-kicker{
        margin-inline:auto;
    }

    /* o max-width de 360px empurrava o titulo para tres linhas: aqui ele
       usa a largura toda do container e o corpo acompanha a largura da
       tela, para fechar em duas linhas ate em telas de 320px */
    .auth-intro h2{
        margin:18px auto 16px;
        /* 6.9vw, e nao 7.4: o peso 700 herdado de .ref-practice__heading
           alarga o texto ~5% e a terceira linha voltava abaixo de 430px */
        font-size:min(6.9vw,29px);
    }

    .auth-intro p{
        max-width:350px;
        margin-inline:auto;
        font-size:16px;
        line-height:1.5;
    }

    .auth-intro .button{
        margin-top:22px;
    }

    .auth-security{
        width:100%;
        margin-inline:auto;
        gap:12px;
    }

    /* no telefone as pilulas viram grade de 3 colunas com o icone em
       cima do texto, entao a altura minima e o "uma linha so" do
       desktop precisam sair */
    .risk-card{
        gap:11px;
        min-height:0;
        padding:16px 14px;
        border-radius:18px;
        box-shadow:0 10px 24px rgba(39,17,95,.20);
    }

    .risk-card:hover{
        border-color:rgba(255,255,255,.16);
        box-shadow:0 10px 24px rgba(39,17,95,.20);
    }

    .risk-card header{
        gap:8px;
        font-size:16px;
    }

    /* a bolinha e um circulo, nao um glifo: encolhe por width/height */
    .risk-card header span{
        width:8px;
        height:8px;
    }

    .auth-items{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
    }

    .auth-items div{
        min-width:0;
        min-height:78px;
        padding:10px 5px;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        border-radius:13px;
        text-align:center;
        font-size:10px;
        line-height:1.18;
        /* "Selfie com documento" precisa quebrar dentro da celula */
        white-space:normal;
    }

    .auth-items i{
        font-size:21px;
    }
}