/* Página do caso de uso com vídeo, em dobras (src/components/SuporteCasoPagina.astro).
   Tudo claro, na identidade da Central (Manrope, navy, cartões brancos), com a cor da área do app
   (data-acento) só no céu do topo, nos números dos passos e nos detalhes. */

.cp {
  --c: #1FA8A5; --c-ink: #0F7B77;
  --tx: #141B33; --tx2: #454D6B; --mut: #6B7390; --linha: rgba(16, 24, 40, 0.08); --cinza: #F3F5FA;
  /* cartão das páginas de caso: branco com sombra leve, no lugar do cinza */
  --cartao-sombra: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 18px 40px -30px rgba(4, 8, 31, 0.16);
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 24px 50px -30px rgba(4, 8, 31, 0.32);
  font-family: var(--hc-sans); color: var(--tx2);
}
.cp[data-acento="azul"]    { --c: #3972FD; --c-ink: #2A5BD7; }
.cp[data-acento="verde"]   { --c: #25D366; --c-ink: #0E7A3F; }
.cp[data-acento="laranja"] { --c: #FA9800; --c-ink: #A06100; }
.cp[data-acento="roxo"]    { --c: #A364FF; --c-ink: #8954D6; }
.cp[data-acento="rosa"]    { --c: #FA3D85; --c-ink: #CD326D; }

.cp { position: relative; isolation: isolate; }
/* nada de palavra sozinha no fim do parágrafo */
.cp p, .cp li, .cp-item-d, .cp-gcard-d, .cp-acao-html, .cp-sub, .cp-publico-t { text-wrap: pretty; }

/* ---------- casca: o esqueleto dos guias (.hc-article-shell.gv-shell, guia-video.css), com a
   barra lateral de 232px e a coluna de 1104px, como em Primeiros passos ---------- */
/* barra lateral simples, igual à dos guias (.gn): só os tópicos, com o trilho à esquerda e o ativo em
   texto na cor da área; os passos do fluxo entram recuados, sem número e sem fundo */
.cp-nav .gn-app { cursor: default; }
.cp .gn-list a.is-active { color: var(--c-ink); border-left-color: var(--c-ink); }
.cp-nav-passos { list-style: none; margin: 0; padding: 0; }
.cp .cp-nav-passos a { padding-left: 28px; font-size: 13.5px; }
.cp .cp-nav-passos a.is-on { color: var(--tx); font-weight: 600; }
.cp-voltar-m { display: none; }
.cp-main { min-width: 0; }
.cp .hc-crumb { margin-bottom: 0; }

.cp-wrap { box-sizing: border-box; }
/* texto centralizado sempre largo: no máximo três linhas, sem coluna apertada */
.cp-sec { padding: clamp(56px, 6vw, 80px) 0 0; scroll-margin-top: 80px; }
/* fundo das seções abaixo do vídeo: um brilho leve na cor da área, que muda de lugar a cada seção
   (sequência de quatro) e some em cima e embaixo, para a página não ficar num tom só */
.cp-main > section { position: relative; isolation: isolate; }
.cp-main > section::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -40px; bottom: -40px; left: -40vw; right: -40vw;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.cp-main > section:nth-of-type(4n+1)::before {
  background: radial-gradient(30% 60% at 24% 40%, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 72%);
}
.cp-main > section:nth-of-type(4n+2)::before {
  background: radial-gradient(32% 64% at 78% 50%, color-mix(in srgb, var(--c) 14%, transparent) 0%, transparent 72%);
}
.cp-main > section:nth-of-type(4n+3)::before {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--c) 9%, transparent) 50%, transparent 100%);
}
.cp-main > section:nth-of-type(4n)::before {
  background:
    radial-gradient(26% 50% at 70% 20%, color-mix(in srgb, var(--c) 13%, transparent) 0%, transparent 72%),
    radial-gradient(24% 46% at 30% 85%, color-mix(in srgb, var(--c) 10%, transparent) 0%, transparent 72%);
}
/* cabeçalho das seções no padrão das etapas dos guias passo a passo (gd-olho, h2 e gd-resumo):
   olho, título e o texto embaixo, alinhados à esquerda */
/* olho no padrão do site da Marvee (mv-pill): estrela de contorno, texto normal, sem caixa alta */
.cp-rotulo {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; color: var(--c-ink);
}
.cp-rotulo::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l2.2 5.1L19.5 10l-5.3 1.9L12 17l-2.2-5.1L4.5 10l5.3-1.9L12 3z' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3l2.2 5.1L19.5 10l-5.3 1.9L12 17l-2.2-5.1L4.5 10l5.3-1.9L12 3z' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cp-cab { margin: 0 0 clamp(24px, 3vw, 36px); }
.cp-cab h2 {
  margin: 0; font-size: clamp(22px, 1.7vw, 25px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2;
  color: var(--tx); text-wrap: balance;
}
.cp-sub { max-width: 703px; margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--tx2); text-wrap: pretty; }
.cp-sub p { margin: 0 0 8px; }
.cp-sub p:last-child { margin-bottom: 0; }
.cp-sub strong, .cp-item-d strong, .cp-card strong, .cp-dica strong, .cp-acao-html strong, .cp-publico-t strong { color: var(--tx); }
.cp a:not([class]) { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- topo: céu claro na cor da área, título no centro e o vídeo no lugar do aparelho, dentro
   da coluna do guia ---------- */
.cp-hero { position: relative; padding: 0; }
/* o céu vai de uma borda à outra da janela, e não só até a largura da casca */
body:has(.cp-ceu) { overflow-x: clip; }
.cp-ceu {
  position: absolute; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: min(760px, 100%); z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 6%, rgba(255, 255, 255, 0.95) 0%, transparent 70%),
    radial-gradient(34% 40% at 84% 10%, rgba(255, 255, 255, 0.9) 0%, transparent 70%),
    radial-gradient(70% 80% at 50% -10%, color-mix(in srgb, var(--c) 30%, #fff) 0%, color-mix(in srgb, var(--c) 10%, #fff) 45%, transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #fff) 0%, var(--hc-paper, #FBFCFF) 100%);
}
.cp-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); }
.cp-trilha a { color: var(--mut); text-decoration: none; }
.cp-trilha a:hover { color: var(--tx); }
.cp-trilha span[aria-hidden] { opacity: 0.5; }
.cp-trilha-aqui { color: var(--tx); font-weight: 600; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-topo { max-width: 900px; margin: clamp(36px, 5vw, 56px) 0 0; text-align: left; display: grid; justify-items: start; }
.cp-olho {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px;
  font-size: 13px; font-weight: 600; color: var(--tx);
  background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--c) 60%, transparent); backdrop-filter: blur(8px);
}
.cp-olho img { width: 24px; height: 24px; padding: 3px; box-sizing: border-box; border-radius: 99px; background: #fff; }
.cp-olho i { font-style: normal; color: var(--c-ink); }
.cp .cp-topo h1 {
  margin: 22px 0 0; font-size: clamp(34px, 5vw, 60px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.04;
  color: var(--tx); text-wrap: balance;
}
.cp-lede { max-width: 760px; margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--tx2); text-wrap: pretty; }
.cp-acoes { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin-top: 28px; }
.cp-btn, .cp-btn-2 {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px 12px 16px; border-radius: 99px; cursor: pointer;
  font: 600 14.5px/1 var(--hc-sans); text-decoration: none !important; border: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cp-btn { color: #fff; background: var(--hc-navy, #04081F); box-shadow: 0 14px 30px -14px rgba(4, 8, 31, 0.7); }
.cp-btn svg { width: 15px; height: 15px; padding: 5px; border-radius: 99px; color: var(--hc-navy, #04081F); background: #fff; }
.cp-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(4, 8, 31, 0.75); }
.cp-btn-2 { padding: 12px 18px; color: var(--tx); background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px var(--linha); }
.cp-btn-2 svg { width: 16px; height: 16px; }
.cp-btn-2:hover { background: #fff; }
.cp-btn:focus-visible, .cp-btn-2:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.cp-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; margin: 18px 0 0; font-size: 12.5px; color: var(--mut); }
.cp-meta span + span::before { content: "·"; margin-right: 16px; color: var(--c-ink); }

.cp-video { margin: clamp(36px, 4vw, 48px) 0 0; display: flex; justify-content: flex-start; }
.cp .cv { margin: 0; }

/* ---------- para quem é + os apps do caso, como a faixa de logos ---------- */
.cp-publico { padding: clamp(56px, 6vw, 80px) 0 0; scroll-margin-top: 80px; }
.cp-publico-t { max-width: 900px; font-size: 18px; line-height: 1.55; color: var(--tx); letter-spacing: -0.01em; text-wrap: pretty; }
.cp-publico-t p { margin: 0 0 10px; }
.cp-apps { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 24px 0 0; padding: 0; }
.cp-apps li { display: inline-flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; color: var(--tx); letter-spacing: -0.01em; }
.cp-apps img { width: 26px; height: 26px; }

/* ---------- passos: a lista à esquerda, a tela à direita ---------- */
/* a mesma proporção do guia: a tela à esquerda (650) e a lista dos passos à direita (406) */
.cp-passos-grid { display: grid; grid-template-columns: minmax(0, 650fr) minmax(0, 406fr); gap: 48px; align-items: center; }
/* o cabeçalho (olho, título e texto) sobe para a coluna da lista, ao lado da tela: o canto de cima à
   direita não fica vazio */
.cp-passos-lado { min-width: 0; }
.cp-passos-lado .cp-cab { margin-bottom: 30px; }
.cp-passos-lado .cp-sub { max-width: none; }
.cp-palco { order: -1; }
/* a lista igual à dos guias passo a passo (.gd-passo, em guia-video.css): traço à esquerda de cada
   passo, que fica na cor da área no passo aberto (sem encher com o tempo), título sem número, seta à
   direita e o texto que abre em sanfona */
.cp-lista { list-style: none; margin: 0; padding: 0; }
.cp-item { position: relative; padding-left: 24px; border-left: 2px solid var(--hc-line); transition: border-color 0.25s ease; }
.cp-item.is-on { border-left-color: var(--c-ink); }
.cp-item-b {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 0;
  font-family: var(--hc-sans); font-size: 16.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--hc-soft);
  transition: color 0.2s ease;
}
.cp-item-b::after {
  content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.8px solid; border-bottom: 1.8px solid; border-color: color-mix(in srgb, var(--c-ink) 55%, #fff);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease, border-color 0.2s ease;
}
.cp-item + .cp-item .cp-item-b { border-top: 1px solid var(--hc-line-soft); }
.cp-item-b:hover { color: var(--hc-strong); }
.cp-item-b:hover::after { border-color: var(--c-ink); }
.cp-item-b:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: 6px; }
.cp-item.is-on .cp-item-b { color: var(--hc-strong); font-weight: 600; padding-bottom: 10px; }
.cp-item.is-on .cp-item-b::after { transform: translateY(2px) rotate(225deg); border-color: var(--c-ink); }
.cp-item-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cp-item-corpo > .cp-item-d { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 0.34s; }
.cp-item.is-on .cp-item-corpo { grid-template-rows: 1fr; }
.cp-item.is-on .cp-item-corpo > .cp-item-d { visibility: visible; transition-delay: 0s; }
.cp-item-d { font-size: 15px; line-height: 1.65; color: var(--hc-soft); }
.cp-item-d > :last-child { padding-bottom: 22px; }
.cp-item-d p { padding-right: 36px; }
.cp-gcard-d { font-size: 14px; line-height: 1.6; color: var(--tx2); }
.cp-item-d p { margin: 0 0 8px; }
.cp-item-d p:last-child { margin-bottom: 0; }
.cp-item-d ul, .cp-item-d ol { margin: 6px 0 8px; padding-left: 20px; }
.cp-lista, .cp-item, .cp-item-d { min-width: 0; }
/* recipe de skill dentro do passo: quebra a linha em vez de alargar a coluna */
.cp-item-d pre {
  max-width: 100%; box-sizing: border-box; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  padding: 12px 14px; border-radius: 12px; background: var(--cinza); font-size: 12.5px; line-height: 1.55;
}
.cp-item-d code { font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--cinza); color: var(--tx); }
.cp-item-d pre code { padding: 0; background: none; }
.cp-item-d blockquote { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--cinza); }

/* o palco: um cartão na cor da área, com a tela do app em cima */
.cp-palco {
  position: sticky; top: 96px; padding: clamp(18px, 2.6vw, 32px); border-radius: 28px;
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c) 58%, #fff) 0%, transparent 72%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c) 40%, #fff) 0%, transparent 72%),
    color-mix(in srgb, var(--c) 20%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.cp-painel[hidden] { display: none; }
.cp-painel { animation: cp-entra 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes cp-entra { from { transform: translateY(8px); } to { transform: none; } }

.cp-tela {
  position: relative; border-radius: 16px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 30px 60px -30px rgba(4, 8, 31, 0.45);
}
.cp-tela-video video { display: block; width: 100%; aspect-ratio: 1280 / 780; object-fit: cover; background: var(--cinza); }
.cp-tela-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--linha); background: #FAFBFD; }
.cp-tela-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E3E6EE; }
.cp-tela-bar span { margin-left: 10px; padding: 3px 12px; border-radius: 99px; font-size: 11px; color: var(--mut); background: var(--cinza); }
.cp-tela-corpo { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 300px; }
.cp-tela-rail { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 0; border-right: 1px solid var(--linha); background: #FAFBFD; }
.cp-tela-rail span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; opacity: 0.45; }
.cp-tela-rail span.is-on { opacity: 1; background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 6px 14px -8px rgba(4, 8, 31, 0.4); }
.cp-tela-rail img { width: 18px; height: 18px; }
.cp-tela-main { display: flex; flex-direction: column; gap: 18px; padding: 18px 22px 18px; min-width: 0; }
.cp-tela-cab { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--mut); }
.cp-tela-cab img { width: 20px; height: 20px; }
.cp-tela-cab b { color: var(--tx); font-weight: 700; white-space: nowrap; }
.cp-tela-sep { opacity: 0.5; }
.cp-tela-onde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-tela-campos { display: grid; gap: 10px; }
.cp-campo {
  display: grid; gap: 7px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linha); background: #fff;
}
.cp-campo.is-foco { border-color: color-mix(in srgb, var(--c) 70%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }
.cp-campo-l { font-size: 12.5px; font-weight: 700; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-campo-l.is-vazio { width: 34%; height: 9px; border-radius: 99px; background: #E3E6EE; }
.cp-campo-v { display: block; height: 8px; }
.cp-campo-v i { display: block; height: 100%; border-radius: 99px; background: var(--cinza); }
.cp-campo.is-foco .cp-campo-v i { background: color-mix(in srgb, var(--c) 18%, #fff); }
.cp-tela-pe { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.cp-tela-passo { font-size: 11.5px; font-weight: 600; color: var(--mut); }
.cp-tela-ok { width: 92px; height: 30px; border-radius: 99px; background: var(--c-ink); opacity: 0.9; }
.cp-cursor { position: absolute; width: 22px; height: 22px; left: 46%; top: 47%; filter: drop-shadow(0 4px 6px rgba(4, 8, 31, 0.35)); animation: cp-cursor 3.2s ease-in-out infinite; }
@keyframes cp-cursor { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, -18px); } }

/* passos em grade de cartões (cinco passos ou mais, todos com tela real): número, título, texto e a
   tela do passo embaixo, como os cartões com visual das landing pages */
.cp-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
.cp-gcard {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 18px 18px; border-radius: 22px; background: #fff; box-shadow: var(--cartao-sombra);
  scroll-margin-top: 96px;
}
/* nos cartões, o número em "01" grande e leve, na cor da área, como numeração editorial */
.cp-gcard-n {
  margin-bottom: 4px; font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: transparent;
  background: linear-gradient(140deg, color-mix(in srgb, var(--c) 75%, #fff) 0%, var(--c-ink) 90%); -webkit-background-clip: text; background-clip: text;
}
.cp-gcard h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--tx); }
.cp-gcard-d p { margin: 0 0 6px; }
.cp-gcard-d strong { color: var(--tx); }
.cp-gcard-tela {
  margin-top: auto; padding-top: 12px;
}
.cp-gcard-tela video {
  display: block; width: 100%; aspect-ratio: 1280 / 780; object-fit: cover; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--linha), 0 18px 36px -24px rgba(4, 8, 31, 0.45);
}
/* a tela simulada, compacta, no cartão do passo que ainda não tem tela real */
.cp-gcard-tela .cp-tela { aspect-ratio: 1280 / 780; box-shadow: 0 0 0 1px var(--linha), 0 18px 36px -24px rgba(4, 8, 31, 0.45); }
.cp-gcard-tela .cp-tela-bar { padding: 7px 10px; }
.cp-gcard-tela .cp-tela-bar i { width: 6px; height: 6px; }
.cp-gcard-tela .cp-tela-bar span { font-size: 9.5px; padding: 2px 8px; }
.cp-gcard-tela .cp-tela-corpo { min-height: 0; grid-template-columns: 34px minmax(0, 1fr); }
.cp-gcard-tela .cp-tela-rail { gap: 5px; padding: 8px 0; }
.cp-gcard-tela .cp-tela-rail span { width: 22px; height: 22px; border-radius: 7px; }
.cp-gcard-tela .cp-tela-rail img { width: 13px; height: 13px; }
.cp-gcard-tela .cp-tela-main { gap: 8px; padding: 10px 12px; }
.cp-gcard-tela .cp-tela-cab { font-size: 11px; }
.cp-gcard-tela .cp-tela-cab img { width: 15px; height: 15px; }
.cp-gcard-tela .cp-campo { gap: 5px; padding: 7px 10px; border-radius: 9px; }
.cp-gcard-tela .cp-campo:nth-child(n + 3), .cp-gcard-tela .cp-tela-pe { display: none; }
.cp-gcard-tela .cp-campo-l { font-size: 11px; }
.cp-gcard-tela .cp-campo-v { height: 6px; }
.cp-gcard-tela .cp-cursor { width: 16px; height: 16px; }

/* a dica ocupa a coluna toda, para caber numa linha só sempre que o texto deixar */
.cp-dica {
  margin: clamp(28px, 3vw, 36px) 0 0; font-size: 14.5px; line-height: 1.6; color: var(--tx2); text-wrap: pretty;
}
.cp-dica blockquote {
  margin: 0; padding: 16px 22px 16px 58px; position: relative; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 8%, #fff);
}
.cp-dica blockquote::before {
  content: ""; position: absolute; left: 18px; top: 14px; width: 26px; height: 26px; border-radius: 8px; background: var(--c-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cp-dica blockquote + blockquote { margin-top: 12px; }
.cp-dica p { margin: 0; }
.cp-dica p + p { margin-top: 6px; }
.cp-dica .hc-callout-title { color: var(--c-ink); }

/* ---------- apps (ou ganhos) em cartões ---------- */
.cp-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 18px; }
.cp-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 24px; border-radius: 22px; background: #fff; box-shadow: var(--cartao-sombra); }
.cp-card-vis {
  display: grid; place-items: center; height: 132px; margin-bottom: 10px; border-radius: 16px; overflow: hidden;
  /* palco na cor do app, como nas telas dos outros cartões */
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c) 42%, #fff) 0%, transparent 72%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c) 28%, #fff) 0%, transparent 72%),
    color-mix(in srgb, var(--c) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.cp-card-ic {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 8%, transparent), 0 0 0 22px color-mix(in srgb, var(--c) 5%, transparent), 0 14px 28px -14px rgba(4, 8, 31, 0.28);
}
.cp-card-ic img { width: 30px; height: 30px; }
/* cada cartão de app leva a cor da área do próprio app (teal em Geral e Backoffice), não a da página */
.cp .cp-card[data-cor="teal"]    { --c: #1FA8A5; --c-ink: #0F7B77; }
.cp .cp-card[data-cor="azul"]    { --c: #3972FD; --c-ink: #2A5BD7; }
.cp .cp-card[data-cor="verde"]   { --c: #25D366; --c-ink: #0E7A3F; }
.cp .cp-card[data-cor="laranja"] { --c: #FA9800; --c-ink: #A06100; }
.cp .cp-card[data-cor="roxo"]    { --c: #A364FF; --c-ink: #8954D6; }
.cp .cp-card[data-cor="rosa"]    { --c: #FA3D85; --c-ink: #CD326D; }
.cp-card-num { font-size: 20px; font-weight: 700; color: var(--c-ink); letter-spacing: -0.02em; }
.cp-card h3 { margin: 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--tx); }
.cp-card p { margin: 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--tx2); }
.cp-depois { max-width: 860px; margin: 24px 0 0; font-size: 15px; line-height: 1.65; }

/* ---------- o resto do texto, na largura de leitura ---------- */
.cp-ler { max-width: var(--hc-read, 720px); }
.cp-detalhes .hc-prose > :first-child { margin-top: 0; }
.cp-detalhes .hc-prose h2 { scroll-margin-top: 100px; }

/* ---------- chamada final: a imagem do caso de um lado, o texto do outro ---------- */
/* o mesmo grid e a mesma caixa dos passos, espelhados: o texto à esquerda (406) e o motion à direita (650) */
.cp-acao { display: grid; grid-template-columns: minmax(0, 406fr) minmax(0, 650fr); gap: 48px; align-items: center; }
.cp-acao-vis {
  order: 2; padding: clamp(18px, 2.6vw, 32px); border-radius: 28px;
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c) 58%, #fff) 0%, transparent 72%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c) 40%, #fff) 0%, transparent 72%),
    color-mix(in srgb, var(--c) 20%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.cp-acao-motion video {
  display: block; width: 100%; aspect-ratio: 1280 / 780; object-fit: cover; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 30px 60px -30px rgba(4, 8, 31, 0.5);
}
.cp-acao-poster {
  all: unset; position: relative; display: block; width: 100%; cursor: pointer; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 30px 60px -30px rgba(4, 8, 31, 0.5);
}
.cp-acao-poster img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cp-acao-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--hc-navy, #04081F); background: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3), 0 18px 36px -14px rgba(4, 8, 31, 0.6); transition: transform 0.2s ease;
}
.cp-acao-play svg { width: 24px; height: 24px; }
.cp-acao-poster:hover .cp-acao-play { transform: scale(1.06); }
.cp-acao-poster:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 4px; }
.cp-acao-tag {
  position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(4, 8, 31, 0.62); backdrop-filter: blur(8px);
}
/* o texto da chamada final solto na página, só com o ícone em cima (sem cartão em volta) */
.cp-acao-t { padding: 0; }
.cp-acao-ic {
  width: 44px; height: 44px; margin-bottom: 18px; border-radius: 13px; display: grid; place-items: center;
  color: var(--c-ink); background: color-mix(in srgb, var(--c) 14%, #fff);
}
.cp-acao-ic svg { width: 22px; height: 22px; }
.cp-acao-t h2 { margin: 0 0 14px; font-size: 28px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; color: var(--tx); }
.cp-acao-html { font-size: 15.5px; line-height: 1.65; color: var(--tx2); }
.cp-acao-html p { margin: 0 0 12px; }
.cp-acao-html > :last-child { margin-bottom: 0; }
.cp-acao-html ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.cp-acao-html li { padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: var(--cartao-sombra); font-size: 14.5px; line-height: 1.55; }

/* ---------- onde aprofundar: os guias em cartões, como o "Continue por aqui" ---------- */
/* o mesmo grid do fim dos guias (guia-video.css): na largura toda, cartões de altura igual */
.cp-leituras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.cp .ar .hc-related-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 1fr; }
.cp .hc-rel-card { height: 100%; box-sizing: border-box; }
.cp-leituras-grid .hc-rel-card { text-decoration: none; background: #fff; }
.cp-leituras-grid .hc-rel-d { -webkit-line-clamp: 3; }
.cp-leituras-grid .hc-rel-d::first-letter { text-transform: uppercase; }
/* O tipo do cartão ("Guia da ferramenta") leva a cor da área do app do cartão, não o teal da página */
.cp .hc-rel-card[data-cor] .hc-rel-k { color: var(--k-ink); background: color-mix(in srgb, var(--k) 13%, #fff); }
.cp :is(.hc-rel-card, .cp-prox)[data-cor="azul"]    { --k: #3972FD; --k-ink: #2A5BD7; }
.cp :is(.hc-rel-card, .cp-prox)[data-cor="verde"]   { --k: #25D366; --k-ink: #0E7A3F; }
.cp :is(.hc-rel-card, .cp-prox)[data-cor="laranja"] { --k: #FA9800; --k-ink: #A06100; }
.cp :is(.hc-rel-card, .cp-prox)[data-cor="roxo"]    { --k: #A364FF; --k-ink: #8954D6; }
.cp :is(.hc-rel-card, .cp-prox)[data-cor="rosa"]    { --k: #FA3D85; --k-ink: #CD326D; }

.cp-fim { padding-top: clamp(56px, 7vw, 88px); padding-bottom: 72px; }
.cp-fim .hc-after { margin-top: 0; }
/* a chamada de serviço abre o fim: o respiro de cima já vem do padding, e o de baixo é a margem dela */
.cp-fim .hc-servico { margin-top: 0; }

@media (max-width: 1100px) {
  .cp-passos-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-passos-lado { display: contents; }
  .cp-passos-lado .cp-cab { order: -2; margin-bottom: 0; }
  .cp-acao { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 964px) {
  .cp .hc-crumb { display: none; }
  .cp-voltar-m {
    display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 4px; padding: 7px 13px; border-radius: 99px;
    font-size: 13px; font-weight: 600; color: var(--tx2); text-decoration: none; background: var(--hc-paper-2, #F1F4FB);
  }
}
@media (max-width: 900px) {
  .cp-passos-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-palco { position: static; order: -1; }
  .cp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-acao { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .cp-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cp-meta span + span::before { content: none; }
  .cp .cv { margin: 0; }
  .cp-cards { grid-template-columns: minmax(0, 1fr); }
  .cp-grade { grid-template-columns: minmax(0, 1fr); }
  .cp-leituras-grid, .cp .ar .hc-related-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-tela-corpo { grid-template-columns: 40px minmax(0, 1fr); min-height: 0; }
  .cp-tela-rail span { width: 26px; height: 26px; }
  .cp-tela-main { padding: 14px; }
  .cp-palco { padding: 12px; border-radius: 20px; }
  .cp-item { padding-left: 18px; }
  .cp-item-b { padding: 15px 0; font-size: 16px; }
  .cp-item-d p { padding-right: 12px; }
  .cp-dica blockquote { padding: 18px 18px 18px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-painel, .cp-cursor { animation: none; }
  .cp-item, .cp-btn, .cp-acao-play { transition: none; }
}

/* a caixa do vídeo na cor da área, como no guia (caso-video.css): azul fica no degradê padrão */
.cp:not([data-acento]) .cv { --box-c: #1FA8A5; }
.cp[data-acento="verde"] .cv { --box-c: #1FB25A; }
.cp[data-acento="laranja"] .cv { --box-c: #F59300; }
.cp[data-acento="roxo"] .cv { --box-c: #9A5BFA; }
.cp[data-acento="rosa"] .cv { --box-c: #F2397F; }
.cp:not([data-acento="azul"]) .cv {
  border-color: color-mix(in srgb, var(--box-c) 45%, #fff);
  background:
    radial-gradient(90% 70% at 88% 0%, color-mix(in srgb, var(--box-c) 85%, #fff) 0%, color-mix(in srgb, var(--box-c) 70%, transparent) 30%, transparent 68%),
    radial-gradient(70% 60% at 0% 62%, color-mix(in srgb, var(--box-c) 55%, transparent) 0%, transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--box-c) 62%, #000) 0%, color-mix(in srgb, var(--box-c) 50%, #000) 48%, color-mix(in srgb, var(--box-c) 40%, #000) 100%);
  box-shadow: 0 2px 4px rgba(11, 19, 43, 0.08), 0 40px 90px -40px color-mix(in srgb, var(--box-c) 70%, #000);
}

/* da dica para a chamada final, o mesmo respiro das outras dobras, sem vão sobrando */
.cp-acao-sec { padding-top: clamp(44px, 4.5vw, 64px); }

/* "Próximo passo" em cartões: a primeira etapa do guia em vídeo em cima, o tipo na cor da área do app,
   título e nota; o cartão inteiro leva ao guia */
.cp .cp-prox {
  --k: #1FA8A5; --k-ink: #0F7B77; gap: 10px; padding: 12px 12px 22px; color: inherit; text-decoration: none !important; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 18px 40px -30px rgba(4, 8, 31, 0.16); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cp .cp-prox:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 24px 44px -28px rgba(4, 8, 31, 0.24); }
.cp .cp-prox:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 3px; }
/* a tela do guia num fundo neutro, só com um toque leve da cor do app no canto */
.cp-prox-tela {
  margin-bottom: 8px; padding: 12px; border-radius: 16px;
  background:
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--k) 9%, transparent) 0%, transparent 70%),
    #F8F9FC;
  border: 1px solid rgba(16, 24, 40, 0.05);
}
.cp-prox-tela video {
  display: block; width: 100%; aspect-ratio: 1280 / 780; object-fit: cover; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 16px 32px -22px rgba(4, 8, 31, 0.35);
}
.cp-prox-tela .cp-card-vis { height: auto; aspect-ratio: 1280 / 780; margin: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.6); }
.cp-prox-k {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0 6px; padding: 4px 11px 4px 5px; border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--k-ink); background: color-mix(in srgb, var(--k) 13%, #fff);
}
.cp-prox-k img { width: 18px; height: 18px; padding: 2px; box-sizing: border-box; border-radius: 99px; background: #fff; }
.cp-prox h3, .cp-prox .cp-gcard-d { margin: 0 6px; }
.cp-prox .cp-gcard-d::first-letter { text-transform: uppercase; }

/* "Não resolveu?" neutro em todas as páginas de caso: navy liso, sem o brilho colorido, e o botão branco,
   sem a cor da área (nem teal) */
.hc:has(.cp.gv-shell) .hc-ticket {
  background:
    radial-gradient(520px 240px at 90% -30%, rgba(255, 255, 255, 0.07), transparent 70%),
    var(--hc-navy);
}
.hc:has(.cp.gv-shell) .hc-ticket .hc-cta {
  background: #fff; color: var(--hc-navy) !important; border: 1.7px solid #fff;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
}
.hc:has(.cp.gv-shell) .hc-ticket .hc-cta:hover { filter: none; background: rgba(255, 255, 255, 0.9); }

/* "Antes de começar" e "Como saber que deu certo": a lista ao lado do motion, no mesmo palco dos passos.
   O item que o vídeo está mostrando acende; em "Deu certo" a tela vai para a direita. */
.cp-mostra { display: grid; grid-template-columns: minmax(0, 650fr) minmax(0, 406fr); gap: 48px; align-items: center; }
.cp-mostra-sec.is-dir .cp-mostra { grid-template-columns: minmax(0, 406fr) minmax(0, 650fr); }
.cp-mostra-sec.is-dir .cp-mostra-palco { order: 2; }
.cp-mostra-lado { min-width: 0; }
.cp-mostra-lado .cp-cab { margin-bottom: 22px; }
.cp-mostra-depois { margin-top: 18px; font-size: 14.5px; }
.cp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cp-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; transition: background 0.25s ease; }
.cp-mostra .cp-check { cursor: pointer; }
.cp-check-ic {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 99px;
  color: var(--c-ink); background: color-mix(in srgb, var(--c) 13%, #fff); transition: background 0.25s ease, color 0.25s ease;
}
.cp-check-ic svg { width: 13px; height: 13px; }
.cp-check-t { min-width: 0; font-size: 15px; line-height: 1.6; color: var(--hc-soft); text-wrap: pretty; transition: color 0.25s ease; }
.cp-check-t strong { color: var(--tx); }
.cp-mostra .cp-check.is-on { background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.cp-mostra .cp-check.is-on .cp-check-t { color: var(--tx); }
.cp-mostra .cp-check.is-on .cp-check-ic { color: #fff; background: var(--c-ink); }
/* sem motion ainda: os itens em cartões lado a lado */
.cp-checks-solta { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cp-checks-solta .cp-check { padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--cartao-sombra); }

/* "Limites e erros comuns" em cartões: em cima o que a pessoa espera (cinza, com um x), embaixo como
   funciona hoje (com um check), em vez da tabela; o "Erros comuns" vira uma nota */
.cp-lim-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cp-lim { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 18px 36px -30px rgba(4, 8, 31, 0.35); }
.cp-lim-espera { padding: 18px 20px 16px; background: var(--cinza); }
.cp-lim-real { flex: 1; padding: 16px 20px 20px; }
.cp-lim-rot {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut);
}
.cp-lim-real .cp-lim-rot { color: var(--tx); }
.cp-lim-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; color: #9AA1B4; background: #fff; box-shadow: 0 0 0 1px var(--linha); }
.cp-lim-real .cp-lim-ic { color: #fff; background: var(--hc-navy, #04081F); box-shadow: none; }
.cp-lim-ic svg { width: 11px; height: 11px; }
.cp-lim p { margin: 0; text-wrap: pretty; }
.cp-lim-espera p { font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.cp-lim-real p { font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--tx); }
.cp-lim-nota {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 16px 20px; border-radius: 18px;
  background: color-mix(in srgb, var(--c) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
  font-size: 14.5px; line-height: 1.6; color: var(--tx2);
}
.cp-lim-nota p { margin: 0; }
.cp-lim-nota-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; color: var(--mut); }
.cp-lim-nota-ic svg { width: 18px; height: 18px; }
@media (max-width: 1100px) {
  .cp-mostra, .cp-mostra-sec.is-dir .cp-mostra { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cp-mostra-sec.is-dir .cp-mostra-palco { order: -1; }
  .cp-mostra-palco { position: static; }
  .cp-mostra-lado { display: contents; }
  .cp-mostra-lado .cp-cab { order: -2; margin-bottom: 0; }
}
@media (max-width: 720px) {
  .cp-lim-grade { grid-template-columns: minmax(0, 1fr); }
}
/* o exemplo visual do limite: a tela do Hub que mostra como funciona hoje, em cima do cartão */
.cp-lim-tela { padding: 10px 10px 0; background: var(--cinza); }
.cp-lim-tela video {
  display: block; width: 100%; aspect-ratio: 1280 / 780; object-fit: cover; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--linha), 0 14px 30px -22px rgba(4, 8, 31, 0.45);
}
.cp-lim.tem-tela .cp-lim-espera { padding-top: 14px; }

/* recipe de skill dentro de uma janela que imita o editor de skills do Hub, no palco da área */
.cp-recipe {
  margin: 14px 0 30px; padding: clamp(14px, 2vw, 24px); border-radius: 24px;
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c) 58%, #fff) 0%, transparent 72%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c) 40%, #fff) 0%, transparent 72%),
    color-mix(in srgb, var(--c) 20%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.cp-recipe-win { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--linha), 0 18px 40px -26px rgba(4, 8, 31, 0.45); }
.cp-recipe-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--linha); background: #FAFBFD; }
.cp-recipe-pontos { display: inline-flex; gap: 6px; }
.cp-recipe-pontos i { width: 9px; height: 9px; border-radius: 99px; background: #DADDE6; }
.cp-recipe-t { font-size: 12.5px; font-weight: 600; color: var(--tx); }
.cp-recipe-copiar {
  margin-left: auto; padding: 6px 12px; border: 0; border-radius: 99px; cursor: pointer;
  font: 600 12px/1 var(--hc-sans); color: var(--tx); background: #fff; box-shadow: 0 0 0 1px var(--linha);
}
.cp-recipe-copiar:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tx) 30%, transparent); }
.cp .cp-recipe pre {
  margin: 0; padding: 18px 20px 20px; border: 0; border-radius: 0; background: #fff !important; color: var(--tx2) !important;
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: none;
}
.cp .cp-recipe pre span { color: inherit !important; }
.cp-card-ganho { color: var(--c-ink); }
.cp-card-ganho svg { width: 28px; height: 28px; }
.cp .cp-recipe pre code, .cp .cp-recipe pre span { background: none !important; padding: 0; border: 0; box-shadow: none; font-size: inherit; }
/* Para quem é com o motion dos apps: texto e a lista dos apps à esquerda, a tela à direita */
.cp-publico-mostra { grid-template-columns: minmax(0, 600fr) minmax(0, 456fr); }
.cp-publico.lado-dir .cp-publico-mostra { grid-template-columns: minmax(0, 456fr) minmax(0, 600fr); }
.cp-publico.lado-dir .cp-mostra-palco { order: 2; }
/* texto do "A situação": até três linhas, mais junto, com o ponto principal em negrito */
.cp-publico-mostra .cp-publico-t { font-size: 17px; line-height: 1.45; color: var(--tx2); }
.cp-publico-mostra .cp-publico-t p:last-child { margin-bottom: 0; }
.cp-publico-mostra .cp-publico-t strong { font-weight: 600; color: var(--tx); }
/* a lista dos apps: um por linha, com o nome e o que ele faz no caso; o app que o vídeo mostra acende */
.cp-publico-apps { margin-top: 18px; gap: 2px; }
.cp-publico-apps .cp-check { align-items: center; gap: 14px; padding: 10px 14px; }
.cp-publico-ic { flex: none; width: 34px; height: 34px; padding: 6px; box-sizing: border-box; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--linha); }
.cp-publico-app { display: grid; gap: 2px; min-width: 0; }
.cp-publico-app b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--tx); }
.cp-publico-app span { font-size: 13.5px; line-height: 1.45; color: var(--hc-soft); text-wrap: pretty; }
.cp-publico-app span strong { font-weight: 600; color: var(--tx); }
.cp-publico-apps .cp-check:not(.is-on) b { color: var(--hc-soft); }
@media (max-width: 1100px) {
  .cp-publico-mostra { grid-template-columns: minmax(0, 1fr); }
}

/* zigue-zague: o lado do vídeo alterna entre as seções (o componente marca lado-dir, is-dir ou lado-esq) */
.cp-passos.lado-dir .cp-passos-grid { grid-template-columns: minmax(0, 406fr) minmax(0, 650fr); }
.cp-passos.lado-dir .cp-palco { order: 2; }
.cp-acao-sec.lado-esq .cp-acao { grid-template-columns: minmax(0, 650fr) minmax(0, 406fr); }
.cp-acao-sec.lado-esq .cp-acao-vis { order: -1; }
@media (max-width: 1100px) {
  .cp-passos.lado-dir .cp-passos-grid, .cp-acao-sec.lado-esq .cp-acao, .cp-publico.lado-dir .cp-publico-mostra { grid-template-columns: minmax(0, 1fr); }
  .cp-passos.lado-dir .cp-palco, .cp-publico.lado-dir .cp-mostra-palco { order: -1; }
}

/* com quatro apps, a fileira vira duas colunas antes de os cartões ficarem estreitos demais */
@media (min-width: 621px) and (max-width: 1360px) {
  .cp-cards[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Limites e erros comuns" em pilha: um cartão por limite, com a tela à esquerda e a comparação à direita
   (o que parece, riscado de leve, e como é na prática). Na rolagem cada cartão gruda no topo e o
   seguinte vem por cima. */
.cp-pilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.cp-lim2 {
  position: sticky; top: calc(96px + var(--i) * 16px);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 3.4vw, 56px); align-items: center;
  padding: 14px clamp(28px, 3.4vw, 56px) 14px 14px; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.045), 0 -6px 24px -20px rgba(4, 8, 31, 0.1), 0 20px 44px -30px rgba(4, 8, 31, 0.16);
}
/* a tela fica no mesmo palco na cor da área dos passos */
.cp-lim2-tela {
  border-radius: 20px; overflow: hidden; padding: clamp(10px, 1.2vw, 16px);
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--c) 58%, #fff) 0%, transparent 72%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--c) 40%, #fff) 0%, transparent 72%),
    color-mix(in srgb, var(--c) 20%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.cp-lim2-tela video { display: block; width: 100%; aspect-ratio: 1280 / 780; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 24px 48px -28px rgba(4, 8, 31, 0.45); }
.cp-lim2-tela .cp-card-vis { height: auto; aspect-ratio: 1280 / 780; margin: 0; border-radius: 12px; background: #fff; }
.cp-lim2-t { display: grid; gap: 12px; padding: 8px 0; }
.cp-lim2-n { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink); }
.cp-lim2-q { margin: 0; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--tx); text-wrap: pretty; }
.cp-lim2-r { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tx2); text-wrap: pretty; }
.cp-lim2-nao { font-weight: 700; color: var(--c-ink); }
.cp-lim2-r strong:not(.cp-lim2-nao) { font-weight: 600; color: var(--tx); }
@media (max-width: 900px) {
  .cp-lim2 { position: static; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 12px 12px 20px; }
  .cp-lim2-t { padding: 0 8px; }
}