.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 e virou
   superficie lilas (.ref-practice__office) */
.auth-stage{
    position:absolute;
    z-index:-2;
    inset:0 0 0 50%;
    background:linear-gradient(160deg,#ded3f7,#f2edfc);
    pointer-events:none;
}

/* .ref-practice__ghost: 150px no palco de 1920, ~127px na tela */
.auth-ghost{
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    bottom:-.13em;
    font-weight:800;
    font-size:clamp(46px,8.4vw,127px);
    line-height:1;
    letter-spacing:-.02em;
    text-align:center;
    white-space:nowrap;
    color:var(--lilac);
    opacity:.3;
    pointer-events:none;
    user-select:none;
}



        .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 */

        .auth-security{


        display:flex;

        flex-direction:column;

        gap:18px;


        }

        /* pele de .security-badges article (secao "Segurança digital em
           cada etapa."): card escuro translucido, borda branca fraca,
           raio 22px e a mesma sombra roxa */
        .risk-card{


        background:rgba(25,13,57,.84);


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


        border-radius:22px;


        padding:22px 26px;


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


        transition:.3s;


        }



        /* mesmo hover dos cards de seguranca: sobe e acende a borda */
        .risk-card:hover{


        transform:translateY(-6px);


        border-color:#9c6cff;


        box-shadow:

        0 22px 46px rgba(39,17,95,.30);


        }




        /* tipografia de .security-badges strong: Space Grotesk 700/20px
           em branco. As bolinhas mantem as cores de risco. */
        .risk-card header{


        color:#fff;


        display:flex;


        align-items:center;


        gap:12px;


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


        font-weight:700;


        font-size:20px;


        margin-bottom:20px;


        }



        .risk-card header span{


        font-size:22px;


        }



        .low header span{

        color:#27c46b;

        }


        .medium header span{

        color:#e6a600;

        }


        .high header span{

        color:#d94b5f;

        }





        /* gap 10 e o padding lateral em 14 (eram 12 e 16): com a coluna
           dos cards em 1fr, a linha de medio risco passava 8px do
           limite e "Geolocalização" caia sozinha numa segunda linha */
        .auth-items{


        display:flex;


        gap:10px;


        flex-wrap:wrap;


        }



        .auth-items div{


        display:flex;


        align-items:center;


        gap:8px;


        padding:12px 14px;


        /* sobre o card escuro as pilulas invertem: branco translucido
           com o texto no cinza-lilas de .security-badges span */
        /* sem contorno: dentro do card escuro so o preenchimento
           translucido separa as pilulas, sem caixa dentro de caixa */
        background:rgba(255,255,255,.07);


        border:0;


        border-radius:14px;


        color:#d7cee9;


        font-size:14px;


        font-weight:600;


        }



        .auth-items i{


        color:#b79bff;


        font-size:20px;


        }
@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;
    }

    /* "Autenticação Flexível" nao cabe numa linha aqui: quebra em duas
       em vez de encolher a ponto de deixar de ler como marca d'agua
       (na LP antiga a palavra simplesmente sumia no mobile) */
    .auth-ghost{
        left:12px;
        right:12px;
        bottom:-.08em;
        white-space:normal;
        line-height:.94;
        font-size:min(12.6vw,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;
    }

    .risk-card{
        padding:16px 14px;
        border-radius:18px;
        box-shadow:0 10px 24px rgba(39,17,95,.20);
    }

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

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

    .risk-card header span{
        font-size:17px;
    }

    .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;
    }

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