/* v4: as telas reais do ADE (carteira, conversa e editor numa tela) no lugar da animação da v3.
   Usa os tokens e as classes da v3.css; aqui só o que é novo. */

/* a moldura de navegador em volta de uma captura */
.shot{position:relative;background:#fff;border:1px solid var(--g200);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -48px rgba(15,14,13,.45)}
.shot-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:var(--g100);border-bottom:1px solid var(--g200)}
.shot-bar i{width:10px;height:10px;border-radius:999px;background:var(--g300)}
.shot-bar span{margin-left:12px;font-size:12px;color:var(--g500)}
.shot img{display:block;width:100%;height:auto}
.shot .demo-tag{background:rgba(250,250,249,.92);padding:2px 8px;border-radius:999px}

.stage-v4{position:relative;margin:64px auto 0;max-width:1120px;background:var(--g100);border-radius:28px 28px 0 0;padding:28px 28px 0}
.stage-v4 .shot{border-bottom:0;border-radius:14px 14px 0 0}

/* três pílulas do que a tela tem, embaixo do hero */
.anatomy{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1120px;margin:28px auto 0}
.anatomy div{border-top:1px solid var(--g300);padding-top:14px}
.anatomy b{display:block;font-weight:600;font-size:15px}
.anatomy span{color:var(--g600);font-size:15px}

/* as telas, em abas */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tabs button{font:inherit;font-size:15px;border:1px solid var(--g300);background:transparent;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--g700)}
.tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.tabs button:hover{border-color:var(--ink)}
.tab-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.tab-body .txt h3{margin-bottom:12px}
.tab-body .txt p{color:var(--g600);margin:0 0 14px}
.tab-body .txt ul{margin:0;padding:0;list-style:none}
.tab-body .txt li{padding:9px 0;border-top:1px solid var(--g200);font-size:15px}
.tab-panel[hidden]{display:none}

/* a tela de software comum, pequena */
.plain{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}

@media (max-width:1000px){
  .tab-body{grid-template-columns:1fr}
  .plain{grid-template-columns:1fr}
  .anatomy{grid-template-columns:1fr}
}
@media (max-width:600px){
  .stage-v4{padding:14px 14px 0;border-radius:18px 18px 0 0}
  .shot-bar span{display:none}
}