/* ============================================================
   BFMIDI — VITRINE DOS APPS · "PALCO"
   ------------------------------------------------------------
   Primeira dobra de keynote: os aparelhos montados em CSS com
   os screenshots reais, iluminados como a controladora é
   fotografada na home — spot âmbar vindo de cima, contraluz
   azul fria atrás e poça de luz no chão. Ao lado do título, o
   dock de plataformas: teclas grafite como as do próprio
   editor, e a do visitante já vem acesa em laranja. A barra da
   janela do notebook muda com a plataforma escolhida (macOS,
   Windows ou navegador).

   Tudo aqui é escopado em .apps-page / #panel-apps /
   #ajuda-dialog. O layout é decidido por CONTAINER QUERY na
   .apps-page, não por media query: no desktop o site aplica
   `html { zoom: .8 }`, e a largura que importa é a do layout
   (1440 de janela = 1800 de layout), que é o que o container
   mede. Pelo mesmo motivo nada aqui usa `vw`, e todo texto
   pequeno sai de `--ap-min`: 11px no celular, 14px no desktop
   (14 × .8 = 11,2px renderizados).

   A MESMA ESCALA DOS PAINÉIS (24/09/2026, terceira rodada): os
   valores vêm de css/tokens.css e os --ap-* abaixo são só
   apelidos. Dois containers, com papéis diferentes:
   · `aps` na .apps-page (a largura do painel inteiro) decide a
     COMPOSIÇÃO — celular, tablet empilhado, desktop em duas
     colunas;
   · `pg` na .ap-wrap (a moldura de --frame, 1720px CSS, com o
     mesmo respiro lateral do INFO) dá a ESCALA do sistema: o
     título (--t-page), o lead (--t-lead), o título de cartão
     (--t-card) e os ritmos (--gap-*, --pad-card) chegam aqui
     com o mesmo número que no .panel-inner.pg dos painéis, e o
     `cqi` do título mede a mesma caixa. Trocar INFO ↔ APP não
     muda o tamanho nem a posição do cabeçalho.
   ============================================================ */

.apps-page {
  --ap-ink: var(--ink);
  --ap-ink-2: var(--ink-2);
  --ap-ink-3: var(--ink-3);
  --ap-line: var(--line);
  --ap-line-2: var(--line-2);
  --ap-orange: var(--orange);
  --ap-cta: var(--cta);
  --ap-cta-ink: var(--cta-ink);
  --ap-ok: var(--ok);
  --ap-focus: var(--focus);
  --ap-min: var(--t-min);
  /* Alvo mínimo de toque em px CSS: 44 renderizados em qualquer faixa
     (55px CSS sob o zoom .8 do desktop). */
  --ap-hit: calc(44px / var(--zoom, 1));
  --ap-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
  container: aps / inline-size;
  width: 100%;
  min-width: 0;
  /* A luz do palco sangra para fora do hero no desktop; quem corta é a
     borda da página (a janela), nunca uma caixa no meio da tela. */
  overflow-x: clip;
  color: var(--ap-ink);
  font: 400 16px/1.55 var(--font-body);
}
.apps-page [hidden] { display: none !important; }
.apps-page :is(a, button) { color: inherit; }
/* Foco único do site: --focus-w (3px; 3.75px CSS no desktop, os mesmos
   3px na tela) na cor --focus, afastado --focus-offset. */
.apps-page :is(a, button, [tabindex]):focus-visible { outline: var(--focus-w) solid var(--ap-focus); outline-offset: var(--focus-offset, 4px); }
/* O véu fixo do rodapé cobre ~134px de baixo: o foco por Tab nunca pára ali. */
.apps-page :is(a, button, [tabindex]) { scroll-margin: 96px 0 160px; }

/* A moldura: a mesma do .panel-inner.pg (pages.css) — largura máxima
   --frame, micro-rótulo a --pg-top do topo (16 / 28 / 48px CSS), nada
   centrado na vertical. O respiro lateral é o MESMO de INFO, IN/OUT,
   SHOP e Downloads, e decidido pela JANELA como o deles (16px até 600;
   28 até 860; 48px CSS a partir de 861) — pelo container, a faixa de
   861 a ~865 caía no degrau do tablet e o título andava 16px ao trocar
   de aba. O `pg` aqui é o que faz os tokens da escala chegarem
   resolvidos aos filhos. */
.apps-page .ap-wrap {
  container: pg / inline-size;
  width: 100%;
  max-width: var(--frame, 1720px);
  margin: 0 auto;
  margin-block: 0 auto;
  padding: var(--pg-top, 16px) 16px 32px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 601px) { .apps-page .ap-wrap { padding-inline: 28px; } }
@media (min-width: 861px) { .apps-page .ap-wrap { padding-inline: 48px; } }

/* ---------- 1. PALCO ---------------------------------------- */

.apps-page .ap-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  overflow-x: clip;
}
/* No celular o palco vem depois do cartão; uma luz baixa e quente atrás
   do título mantém o clima de palco já na primeira tela. A caixa é
   cortada pelo hero (overflow-x: clip), então as QUATRO bordas se
   dissolvem na máscara: sem ela, a luz terminava numa aresta reta logo
   abaixo da cápsula e num corte vertical na margem direita. O azul é
   `closest-side`, para caber inteiro dentro da caixa. */
