/* S08 — Em qualquer lugar, sempre com você. MOBILE-FIRST (ADR-023): a base é o celular; o desktop só acrescenta, a partir de 900 px de contêiner.
   Arte-mãe (faixa de 682 px): texto 8,7–32% | dispositivos 33,9–76,2% | atributos 79,2–95,3%. Cena ESCURA. Os dispositivos são HTML/CSS, SEM texto, número
   nem nome (o PNG antigo foi removido na 1.9.45); as medidas internas usam cqw do próprio bloco .d08-dev e escalam juntas. Luz CSS estática, sem animação. */
.d08{--acc:#e72b6c;--acc-fill:#d02761;--ink:#fff;position:relative;z-index:1;overflow:hidden;background:#07060a;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container:d08/inline-size}   /* contêiner NOMEADO: .d08-dev também é contêiner (cqw dos aparelhos), e um @container sem nome consultaria ELE, não a cena */
.d08::before{content:"";position:absolute;inset:0;background:radial-gradient(48% 70% at 58% 52%,rgba(231,43,108,.13),transparent 72%);pointer-events:none}
.d08-in{box-sizing:border-box;position:relative;z-index:1;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(22px,5cqw,40px);padding:clamp(36px,8cqw,84px) clamp(16px,3.87cqw,48px)}
.d08 .d08-copy h2{color:var(--ink)}   /* especificidade (0,2,1): vence [data-bx-mode] h2 do tema (0,1,1), que vem depois na folha; só a COR (lição 49) */
.d08-copy h2{margin:0 0 clamp(10px,1.4cqw,18px);font-family:var(--font-title,inherit);font-size:clamp(26px,8.2cqw,42px);line-height:1.08;font-weight:800;letter-spacing:-.01em}
.d08-copy h2 span{display:block}
.d08-copy p{margin:0 0 clamp(16px,2.4cqw,26px);max-width:38ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:rgba(255,255,255,.84)}
.d08-cta{display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--acc);color:#fff;text-decoration:none;font-size:15px;font-weight:600;transition:background .2s,color .2s}
.d08-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--acc);transition:color .2s}
.d08-cta:hover,.d08-cta:focus-visible{background:var(--acc-fill);color:#fff}   /* #e72b6c com branco dá 4,23:1 e reprova o texto 'Criar conta'; --acc-fill dá 5,0:1 (DNA §2E, regra 3) */
.d08-cta:hover svg,.d08-cta:focus-visible svg{color:#fff}
.d08-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* dispositivos: quadro 4:3 no celular; os três desenhos usam cqw deste quadro */
.d08-devwrap{min-width:0}
.d08-dev{position:relative;container-type:inline-size;width:100%;aspect-ratio:4/3}
.d08-dev i,.d08-dev b,.d08-dev u{display:block;text-decoration:none}
.d08-dev i{height:.9cqw;border-radius:99px;background:rgba(255,255,255,.15)}
.d08-dev b{height:1.5cqw;width:24%;border-radius:99px;background:var(--acc)}
.d08-dev img{display:block}
.d08-lap{position:absolute;left:14%;top:2%;width:84%}
.d08-lap-scr{box-sizing:border-box;display:grid;grid-template-columns:15% minmax(0,1fr);grid-template-rows:3.6fr 1fr 1.5fr;gap:.8cqw;padding:.9cqw;aspect-ratio:16/10;border:.9cqw solid #2a2931;border-radius:1.7cqw 1.7cqw .4cqw .4cqw;background:#0b0a0f;box-shadow:0 2cqw 5cqw rgba(0,0,0,.55),0 0 6cqw rgba(231,43,108,.12)}
.d08-lap-base{height:1.7cqw;margin:0 -5%;border-radius:0 0 2cqw 2cqw;background:linear-gradient(#d4d4da,#7e7e88)}
.d08-sb{grid-row:1/-1;display:grid;align-content:start;gap:1.3cqw;padding:.5cqw .3cqw}
.d08-sb b{width:72%}
.d08-sb i:nth-of-type(1){background:rgba(231,43,108,.55)}
.d08-hero{position:relative;grid-column:2;min-height:0;overflow:hidden;border-radius:.9cqw;background:#17141c}
.d08-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.d08-hero em{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,6,10,.78),transparent 58%)}
.d08-pan{grid-column:2;display:flex;gap:.8cqw;align-items:center}
.d08-pan i{flex:1;height:1.3cqw}
.d08-pan i:first-child{background:rgba(231,43,108,.6)}
.d08-trow{grid-column:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7cqw;min-height:0}
.d08-trow img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:.7cqw}
.d08-tab{box-sizing:border-box;position:absolute;left:0;bottom:3%;width:46%;aspect-ratio:4/3;display:grid;grid-template-rows:auto minmax(0,1fr);gap:1cqw;padding:1.2cqw;border:1cqw solid #1f1e26;border-radius:2.4cqw;background:#0e0c12;box-shadow:0 2cqw 5cqw rgba(0,0,0,.6)}
.d08-tab-hd{display:flex;gap:.8cqw;align-items:center}
.d08-tab-hd b{width:22%}
.d08-tab-hd i{flex:1}
.d08-tab-g{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:.8cqw;min-height:0}
.d08-tab-g span{position:relative;display:block;min-height:0;overflow:hidden;border-radius:.9cqw;background:#17141c}
.d08-tab-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.d08-tab-g u{position:absolute;left:9%;right:34%;bottom:9%;height:.8cqw;border-radius:99px;background:rgba(255,255,255,.7)}
.d08-pho{box-sizing:border-box;position:absolute;right:0;bottom:2%;width:19%;aspect-ratio:9/19;display:grid;grid-template-rows:auto repeat(3,minmax(0,1fr)) auto;gap:.9cqw;padding:1.1cqw .9cqw;border:.9cqw solid #1f1e26;border-radius:3cqw;background:#0e0c12;box-shadow:0 2cqw 5cqw rgba(0,0,0,.6)}
.d08-pho-hd{display:flex;gap:.6cqw;align-items:center}
.d08-pho-hd b{width:38%}
.d08-pho-hd i{flex:1}
.d08-pho-r{display:flex;gap:.8cqw;align-items:center;min-height:0}
.d08-pho-r img{flex:none;width:6.2cqw;height:6.2cqw;border-radius:50%;object-fit:cover;object-position:50% 20%}   /* tamanho explícito: o atributo width=256 da <img> e a altura em % de uma linha sem altura esticavam o avatar */
.d08-pho-r span{display:grid;gap:.6cqw;flex:1;min-width:0}
.d08-pho-nav{display:flex;align-items:center;justify-content:space-between;padding:0 .6cqw}
.d08-pho-nav i{width:1.3cqw;height:1.3cqw}
.d08-pho-nav b{width:2.6cqw;height:2.6cqw;border-radius:50%}
.d08-note{margin:clamp(10px,1.6cqw,16px) 0 0;font-size:12px;line-height:1.3;color:rgba(255,255,255,.6);text-align:center}

/* atributos */
.d08-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.6cqw,16px)}
.d08-list li{display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.3cqw,16px);line-height:1.3;color:rgba(255,255,255,.9)}
.d08-ico{--d:clamp(30px,3.4cqw,40px);flex:none;box-sizing:border-box;width:var(--d);height:var(--d);padding:calc(var(--d)*.24);border-radius:50%;border:1.5px solid var(--acc);background:rgba(231,43,108,.12);fill:none;stroke:#ff7fae;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* >=600 px: atributos em grade 2x2 e os dispositivos deixam de ocupar a largura toda */
@container d08 (min-width:600px){
  .d08-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,3cqw,28px)}
  .d08-devwrap{width:100%;max-width:min(100%,560px);justify-self:center}
}
/* >=900 px: 3 colunas como a arte-mãe. Os dispositivos passam a um quadro largo (19:10): notebook à esquerda, tablet em pé e celular à direita. */
@container d08 (min-width:900px){
  .d08-in{max-width:none;grid-template-columns:minmax(0,234fr) minmax(0,16fr) minmax(0,423fr) minmax(0,30fr) minmax(0,163.5fr);column-gap:0;align-items:center;padding-block:clamp(22px,2.6cqw,40px);padding-inline:8.65cqw 4.7cqw}
  .d08-copy{grid-column:1}
  .d08-devwrap{grid-column:3;max-width:none;justify-self:stretch}
  .d08-list{grid-column:5;grid-template-columns:minmax(0,1fr);row-gap:clamp(14px,2cqw,26px)}
  .d08-copy h2{font-size:clamp(20px,2.4cqw,36px)}
  .d08-dev{aspect-ratio:19/10}
  .d08-lap{left:0;top:2%;width:74%}
  .d08-tab{left:63%;bottom:3%;width:31%;aspect-ratio:3/4}
  .d08-tab-g{grid-template-columns:1fr 1fr}
  .d08-pho{right:0;bottom:0;width:17.5%}
}