
  /* ★ #5040 — o `main{width:min(940px,…)}` do shell legado prendia a coluna em
     940 px; o artboard é o `main` do DS: `measure-max` de conteúdo, mais o gutter. */
  .dg-page{width:auto;box-sizing:content-box;max-width:var(--vl-page-max);margin:0 auto;padding:var(--vl-space-6) var(--vl-space-6) var(--vl-space-24);
    font-family:var(--vl-font-sans);color:var(--vl-color-text);font-variant-numeric:tabular-nums lining-nums}
  .dg-page section{border-top:0;padding:0}
  .dg-page section+section{margin-top:var(--vl-space-24)}
  @media (max-width:720px){
    .dg-page{padding:var(--vl-space-8) var(--vl-space-4) var(--vl-space-16)}
    .dg-page section+section{margin-top:var(--vl-space-16)}
    .dg-page h2.dg-lead{font-size:var(--vl-text-xl)}
  }
  /* ★ #5733 (rev. (j), M1, divergência j1) — todo topo ocupa a tela sob o
     header sticky, com o grupo centrado na vertical, em qualquer largura:
     antes do dado, a frase e a Pill `lg`; com dado (os vereditos, a borda e
     a carga nova), os números à esquerda e o gráfico à direita, que toma a
     altura que a tela deixa (entre 320 e 460 px). O «E agora?» vem rolando.
     Reverte a e9 (#5163). Em 390 px, uma coluna só.
     ★ #5998 (rev. (n), divergência n3; responsável, 07/10/2026: «muito espaço
     branco acima do gráfico e dos textos») — o topo segue em tela cheia, mas o
     conteúdo encosta em cima: `space-8` abaixo do header, `space-6` entre a
     escolha e os números, e os números alinhados ao topo do gráfico. */
  .dg-page .dg-hero{display:grid;grid-template-rows:auto auto;align-content:start;row-gap:var(--mv-space-6);
    min-height:calc(100svh - var(--mv-sticky-top,80px));height:auto;box-sizing:border-box;
    padding-block:var(--mv-space-8) var(--mv-space-5)}
  .dg-page .dg-hero-dado{grid-template-rows:auto}
  .dg-page section.dg-hero-dado+section.dg-faixa{margin-top:0}
  /* ★ #6011 — na v2, a seção logo abaixo do topo é Quem somos, e encosta nele. */
  .dg-page section.dg-hero+section.mv-who{margin-top:0}
  .dg-hero-claim{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mv-space-5)}
  .dg-page .dg-h1{font-size:40px;line-height:1.2;font-weight:600;letter-spacing:-.01em;margin:0;max-width:none;text-wrap:balance}
  .dg-free{color:var(--mv-violet-500)}
  .dg-hero-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:var(--mv-space-8);align-items:center;
    height:clamp(320px,calc(100svh - var(--mv-sticky-top,80px) - 360px),460px)}
  .dg-hero-nums{min-width:0;align-self:start}
  .dg-hero-chart{min-width:0;min-height:0;height:100%}
  .dg-hn p{margin:0}
  .dg-hn-l{font-size:24px;line-height:1.25;color:var(--mv-ink-2);max-width:32ch;text-wrap:balance}
  .dg-hn-l+*{margin-top:var(--mv-space-3)}
  .dg-hn+.dg-hn{margin-top:var(--mv-space-6)}
  .dg-hn-v{font-size:64px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
  /* O marcador cobre o número e a unidade, e não o rótulo acima: a caixa da
     linha fica na altura do número (o fundo inline pinta a área do glifo). */
  .dg-hn-v .mv-mark{display:inline-block;line-height:1.08}
  .dg-hn-v .mv-info{vertical-align:30px}
  .dg-hn-2 .dg-hn-v{font-size:44px}
  .dg-hn-2 .dg-hn-v .mv-info{vertical-align:20px}
  .dg-lead-b{font:var(--mv-text-heading);margin:0;max-width:34ch;text-wrap:balance}
  .dg-apoio,.dg-ausencia{font:var(--mv-text-body);margin:var(--mv-space-4) 0 0;max-width:65ch}
  .dg-ausencia{margin:0}
  /* ★ #5148 — sem valor publicado, a frase do motivo fica sob o rótulo do
     número, nunca zero. */
  .dg-hn .dg-ausencia{margin-top:var(--mv-space-3);max-width:32ch}
  /* ★ #5735 (rev. (j), M9 a M12, M7) — o topo de cada veredito: o aviso da
     borda em 16/1.5 `ink`, a frase no tamanho do rótulo do custo em `ink-2`,
     o destaque em `ink` com o marcador lime que quebra com a linha, e os
     números `space-6` abaixo. A borda sem veredito não tem gráfico: uma
     coluna só. */
  .dg-aviso{font-size:16px;line-height:1.5;color:var(--mv-ink);margin:0 0 var(--mv-space-4);max-width:40ch}
  .dg-frase{font-size:24px;line-height:1.25;color:var(--mv-ink-2);margin:0;max-width:32ch;text-wrap:balance}
  .dg-destaque{margin-top:var(--mv-space-4);color:var(--mv-ink)}
  .dg-aviso+.dg-frase+.dg-destaque{margin-top:var(--mv-space-2)}
  .dg-destaque .mv-mark{white-space:normal;display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .dg-destaque .mv-info{vertical-align:middle}
  .dg-destaque-depois{margin-top:var(--mv-space-5)}
  .dg-hero-body.dg-so-nums{grid-template-columns:minmax(0,1fr);height:auto}
  .dg-so-nums .dg-hero-nums{max-width:44ch}
  .dg-gap{margin-top:var(--mv-space-6)}
  /* ★ #5734 (rev. (j), M6) — a pior queda sob os números: 16/1.5 em `ink-2`,
     `space-6` acima, com o ⓘ no fim da frase. */
  /* ★ #5788 (rev. (k)) — antes do dado, a escolha Retorno | Risco: no
     desktop, a frase e o «Calcular» à direita, alinhado ao topo dela, e a
     escolha abaixo da frase (`rc-claim-modo`). A parcela do custo ao lado do
     número (o `share` do HeadlineNumber) e a queda das três carteiras com o
     sinal na cor. Os dois modos estão no HTML; o que não está escolhido fica
     `hidden`, que vence o `display` das classes. */
  /* ★ #6002 (v2) — antes do dado, a escolha à esquerda e o «Calcular» (com o
     ⓘ do acesso) à direita, na mesma linha, e a frase da visão abaixo. */
  .dg-claim-modo{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m c" "t t";
    column-gap:var(--mv-space-7);row-gap:var(--mv-space-5);align-items:start}
  .dg-claim-modo .dg-claim-frase{grid-area:t}
  .dg-claim-modo .dg-calc{grid-area:c;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:var(--vl-space-3)}
  .dg-claim-modo .dg-hero-modo{align-self:center}
  /* ★ #6098 (d9, responsável com a home no ar) — o «Calcular» na altura do
     seletor Retorno · Custo · Risco, com label `body`: 44 px os dois, no
     desktop como já era no telefone. */
  .dg-claim-modo .dg-hero-modo,.dg-claim-so-modo .dg-hero-modo{height:44px;box-sizing:border-box;align-items:stretch}
  .dg-claim-modo .dg-calc{height:44px;box-sizing:border-box;padding-top:0;padding-bottom:0}
  .dg-claim-modo .dg-hero-modo{grid-area:m;justify-self:start}
  .dg-hero-modo button{font-size:16px;line-height:1.5;padding:6px 18px}
  /* ★ #6002 (v2) — o «Calcular» é a pílula, com o ⓘ do acesso dentro dela; e,
     antes do dado, 64 px entre a frase da visão e os números. */
  .dg-calc{display:inline-flex;align-items:center;gap:var(--vl-space-3)}
  .dg-calc-a{color:inherit;text-decoration:none}
  .dg-calc .mv-info{border-color:currentColor;color:inherit}
  .dg-page .dg-hero-exemplo{row-gap:var(--vl-space-16)}
  /* ★ #6098 — a home pública (H1/H2): a linha sob a frase diz que os números
     são de uma carteira de exemplo; e a moeda do ☰ é navegação (GET), sem
     família onde gravar a escolha. */
  .dg-exemplo{display:inline-block;font-size:13px;line-height:1.4;color:var(--mv-ink-2);
    border-bottom:1px solid var(--mv-rule-control);margin:var(--mv-space-5) 0 0}
  .mv-hdr-panel .ccy-seg a.ccy-btn{display:inline-block;text-decoration:none}
  /* ★ #6098 (C1, d4) — na Carteira, a linha entre o topo e a tabela Ativos:
     «E agora?» e o link dos planos, entre hairlines. */
  .dg-linha-e-agora{display:flex;align-items:center;justify-content:space-between;gap:var(--mv-space-4);
    border-block:1px solid var(--mv-hairline);padding:var(--mv-space-4) 0;margin:var(--mv-space-6) 0 0}
  .dg-linha-e-agora-t{font-size:24px;line-height:1.2;font-weight:600;margin:0}
  .dg-linha-e-agora-a{color:inherit;text-decoration:none;border-bottom:1px solid var(--mv-rule-control)}
  /* ★ #6098 — dentro da Carteira, o comparativo segue a coluna dela
     (`.ct-page`): sem a largura nem o respiro da página que ele era. */
  .ct-page .dg-page{max-width:none;padding:0;margin:0}
  /* O topo não toma a tela: a tabela Ativos vem logo abaixo (C1). */
  .ct-page .dg-page .dg-hero{min-height:0;padding-block:var(--mv-space-6) 0}
  .ct-page .dg-page.ct-faixas{margin-top:var(--vl-space-24)}
  .mv-hdr-panel .ccy-seg a.ccy-btn[aria-current="true"]{background:var(--mv-on-ink);color:var(--mv-violet-900)}
  .dg-hero-exemplo [hidden]{display:none}
  /* ★ #5802 (rev. (l)) — com dado, o mesmo título e a mesma escolha, sem o
     «Calcular»; o corpo da visão que não está escolhida fica `hidden`. A
     frase do motivo do modo Risco leva o ⓘ no fim da linha. */
  .dg-hero-dado [hidden]{display:none}
  .dg-motivo-risco .mv-info{vertical-align:middle}
  /* ★ #6002 (rev. (o)) — o «x% ao ano» uma linha abaixo do número, a 26 px em
     `ink-2`, 24 px acima (responsável, 07/10/2026: «na linha de baixo e um
     pouco maior»). O olho do dono o esconde; ao assessor ele fica (#5970). */
  .dg-espera-frase{font-size:24px;line-height:1.25;color:var(--vl-color-text);margin:0 0 var(--vl-space-8);max-width:28ch;text-wrap:balance}
  /* ★ #6099 (G3b) — a trilha no lugar do gráfico: o título e, sob ele, a linha do alvo. */
  .dg-trilha .dg-trilha-t{font-size:24px;line-height:1.25;font-weight:600;color:var(--vl-color-text);margin:0 0 var(--vl-space-2);max-width:28ch;text-wrap:balance}
  .dg-trilha .dg-trilha-linha{font-size:15px;line-height:1.45;color:var(--vl-color-text-muted);margin:0 0 var(--vl-space-8);max-width:36ch}
  .dg-corpo{font-size:16px;line-height:1.5;color:var(--vl-color-text);margin:var(--vl-space-4) 0 0;max-width:44ch}
  .dg-corpo .mv-mark{white-space:nowrap}
  .dg-corpo .mv-info{vertical-align:middle}
  .dg-sub{font-size:var(--vl-text-sm);line-height:1.4;color:var(--vl-color-text-soft);margin:var(--vl-space-4) 0 0}
  .dg-sub b{font-weight:400;color:var(--vl-color-text)}
  .vl-hide-values .dg-sub{display:none}
  /* ★ #6002 (rev. (o)) — um alinhamento só no topo com dado: o primeiro bloco
     começa na mesma linha em todo estado e modo, e entre blocos há 24 px
     (aviso → número, número → pior queda, frase → oferta). A frase que
     continua na linha de baixo (a borda) fica a 8 px. */
  .dg-hero-nums>:first-child{margin-top:0}
  .dg-hero-nums .dg-gap,.dg-hero-nums .dg-destaque,.dg-hero-nums .dg-destaque-depois{margin-top:var(--vl-space-6)}
  .dg-hero-nums .dg-aviso{margin-bottom:var(--vl-space-6)}
  .dg-hero-nums .dg-aviso+.dg-frase+.dg-destaque{margin-top:var(--vl-space-2)}
  .dg-gap .dg-hn+.dg-hn{margin-top:0}
  [data-dg-estado="indisponivel"] .dg-ausencia{font:var(--mv-text-heading);max-width:24ch;text-wrap:balance}
  /* O ComparisonChart em `fill` (README, «The hero variant»): o plot toma a
     altura da coluna, sem espaço acima. Sem legenda (#5134): o fim de cada
     linha já diz o valor, na moeda da página. */
  .dg-cc{margin:0;min-width:0;height:100%;display:flex;flex-direction:column}
  .dg-cc-plot{position:relative;flex:1 1 auto;min-height:200px;margin:22px 170px 0 0}
  .dg-cc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .dg-cc-plot path{fill:none;stroke-width:var(--mv-stroke-chart);stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .dg-cc-plot line{stroke:var(--mv-hairline);stroke-width:var(--mv-stroke-hairline);vector-effect:non-scaling-stroke}
  .dg-tom-own{--dg-tom:var(--mv-violet-500)}.dg-tom-better{--dg-tom:var(--mv-accent-lime)}
  .dg-tom-neutral{--dg-tom:var(--mv-purple-300)}
  /* ★ #6002 (v2) — o Custo: a sua carteira com o custo dos nossos produtos
     (cinza claro, em cima) e com os custos que pagou (laranja), e o degradê
     entre elas, do cinza ao fundo. O Risco: a janela da pior queda em cinza. */
  .dg-tom-nosso{--dg-tom:color-mix(in srgb,var(--vl-color-text-disabled) 50%,var(--vl-color-border))}
  .dg-tom-pago{--dg-tom:var(--vl-color-fill-orange)}
  .dg-cc-plot stop.dg-banda-a{stop-color:var(--vl-color-border)}.dg-cc-plot stop.dg-banda-b{stop-color:var(--vl-color-bg)}
  .dg-cc-plot path.dg-banda,.dg-cc-plot path.dg-area{stroke:none}
  .dg-cc-plot linearGradient stop{stop-color:var(--dg-tom)}
  .dg-cc-plot .dg-area{opacity:0;animation:dg-in 600ms cubic-bezier(.45,0,.55,1) 650ms forwards}
  .dg-cc-plot rect.dg-janela{fill:var(--vl-color-text-disabled);fill-opacity:.35}
  .dg-janela-t{position:absolute;top:-22px;font-size:var(--vl-text-sm);line-height:1.4;color:var(--vl-color-text-soft);white-space:nowrap}
  /* ★ #6002 (v2) — a animação do alvo: a linha se desenha, o preenchimento
     entra e a ponta acende; sem movimento, o estado final de uma vez. */
  /* A linha se revela da esquerda para a direita (`clip-path`): o traço com
     `pathLength` não fecha sob o `non-scaling-stroke`. */
  .dg-cc-plot path.dg-ln{clip-path:inset(0 100% 0 0);animation:dg-draw 900ms cubic-bezier(.45,0,.55,1) forwards}
  .dg-cc-plot .dg-banda,.dg-cc-plot .dg-janela,.dg-janela-t{opacity:0;animation:dg-in 600ms cubic-bezier(.45,0,.55,1) 650ms forwards}
  .dg-cc-end{opacity:0;animation:dg-in 300ms cubic-bezier(.45,0,.55,1) 1000ms forwards}
  @keyframes dg-draw{to{clip-path:inset(0 0 0 0)}}
  @keyframes dg-in{to{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .dg-cc-plot path.dg-ln{animation:none;clip-path:none}
    .dg-cc-plot .dg-banda,.dg-cc-plot .dg-area,.dg-cc-plot .dg-janela,.dg-janela-t,.dg-cc-end{animation:none;opacity:1}
  }
  .dg-cc-plot path[class*="dg-tom-"]{stroke:var(--dg-tom)}
  .dg-cc-end{position:absolute;left:calc(100% + var(--mv-space-4));width:calc(170px - var(--mv-space-4));transform:translateY(-50%);
    font:var(--mv-text-label)}
  .dg-cc-end span{display:block}
  .dg-cc-v{color:var(--mv-ink)}
  /* ★ #5998 (rev. (n), n1) — o nome literal da profissional quebra no fim da
     linha, em até três linhas de no máximo 9,5em, e nunca é cortado. */
  .dg-cc-n{color:var(--mv-ink-2);white-space:normal;max-width:9.5em}
  .dg-cc-k{display:inline-block;width:8px;height:8px;background:var(--dg-tom);margin-right:var(--mv-space-2);vertical-align:1px}
  .dg-page .dg-v{display:inline}
  /* ★ #5149 — o cursor do ComparisonChart (README): uma linha vertical em
     `rule-control`, a data no topo e o valor de cada linha ao lado dela, em
     `ink`, com o halo do fundo. */
  .dg-cc-plot{cursor:crosshair}
  .dg-cur{position:absolute;top:0;bottom:0;width:0;pointer-events:none;z-index:2}
  .dg-cur[hidden]{display:none}
  .dg-cur-l{position:absolute;top:-18px;bottom:0;left:0;border-left:1px solid var(--mv-rule-control)}
  .dg-cur-d{position:absolute;top:-36px;left:0;transform:translateX(-50%);font:var(--mv-text-label);color:var(--mv-ink-2);white-space:nowrap}
  .dg-cur-p{position:absolute;left:0}
  .dg-cur-p[hidden]{display:none}
  .dg-cur-dot{position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--dg-tom);outline:2px solid var(--mv-ground)}
  .dg-cur-v{position:absolute;left:10px;top:6px;font:var(--mv-text-label);color:var(--mv-ink);white-space:nowrap;
    paint-order:stroke;-webkit-text-stroke:4px var(--mv-ground)}
  .dg-cur-p1 .dg-cur-v{top:-24px}
  .dg-cur-fim .dg-cur-v{left:auto;right:10px}
  .dg-cc-x{display:flex;justify-content:space-between;margin:var(--mv-space-2) 170px 0 0;font:var(--mv-text-label);color:var(--mv-ink-2)}
  @media (max-width:720px){
    .dg-hero-body{height:auto;grid-template-columns:minmax(0,1fr);row-gap:var(--mv-space-6)}
    .dg-page .mv-pill-lg{font-size:16px;line-height:1.5;padding:var(--mv-space-3) var(--mv-space-5)}
    .dg-hn-l{font-size:22px}
    .dg-frase{font-size:22px}
    .dg-page .dg-h1{font-size:28px}
    .dg-hn-v{font-size:44px}.dg-hn-v .mv-info{vertical-align:20px}
    .dg-hn-2 .dg-hn-v{font-size:32px}.dg-hn-2 .dg-hn-v .mv-info{vertical-align:14px}
    /* ★ #5788 — no celular, a escolha à esquerda e o «Calcular» à direita,
       na mesma linha e com 44 px; ★ #6002 (v2) — a frase abaixo delas. */
    .dg-claim-modo{grid-template-columns:auto auto;grid-template-areas:"m c" "t t";justify-content:space-between;
      align-items:center;column-gap:var(--mv-space-3)}
    /* ★ #5830 (rev. (m)) — com dado, a escolha sozinha (`dg-claim-so-modo`)
       tem os mesmos 44 px (★ #6098: a altura é a base, aqui só o respiro). */
    .dg-claim-modo .dg-hero-modo button,.dg-claim-so-modo .dg-hero-modo button{padding:0 14px}
    .dg-cc-plot{flex:none;height:220px;min-height:0;margin-right:160px}
    .dg-cc-end{width:calc(160px - var(--mv-space-4))}
    .dg-cc-x{margin-right:160px}
  }
  /* #5958 — a 320 px a manchete e o «i» cabem com a fonte de fallback (Arial
     e Liberation Sans são mais largas que a SF): o número encolhe e, se ainda
     faltar espaço, o «i» desce de linha; a 375 px ou mais, nada muda. */
  @media (max-width:370px){
    .dg-hn-v{font-size:38px;white-space:normal}.dg-hn-v .mv-info{vertical-align:17px}
  }

  .mv-mark{white-space:nowrap;background:var(--mv-fill-lime);color:var(--mv-ink);padding:0 .12em;margin:0 -.02em;
    box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .mv-mark-orange{background:var(--mv-fill-orange)}
  .mv-info{display:inline-grid;place-items:center;box-sizing:content-box;width:13px;height:13px;
    border:1px solid var(--mv-rule-control);border-radius:999px;color:var(--mv-rule-control);
    font:600 9px/1 var(--mv-font-sans);vertical-align:2px;margin-left:var(--mv-space-2);background:transparent;
    padding:0;cursor:help;transition:background-color 120ms cubic-bezier(.45,0,.55,1),color 120ms cubic-bezier(.45,0,.55,1)}
  .mv-info:hover,.mv-info[aria-expanded="true"]{background:var(--mv-violet-500);border-color:var(--mv-violet-500);color:var(--mv-on-ink)}
  .mv-info:focus-visible{outline:var(--mv-stroke-focus) solid var(--mv-ink);outline-offset:2px}
  .mv-tip{position:absolute;z-index:20;box-sizing:border-box;width:max-content;max-width:min(44ch,calc(100vw - 32px));
    background:var(--mv-surface-ink);color:var(--mv-on-ink);border-radius:var(--mv-radius-tooltip);
    padding:var(--mv-space-4) 20px;opacity:0;transform:translateY(-4px);pointer-events:none;
    transition:opacity 200ms cubic-bezier(.45,0,.55,1),transform 200ms cubic-bezier(.45,0,.55,1)}
  .mv-tip.mv-on{opacity:1;transform:none;pointer-events:auto}
  .mv-tip p{margin:0;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:0;white-space:normal;text-align:left}
  .mv-tip p+p{margin-top:var(--mv-space-3)}
  .mv-tip-k{display:block;font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.01em;margin-bottom:2px}
  .mv-tip-f{color:var(--mv-key-formula)}.mv-tip-s{color:var(--mv-key-fontes)}.mv-tip-j{color:var(--mv-key-janela)}
  @media (prefers-reduced-motion:reduce){.mv-tip,.mv-info{transition:none}}

  body{overflow-x:clip}
  /* O DS é desenhado em content-box e sem margem de lista; o shell legado põe
     `*{border-box}` e `li{margin:6px 0}`. Especificidade zero: a classe de um
     componente que peça border-box (a pílula, o StepCard) continua a ganhar. */
  :where(.dg-page) *{box-sizing:content-box}
  :where(.dg-page) li{margin:0}
  .mv-card{box-sizing:border-box}
  .dg-page .mv-lead{font:var(--mv-text-heading);margin:0 0 var(--mv-space-3);max-width:30ch;text-wrap:balance}
  .dg-page .mv-sec-title{font:var(--mv-text-heading);margin:0 0 var(--mv-space-6)}
  .mv-pill-ink{background:var(--mv-ink);color:var(--mv-on-ink);border-color:var(--mv-ink)}
  /* StepCard */
  .mv-steprow{margin:0 calc(-1 * var(--mv-space-5))}
  .dg-page .mv-steprow{margin-right:min(calc(-1 * var(--mv-space-5)),calc(50% - 50vw))}
  .mv-steprow-in{display:flex;gap:var(--mv-space-5);overflow-x:auto;padding:4px var(--mv-space-5) var(--mv-space-4);
    scroll-snap-type:x proximity;scroll-padding-inline:var(--mv-space-5);scrollbar-width:thin;
    scrollbar-color:var(--mv-rule-control) transparent;scroll-behavior:smooth}
  .mv-steprow-in::-webkit-scrollbar{height:6px}.mv-steprow-in::-webkit-scrollbar-thumb{background:var(--mv-rule-control);border-radius:var(--mv-radius-pill)}
  .mv-card{position:relative;flex:none;box-sizing:border-box;width:320px;height:440px;padding:var(--mv-space-5);
    background:var(--mv-surface-ink);color:var(--mv-on-ink);border-radius:var(--mv-radius-card);scroll-snap-align:start;overflow:hidden}
  .mv-card ::selection{background:var(--mv-fill-lime);color:var(--mv-ink)}
  .mv-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--mv-space-4)}
  .mv-card-title{font-size:24px;line-height:1.25;font-weight:600;margin:0;text-wrap:balance;color:var(--mv-on-ink);
    display:flex;gap:.4em;max-width:11em}
  .mv-card-n{flex:none;min-width:1.15em;font-variant-numeric:tabular-nums lining-nums}
  .mv-plus{flex:none;width:32px;height:32px;margin-top:-2px;border-radius:var(--mv-radius-pill);border:0;
    background:var(--mv-fill-lime);color:var(--mv-ink);display:grid;place-items:center;padding:0;cursor:pointer;
    transition:background-color 200ms cubic-bezier(.45,0,.55,1),transform 120ms cubic-bezier(.45,0,.55,1)}
  .mv-plus svg{width:14px;height:14px;transition:transform 200ms cubic-bezier(.45,0,.55,1)}
  .mv-plus svg path{stroke:currentColor;stroke-width:1.75;stroke-linecap:round;fill:none}
  .mv-plus:hover{transform:scale(1.08)}
  .mv-plus:focus-visible{outline:var(--mv-stroke-focus) solid var(--mv-on-ink);outline-offset:3px}
  .mv-card.mv-open .mv-plus{background:var(--mv-purple-300)}
  .mv-card.mv-open .mv-plus svg{transform:rotate(45deg)}
  .mv-fig{position:absolute;left:0;right:0;bottom:var(--mv-space-5);display:grid;place-items:center;
    transition:opacity 160ms cubic-bezier(.45,0,.55,1),transform 160ms cubic-bezier(.45,0,.55,1)}
  .mv-fig svg{width:272px;height:236px;display:block;overflow:visible}
  .mv-fig polygon,.mv-fig path,.mv-fig ellipse,.mv-fig rect,.mv-fig circle{fill:var(--mv-surface-ink);stroke:var(--mv-on-ink);
    stroke-width:var(--mv-stroke-drawing);stroke-linejoin:round;stroke-linecap:round}
  .mv-fig polyline,.mv-fig line{fill:none;stroke:var(--mv-on-ink);stroke-width:var(--mv-stroke-drawing);stroke-linejoin:round;stroke-linecap:round}
  .mv-fig .mv-px{stroke:none}
  .mv-fig .mv-px-v2{fill:var(--mv-violet-200)}.mv-fig .mv-px-p3{fill:var(--mv-purple-300)}.mv-fig .mv-px-v4{fill:var(--mv-violet-400)}
  .mv-fig .mv-cover{fill:var(--mv-surface-ink);stroke:none}
  .mv-fig clipPath rect{stroke:none}
  .mv-card.mv-open .mv-fig{opacity:0;transform:translateY(6px);pointer-events:none}
  .mv-card-text{margin:var(--mv-space-5) 0 0;font-size:16px;line-height:1.5;color:var(--mv-on-ink)}
  .mv-card-text[hidden]{display:none}
  .mv-card-text .mv-info{vertical-align:1px}
  .mv-logos{list-style:none;margin:var(--mv-space-6) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mv-space-6);color:var(--mv-ink)}
  .mv-logo{display:block;overflow:visible}
  .mv-fig .mv-logos{flex-direction:column;gap:var(--mv-space-6);margin:0;color:var(--mv-on-ink)}
  .mv-fig svg.mv-logo{width:auto;height:auto}
  .mv-loop{transform-box:view-box;animation-duration:var(--dur,9s);animation-timing-function:cubic-bezier(.45,0,.55,1);
    animation-iteration-count:infinite;animation-direction:alternate;animation-delay:var(--delay,0s)}
  .mv-loop-slide{animation-name:mv-slide}.mv-loop-uncover{animation-name:mv-uncover}.mv-loop-trace{animation-name:mv-trace}
  .mv-loop-uncover,.mv-loop-trace,.mv-loop-in-a,.mv-loop-in-b,.mv-loop-in-c{animation-direction:normal;animation-delay:calc(var(--dur,9s) * -0.7)}
  .mv-loop-in-a{animation-name:mv-in-a}.mv-loop-in-b{animation-name:mv-in-b}.mv-loop-in-c{animation-name:mv-in-c}
  .mv-loop-rise{animation-name:mv-rise}
  .mv-loop-swap-a{animation-name:mv-swap-a}.mv-loop-swap-b{animation-name:mv-swap-b}
  @keyframes mv-rise{from{transform:translateY(var(--y0))}to{transform:translateY(var(--y1))}}
  @keyframes mv-swap-a{0%,40%{opacity:1}55%,100%{opacity:.32}}
  @keyframes mv-swap-b{0%,40%{opacity:.32}55%,100%{opacity:1}}
  @keyframes mv-slide{from{transform:none}to{transform:translate(var(--dx),var(--dy))}}
  @keyframes mv-uncover{0%{transform:none}60%,97%{transform:translateX(var(--dx))}98%,100%{transform:none}}
  @keyframes mv-trace{0%,88%{opacity:1}94%,97%{opacity:0}98%,100%{opacity:1}}
  @keyframes mv-in-a{0%,26%{opacity:0}28%,88%{opacity:1}94%,100%{opacity:0}}
  @keyframes mv-in-b{0%,37%{opacity:0}39%,88%{opacity:1}94%,100%{opacity:0}}
  @keyframes mv-in-c{0%,50%{opacity:0}52%,88%{opacity:1}94%,100%{opacity:0}}
  .mv-card.mv-open .mv-loop{animation-play-state:paused}
  /* ComparisonTable (o produto, sem botões) */
  .mv-table{border-collapse:separate;border-spacing:0;width:100%}
  .mv-table thead th{position:sticky;top:var(--mv-sticky-top,0px);z-index:2;background:var(--mv-ground);padding-top:var(--mv-space-3)}
  .mv-table th,.mv-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--mv-hairline);font-size:16px;line-height:1.5}
  .mv-table th{font-weight:400;font-size:13px;line-height:1.4;letter-spacing:.01em;color:var(--mv-ink-2);white-space:nowrap}
  .mv-table tbody tr:last-child td{border-bottom:0}
  .mv-ct{max-width:820px;margin:0 auto}
  .mv-ct th,.mv-ct td{padding:var(--mv-space-3) var(--mv-space-4) var(--mv-space-3) 0}
  .mv-ct thead th{vertical-align:middle}
  .mv-ct th.mv-ct-product{padding-bottom:var(--mv-space-4)}
  .mv-ct th.mv-ct-product .mv-pill{display:inline-block;box-sizing:border-box;width:11em;max-width:100%;cursor:default}
  /* ★ #5137 — o título é o botão que grava a preferência (c4); o formulário não
     ocupa caixa, e a pílula ink ganha o :active da lime, como no DS. */
  .mv-ct th.mv-ct-product form{display:contents}
  .mv-ct th.mv-ct-product button.mv-pill{cursor:pointer}
  .mv-pill-ink:active{background:var(--mv-on-ink);border-color:var(--mv-on-ink);color:var(--mv-ink)}
  .mv-ct-meta{color:var(--mv-ink-2);font-size:13px;line-height:1.4;letter-spacing:.01em;padding-top:calc(var(--mv-space-3) + 3px)}
  .mv-check,.mv-cross{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;vertical-align:-4px}
  .mv-check{background:var(--mv-fill-lime)}.mv-cross{background:var(--mv-fill-orange)}
  .mv-check svg,.mv-cross svg{width:20px;height:20px}
  .mv-check path,.mv-cross path{fill:none;stroke:var(--mv-ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .mv-ct.mv-compact{max-width:342px;table-layout:fixed;width:100%}
  .mv-ct.mv-compact thead th:first-child{width:0;padding:0}
  .mv-ct.mv-compact td:first-child{padding-right:0}
  .mv-ct.mv-compact tr.mv-ct-fn td{border-bottom:0;padding:var(--mv-space-4) 0 var(--mv-space-2);color:var(--mv-ink);font-size:16px;line-height:1.5}
  .mv-ct.mv-compact tr.mv-ct-fn .mv-ct-meta{padding:0}
  .mv-ct.mv-compact tbody tr:not(.mv-ct-fn) td{padding:0 var(--mv-space-1) var(--mv-space-4);text-align:center}
  .mv-ct.mv-compact thead th.mv-ct-product{padding:var(--mv-space-3) var(--mv-space-1)}
  .mv-ct.mv-compact thead th.mv-ct-product .mv-pill{width:100%;padding-left:var(--mv-space-3);padding-right:var(--mv-space-3)}
  .dg-ct-compact{display:none}
  /* ClaimBand */
  .mv-claim{font-size:24px;line-height:1.3;font-weight:600;margin:0;max-width:34ch;text-wrap:balance}
  .mv-claim .mv-info{vertical-align:5px}
  /* TeamPanel (row) */
  .mv-teampanel{margin-top:var(--mv-space-6)}
  .mv-figs-wrap{position:relative;margin:0 0 var(--mv-space-8)}
  .mv-figs-lines{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none}
  .mv-figs-lines i{position:absolute;left:0;right:0;height:1px;background:var(--mv-hairline)}
  .mv-figs-lines i:nth-child(1){top:8px}.mv-figs-lines i:nth-child(2){top:23px}.mv-figs-lines i:nth-child(3){top:38px}.mv-figs-lines i:nth-child(4){top:53px}
  .mv-figs{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mv-space-5)}
  .mv-fig-n{display:grid;gap:var(--mv-space-3)}
  .mv-fig-v{font-size:64px;line-height:1;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
  .mv-fig-l{font-size:16px;line-height:1.5}
  .mv-team-row{display:flex;gap:var(--mv-space-5);overflow-x:auto;margin:0 calc(-1 * var(--mv-space-5));
    padding:4px var(--mv-space-5) var(--mv-space-4);scroll-snap-type:x proximity;scroll-padding-inline:var(--mv-space-5);
    scrollbar-width:thin;scrollbar-color:var(--mv-rule-control) transparent;scroll-behavior:smooth}
  .mv-team-row::-webkit-scrollbar{height:6px}.mv-team-row::-webkit-scrollbar-thumb{background:var(--mv-rule-control);border-radius:var(--mv-radius-pill)}
  .mv-team-row:focus-visible{outline:var(--mv-stroke-focus) solid var(--mv-ink);outline-offset:2px}
  .mv-person{display:grid;gap:var(--mv-space-2);flex:none;width:260px;scroll-snap-align:start;align-content:start}
  .mv-frame{position:relative}
  .mv-photo,.mv-ph{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;filter:grayscale(1) contrast(1.04)}
  .mv-photo{mix-blend-mode:multiply}
  .mv-ph{background:var(--mv-fill-callout)}
  .mv-chip{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px}
  .mv-chip-0{background:var(--mv-violet-500)}.mv-chip-1{background:var(--mv-fill-lime)}.mv-chip-2{background:var(--mv-purple-300)}
  .mv-chip-3{background:var(--mv-fill-orange)}.mv-chip-4{background:var(--mv-violet-700)}.mv-chip-5{background:var(--mv-accent-lime)}
  .mv-chip-6{background:var(--mv-violet-200)}
  .mv-person-name{font-size:16px;line-height:1.5;margin:0}
  .mv-person-role{font-size:13px;line-height:1.4;color:var(--mv-ink-2);margin:0}
  /* Disclosure (SegmentedControl e o callout) */
  .mv-dis{margin-top:var(--mv-space-6)}
  .mv-seg{display:inline-flex;border:1px solid var(--mv-rule-control);border-radius:var(--mv-radius-pill);padding:2px}
  .mv-seg button{font:inherit;font-family:var(--mv-font-sans);font-size:13px;line-height:1.4;padding:4px 14px;
    border-radius:var(--mv-radius-pill);border:0;background:transparent;color:var(--mv-ink);cursor:pointer;
    transition:background-color 200ms cubic-bezier(.45,0,.55,1)}
  .mv-seg button[aria-pressed="true"]{background:var(--mv-ink);color:var(--mv-on-ink)}
  .mv-seg button:hover:not([aria-pressed="true"]){background:var(--mv-hairline)}
  .mv-seg button:focus-visible{outline:var(--mv-stroke-focus) solid var(--mv-ink);outline-offset:2px}
  .mv-callout{margin-top:var(--mv-space-4);max-width:65ch;background:var(--mv-fill-callout);border-radius:var(--mv-radius-callout);
    padding:var(--mv-space-5);font-size:16px;line-height:1.5;color:var(--mv-ink)}
  .mv-callout p{margin:0}
  /* Disclaimer */
  .mv-disc{border-top:1px solid var(--mv-hairline);padding-top:var(--mv-space-5);max-width:65ch}
  .mv-disc p{font-size:13px;line-height:1.4;letter-spacing:.01em;color:var(--mv-ink-2);margin:0}
  @media (max-width:720px){
    .dg-page .mv-steprow{margin:0 calc(-1 * var(--mv-space-4))}
    .mv-steprow-in{padding-left:var(--mv-space-4);padding-right:var(--mv-space-4);scroll-padding-inline:var(--mv-space-4)}
    .dg-ct-desk{display:none}.dg-ct-compact{display:table}
    .mv-claim{font-size:22px}
    .mv-figs{grid-template-columns:repeat(2,1fr);row-gap:var(--mv-space-6)}
    .mv-figs-lines{display:none}
    .mv-fig-v{font-size:44px}
    .mv-team-row{gap:var(--mv-space-4);margin:0 calc(-1 * var(--mv-space-4));padding-left:var(--mv-space-4);
      padding-right:var(--mv-space-4);scroll-padding-inline:var(--mv-space-4)}
    .mv-person{width:200px}
    .mv-callout{padding:var(--mv-space-4)}
  }
  @media (prefers-reduced-motion:reduce){
    .mv-team-row,.mv-steprow-in{scroll-behavior:auto}
    .mv-plus,.mv-plus svg,.mv-fig,.mv-seg button{transition:none}
    .mv-loop{animation:none}
    .mv-fig .mv-cover{display:none}
  }

  /* ★ #6011 — uma seção por tela no desktop: ocupa a tela abaixo do header e a
     rolagem para no centro dela. Sem snap a 390 px e com movimento reduzido. */
  /* ★ #6098 — o snap é da página que é só o comparativo, a home pública
     (`main.dg-page`). Na Carteira o comparativo divide a página com a tabela
     Ativos, que não é seção de tela: o snap obrigatório no documento puxava
     toda rolagem de volta ao topo e a tabela ficava fora de alcance. Lá, as
     faixas seguem com uma tela cada, sem snap. */
  @media (min-width:721px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
    html:has(> body > main.dg-page){scroll-snap-type:y mandatory;scroll-padding-top:var(--mv-sticky-top, 80px)}
    main.dg-page > section,.ct-faixas > section{min-height:calc(100svh - var(--mv-sticky-top, 80px));box-sizing:border-box;scroll-snap-align:center}
    main.dg-page > section#disclaimer,.ct-faixas > section#disclaimer{min-height:0;scroll-snap-align:end}
  }
  /* O rótulo e o título das seções claras (Quem somos, Como ganhamos), e o fecho delas. */
  .dg-rotulo{font-size:24px;line-height:1.25;font-weight:400;margin:0;text-align:center;color:var(--mv-ink-2)}
  .dg-titulo{font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.02em;margin:var(--mv-space-3) auto 0;
    max-width:34ch;text-align:center;text-wrap:balance}
  .mv-dark{--mv-light:var(--mv-ground);--mv-deep:var(--mv-surface-ink);background:var(--mv-surface-ink);color:var(--mv-ground)}
  .mv-dark > *{--mv-ground:var(--mv-deep);--mv-ink:var(--mv-light);--mv-on-ink:var(--mv-deep);--mv-ink-2:var(--mv-dark-ink-2);
    --mv-hairline:var(--mv-dark-hairline);--mv-rule-control:var(--mv-dark-rule-control);--mv-fill-callout:var(--mv-dark-fill-callout)}
  .mv-dark .mv-mark,.mv-dark .mv-pill-lime{color:var(--mv-deep)}
  .mv-dark .mv-info:hover,.mv-dark .mv-info[aria-expanded="true"]{color:var(--mv-light)}
  .mv-dark ::selection{background:var(--mv-violet-500);color:var(--mv-light)}
  .mv-dark .mv-check path,.mv-dark .mv-cross path{stroke:var(--mv-deep);stroke-width:2}
  .dg-page section.dg-faixa{margin-inline:calc(50% - 50vw)}
  .dg-page section.dg-faixa+section.dg-faixa{margin-top:0}
  /* «E agora?»: a faixa preta, o título centrado e os dez cartões com a borda clara */
  .dg-page .mv-steps{background:var(--mv-surface-ink);color:var(--mv-on-ink);min-height:calc(100svh - var(--mv-sticky-top, 80px));
    box-sizing:border-box;display:flex;align-items:center}
  .mv-steps-in{width:100%;max-width:var(--mv-measure-max);margin:0 auto;padding:var(--mv-space-8) var(--mv-space-5);box-sizing:border-box}
  .mv-steps-sub{font-size:28px;line-height:1.25;font-weight:400;margin:var(--mv-space-4) auto var(--mv-space-7);text-align:center;
    color:var(--mv-ink-3);max-width:52ch;text-wrap:balance}
  .mv-steps .mv-card{border:1px solid var(--mv-on-ink)}
  .mv-steps ::selection{background:var(--mv-violet-500);color:var(--mv-on-ink)}
  /* ★ #5737 (rev. (j), j2, M3) — a fileira em carrossel: de borda a borda, o cartão
     do centro inteiro e a rolagem parando sempre num cartão no centro. O vão de
     meia tela menos meio cartão deixa o passo 1 e o passo 10 chegarem ao centro.
     O esmaecimento dos vizinhos é do JS, pela distância ao centro. */
  .dg-page .mv-steps .mv-steprow{margin-inline:calc(50% - 50vw)}
  .mv-steps .mv-steprow-in{scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-inline:calc(50vw - 160px);scroll-padding-inline:calc(50vw - 160px)}
  .mv-steps .mv-steprow-in::-webkit-scrollbar{display:none}
  .mv-steps .mv-steprow-in > .mv-card{scroll-snap-align:center;transition:opacity 160ms ease}
  /* j3 — o eixo do topo em que o passo trabalha, sob o título. ★ #5789 (rev. (k),
     k1, divergência declarada do DS): uma pílula clara por eixo, e só o ícone
     distingue os eixos. */
  .rc-eixos{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--mv-space-3)}
  .rc-eixo-pill{display:inline-flex;align-items:center;gap:5px;height:24px;box-sizing:border-box;
    padding:0 10px 0 8px;border-radius:var(--mv-radius-pill);background:var(--mv-on-ink);
    color:var(--mv-ink);font:500 13px/1 var(--mv-font-sans);letter-spacing:.01em;white-space:nowrap}
  .rc-eixo-pill svg{width:12px;height:12px;flex:none}
  /* ★ #6011 — as pílulas do eixo só aparecem com o cartão aberto pelo «+». */
  .mv-card .rc-eixos{display:none}
  .mv-card.mv-open .rc-eixos{display:flex}
  .mv-steps-end{margin:var(--mv-space-5) auto 0;max-width:34ch;text-align:center;font-size:40px;line-height:1.1;font-weight:600;
    letter-spacing:-.02em;text-wrap:balance;color:var(--mv-on-ink)}
  /* Os dois serviços: o preto continua, e a tabela vai no painel (branco em alfa baixo sobre a faixa) */
  .dg-page .mv-offers{min-height:calc(100svh - var(--mv-sticky-top, 80px));box-sizing:border-box;display:flex;align-items:center}
  .mv-offers-in{width:100%;max-width:var(--mv-measure-max);margin:0 auto;padding:var(--mv-space-6) var(--mv-space-5);box-sizing:border-box}
  .mv-offers-sub{margin-top:0;margin-bottom:var(--mv-space-6)}
  .mv-offers-panel{max-width:var(--mv-measure-max);margin:0 auto;box-sizing:border-box;padding:var(--mv-space-4) var(--mv-space-7);
    background:rgba(244,244,240,.06);border-radius:var(--mv-radius-callout)}
  .mv-offers-panel .mv-ct{max-width:none;width:100%}
  .mv-offers-panel .mv-table thead th{position:static;background:transparent}
  .mv-offers-panel .mv-ct tbody td:first-child{width:44%}
  .mv-offers-panel .mv-ct tbody td:first-child,.mv-offers-panel .mv-ct thead th:first-child{color:var(--mv-ink-2)}
  /* ★ #6011 — o estado «plano escolhido»: a mensagem pronta do WhatsApp. */
  .dg-escolhido{margin-top:var(--mv-space-5);padding-top:var(--mv-space-4);border-top:1px solid var(--mv-hairline)}
  .dg-escolhido-l{margin:0;color:var(--mv-ink-2)}
  .dg-wa{margin:var(--mv-space-3) 0 0;max-width:48ch;padding:var(--mv-space-4);border-radius:var(--mv-radius-message);
    background:var(--mv-dark-fill-callout);color:var(--mv-ink)}
  /* ★ #6011 — Como ganhamos dinheiro: dois cards do mesmo tamanho, o Banco com a
     borda cinza e o meuvelmo preto, e o fecho embaixo. */
  .dg-page .dg-ganha{min-height:calc(100svh - var(--mv-sticky-top, 80px));box-sizing:border-box;display:flex;align-items:center;
    padding:var(--mv-space-8) 0}
  .dg-ganha-in{width:100%;min-width:0}
  .dg-ganha-dois{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mv-space-7);align-items:stretch;
    margin-top:var(--mv-space-6)}
  .dg-ganha-dois > div{min-width:0;box-sizing:border-box;border-radius:var(--mv-radius-card);padding:var(--mv-space-5);display:flex;flex-direction:column;
    overflow-wrap:anywhere}
  .dg-ganha-dois p{margin:0;font-size:16px;line-height:1.5}
  .dg-ganha-banco{border:2px solid var(--mv-ink-3)}
  .dg-ganha-nome{font-size:26px;line-height:1;font-weight:600;letter-spacing:-.01em;margin:0 0 var(--mv-space-4);height:26px;
    display:flex;align-items:center}
  .dg-ganha-banco .mv-dis{margin-top:var(--mv-space-4)}
  .dg-ganha-seg{display:flex;width:100%;box-sizing:border-box}
  .dg-ganha-seg button{flex:1 1 auto;min-width:0;font-size:clamp(11px,1.02vw,13px);padding:5px clamp(3px,.5vw,7px);white-space:nowrap}
  .dg-ganha-banco .mv-callout{margin-top:var(--mv-space-3);max-width:none;font-size:15px;line-height:1.55;color:var(--mv-ink-2)}
  .dg-ganha-banco .mv-callout p{font-size:inherit;line-height:inherit}
  .dg-ganha-velmo{background:var(--mv-surface-ink);color:var(--mv-on-ink);border:2px solid var(--mv-surface-ink);
    justify-content:center;align-items:center;text-align:center}
  .dg-ganha-logo{margin:0 0 var(--mv-space-4);height:26px;display:flex;align-items:center;justify-content:center}
  .dg-ganha-logo svg{display:block;width:120px;height:auto}
  .dg-ganha-logo svg g[stroke]{stroke:var(--mv-on-ink)}
  .dg-ganha-fecho{margin-top:var(--mv-space-7)}
  @media (max-width:1100px){
    .dg-ganha-seg{display:grid;grid-template-columns:1fr 1fr}
    .dg-ganha-seg button{font-size:13px;padding:6px 8px}
  }
  @media (max-width:860px){.dg-ganha-dois{grid-template-columns:1fr;gap:var(--mv-space-5)}}
  /* Quem somos, de volta ao ground */
  .dg-page .mv-who{min-height:calc(100svh - var(--mv-sticky-top, 80px));box-sizing:border-box;display:flex;align-items:center;
    padding:var(--mv-space-5) 0}
  .mv-who-in{width:100%;min-width:0}
  .mv-who .mv-teampanel{margin-top:var(--mv-space-7)}
  .mv-who .mv-figs-wrap{margin-bottom:var(--mv-space-7)}
  .mv-who .mv-figs{gap:var(--mv-space-5)}
  .mv-who .mv-fig-n{display:flex;flex-direction:column;gap:var(--mv-space-2)}
  .mv-who .mv-fig-v{font-size:52px;line-height:1.05}
  .mv-who .mv-fig-v .mv-mark{padding:0 .06em}
  .mv-who .mv-fig-l{color:var(--mv-ink-2)}
  .dg-page .mv-who .mv-team-row{margin-right:min(calc(-1 * var(--mv-space-5)),calc(50% - 50vw))}
  @media (min-width:721px){
    .dg-page .mv-who .mv-team-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--mv-space-4);
      margin:0;padding:4px 0 0;overflow:visible}
    .mv-who .mv-team-row .mv-person{width:auto}
    .mv-who .mv-person-name{min-height:3em}
  }
  .mv-who .mv-logos{color:var(--mv-ink-3);justify-content:center;gap:var(--mv-space-8);margin-top:var(--mv-space-5)}
  /* Por que agora: a faixa preta de novo, com o BuildingRise ao lado (embaixo em 390 px) */
  .dg-page .mv-why{min-height:calc(100svh - var(--mv-sticky-top, 80px));box-sizing:border-box;display:flex;align-items:center}
  .mv-why-in{max-width:var(--mv-measure-max);margin:0 auto;padding:var(--mv-space-6) var(--mv-space-5);width:100%;box-sizing:border-box;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--mv-space-7);align-items:center}
  .mv-why .mv-claim{font-size:30px;line-height:1.3}
  .mv-why .mv-build{height:clamp(400px,calc(100svh - var(--mv-sticky-top, 80px) - 180px),640px)}
  /* BuildingRise */
  .mv-build{position:relative;width:100%;height:560px;overflow:hidden;transition:opacity 600ms cubic-bezier(.45,0,.55,1);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%);mask-image:linear-gradient(180deg,transparent 0,#000 10%)}
  .mv-build.mv-out{opacity:0}
  .mv-build svg{display:block;width:100%;height:100%;overflow:visible}
  .mv-build polygon{fill:var(--mv-deep,var(--mv-surface-ink));stroke:var(--mv-light,var(--mv-on-ink));stroke-width:var(--mv-stroke-drawing);
    stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .mv-build .mv-px{stroke:none}
  .mv-build .mv-px-v2{fill:var(--mv-violet-200)}.mv-build .mv-px-p3{fill:var(--mv-purple-300)}
  .mv-build-cam{transition:transform 600ms cubic-bezier(.45,0,.55,1)}
  .mv-build-new{animation:mv-build-lay 260ms cubic-bezier(.2,.6,.35,1)}
  .mv-build-px{transition:y 200ms cubic-bezier(.45,0,.55,1)}
  @keyframes mv-build-lay{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
  /* Radicalmente diferente: a foto em duotone, uma tela, a pílula que conecta mais contas */
  .dg-page .mv-radical{height:calc(100svh - var(--mv-sticky-top, 80px));min-height:560px;box-sizing:border-box;display:flex;
    align-items:flex-start;position:relative;
    background:linear-gradient(to bottom,var(--mv-surface-ink),rgb(22 22 20 / 0) 14%),linear-gradient(to bottom,transparent 78%,var(--mv-ground)),
      linear-gradient(100deg,rgb(22 22 20 / .55) 0%,rgb(22 22 20 / 0) 55%),var(--dg-radical-foto, none) center 42% / cover no-repeat var(--mv-surface-ink)}
  .dg-page section.mv-radical+section{margin-top:0}
  .mv-radical-in{max-width:var(--mv-measure-max);margin:0 auto;width:100%;box-sizing:border-box;
    padding:clamp(var(--mv-space-8),14svh,160px) var(--mv-space-5) var(--mv-space-8)}
  .mv-radical-kicker{font-size:28px;line-height:1.25;margin:0 0 var(--mv-space-4);color:var(--mv-ink-2)}
  .mv-radical-h{font-size:clamp(64px,6.6vw,96px);line-height:1.02;font-weight:600;letter-spacing:-.025em;margin:0 0 var(--mv-space-7);
    color:var(--mv-ink);max-width:9ch;text-wrap:balance}
  @media (max-width:720px){
    .dg-rotulo{font-size:16px}
    .dg-titulo,.mv-steps-end{font-size:28px}
    .dg-page .dg-ganha{padding:var(--mv-space-8) 0}
    /* ★ #6011 — a 390 px, como no alvo: o time em duas colunas, as cifras no
       tamanho compacto e o Marker da tabela compacta quebrando. Cobre o que a
       #5958 fazia só abaixo de 370 px (a 320 px o conteúdo cabe). */
    .dg-page .mv-who .mv-team-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mv-space-5) var(--mv-space-4);
      margin:0;padding:0;overflow:visible}
    .mv-who .mv-team-row .mv-person{width:auto}
    .mv-who .mv-fig-v{font-size:32px}
    .dg-ct-compact .mv-mark{white-space:normal}
    .mv-why-in{grid-template-columns:1fr;padding:var(--mv-space-8) var(--mv-space-4) var(--mv-space-4);gap:var(--mv-space-5)}
    .mv-build{height:300px}
  }
  @media (prefers-reduced-motion:reduce){.mv-build,.mv-build-cam{transition:none}.mv-build-new{animation:none}
    .mv-steps .mv-steprow-in > .mv-card{transition:none}}

  /* ★ #5736 (M2 da rev. (j), `.rc-espera`) — as etapas no centro da tela, na
     vertical e na horizontal, com no máximo 760px; a altura é a da tela sob o
     header, menos o respiro do artboard. */
  .dg-page .dg-espera{padding-block:0;min-height:calc(100svh - var(--mv-sticky-top,80px) - var(--mv-space-5) - var(--mv-space-9));
    box-sizing:border-box;display:grid;place-items:center}
  .dg-espera>div,.dg-espera-col{width:100%}
  .dg-espera-col{display:grid;justify-items:center}
  .dg-espera .mv-ls{width:min(760px,100%)}
  @media (max-width:720px){.dg-page .dg-espera{min-height:calc(100svh - var(--mv-sticky-top,64px) - var(--mv-space-6) - var(--mv-space-8))}}
  /* ★ #5736 (j4, `.rc-piso`) — abaixo do piso, a frase e as linhas acima das etapas. */
  .dg-espera-piso{width:min(760px,100%);margin:0 0 var(--mv-space-6)}
  .dg-espera-frase{font:var(--mv-text-body, 400 16px/1.5 var(--mv-font-sans));color:var(--mv-ink);margin:0 0 var(--mv-space-3);max-width:60ch}
  .dg-espera-linhas{margin:0;padding:0;list-style:none;display:grid;gap:var(--mv-space-2);font:var(--mv-text-label);color:var(--mv-ink-2)}
  .mv-ls{max-width:760px}
  .mv-ls-list{list-style:none;margin:0;padding:0}
  .mv-ls-step{position:relative;display:grid;grid-template-columns:var(--mv-space-6) minmax(0,1fr) auto;column-gap:var(--mv-space-3);align-items:center;padding:var(--mv-space-5) 0}
  :where(.dg-page) .mv-ls-step{margin:0}
  .mv-ls-n{font:var(--mv-text-label);letter-spacing:.01em;color:var(--mv-ink-2);font-variant-numeric:tabular-nums lining-nums}
  .mv-ls-label{font-size:24px;line-height:1.25;font-weight:400;margin:0;color:var(--mv-ink);transition:color 200ms cubic-bezier(.45,0,.55,1)}
  .mv-ls-queued .mv-ls-label,.mv-ls-queued .mv-ls-n{color:var(--mv-ink-2)}
  .mv-ls-state{display:flex;align-items:center;justify-self:end}
  .mv-ls-word{font:var(--mv-text-label);letter-spacing:.01em;color:var(--mv-ink-2);white-space:nowrap;animation:mv-ls-in 200ms cubic-bezier(.45,0,.55,1)}
  .mv-ls-tag{display:inline-block;border-radius:var(--mv-radius-pill);padding:3px var(--mv-space-3);cursor:default}
  .mv-ls-active .mv-ls-tag{background:var(--mv-violet-700);color:var(--mv-on-ink)}
  .mv-ls-queued .mv-ls-tag{background:var(--mv-fill-you);color:var(--mv-ink-2)}
  /* ★ #5135 — «em análise (Xh)»: laranja com texto ink (e7 da rev. (d), rodada 3 da
     Paula aceita pelo responsável; o DS fa36 ainda diz cinza). Sem botão, sem trilha. */
  .mv-ls-analysis .mv-ls-tag{background:var(--mv-fill-orange);color:var(--mv-ink)}
  /* ★ #5135 — a etapa pronta (DS fa36): o círculo lime com o check, que se desenha
     uma vez, e «pronto» em ink. */
  .mv-ls-ok{display:inline-flex;align-items:center;gap:var(--mv-space-2);color:var(--mv-ink)}
  .mv-ls-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mv-fill-lime);animation:mv-ls-pop 420ms cubic-bezier(.22,1,.36,1) both}
  .mv-ls-check svg{width:20px;height:20px;display:block}
  .mv-ls-check path{fill:none;stroke:var(--mv-ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:mv-ls-draw 360ms cubic-bezier(.22,1,.36,1) 140ms both}
  @keyframes mv-ls-pop{from{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}to{transform:none}}
  @keyframes mv-ls-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes mv-ls-in{from{opacity:0}to{opacity:1}}
  .mv-ls-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mv-hairline)}
  .mv-trail{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mv-hairline);overflow:hidden}
  .mv-trail::after{content:"";position:absolute;top:0;left:0;width:34%;height:1px;
    background:linear-gradient(90deg,transparent,var(--mv-ink-2) 85%,var(--mv-ink));transform:translateX(-100%);
    animation:mv-trail 1.6s cubic-bezier(.45,0,.55,1) infinite}
  @keyframes mv-trail{to{transform:translateX(385%)}}
  .mv-ls-queued .mv-trail::after{animation-duration:2.4s;opacity:.55}
  /* revisar: o tamanho das etiquetas de estado, lime porque é a ação da página. */
  .mv-ls-review .mv-pill,.dg-espera-linhas .mv-pill{display:inline-block;height:auto;font:var(--mv-text-label);letter-spacing:.01em;padding:3px var(--mv-space-3);text-decoration:none}
  @media (max-width:720px){
    .mv-ls-step{grid-template-columns:var(--mv-space-5) minmax(0,1fr);row-gap:var(--mv-space-3);padding:var(--mv-space-4) 0}
    .mv-ls-label{font-size:22px}
    .mv-ls-state{grid-column:2;justify-self:start}
  }
  @media (prefers-reduced-motion:reduce){
    .mv-ls-word{animation:none}.mv-ls-label{transition:none}
    .mv-trail::after{animation:none;opacity:0}
    .mv-ls-check,.mv-ls-check path{animation:none}
  }