.apps-page .ap-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40px 0 auto;
  height: 420px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, #ff8a3d2e 0%, transparent 70%),
    radial-gradient(closest-side at 80% 30%, #3d8bff24 0%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 110px, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0, #000 110px, #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
/* Celular: o mesmo feixe âmbar do palco do desktop, vindo de cima e
   passando por trás do título — a primeira tela já tem luz de palco sem
   gastar um pixel de layout. Um gradiente só, sem os raios de poeira. */
@container aps (max-width: 699px) {
  .apps-page .ap-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: -80px;
    height: 600px;
    pointer-events: none;
    --bw: 46deg;
    --b0: calc(180deg - var(--bw) / 2);
    background:
      radial-gradient(ellipse 34% 12% at 50% 13%, #ffc48a2b 0%, transparent 72%),
      conic-gradient(from var(--b0) at 50% -24%,
        transparent 0deg,
        #ffae6a1f calc(var(--bw) * .184),
        #ffc48a47 calc(var(--bw) * .368),
        #ffd3a25c calc(var(--bw) * .5),
        #ffc48a47 calc(var(--bw) * .632),
        #ffae6a1f calc(var(--bw) * .816),
        transparent var(--bw));
    -webkit-mask-image: linear-gradient(180deg, #0000 0%, #000 16%, #000 42%, transparent 88%);
            mask-image: linear-gradient(180deg, #0000 0%, #000 16%, #000 42%, transparent 88%);
    opacity: .5;
  }
}
.apps-page .ap-copy { position: relative; min-width: 0; }

/* Luz. Três camadas, dentro da caixa do palco: névoa fria de ciclorama,
   contraluz azul e o feixe âmbar. Só gradiente: zero blur. */
.apps-page .ap-lights { position: absolute; inset: -16% 0 -4%; z-index: -1; pointer-events: none; --lx: 50%; }
.apps-page .ap-light { position: absolute; inset: 0; display: block; }
.apps-page .ap-light--haze {
  background: radial-gradient(ellipse 62% 42% at var(--lx) 58%, #1f33505c 0%, #14223533 45%, transparent 75%);
}
.apps-page .ap-light--rim {
  background:
    radial-gradient(ellipse 34% 24% at var(--lx) 44%, #3d8bff30 0%, #3d8bff12 45%, transparent 72%),
    radial-gradient(ellipse 26% 26% at calc(var(--lx) + 26%) 54%, #3d8bff24 0%, transparent 70%),
    radial-gradient(ellipse 22% 24% at calc(var(--lx) - 27%) 58%, #3d8bff1c 0%, transparent 72%);
}
.apps-page .ap-light--beam {
  /* Um cone de luz vindo de cima. --bw é a abertura; os mesmos degraus
     servem ao feixe central (notebook) e aos dois laterais (iPad e
     celular), que acendem quando a plataforma escolhida é móvel. */
  --bw: 38deg;
  --b0: calc(180deg - var(--bw) / 2);
  background:
    radial-gradient(ellipse 22% 9% at var(--lx) 20%, #ffc48a24 0%, transparent 70%),
    repeating-conic-gradient(from var(--b0) at var(--lx) -34%, #ffd9b000 0deg 1.1deg, #ffd9b00d 1.1deg 1.6deg, #ffd9b000 1.6deg 2.9deg),
    conic-gradient(from var(--b0) at var(--lx) -34%,
      transparent 0deg,
      #ffae6a12 calc(var(--bw) * .184),
      #ffc48a2b calc(var(--bw) * .368),
      #ffd3a23d calc(var(--bw) * .5),
      #ffc48a2b calc(var(--bw) * .632),
      #ffae6a12 calc(var(--bw) * .816),
      transparent var(--bw));
  -webkit-mask-image:
    linear-gradient(180deg, #0000 0%, #000 12%, #000 50%, transparent 94%),
    conic-gradient(from var(--b0) at var(--lx) -34%, #0000 0deg, #000 calc(var(--bw) * .263), #000 calc(var(--bw) * .737), #0000 var(--bw));
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, #0000 0%, #000 12%, #000 50%, transparent 94%),
    conic-gradient(from var(--b0) at var(--lx) -34%, #0000 0deg, #000 calc(var(--bw) * .263), #000 calc(var(--bw) * .737), #0000 var(--bw));
          mask-composite: intersect;
  transition: opacity .7s var(--ap-ease);
}
/* O foco de luz segue a plataforma: notebook para Online, Windows e Mac;
   iPad e celular para iPhone e iPad; só o celular para Android. O feixe
   central não apaga de vez — baixa, para o palco continuar de pé. */
.apps-page .ap-light--beam-l { --lx: 13.5%; --bw: 28deg; opacity: 0; }
.apps-page .ap-light--beam-r { --lx: 88%; --bw: 26deg; opacity: 0; }
.apps-page[data-focus="mobile"] .ap-light--beam-c,
.apps-page[data-focus="phone"] .ap-light--beam-c { opacity: .28; }
.apps-page[data-focus="mobile"] .ap-light--beam-l,
.apps-page[data-focus="mobile"] .ap-light--beam-r,
.apps-page[data-focus="phone"] .ap-light--beam-r { opacity: 1; }

/* ---------- 2. TEXTO ---------------------------------------- */

/* A gramática de abertura de toda página (pgHead() nos painéis): o
   micro-rótulo `.bf-kicker` do pages.css — aqui com o ícone do app de
   20px no lugar do ponto e a etiqueta branca do chassi "Versão 14" —,
   o título em duas linhas e o lead. 10px do micro-rótulo ao título,
   14px do título ao lead. As regras de desenho do micro-rótulo são as
   do pages.css; aqui só o encaixe. */
.apps-page .ap-eyebrow { margin: 0 0 10px; }
.apps-page .ap-eyebrow__icon {
  border-radius: 5px;
  box-shadow: 0 0 0 1px #ffffff1f, 0 0 12px -2px #ff782d66;
}
.apps-page .ap-eyebrow__ver { white-space: nowrap; }

.apps-page .ap-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-title, 108);
  font-size: var(--t-page);
  line-height: var(--lh-title, 1.02);
  letter-spacing: var(--ls-title, -.035em);
  color: var(--title-ink, #f5f8fc);
  text-wrap: balance;
}
.apps-page .ap-title__line { display: block; }
.apps-page .ap-title__line--hot {
  color: var(--hot-ink, #ff9a4c);
  background: var(--hot);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;   /* o descendente do "q" não é cortado pelo clip */
}
.apps-page .ap-lead {
  max-width: 34em;
  margin: 14px 0 0;
  color: var(--ap-ink-2);
  font-size: var(--t-lead);
  line-height: var(--lh-lead, 1.55);
  text-wrap: pretty;
}

/* ---------- 3. DOCK DE PLATAFORMAS -------------------------- */

.apps-page .ap-get { position: relative; min-width: 0; margin-top: 20px; }
.apps-page .ap-get__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
/* Rótulo de cartão: neutro, mono 600, .14em — o mesmo .pg-label. */
.apps-page .ap-label {
  margin: 0;
  white-space: nowrap;
  color: var(--ap-ink-2);
  font: 600 var(--ap-min)/1.3 var(--font-mono);
  letter-spacing: var(--ls-micro, .14em);
  text-transform: uppercase;
}
/* Botões secundários (.ap-help-btn, .ap-link-btn): o .pg-ghost do
   sistema — neutros, raio de botão (nunca pílula), 48px no celular e
   56px CSS no desktop (44,8 na tela). */
.apps-page :is(.ap-help-btn, .ap-link-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--btn2-h, 48px);
  padding: 10px 18px;
  border: 1px solid var(--ap-line-2);
  border-radius: var(--r-btn, 14px);
  background: var(--ghost-bg, #0f1824cc);
  color: var(--ap-ink);
  font: 600 var(--btn2-fs, 15px)/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.apps-page .ap-help-btn { flex: none; padding-left: 14px; }
.apps-page .ap-help-btn svg { width: 20px; height: 20px; flex: none; color: var(--ap-ink-2); }
.apps-page :is(.ap-help-btn, .ap-link-btn):active { transform: translateY(1px); }
@media (hover: hover) {
  .apps-page :is(.ap-help-btn, .ap-link-btn):hover { border-color: var(--ghost-edge-hover, #ffffff4d); background-color: var(--ghost-bg-hover, #16212fcc); }
}

.apps-page .ap-dock {
  --gap: 6px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: var(--gap);
  row-gap: 0;
  container: apdock / inline-size;
}
/* As teclas são as do próprio editor: grafite, cantos generosos, luz de
   cima e sombra de base — e a selecionada acende laranja. Grade fixa
   (subgrid) em todas: ícone / nome / subtítulo, na mesma linha de base
   de tecla para tecla, mesmo quando "iPhone e iPad" quebra. */
.apps-page .ap-key {
  position: relative;
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 5px;
  justify-items: center;
  align-content: start;
  min-width: 0;
  min-height: 44px;
  padding: 11px 2px 9px;
  border: 1px solid #a6bedd29;
  border-radius: var(--r-nav, 18px);
  background: linear-gradient(180deg, #1e2a3a 0%, #141d2a 62%, #101722 100%);
  box-shadow:
    inset 0 1px 0 #ffffff17,
    inset 0 -2px 0 #0000005c,
    0 2px 0 #05080c,
    0 12px 22px -14px #000;
  color: var(--ap-ink-2);
  text-align: center;
  cursor: pointer;
  transition: transform .18s var(--ap-ease), border-color .18s, color .18s, box-shadow .18s;
}
@supports not (grid-template-rows: subgrid) {
  .apps-page .ap-key { display: flex; flex-direction: column; align-items: center; gap: 5px; }
}
.apps-page .ap-key__cap { display: grid; place-items: center; width: 28px; height: 28px; }
.apps-page .ap-key__cap svg { width: 25px; height: 25px; }
.apps-page .ap-key__name {
  display: block;
  align-self: start;
  max-width: 100%;
  font: 600 clamp(max(12px, var(--ap-min)), 2.45cqi, 17px)/1.15 var(--font-body);
  text-wrap: balance;
}
.apps-page .ap-key__sub {
  display: block;
  align-self: start;
  max-width: 100%;
  color: var(--ap-ink-3);
  font: 500 var(--ap-min)/1.2 var(--font-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
/* Três tamanhos do subtítulo: por extenso ("Windows 10/11") no dock
   largo, abreviado ("Win 10/11") no médio e só o número no estreito. */
.apps-page .ap-key__sub :is(.ap-m, .ap-s) { display: none; }
@container apdock (max-width: 639px) {
  .apps-page .ap-key__sub .ap-l { display: none; }
  .apps-page .ap-key__sub .ap-m { display: inline; }
  .apps-page .ap-key__sub { letter-spacing: -.02em; }
}
@container apdock (max-width: 349px) {
  .apps-page .ap-key__sub :is(.ap-lm, .ap-m) { display: none; }
  .apps-page .ap-key__sub .ap-s { display: inline; }
  .apps-page .ap-key__sub { letter-spacing: 0; }
}
/* No desktop o subtítulo tem 14px (e não 11): a forma curta entra antes. */
@media (min-width: 861px) {
  @container apdock (max-width: 449px) {
    .apps-page .ap-key__sub :is(.ap-lm, .ap-m) { display: none; }
    .apps-page .ap-key__sub .ap-s { display: inline; }
    .apps-page .ap-key__sub { letter-spacing: 0; }
  }
}
/* LED de "seu dispositivo": fica aceso na tecla do visitante mesmo depois
   de escolher outra, para ele achar o caminho de volta. */
.apps-page .ap-key__led {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a3645;
  box-shadow: inset 0 1px 1px #0008;
}
.apps-page .ap-key.is-rec .ap-key__led { background: var(--ap-ok); box-shadow: 0 0 0 2px #39d98a26, 0 0 10px #39d98a; }
@media (hover: hover) {
  .apps-page .ap-key:hover { color: var(--ap-ink); border-color: #a6bedd4d; transform: translateY(-2px); }
}
.apps-page .ap-key:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #0000005c, 0 1px 0 #05080c; }
.apps-page .ap-key[aria-selected="true"] {
  /* A tecla escolhida acende como TODA peça acesa da navegação (a pílula
     da vista aberta, as teclas APP e engrenagem): fundo âmbar escuro,
     aresta e tinta pêssego, anel laranja. O laranja CHEIO fica só no
     botão de baixar (.ap-cta) — antes eram duas placas laranja, uma
     sobre a outra, e a tecla parecia um segundo botão de compra. */
  color: var(--chrome-on-ink, #ffd2a4);
  border-color: var(--chrome-on-edge, #e7a36b);
  background: var(--chrome-on-bg, linear-gradient(155deg, #3a2a1f, #231a14));
  box-shadow:
    var(--chrome-util-on, 0 0 0 2px #ff8e3e, 0 0 24px #ff7a3355),
    inset 0 1px 0 #ffd7ad2e,
    0 12px 22px -14px #000;
}
.apps-page .ap-key[aria-selected="true"] .ap-key__sub { color: var(--chrome-on-ink, #ffd2a4); }
.apps-page .ap-key[aria-selected="true"]:hover { transform: none; }
/* Android: ainda não existe — a tecla fica tracejada, como algo por vir. */
.apps-page .ap-key--soon:not([aria-selected="true"]) {
  border-style: dashed;
  border-color: #a6bedd4a;
  background: linear-gradient(180deg, #172230 0%, #111925 100%);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 12px 22px -14px #000;
}
.apps-page .ap-key--soon:not([aria-selected="true"]) .ap-key__cap { opacity: .72; }
.apps-page .ap-key--soon .ap-key__sub { color: var(--ap-ink-2); }

/* ---------- 4. CARTÃO DA PLATAFORMA -------------------------- */

.apps-page .ap-plats { display: grid; gap: 10px; container: applats / inline-size; }
/* Com JS: um cartão só, preso ao dock por uma seta que aponta a tecla. */
.apps-page.is-js .ap-plats { display: block; position: relative; margin-top: 14px; --i: 0; }
.apps-page.is-js .ap-plats::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -8px;
  left: calc((100% + var(--gap, 6px)) * (var(--i) * 2 + 1) / 10 - var(--gap, 6px) / 2 - 8px);
  width: 16px;
  height: 16px;
  rotate: 45deg;
  border-radius: 4px 0 0 0;
  border-top: 1px solid #ffb07061;
  border-left: 1px solid #ffb07061;
  background: #1a2433;
  transition: left .3s var(--ap-ease);
}
.apps-page .ap-get { --gap: 6px; }

.apps-page .ap-plat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--ap-line-2);
  border-radius: var(--r-card, 22px);
  background:
    radial-gradient(120% 90% at 0% 0%, #ff8a3d14 0%, transparent 46%),
    linear-gradient(180deg, #1a2433f2 0%, #111925f5 60%, #0d141ef7 100%);
  box-shadow: inset 0 1px 0 #ffffff12, 0 26px 60px -34px #000;
}
.apps-page.is-js .ap-plat { border-color: #ffb07047; }

.apps-page .ap-plat__top {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "icon flags" "icon id";
  align-items: center;
  gap: 5px 14px;
}
.apps-page .ap-plat__flags { grid-area: flags; display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.apps-page .ap-plat__flags:not(:has(> :not([hidden]))) { display: none; }
.apps-page .ap-plat__icon { grid-area: icon; align-self: center; position: relative; width: 52px; height: 52px; }
.apps-page .ap-plat__icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #ffffff1f, 0 10px 22px -10px #000, 0 0 24px -8px #ff782d66;
}
.apps-page .ap-plat__id { grid-area: id; min-width: 0; }
.apps-page .ap-plat h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-title, 108);
  font-size: var(--t-card, 22px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--title-ink, #f5f8fc);
}
.apps-page .ap-plat__sub { color: var(--ap-ink-2); font-weight: 600; font-variation-settings: 'wdth' var(--wdth-phrase, 100); font-size: .7em; letter-spacing: 0; }
.apps-page .ap-plat__req { display: flex; align-items: flex-start; gap: 7px; margin: 3px 0 0; color: var(--ap-ink-2); font-size: 14px; line-height: 1.4; }
.apps-page .ap-plat__req > span { text-wrap: balance; }
/* O glifo da plataforma abre a linha do requisito — fora do ícone do app,
   para não cobrir a marca. */
.apps-page .ap-plat__os { flex: none; width: 1.05em; height: 1.05em; margin-top: .175em; color: #e6ecf4; }
.apps-page .ap-plat__text { margin: 0; color: var(--ap-ink-2); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }

.apps-page .ap-rec,
.apps-page .ap-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  font: 600 max(13px, var(--ap-min))/16px var(--font-body);
  white-space: nowrap;
}
.apps-page .ap-rec { color: #b5f2d0; background: #39d98a17; border: 1px solid #39d98a4d; }
.apps-page .ap-rec::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ap-ok); box-shadow: 0 0 8px var(--ap-ok); }
/* "Em breve": estado inativo inequívoco — tracejado, apagado, sem cara de
   botão (não é link, não recebe foco, não reage ao mouse). */
.apps-page .ap-soon {
  color: var(--ap-ink-2);
  background: transparent;
  border: 1.5px dashed #a6bedd5c;
}
.apps-page .ap-soon svg { width: 16px; height: 16px; flex: none; color: var(--ap-ink-2); }
/* Cartão estreito: "Em breve" — o "no Google Play" fica para o leitor de
   tela (e está no texto do cartão), para as duas fichas caberem numa linha. */
@container applats (max-width: 459px) {
  .apps-page .ap-soon__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Etiquetas de porta, iguais às serigrafadas no chassi da 8SW+. */
.apps-page .ap-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.apps-page .ap-tags li {
  padding: 5px 7px 4px;
  border-radius: var(--r-tag, 3px);
  background: var(--tag-bg, #e6eaf0);
  color: var(--tag-ink, #0b0d11);
  font: 700 var(--ap-min)/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 #000a, inset 0 -1px 0 #0000001f;
}

.apps-page .ap-plat__act { display: flex; flex-direction: column; align-items: stretch; gap: 2px; scroll-margin: 96px 0 160px; }
/* Primário: o .pg-cta do sistema — 52px no celular, 64px CSS no
   desktop (51 na tela), raio de botão. */
.apps-page .ap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--btn-h, 52px);
  padding: 12px var(--btn-px, 24px);
  border: 1px solid var(--cta-edge, #ffc17e99);
  border-radius: var(--r-btn, 14px);
  background: var(--ap-cta);
  color: var(--ap-cta-ink);
  font: 700 var(--btn-fs, 16px)/1.2 var(--font-body);
  letter-spacing: .005em;
  text-decoration: none;
  box-shadow: var(--cta-shadow), inset 0 -2px 0 #b8401433;
  transition: filter .15s, transform .15s var(--ap-ease);
}
.apps-page .ap-cta svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) {
  .apps-page .ap-cta:hover { color: var(--ap-cta-ink); filter: brightness(1.07); transform: translateY(-1px); }
}
.apps-page .ap-cta:active { transform: translateY(1px); }
.apps-page .ap-cta:focus-visible { outline-color: #fff; }
.apps-page .ap-plat__file {
  margin: 6px 0 0;
  text-align: center;
  color: var(--ap-ink-2);
  font: 500 var(--ap-min)/1.3 var(--font-mono);
  letter-spacing: .02em;
}
/* No cartão o secundário acompanha o primário: a mesma largura, logo
   abaixo da linha do arquivo. */
.apps-page .ap-plat__act .ap-link-btn { margin-top: 10px; padding-inline: 14px; }
/* A linha mono da loja e o "Como conectar" só existem no cartão do
   desktop, onde completam a coluna do botão como o Windows faz com o
   arquivo e o guia. No celular o cartão fica enxuto. */
.apps-page :is(.ap-plat__meta, .ap-plat__jump) { display: none; }
/* Cartão compacto (celular): uma frase só. A segunda continua para o
   leitor de tela, e as fichas saem — a seção "Conecte do seu jeito"
   logo abaixo traz as mesmas etiquetas. */
@container aps (max-width: 599px) {
  .apps-page .ap-plat__t2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .apps-page .ap-plat .ap-tags { display: none; }
}

/* Android: o caminho real hoje — o editor que vem do próprio pedal. */
/* É a rota do Wi‑Fi do pedal: o ponto de LED leva a cor do assunto
   (--led-wireless, a mesma da célula "Wi‑Fi do pedal" logo abaixo) e o
   rótulo fica neutro. */
.apps-page .ap-path {
  display: grid;
  gap: 8px;
  padding: 12px 14px 8px;
  border-radius: var(--r-well, 18px);
  background: var(--well, #0c1118e6);
  box-shadow: var(--well-shadow, inset 0 1px 3px #0009, inset 0 0 0 1px #ffffff0c);
}
.apps-page .ap-path__k {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ap-ink-2);
  font: 600 var(--ap-min)/1.3 var(--font-mono);
  letter-spacing: var(--ls-micro, .14em);
  text-transform: uppercase;
}
.apps-page .ap-path__k::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--led-wireless, #b07cff); box-shadow: 0 0 10px var(--led-wireless, #b07cff); }
.apps-page .ap-path__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* Dois passos, na ordem em que se faz: primeiro a rede, depois o endereço.
   O número vai numa tecla grafite, como as do editor. */
.apps-page .ap-path__steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.apps-page .ap-path__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2b3647, #18212e);
  box-shadow: inset 0 1px 0 #ffffff1a, 0 2px 0 #05080c;
  color: #f5f7fa;
  font: 800 max(12px, var(--ap-min))/1 var(--font-mono);
}
.apps-page .ap-path__steps li + li .ap-path__n { margin-top: 9px; }
.apps-page .ap-path__net { margin: 2px 0 0; color: var(--ap-ink-2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.apps-page .ap-path__net b { color: var(--ap-ink); font-weight: 600; }
.apps-page .ap-path__go { display: flex; flex-wrap: wrap; align-items: center; column-gap: 9px; margin: 0; }
.apps-page .ap-path__verb { color: var(--ap-ink-2); font-size: 14px; }
.apps-page .ap-path__addr {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: var(--ap-hit, 44px);
  color: #f7fafd;
  font: 700 21px/1.2 var(--font-mono);
  letter-spacing: -.01em;
  text-decoration: underline;
  text-decoration-color: #eef3fa59;
  text-underline-offset: 6px;
}
.apps-page .ap-path__addr svg { width: 18px; height: 18px; flex: none; color: var(--ap-ink-2); }
.apps-page .ap-path__addr:hover { text-decoration-color: currentColor; }
/* Cartão estreito: os passos do Android apertam para "Abra" e o endereço
   caberem na mesma linha. */
@container applats (max-width: 459px) {
  .apps-page .ap-path { gap: 6px; padding: 10px 12px 6px; }
  .apps-page .ap-path__steps { gap: 4px; }
  .apps-page .ap-path__steps li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
  .apps-page .ap-path__n { width: 24px; height: 24px; }
  .apps-page .ap-path__steps li + li .ap-path__n { margin-top: 10px; }
  .apps-page .ap-path__addr { gap: 6px; font-size: 18px; }
  .apps-page .ap-path__addr svg { width: 16px; height: 16px; }
  .apps-page .ap-path__go { column-gap: 7px; }
}
/* Bem estreito (320–360): o "Abra" fica só para o leitor de tela — o
   endereço é um link com a seta de abrir, e o passo 2 cabe numa linha. */
@container applats (max-width: 349px) {
  .apps-page .ap-path__verb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 5. OS APARELHOS --------------------------------- */

.apps-page .ap-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.34;
  margin: 8px 0 0;
  container: apstage / inline-size;
  --mx: 0;
  --my: 0;
}
/* Chão: poça quente onde o feixe pousa e a linha do palco. A poça do
   centro é do notebook; com foco nos móveis ela baixa e a luz passa para
   as poças de cada aparelho (.ap-dev__glow). */
.apps-page .ap-stage__floor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 11% at 50% 93%, #ff8a3d2e 0%, #ff8a3d0f 45%, transparent 72%);
  transition: opacity .7s var(--ap-ease);
}
.apps-page:is([data-focus="mobile"], [data-focus="phone"]) .ap-stage__floor::before { opacity: .3; }
.apps-page .ap-stage__floor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 6% at 50% 97%, #00000080 0%, transparent 70%),
    linear-gradient(90deg, transparent 6%, #a6bedd1c 30%, #ffc48a2e 50%, #a6bedd1c 70%, transparent 94%) 0 97.5% / 100% 1px no-repeat;
}

.apps-page .ap-dev {
  position: absolute;
  margin: 0;
  container-type: inline-size;
  --depth: 8px;
  translate: calc(var(--mx) * var(--depth)) calc(var(--my) * var(--depth) * .55);
  transition: translate .9s var(--ap-ease);
}
.apps-page .ap-dev__in { position: relative; }
.apps-page .ap-screen {
  position: relative;
  overflow: hidden;
  background: #0d1015;
}
.apps-page .ap-screen img { display: block; width: 100%; height: auto; }
/* Reflexo do vidro: uma varredura diagonal, bem baixa. */
.apps-page .ap-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, #ffffff1c 0%, #ffffff08 24%, transparent 40%, transparent 78%, #ffffff06 100%);
}
/* Luz que o palco joga no aparelho escolhido no dock. */
.apps-page .ap-dev__glow {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -9%;
  height: 22%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, #ff9a4d7a, #ff8a3d29 52%, transparent);
  opacity: 0;
  transition: opacity .7s var(--ap-ease);
}
.apps-page[data-focus="desk"] .ap-mac .ap-dev__glow,
.apps-page[data-focus="mobile"] :is(.ap-ipad, .ap-phone) .ap-dev__glow,
.apps-page[data-focus="phone"] .ap-phone .ap-dev__glow { opacity: 1; }
/* No iPad e no celular a poça de luz fica POR CIMA da sombra projetada do
   corpo (escura e larga, e que a cobria por inteiro): nasce na borda de
   baixo do aparelho e se espalha pelo chão à frente dele. */
.apps-page :is(.ap-ipad, .ap-phone) .ap-dev__glow {
  z-index: 1;
  top: 96.5%;
  bottom: auto;
  left: -26%;
  right: -26%;
  height: 15%;
  background: radial-gradient(closest-side, #ffa75e99, #ff8a3d38 50%, transparent);
}
.apps-page .ap-phone .ap-dev__glow { top: 97.5%; left: -42%; right: -42%; height: 10%; }
/* Halo quente atrás do aparelho escolhido: o destaca do fundo. */
.apps-page :is(.ap-ipad, .ap-phone)::before {
  content: '';
  position: absolute;
  inset: -9% -30% -3%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, #ff965033, #ff8a3d12 58%, transparent);
  opacity: 0;
  transition: opacity .7s var(--ap-ease);
}
.apps-page[data-focus="mobile"] :is(.ap-ipad, .ap-phone)::before,
.apps-page[data-focus="phone"] .ap-phone::before { opacity: 1; }
/* E a tela do notebook baixa quando o foco vai para os móveis. */
.apps-page .ap-mac .ap-screen img { transition: opacity .7s var(--ap-ease); }
.apps-page:is([data-focus="mobile"], [data-focus="phone"]) .ap-mac .ap-screen img { opacity: .58; }

/* Notebook (genérico: sem logo) ------------------------------- */
.apps-page .ap-mac { container: apmac / inline-size; left: 5%; top: 5%; width: 80%; z-index: 1; --depth: 5px; }
.apps-page .ap-mac__lid {
  position: relative;
  padding: 1.9cqi 1.7cqi 2.6cqi;
  border-radius: 3.1cqi 3.1cqi 1.2cqi 1.2cqi;
  background: linear-gradient(180deg, #07080a, #030405);
  box-shadow:
    0 0 0 .28cqi #3a4049,
    0 0 0 .46cqi #0b0d10,
    inset 0 0 0 .16cqi #1b1f25,
    0 -1.2cqi 4cqi -1cqi #ffb57030,
    0 3cqi 7cqi -2cqi #000;
}
/* A tela acesa tinge a névoa em volta da tampa — é o que faz o aparelho
   parecer LIGADO e não colado na página. */
.apps-page .ap-mac__lid::before {
  content: '';
  position: absolute;
  inset: -9% -7% -4%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 46% at 30% 55%, #8f5bff1c, transparent 70%),
    radial-gradient(ellipse 46% 44% at 72% 48%, #ff7a2f17, transparent 70%),
    radial-gradient(ellipse 60% 55% at 50% 50%, #9fc3ff12, transparent 75%);
}
.apps-page .ap-mac__cam {
  position: absolute;
  top: .72cqi;
  left: 50%;
  width: .7cqi;
  height: .7cqi;
  margin-left: -.35cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3a4a, #07090c 70%);
}
/* A tela é o screenshot do Mac SEM a barra de título dele (32px no topo
   e a borda escura de 16px à direita ficam fora do recorte): a barra
   quem desenha é o CSS abaixo, conforme a plataforma. */
.apps-page .ap-mac .ap-screen { aspect-ratio: 1424 / 868; border-radius: 0 0 .9cqi .9cqi; }
.apps-page .ap-mac .ap-screen img { position: absolute; left: 0; bottom: 0; width: 101.124%; max-width: none; height: auto; }
/* Brilho que atravessa a tela uma vez, quando ela "liga". Parado, fica
   invisível — só a animação o mostra. */
.apps-page .ap-mac .ap-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg, transparent 38%, #ffffff1a 48%, #ffffff2b 50%, #ffffff1a 52%, transparent 62%);
}

/* Barra da janela ------------------------------------------------ */
.apps-page .ap-chrome {
  position: relative;
  height: 4.4cqi;
  overflow: hidden;
  border-radius: .9cqi .9cqi 0 0;
  background: linear-gradient(180deg, #1c2027, #14171c);
  box-shadow: inset 0 -1px 0 #000, inset 0 1px 0 #ffffff0f;
  color: #c9d1dc;
}
.apps-page .ap-chrome__v {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 1.3cqi;
  padding: 0 1.5cqi;
  opacity: 0;
  transition: opacity .45s var(--ap-ease);
}
/* Os rótulos da barra são DESENHO, não texto de interface (a barra toda é
   aria-hidden): SVG com viewBox, que escala junto com o aparelho — como o
   texto miúdo dos screenshots —, e a barra nunca fica vazia em tela
   pequena. O textLength segura a largura mesmo se a fonte mudar. */
.apps-page .ap-chrome__txt {
  display: block;
  flex: none;
  width: auto;
  height: 2.2cqi;
  overflow: visible;
  fill: currentColor;
  font: 500 16px var(--font-body);
}
/* Navegador (sem JS, Online, iPhone e iPad, Android) */
.apps-page .ap-chrome--web { opacity: 1; }
.apps-page .ap-chrome__nav { display: inline-flex; gap: .3cqi; color: #7f8a99; }
.apps-page .ap-chrome__nav svg { width: 2.2cqi; height: 2.2cqi; }
.apps-page .ap-chrome__tab {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .9cqi;
  flex: 0 1 22%;
  min-width: 0;
  height: 3cqi;
  padding: 0 1.3cqi;
  border-radius: .8cqi;
  background: #272c35;
  box-shadow: inset 0 1px 0 #ffffff12;
}
.apps-page .ap-chrome__tab i { flex: none; width: 1.5cqi; height: 1.5cqi; border-radius: .4cqi; background: linear-gradient(155deg, #ffb765, #ff7838); }
.apps-page .ap-chrome__url {
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .8cqi;
  flex: 1 1 auto;
  min-width: 0;
  height: 3cqi;
  padding: 0 1.3cqi;
  border-radius: 1.5cqi;
  background: #0d1014;
  box-shadow: inset 0 0 0 1px #ffffff12;
  color: #b9c3d0;
}
.apps-page .ap-chrome__url svg:not(.ap-chrome__txt) { flex: none; width: 1.7cqi; height: 1.7cqi; color: #7fd6a4; }
/* macOS */
.apps-page .ap-chrome__lights { display: inline-flex; gap: .8cqi; }
.apps-page .ap-chrome__lights i { width: 1.25cqi; height: 1.25cqi; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .12cqi #0000002e; }
.apps-page .ap-chrome__lights i:nth-child(2) { background: #febc2e; }
.apps-page .ap-chrome__lights i:nth-child(3) { background: #28c840; }
/* Windows */
.apps-page .ap-chrome--win { padding-right: 0; }
.apps-page .ap-chrome__app { flex: none; width: 1.9cqi; height: 1.9cqi; border-radius: .45cqi; background: linear-gradient(155deg, #ffb765, #ff7838); }
.apps-page .ap-chrome__ctrls { display: flex; height: 100%; margin-left: auto; }
.apps-page .ap-chrome__ctrls svg { width: 5.4cqi; height: 100%; padding: 0 1.75cqi; color: #c9d1dc; }
.apps-page[data-plat="mac"] .ap-chrome--web,
.apps-page[data-plat="windows"] .ap-chrome--web { opacity: 0; }
.apps-page[data-plat="mac"] .ap-chrome--mac,
.apps-page[data-plat="windows"] .ap-chrome--win { opacity: 1; }

.apps-page .ap-mac__base {
  position: relative;
  width: 114cqi;
  height: 3.1cqi;
  margin: 0 0 0 -7cqi;
  border-radius: .35cqi .35cqi 50% 50% / .35cqi .35cqi 100% 100%;
  background:
    linear-gradient(90deg, #00000073, transparent 9%, transparent 91%, #00000073),
    linear-gradient(180deg, #9aa0aa 0%, #4a5059 13%, #2a2f36 42%, #16191e 78%, #0c0e11 100%);
  box-shadow: 0 1.4cqi 2.6cqi -1cqi #000;
}
/* Rebaixo para abrir a tampa. */
.apps-page .ap-mac__base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 15cqi;
  height: 1cqi;
  margin-left: -7.5cqi;
  border-radius: 0 0 1.4cqi 1.4cqi;
  background: linear-gradient(180deg, #0f1114, #262a31);
}
/* Sombra de contato. */
.apps-page .ap-mac .ap-dev__in::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -2.2cqi;
  height: 4cqi;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, #000000d9, #00000059 60%, transparent);
}
.apps-page .ap-mac .ap-dev__glow { bottom: -7%; height: 18%; }

/* iPad ----------------------------------------------------------- */
/* No celular o iPad sai de cena. `visibility` e não `display` no aparelho:
   trocar o display por container query reinicia a animação de entrada a
   cada recálculo. Mas a IMAGEM dele leva display:none — é o que impede o
   navegador de baixar (lazy) uma tela que o celular nunca mostra. */
.apps-page .ap-ipad { visibility: hidden; left: .5%; bottom: 4%; width: 27%; z-index: 2; --depth: 12px; }
@container aps (max-width: 699px) {
  .apps-page .ap-ipad .ap-screen img,
  .apps-page .ap-ipad .ap-dev__glow,
  .apps-page .ap-light--beam-l { display: none; }
  /* No celular a poça do telefone não passa da borda da tela. */
  .apps-page .ap-phone .ap-dev__glow { left: -10%; right: -10%; }
}
.apps-page .ap-ipad__body {
  position: relative;
  padding: 3.7cqi;
  border-radius: 7cqi;
  background: #040506;
  box-shadow:
    0 0 0 .75cqi #333a43,
    0 0 0 1.05cqi #0a0c0f,
    inset 0 0 0 .4cqi #14171c,
    inset 1.1cqi 0 1.4cqi -1cqi #ffc0852b,
    -1.5cqi -1cqi 4cqi -2.5cqi #ffb0703d,
    3cqi 6cqi 10cqi -4cqi #000;
}
.apps-page .ap-ipad .ap-screen { border-radius: 3.4cqi; }
.apps-page .ap-ipad .ap-screen::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #0d1015; opacity: 0; transition: opacity .7s var(--ap-ease); }
/* Android: a luz é só do celular; o iPad apaga como o notebook. */
.apps-page[data-focus="phone"] .ap-ipad .ap-screen::before { opacity: .42; }
.apps-page .ap-ipad__cam {
  position: absolute;
  top: 1.45cqi;
  left: 50%;
  width: 1cqi;
  height: 1cqi;
  margin-left: -.5cqi;
  border-radius: 50%;
  background: #121821;
}
.apps-page .ap-ipad .ap-dev__in::after,
.apps-page .ap-phone .ap-dev__in::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -4cqi;
  height: 8cqi;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, #000000e6, #0000004d 60%, transparent);
}

/* iPhone --------------------------------------------------------- */
.apps-page .ap-phone { right: 1%; bottom: 3%; width: 24.5%; z-index: 3; --depth: 16px; }
.apps-page .ap-phone__body {
  position: relative;
  padding: 3.3cqi;
  border-radius: 16.5cqi;
  background: #030405;
  box-shadow:
    0 0 0 1.15cqi #4a505a,
    0 0 0 1.6cqi #0c0e11,
    inset 0 0 0 .55cqi #15181d,
    inset -1.6cqi 0 2cqi -1.4cqi #9cc2ff26,
    2cqi -2cqi 6cqi -4cqi #ffb0704d,
    -4cqi 8cqi 14cqi -6cqi #000;
}
/* Botões laterais: ação + volume à esquerda, lateral à direita. */
.apps-page .ap-phone__body::before,
.apps-page .ap-phone__body::after {
  content: '';
  position: absolute;
  width: 1.3cqi;
  border-radius: 1cqi;
  background: linear-gradient(90deg, #2b3037, #5a616b);
}
.apps-page .ap-phone__body::before { left: -2.7cqi; top: 22%; height: 17%; box-shadow: 0 -11cqi 0 0 #3a4048; }
.apps-page .ap-phone__body::after { right: -2.7cqi; top: 30%; height: 13%; background: linear-gradient(90deg, #5a616b, #2b3037); }
.apps-page .ap-phone .ap-screen { border-radius: 13.4cqi; }
.apps-page .ap-phone__island {
  position: absolute;
  top: 2.9cqi;
  left: 50%;
  width: 30cqi;
  height: 8.6cqi;
  margin-left: -15cqi;
  border-radius: 99px;
  background: #000;
  box-shadow: inset 0 0 0 .3cqi #0c0d10;
  transition: opacity .45s var(--ap-ease);
}
/* Android: a ilha do iPhone vira um furo de câmera. */
.apps-page .ap-phone__hole {
  position: absolute;
  top: 3.4cqi;
  left: 50%;
  width: 7.6cqi;
  height: 7.6cqi;
  margin-left: -3.8cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #1d2733 0 18%, #05070a 46%, #000 70%);
  box-shadow: inset 0 0 0 .3cqi #0c0d10;
  opacity: 0;
  transition: opacity .45s var(--ap-ease);
}
.apps-page[data-plat="android"] .ap-phone__island { opacity: 0; }
.apps-page[data-plat="android"] .ap-phone__hole { opacity: 1; }
/* Celular: sai o que custa pintura e não aparece nesse tamanho — os raios
   de poeira do feixe, a contraluz lateral e a névoa em volta da tampa. */
@container aps (max-width: 599px) {
  .apps-page .ap-light--beam {
    background:
      radial-gradient(ellipse 22% 9% at var(--lx) 20%, #ffc48a24 0%, transparent 70%),
      conic-gradient(from var(--b0) at var(--lx) -34%, transparent 0deg, #ffae6a12 calc(var(--bw) * .184), #ffc48a2b calc(var(--bw) * .368), #ffd3a23d calc(var(--bw) * .5), #ffc48a2b calc(var(--bw) * .632), #ffae6a12 calc(var(--bw) * .816), transparent var(--bw));
    -webkit-mask-image: linear-gradient(180deg, #0000 0%, #000 12%, #000 50%, transparent 94%);
            mask-image: linear-gradient(180deg, #0000 0%, #000 12%, #000 50%, transparent 94%);
  }
  .apps-page .ap-light--beam-r { --lx: 86.5%; }
  .apps-page .ap-light--rim { background: radial-gradient(ellipse 34% 24% at var(--lx) 44%, #3d8bff30 0%, #3d8bff12 45%, transparent 72%); }
  .apps-page .ap-mac__lid::before { content: none; }
}
/* Reflexo sutil no chão — só onde há área para ele (no celular, fora). */
@container aps (min-width: 600px) {
  .apps-page :is(.ap-ipad, .ap-phone) .ap-dev__in {
    -webkit-box-reflect: below 1.2cqi linear-gradient(180deg, transparent 84%, #ffffff12 100%);
  }
}

/* ---------- 6. ABAIXO DA DOBRA ------------------------------ */

/* O ritmo do sistema: --gap-section (32 / 48 / 64px CSS) entre o palco e
   a faixa de baixo e entre as seções; --gap-grid entre os cartões. */
.apps-page .ap-more { display: grid; gap: var(--gap-section, 32px); margin-top: var(--gap-section, 32px); }
.apps-page .ap-conn { scroll-margin-top: 24px; }
.apps-page .ap-sec-head { display: grid; gap: 8px; margin-bottom: 16px; }
.apps-page .ap-sec-lead { margin: 0; max-width: 34em; color: var(--ap-ink-2); font-size: var(--t-lead-s, 15px); line-height: 1.5; text-wrap: balance; }
.apps-page .ap-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: var(--kicker-ink, #ffc196);
  font: 600 var(--ap-min)/1.3 var(--font-mono);
  letter-spacing: var(--ls-kicker, .16em);
  text-transform: uppercase;
}
.apps-page .ap-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ap-orange); box-shadow: 0 0 8px var(--ap-orange); }
.apps-page .ap-sec-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-title, 108);
  font-size: clamp(24px, 6.6cqi, 34px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--title-ink, #f5f8fc);
}

/* Benefícios: anel de LED de 3 arcos, como o da controladora (falhas às
   12h, 4h e 8h), cada um aceso numa cor. */
.apps-page .ap-perks__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.apps-page .ap-perk {
  --c: #fff;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-areas: "ring k" "ring big" "ring p";
  align-content: start;
  column-gap: 16px;
  row-gap: 2px;
  min-width: 0;
  padding: var(--pad-card, 16px);
  border: 1px solid var(--card-edge, #ffffff0d);
  border-radius: var(--r-card, 22px);
  background:
    radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%),
    var(--surface, linear-gradient(180deg, #19212cf2, #121820f2));
  box-shadow: var(--card-shadow, inset 0 1px 0 #ffffff0f, 0 16px 30px -24px #000);
}
.apps-page .ap-ring {
  grid-area: ring;
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  aspect-ratio: 1;
  align-self: start;
  margin-top: 2px;
  color: var(--c);
}
.apps-page .ap-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.apps-page .ap-ring__svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 88 32;
  stroke-dashoffset: 74;
}
.apps-page .ap-ring__off { opacity: .28; }
.apps-page .ap-ring__glow {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 50%, color-mix(in srgb, var(--c) 55%, transparent) 64%, transparent 100%);
  opacity: .75;
  pointer-events: none;
}
.apps-page .ap-ring__ico { position: relative; width: 44%; height: 44%; color: #f5f7fa; }
/* A cor do assunto mora só no anel e no brilho de canto: o rótulo é
   neutro, como o .pg-label dos painéis. */
.apps-page .ap-perk__k {
  grid-area: k;
  margin: 0;
  color: var(--ap-ink-2);
  font: 600 var(--ap-min)/1.3 var(--font-mono);
  letter-spacing: var(--ls-micro, .14em);
  text-transform: uppercase;
}
/* Título de cartão do sistema (--t-card: 22 / 26 / 30px CSS). */
.apps-page .ap-perk__big {
  grid-area: big;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' var(--wdth-title, 108);
  font-size: var(--t-card, 22px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--title-ink, #f5f8fc);
}
.apps-page .ap-perk__p { grid-area: p; margin: 3px 0 0; color: var(--ap-ink-2); font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }

/* Conexões: cada célula abre com a etiqueta de porta do chassi. */
.apps-page .ap-conn__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.apps-page .ap-conn__cell {
  --c: #fff;
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: var(--r-card, 22px);
  background: var(--well, #0c1118e6);
  box-shadow: var(--well-shadow, inset 0 1px 3px #0009, inset 0 0 0 1px #ffffff0c);
}
.apps-page .ap-conn__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 4px; }
.apps-page .ap-port {
  flex: none;
  padding: 5px 7px 4px;
  border-radius: var(--r-tag, 3px);
  background: var(--tag-bg, #e6eaf0);
  color: var(--tag-ink, #0b0d11);
  font: 700 var(--ap-min)/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 #000a;
}
.apps-page .ap-conn__cell h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ap-ink-2);
  font: 600 14.5px/1.3 var(--font-body);
}
.apps-page .ap-conn__cell h4::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.apps-page .ap-conn__cell code {
  color: #f6f9fd;
  background: none;
  padding: 0;
  font: 700 19px/1.25 var(--font-mono);
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.apps-page .ap-conn__cell p { margin: 2px 0 0; color: var(--ap-ink-2); font-size: 14px; line-height: 1.45; }
.apps-page .ap-conn__cell p b { color: var(--ap-ink); font-weight: 600; }

.apps-page .ap-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ap-line);
}
.apps-page .ap-compat { margin: 0; color: var(--ap-ink-2); font-size: 14.5px; line-height: 1.5; }
.apps-page .ap-compat__k { color: var(--ap-ink-2); }
.apps-page .ap-compat__dot { margin: 0 6px; color: var(--ap-ink-3); }
.apps-page .ap-foot .ap-link-btn { align-self: auto; }

/* ---------- 7. SEM JAVASCRIPT: lista compacta "stand-by" ------ */

.apps-page:not(.is-js) .ap-plat {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon id" "act act";
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border-radius: var(--r-card, 22px);
}
.apps-page:not(.is-js) .ap-plat__top { display: contents; }
.apps-page:not(.is-js) .ap-plat__icon { width: 44px; height: 44px; }
.apps-page:not(.is-js) .ap-plat__icon img { border-radius: 12px; }
.apps-page:not(.is-js) .ap-plat h3 { font-size: 19px; }
.apps-page:not(.is-js) :is(.ap-plat__text, .ap-tags, .ap-plat__meta, .ap-link-btn:not(.ap-foot .ap-link-btn), .ap-rec, .ap-path__k) { display: none; }
.apps-page:not(.is-js) .ap-plat__sub { font-size: max(.7em, var(--ap-min)); }
.apps-page:not(.is-js) .ap-plat__flags { grid-area: act; }
.apps-page:not(.is-js) .ap-plat__act { grid-area: act; }
/* Android na lista: o selo "Em breve" E o caminho que já funciona hoje
   (os dois passos pelo Wi‑Fi do pedal), numa linha própria. */
.apps-page:not(.is-js) .ap-plat--soon { grid-template-areas: "icon id" "flags flags" "act act"; }
.apps-page:not(.is-js) .ap-plat--soon .ap-plat__flags { grid-area: flags; }
.apps-page:not(.is-js) .ap-path { gap: 4px; padding: 8px 12px 4px; }
.apps-page:not(.is-js) .ap-path__verb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.apps-page:not(.is-js) .ap-cta { padding-block: 10px; }
.apps-page:not(.is-js) .ap-plat__file { margin-top: 4px; }

/* ---------- 8. LARGURAS ------------------------------------- */

@container aps (max-width: 359px) {
  .apps-page .ap-dock, .apps-page .ap-get { --gap: 4px; }
  .apps-page .ap-key { padding-inline: 1px; }
  .apps-page .ap-key__cap svg { width: 22px; height: 22px; }
  .apps-page .ap-key__name { font-size: 11px; }
  .apps-page .ap-key__sub { font: 600 11px/1.2 var(--font-body); letter-spacing: .01em; }
  .apps-page .ap-help-btn { padding-inline: 12px 14px; }
  .apps-page .ap-help-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .apps-page .ap-plat { padding-inline: 13px; }
  .apps-page .ap-plat__top { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .apps-page .ap-plat__icon { width: 44px; height: 44px; }
  .apps-page .ap-plat__icon img { border-radius: 12px; }
  .apps-page .ap-plat__flags { gap: 5px 6px; }
  .apps-page :is(.ap-rec, .ap-soon) { gap: 6px; min-height: 26px; padding: 3px 8px; font-size: 12px; }
  .apps-page .ap-soon svg { width: 14px; height: 14px; }
  .apps-page .ap-path { padding: 9px 11px 6px; }
  .apps-page .ap-rec__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* 360–389px: com a margem lateral de 16px, "Ajuda para instalar" e
   "Recomendado para este dispositivo" passavam da coluna (o botão saía
   9px do cabeçalho a 360, e a 375 os dois cabiam no pixel). Ficam só as
   formas curtas — o complemento continua para o leitor de tela. */
@container aps (min-width: 360px) and (max-width: 389px) {
  .apps-page :is(.ap-help-more, .ap-rec__more) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Espaçamento de texto aumentado (WCAG 1.4.12): o subtítulo da tecla e
   o selo quebram linha em vez de vazar da tecla ou do cartão. No
   espaçamento normal os dois cabem em todas as larguras e não mudam. */
.apps-page .ap-key__sub { white-space: normal; overflow-wrap: anywhere; }
.apps-page .ap-rec { max-width: 100%; white-space: normal; }

/* Cartão largo (quando ELE tem ≥ 600px — tablet e desktop largo):
   informação à esquerda, botão à direita. */
@container applats (min-width: 600px) {
  /* A coluna do botão tem largura FIXA (a do primário), em todos os
     cartões: um secundário de texto longo ("Ou use o editor do próprio
     pedal…") quebra em duas linhas em vez de espremer o texto ao lado
     — era ele que deixava o cartão Online 40px mais alto que os outros. */
  .apps-page.is-js .ap-plat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 46%, 320px);
    grid-template-areas: "top top" "text act" "tags act";
    align-items: start;
    column-gap: 28px;
    row-gap: 10px;
    padding: 18px 22px 18px;
  }
  .apps-page.is-js .ap-plat__top {
    grid-area: top;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "icon id flags";
    gap: 12px 16px;
  }
  .apps-page .ap-plat__icon { width: 56px; height: 56px; }
  .apps-page.is-js .ap-plat__flags { justify-content: flex-end; align-self: start; }
  .apps-page .ap-plat__text { grid-area: text; }
  .apps-page .ap-tags { grid-area: tags; }
  .apps-page .ap-plat__act { grid-area: act; align-self: end; min-width: 0; }
  /* Android largo: o caminho pelo pedal ocupa a largura toda, com os
     dois passos lado a lado, e o texto vem embaixo. Assim o cartão não
     fica mais alto que o do Windows. */
  .apps-page.is-js .ap-plat--soon { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "act" "text"; }
  .apps-page .ap-plat--soon .ap-plat__act { align-self: start; min-width: 0; }
  .apps-page .ap-plat--soon .ap-path__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .apps-page .ap-plat--soon .ap-path__steps li + li .ap-path__n { margin-top: 9px; }
  .apps-page .ap-plat--soon .ap-path__addr { font-size: 18px; }
  .apps-page .ap-cta { width: auto; }

  .apps-page:not(.is-js) .ap-plat { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icon id act"; }
  .apps-page:not(.is-js) .ap-plat--soon { grid-template-areas: "icon id flags" ". act act"; }
  .apps-page:not(.is-js) .ap-plat--soon .ap-plat__flags { justify-self: end; }
  .apps-page:not(.is-js) .ap-cta { min-width: 220px; }

}
@container aps (min-width: 600px) {
  .apps-page .ap-perks__list,
  .apps-page .ap-conn__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: ainda empilhado, com o palco ganhando o iPad. O cabeçalho fica
   À ESQUERDA, como o de INFO, IN/OUT, SHOP, Downloads e Manual — trocar
   Apps ↔ Downloads na barra de recursos não pode mudar o título de lado.
   Dock e cartão ocupam a mesma coluna do texto (da borda esquerda à
   direita da moldura); o palco segue centrado embaixo, como mídia. */
@container aps (min-width: 700px) {
  .apps-page .ap-wrap { padding-bottom: 44px; }
  .apps-page .ap-hero { row-gap: 30px; }
  .apps-page .ap-eyebrow { justify-content: flex-start; }
  .apps-page .ap-title { text-align: start; }
  .apps-page .ap-lead { max-width: 34em; margin-inline: 0; text-align: start; }
  .apps-page .ap-get { width: 100%; max-width: none; margin: 26px 0 0; }
  .apps-page .ap-dock, .apps-page .ap-get { --gap: 10px; }
  .apps-page .ap-key { padding: 14px 4px 12px; row-gap: 7px; }
  .apps-page .ap-key__cap { width: 34px; height: 34px; }
  .apps-page .ap-key__cap svg { width: 31px; height: 31px; }
  .apps-page .ap-stage { aspect-ratio: 1.8; width: 92%; margin: 0 auto; }
  .apps-page .ap-mac { left: 17%; top: 5%; width: 66%; }
  .apps-page .ap-ipad { visibility: visible; left: 3%; bottom: 3%; width: 21%; }
  .apps-page .ap-phone { right: 3.5%; bottom: 2.5%; width: 13%; }
  .apps-page .ap-light--beam-l { --lx: 13.5%; --bw: 26deg; }
  .apps-page .ap-light--beam-r { --lx: 90%; --bw: 22deg; }
  .apps-page .ap-plat__text { font-size: 15.5px; }
  .apps-page .ap-sec-head h3 { font-size: 36px; }
}

/* Desktop: texto e dock à esquerda, palco à direita. Nada ocupa a dobra
   à força (era o min-height de "125svh" que deixava uma faixa morta
   entre os aparelhos e a seção seguinte): o hero tem a altura do mais
   alto dos dois lados, o cabeçalho fica ancorado no topo como o de
   todo painel, os aparelhos centram na própria coluna, e a faixa de
   baixo começa a --gap-section — espiando acima do véu do rodapé. */
@container aps (min-width: 1080px) {
  /* A moldura do INFO: 1720px CSS e 48px de respiro (ver a .ap-wrap, no
     topo): trocar INFO ↔ APP não desloca o título. */
  .apps-page .ap-wrap { padding-bottom: 40px; }
  .apps-page .ap-hero {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    column-gap: 3cqi;
    align-items: start;
    overflow-x: visible;
  }
  .apps-page .ap-hero::before { display: none; }
  .apps-page .ap-copy { padding: 0; }
  .apps-page .ap-eyebrow { justify-content: flex-start; }
  .apps-page .ap-title { text-align: left; }
  .apps-page .ap-lead { margin-inline: 0; text-align: left; max-width: 27em; }
  .apps-page .ap-get { max-width: none; margin: 28px 0 0; }
  .apps-page .ap-stage { width: 100%; aspect-ratio: 1.2; margin: 0; align-self: center; }
  .apps-page .ap-lights {
    inset: -12% 0 -6%;
    --lx: 50%;
    /* Os feixes laterais se abrem além da caixa do palco; nas pontas eles
       se dissolvem em vez de terminar num corte reto. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .apps-page .ap-mac { left: 10%; top: 7%; width: 79%; }
  /* O iPad pousa no chão, mais baixo que a tampa: a lista de footswitches
     do notebook (linhas 1 a 4, a 4 em edição) fica à vista acima dele. */
  .apps-page .ap-ipad { left: 0; bottom: 2%; width: 24%; }
  .apps-page .ap-phone { right: 1%; bottom: 5%; width: 16.5%; }
  .apps-page .ap-light--beam-l { --lx: 12.5%; --bw: 26deg; }
  .apps-page .ap-light--beam-r { --lx: 90.5%; --bw: 22deg; }
  /* A poça do celular não passa da borda do palco. */
  .apps-page .ap-phone .ap-dev__glow { left: -30%; right: -30%; }
  .apps-page .ap-key { padding: 16px 4px 13px; }
  .apps-page .ap-plat__text { font-size: 16px; }
  .apps-page .ap-plat__req { font-size: 15px; }
  .apps-page :is(.ap-path__net, .ap-path__verb) { font-size: 15px; }

  .apps-page .ap-more { grid-template-columns: minmax(0, 1fr); }
  .apps-page .ap-perks__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .apps-page .ap-perk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ring" "k" "big" "p";
    row-gap: 4px;
  }
  .apps-page .ap-ring { width: 58px; margin: 0 0 14px 2px; }
  .apps-page .ap-perk__p { font-size: 16px; }
  .apps-page .ap-conn__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .apps-page .ap-conn__cell { padding: 18px var(--pad-card, 20px) 20px; }
  .apps-page .ap-conn__cell code { font-size: 22px; }
  .apps-page .ap-conn__cell :is(h4, p) { font-size: 15.5px; }
  .apps-page .ap-sec-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 20px; }
  .apps-page .ap-sec-lead { max-width: 30em; font-size: 16.5px; text-align: right; }
  .apps-page .ap-sec-head h3 { font-size: 40px; }
  .apps-page .ap-compat { font-size: 16px; }

  /* Os cinco cartões ocupam a MESMA célula e o bloco fica com a altura
     do maior: trocar de plataforma não mexe em nada abaixo nem em volta
     da tecla recém-clicada. O cartão escondido segue fora do foco e da
     árvore de acessibilidade (visibility: hidden) — só reserva o espaço. */
  .apps-page.is-js .ap-plats { display: grid; grid-template-columns: minmax(0, 1fr); }
  .apps-page.is-js .ap-plats > .ap-plat { grid-area: 1 / 1; }
  .apps-page.is-js .ap-plats > .ap-plat[hidden] { display: flex !important; visibility: hidden; }
  .apps-page.is-js .ap-plats > .ap-plat > .ap-tags { margin-top: auto; }
  .apps-page.is-js :is(.ap-plat__meta, .ap-plat__jump) { display: inline-flex; }
  .apps-page.is-js .ap-plat__meta { display: block; }
  /* Cartão estreito (notebook pequeno): a folga do cartão mais baixo vai
     para o pé dele, não para um buraco entre o texto e as fichas. */
  @container applats (max-width: 599px) {
    .apps-page.is-js .ap-plats > .ap-plat > .ap-tags { margin-top: 0; }
  }
  @container applats (min-width: 600px) {
    .apps-page.is-js .ap-plats > .ap-plat[hidden] { display: grid !important; }
    /* O botão fica no MESMO lugar em todos os cartões (logo abaixo do
       cabeçalho, à direita): trocar de plataforma não o move. As fichas
       descem para a base, e a folga do cartão mais baixo fica entre o
       texto e elas. */
    .apps-page.is-js .ap-plats > .ap-plat { grid-template-rows: auto auto minmax(0, 1fr); }
    .apps-page.is-js .ap-plats > .ap-plat > .ap-plat__act { align-self: start; }
    .apps-page.is-js .ap-plats > .ap-plat > .ap-tags { margin-top: 12px; align-self: end; }
  }
}
/* Desktop estreito (1024–1199 de janela): colunas iguais. Com a coluna
   do texto em .86fr, "em qualquer tela." quebrava em três linhas no
   título da escala única. */
@container aps (min-width: 1080px) and (max-width: 1499px) {
  .apps-page .ap-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Tela grande: NADA muda. A moldura é a mesma --frame de 1720px CSS das
   outras abas em qualquer largura (a regra antiga que levava os Apps a
   2240px, com título, dock e cartão maiores, saiu) — a 1920 e a 2560 o
   título começa na mesma coluna do INFO. */

/* Notebook (até 960px de altura — 1440×900, 1366×768, 1280×720…): o
   mesmo desenho, mais justo na vertical. O cabeçalho continua na mesma
   altura (--pg-top) e com o mesmo título; o que aperta é o dock, o
   cartão, o palco e o intervalo até a seção seguinte (o degrau m de
   --gap-section), para o título dela aparecer ACIMA da barra de baixo
   — a pista de que a página continua. */
@media (min-width: 861px) and (max-height: 960px) {
  .apps-page .ap-get { margin-top: 18px; }
  .apps-page .ap-get__head { margin-bottom: 8px; }
  .apps-page .ap-key { padding-top: 12px; padding-bottom: 10px; }
  .apps-page.is-js .ap-plats { margin-top: 12px; }
  .apps-page.is-js .ap-plat { row-gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  .apps-page .ap-plat__text { line-height: 1.45; }
  .apps-page .ap-more { margin-top: var(--gap-section-m, 48px); }
}
@media (min-width: 861px) and (max-height: 840px) {
  /* Cartão estreito (notebook de 1024): uma frase e sem as fichas, para
     o texto terminar acima do véu do rodapé. */
  @container applats (max-width: 599px) {
    .apps-page .ap-plat__t2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .apps-page .ap-plat .ap-tags { display: none; }
  }
}
@container aps (min-width: 1080px) {
  @media (min-width: 861px) and (max-height: 960px) {
    .apps-page .ap-stage { aspect-ratio: 1.34; }
    /* Palco achatado: o notebook sobe e o iPad encolhe um pouco, para as
       linhas 1 a 4 da lista seguirem acima dele. */
    .apps-page .ap-mac { top: 3%; }
    .apps-page .ap-ipad { bottom: 0; width: 23%; }
  }
}
/* Notebook de altura média (1280–1440 de janela, 761–840 de altura): o
   dock aperta um pouco. */
@container aps (min-width: 1500px) {
  @media (min-width: 861px) and (min-height: 761px) and (max-height: 840px) {
    .apps-page .ap-get { margin-top: 14px; }
    .apps-page .ap-key { padding-top: 10px; padding-bottom: 9px; }
  }
}
/* Notebook pequeno (1024×768): o cartão é estreito e alto; o subtítulo
   sai da tela (fica para o leitor de tela) para o texto do cartão
   terminar acima do véu do rodapé. */
@container aps (min-width: 1080px) and (max-width: 1499px) {
  @media (min-width: 861px) and (max-height: 780px) {
    .apps-page .ap-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}
/* Notebook baixo (1280×720; 1366×768 com a barra do navegador = ~657px
   úteis): o subtítulo sai (fica para o leitor de tela) e o cartão
   aperta, para o botão E a linha do arquivo/guia ficarem acima do véu
   do rodapé. */
@media (min-width: 861px) and (max-height: 760px) {
  .apps-page .ap-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .apps-page .ap-get { margin-top: 14px; }
  .apps-page .ap-get__head { margin-bottom: 6px; }
  .apps-page .ap-key { padding-top: 10px; padding-bottom: 9px; row-gap: 4px; }
  .apps-page.is-js .ap-plats { margin-top: 12px; }
  .apps-page.is-js .ap-plat { row-gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  .apps-page .ap-plat__file { margin-top: 2px; }
  .apps-page .ap-plat__text { line-height: 1.4; }
}
@container aps (min-width: 1080px) {
  /* Abaixo de ~700px úteis cada pixel vai para o botão. */
  @media (min-width: 861px) and (max-height: 700px) {
    .apps-page .ap-key__cap { width: 30px; height: 30px; }
    .apps-page .ap-key__cap svg { width: 27px; height: 27px; }
  }
}

/* Celular de tela baixa (iPhone SE, 320×640): o subtítulo sai para o
   botão da plataforma caber na primeira tela. */
@media (max-width: 860px) and (max-height: 740px) {
  /* Nada de display:none aqui: o elemento é animado, e trocar o display
     reinicia a animação (o Chrome passa por 800×600 ao capturar a página
     inteira). O texto continua para o leitor de tela. */
  .apps-page .ap-lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Com a barra de baixo (APPS · DOWNLOADS · MANUAL) o véu sobe: cada
     linha abaixo devolve alguns pixels para o botão da plataforma ficar
     inteiro acima dele (320×640 e 360×640, nas quatro teclas). O
     requisito cabe numa linha só a 12px mesmo no cartão de 320. */
  .apps-page .ap-get { margin-top: 4px; }
  .apps-page .ap-get__head { margin-bottom: 6px; }
  .apps-page .ap-help-btn { min-height: 44px; }
  .apps-page .ap-key { padding-top: 6px; padding-bottom: 5px; row-gap: 2px; }
  .apps-page .ap-key__cap { width: 24px; height: 24px; }
  .apps-page .ap-key__cap svg { width: 22px; height: 22px; }
  .apps-page.is-js .ap-plats { margin-top: 8px; }
  .apps-page .ap-plat { padding-top: 10px; gap: 10px; }
  .apps-page .ap-plat__top { row-gap: 3px; }
  .apps-page .ap-plat__req { white-space: nowrap; font-size: 12px; }
  /* Android em tela baixa: o cabeçalho vira uma linha só (ícone, nome e
     selo) e o requisito do app que ainda não saiu e o rótulo "Use agora"
     cedem o lugar aos dois passos que funcionam hoje — os dois continuam
     para o leitor de tela. Com o selo "Seu dispositivo" à mostra, o "Em
     breve" fica só na tecla do dock e no texto do cartão. */
  .apps-page .ap-plat--soon :is(.ap-plat__req, .ap-path__k) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .apps-page .ap-plat--soon .ap-plat__top { grid-template-columns: 36px auto minmax(0, 1fr); grid-template-areas: "icon id flags"; column-gap: 10px; }
  .apps-page .ap-plat--soon .ap-plat__icon { width: 36px; height: 36px; }
  .apps-page .ap-plat--soon .ap-plat__icon img { border-radius: 10px; }
  .apps-page .ap-plat--soon .ap-plat__flags { justify-content: flex-end; }
  /* O selo que fica é o "Em breve": é ele que explica que o app ainda
     não existe. "Seu dispositivo" já está na tecla do dock (LED verde e
     texto para o leitor de tela). */
  .apps-page .ap-plat--soon .ap-rec--mine { display: none; }
}

/* Sem JS o palco fica alinhado ao topo, ao lado da lista. */
@container aps (min-width: 1080px) {
  .apps-page:not(.is-js) .ap-stage { align-self: start; margin-top: 24px; }
}

/* ---------- 9. MOVIMENTO ------------------------------------ */
/* Só transform e opacity. Tudo parte do estado final (visível): se a
   animação não rodar — reduced-motion, ou a regra global do site que
   zera animações —, a página continua inteira. A tecla do visitante e
   o botão ficam legíveis antes de 0,7s; aparelhos e luz vêm depois. */
@media (prefers-reduced-motion: no-preference) {
  #panel-apps.is-on .ap-eyebrow { animation: ap-up .45s var(--ap-ease) backwards; }
  #panel-apps.is-on .ap-title__line { animation: ap-up .5s var(--ap-ease) .03s backwards; }
  #panel-apps.is-on .ap-title__line + .ap-title__line { animation-delay: .07s; }
  #panel-apps.is-on .ap-lead { animation: ap-up .5s var(--ap-ease) .1s backwards; }
  #panel-apps.is-on .ap-get__head { animation: ap-up .45s var(--ap-ease) .1s backwards; }
  #panel-apps.is-on .ap-key { animation: ap-key .42s var(--ap-ease) backwards; }
  #panel-apps.is-on .ap-key:nth-child(1) { animation-delay: .1s; }
  #panel-apps.is-on .ap-key:nth-child(2) { animation-delay: .12s; }
  #panel-apps.is-on .ap-key:nth-child(3) { animation-delay: .14s; }
  #panel-apps.is-on .ap-key:nth-child(4) { animation-delay: .16s; }
  #panel-apps.is-on .ap-key:nth-child(5) { animation-delay: .18s; }
  #panel-apps.is-on .ap-plats { animation: ap-up .45s var(--ap-ease) .2s backwards; }
  #panel-apps.is-on .ap-plat:not([hidden]) { animation: ap-swap .38s var(--ap-ease) backwards; }
  #panel-apps.is-on .ap-lights { animation: ap-fade 1.3s var(--ap-ease) backwards; }
  #panel-apps.is-on .ap-hero::after { animation: ap-beam 1.4s var(--ap-ease) .05s backwards; }
  #panel-apps.is-on .ap-light--beam { animation: ap-beam 1.6s var(--ap-ease) .1s backwards; }
  #panel-apps.is-on .ap-mac .ap-dev__in { animation: ap-rise 1s var(--ap-ease) .08s backwards; }
  #panel-apps.is-on .ap-ipad .ap-dev__in { animation: ap-in-l .95s var(--ap-ease) .26s backwards; }
  #panel-apps.is-on .ap-phone .ap-dev__in { animation: ap-in-r .95s var(--ap-ease) .34s backwards; }
  #panel-apps.is-on .ap-stage__floor { animation: ap-fade 1.2s var(--ap-ease) .2s backwards; }
  /* As telas "ligam" depois que o aparelho chega. */
  #panel-apps.is-on .ap-mac .ap-screen img { animation: ap-fade .8s ease-out .55s backwards; }
  /* No iPad quem anima é uma película por cima da tela, não a imagem: a
     imagem troca de display no celular (para não ser baixada), e trocar o
     display reiniciaria a animação dela. */
  #panel-apps.is-on .ap-ipad .ap-screen::before { animation: ap-unveil .8s ease-out .7s backwards; }
  #panel-apps.is-on .ap-phone .ap-screen img { animation: ap-fade .8s ease-out .8s backwards; }
  #panel-apps.is-on .ap-mac .ap-screen::before { animation: ap-gleam 1.5s cubic-bezier(.4, 0, .2, 1) 1s; }
  #panel-apps.is-on .ap-more { animation: ap-up .7s var(--ap-ease) .3s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .apps-page .ap-dev,
  .apps-page .ap-key,
  .apps-page .ap-cta,
  .apps-page :is(.ap-help-btn, .ap-link-btn),
  .apps-page .ap-dev__glow,
  .apps-page .ap-chrome__v,
  .apps-page .ap-light--beam,
  .apps-page .ap-stage__floor::before,
  .apps-page :is(.ap-ipad, .ap-phone)::before,
  .apps-page .ap-mac .ap-screen img,
  .apps-page.is-js .ap-plats::before { transition: none; }
}
@keyframes ap-fade { from { opacity: 0; } }
@keyframes ap-unveil { from { opacity: 1; } }
@keyframes ap-beam { from { opacity: 0; transform: translateY(-6%); } }
@keyframes ap-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes ap-rise { from { opacity: 0; transform: translateY(7%) scale(.965); } }
@keyframes ap-in-l { from { opacity: 0; transform: translate(-14%, 6%) rotate(-2deg); } }
@keyframes ap-in-r { from { opacity: 0; transform: translate(16%, 6%) rotate(2deg); } }
@keyframes ap-key { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes ap-swap { from { opacity: 0; transform: translateY(8px); } }
@keyframes ap-gleam { from { opacity: 1; transform: translateX(-70%); } 70% { opacity: 1; } to { opacity: 0; transform: translateX(70%); } }

/* Alto contraste do Windows: o laranja da tecla escolhida some; ela
   passa a usar a cor de seleção do sistema. */
@media (forced-colors: active) {
  .apps-page .ap-key[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border: 2px solid HighlightText;
    outline: 2px solid Highlight;
  }
  .apps-page .ap-key[aria-selected="true"] :is(.ap-key__sub, .ap-key__name, .ap-key__cap) { color: HighlightText; }
  .apps-page .ap-key[aria-selected="true"]:focus-visible { outline: 3px solid CanvasText; }
}

/* ---------- 10. AJUDA --------------------------------------- */

#ajuda-dialog {
  --ap-min: var(--t-min, 11px);
  padding: 0;
  margin: auto;
  width: min(780px, calc(100% - 28px));
  max-height: calc(100svh - 40px);
  border: 1px solid #a6bedd33;
  border-radius: var(--r-card, 22px);
  color: #e8edf5;
  background:
    radial-gradient(90% 50% at 0% 0%, #ff8a3d14, transparent 55%),
    linear-gradient(180deg, #151f2d, #0e151f);
  box-shadow: inset 0 1px 0 #ffffff12, 0 40px 120px #000c;
  font: 400 16px/1.6 var(--font-body);
}
#ajuda-dialog[open] { display: flex; flex-direction: column; }
#ajuda-dialog::backdrop { background: #03070dcc; backdrop-filter: blur(10px); }
#ajuda-dialog .apps-dialog-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #a6bedd24;
  flex-shrink: 0;
}
#ajuda-dialog .apps-dialog-icon { width: 46px; height: 46px; flex: none; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff1a, 0 0 22px -6px #ff782d66; }
#ajuda-dialog .apps-dialog-titles { flex: 1 1 auto; min-width: 0; }
/* O micro-rótulo é o mesmo da página (.bf-kicker do pages.css): a
   palavra em mono pêssego e a etiqueta branca "Versão 14". O ícone do
   app ao lado já faz o papel do ponto. */
#ajuda-dialog .apps-dialog-label::before { display: none; }
#ajuda-dialog h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 108;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
}
#ajuda-dialog .apps-close-help {
  display: grid;
  place-items: center;
  width: var(--ap-hit, 44px);
  height: var(--ap-hit, 44px);
  flex-shrink: 0;
  border: 1px solid var(--line-2, #a6bedd3b);
  border-radius: var(--r-btn, 14px);
  background: var(--chrome-bg, linear-gradient(180deg, #19212c, #121820));
  color: #e8edf5;
  cursor: pointer;
}
#ajuda-dialog .apps-close-help svg { width: 20px; height: 20px; }
@media (hover: hover) {
  #ajuda-dialog .apps-close-help:hover { border-color: var(--ghost-edge-hover, #ffffff4d); background: #1f2935; }
}
#ajuda-dialog :is(a, button):focus-visible { outline: var(--focus-w, 3px) solid var(--focus, #ffd2a6); outline-offset: var(--focus-offset, 4px); }
#ajuda-dialog .apps-dialog-body { position: relative; padding: 0 22px 24px; overflow-y: auto; overscroll-behavior: contain; }
#ajuda-dialog .apps-section { margin-top: 22px; }
#ajuda-dialog .apps-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #f1f5fb;
  font: 700 17.5px/1.3 var(--font-body);
}
#ajuda-dialog .apps-step {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line-2, #a6bedd3b);
  border-radius: 8px;
  background: #ffffff08;
  color: var(--ink-2, #bdc8d8);
  font: 600 var(--ap-min)/1 var(--font-mono);
  letter-spacing: var(--ls-micro, .14em);
}
#ajuda-dialog .apps-p { margin: 0 0 12px; color: #bdc8d8; }
#ajuda-dialog .apps-reads { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ajuda-dialog .apps-reads li {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px 13px;
  border-radius: var(--r-well, 18px);
  background: #0b1119;
  box-shadow: var(--well-shadow, inset 0 1px 3px #0009, inset 0 0 0 1px #ffffff0c);
}
#ajuda-dialog .apps-reads li > span { color: var(--ink-2, #bdc8d8); font: 600 var(--ap-min)/1.3 var(--font-mono); letter-spacing: var(--ls-micro, .14em); text-transform: uppercase; }
#ajuda-dialog .apps-reads li > :is(a, b) {
  justify-self: start;
  color: #f6f9fd;
  font: 700 18px/1.35 var(--font-mono);
  overflow-wrap: anywhere;
}
#ajuda-dialog .apps-reads li > a { display: inline-flex; align-items: center; min-height: var(--ap-hit, 44px); text-decoration: underline; text-decoration-color: #eef3fa59; text-underline-offset: 5px; }
@media (hover: hover) {
  #ajuda-dialog .apps-reads li > a:hover { text-decoration-color: currentColor; }
}
/* "Chrome ou Edge" não é link, mas ocupa a mesma linha dos endereços:
   com a mesma altura, as três leituras ficam alinhadas lado a lado. */
#ajuda-dialog .apps-reads li > b { display: inline-flex; align-items: center; min-height: var(--ap-hit, 44px); }
#ajuda-dialog .apps-reads small { color: #bdc8d8; font-size: 14px; line-height: 1.45; }
#ajuda-dialog .apps-reads small b { color: #eef2f7; font-weight: 600; }
/* O link dentro da frase ("editor online") precisa ser reconhecível sem
   depender só da cor (o texto em volta é quase do mesmo tom): sublinhado
   sempre, na gramática dos endereços acima. */
#ajuda-dialog .apps-reads small a { color: #eef2f7; text-decoration: underline; text-decoration-color: #eef3fa73; text-underline-offset: 3px; }
@media (hover: hover) {
  #ajuda-dialog .apps-reads small a:hover { text-decoration-color: currentColor; }
}
/* Os endereços têm 44px de altura e as linhas vizinhas encostam neles: o
   anel de foco vai por DENTRO da caixa, para não riscar o rótulo de cima
   nem a primeira linha do texto de baixo. */
#ajuda-dialog .apps-reads li > a { margin-inline: -6px; padding-inline: 6px; }
#ajuda-dialog .apps-reads li > a:focus-visible { outline-offset: -2px; border-radius: 8px; }
#ajuda-dialog .apps-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: ap-step; }
#ajuda-dialog .apps-steps li {
  counter-increment: ap-step;
  position: relative;
  min-height: 56px;
  padding: 14px 14px 14px 60px;
  border-radius: var(--r-well, 18px);
  background: #121a25;
  box-shadow: inset 0 0 0 1px #ffffff0a;
  color: #bdc8d8;
  line-height: 1.55;
}
/* Número em tecla grafite, como as do editor. */
#ajuda-dialog .apps-steps li::before {
  content: counter(ap-step);
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(180deg, #2b3647, #18212e);
  box-shadow: inset 0 1px 0 #ffffff1a, 0 2px 0 #05080c, 0 4px 8px #0008;
  color: #f5f7fa;
  font: 800 14px/1 var(--font-mono);
}
#ajuda-dialog .apps-steps b { color: #eef2f7; font-weight: 600; }
#ajuda-dialog .apps-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ajuda-dialog .apps-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--btn2-h, 48px);
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--line-2, #a6bedd3b);
  border-radius: var(--r-btn, 14px);
  background: var(--ghost-bg, #0f1824cc);
  color: #e8edf5;
  font: 600 var(--btn2-fs, 15px)/1.2 var(--font-body);
  text-decoration: none;
}
#ajuda-dialog .apps-links svg { width: 20px; height: 20px; flex: none; color: var(--ink-2, #bdc8d8); }
@media (hover: hover) {
  #ajuda-dialog .apps-links a:hover { border-color: var(--ghost-edge-hover, #ffffff4d); background: var(--ghost-bg-hover, #16212fcc); }
}
#ajuda-dialog .apps-versions { display: grid; margin: 0; border: 1px solid #a6bedd24; border-radius: var(--r-well, 18px); background: #0b121cb3; }
#ajuda-dialog .apps-versions > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 16px; padding: 13px 18px; }
#ajuda-dialog .apps-versions > div + div { border-top: 1px solid #a6bedd1c; }
#ajuda-dialog .apps-versions dt { color: #f1f5fb; font-weight: 600; }
#ajuda-dialog .apps-versions dd { margin: 0; color: #bdc8d8; }
/* Endereço é para digitar: nunca parte ao meio. Três colunas só quando
   cada uma cabe o endereço inteiro numa linha. */
@media (min-width: 360px) {
  #ajuda-dialog .apps-reads li > a { white-space: nowrap; }
}
@media (min-width: 820px) {
  #ajuda-dialog .apps-reads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #ajuda-dialog { width: calc(100% - 20px); max-height: calc(100svh - 24px); }
  #ajuda-dialog .apps-dialog-head { padding: 16px 14px 13px; gap: 12px; }
  #ajuda-dialog .apps-dialog-icon { width: 40px; height: 40px; border-radius: 10px; }
  #ajuda-dialog h2 { font-size: 21px; }
  #ajuda-dialog .apps-dialog-body { padding: 0 14px 18px; }
  #ajuda-dialog .apps-steps li { padding-left: 56px; }
  #ajuda-dialog .apps-versions > div { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  #ajuda-dialog .apps-links li { flex: 1 1 100%; }
  #ajuda-dialog .apps-links a { width: 100%; }
}
/* Celular pequeno (320): o cabeçalho não pode comer um quarto do diálogo. */
@media (max-width: 380px) {
  #ajuda-dialog .apps-dialog-icon { display: none; }
  #ajuda-dialog h2 { font-size: 19px; }
  #ajuda-dialog .apps-dialog-head { gap: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  #ajuda-dialog[open] { animation: ap-dialog .32s var(--ease, ease) backwards; }
}
@keyframes ap-dialog { from { opacity: 0; transform: translateY(12px) scale(.985); } }