/* A landing usa uma largura de leitura comum e uma demonstração por vez.
   As superfícies e o vidro seguem os papéis de marca/odim.css. */
body.odim-landing-produto .largura { max-width: 1224px; padding-inline: var(--e-8); }
body.odim-landing-produto .topo { background: transparent; }
body.odim-landing-produto .topo::before {
  opacity: 1;
  background: var(--vidro);
  box-shadow: var(--vidro-brilho);
  border-bottom-color: var(--vidro-contorno);
  backdrop-filter: var(--vidro-filtro);
  -webkit-backdrop-filter: var(--vidro-filtro);
}
body.odim-landing-produto .topo::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--odim-branco), transparent);
  pointer-events: none;
}
body.odim-landing-produto .topo-linha { height: 72px; gap: var(--e-6); }
body.odim-landing-produto .topo .odim-logo img { width: 28px; height: 28px; }
body.odim-landing-produto .topo .odim-logo b { font-size: 21px; }
body.odim-landing-produto .menu { gap: var(--e-6); }
body.odim-landing-produto .menu a { font-size: 13px; }
body.odim-landing-produto .topo-acoes { gap: var(--e-2); }
body.odim-landing-produto .topo-acoes .odim-btn { font-size: 13px; }

/* O intervalo antes da prévia dá um início próprio ao produto. */
body.odim-landing-produto .heroi { background: var(--produto-fundo); }
body.odim-landing-produto .heroi-grade { padding-top: 88px; padding-bottom: var(--e-16); }
body.odim-landing-produto .heroi-texto { max-width: 744px; }
body.odim-landing-produto .heroi .odim-display { font-size: clamp(34px, 3.6vw, 48px); }
body.odim-landing-produto .heroi .odim-subtitulo { margin-top: var(--e-3); font-size: clamp(16px, 1.55vw, 19px); }
body.odim-landing-produto .heroi-ideia { margin-top: var(--e-8); min-height: 140px; box-shadow: var(--sombra-2); }
body.odim-landing-produto .hero-campo { min-height: 66px; }
body.odim-landing-produto .heroi-ideia textarea,
body.odim-landing-produto .hero-exemplo { font-size: 16px; }
body.odim-landing-produto .produto-real { padding-bottom: var(--e-12); background: linear-gradient(var(--odim-energia-suave), var(--fundo-elevado)); }
body.odim-landing-produto .produto-real > .largura { max-width: 1104px; }
body.odim-landing-produto .movie-window { aspect-ratio: 16 / 9; max-height: 585px; }
body.odim-landing-produto .movie-caption { margin-top: var(--e-4); }
body.odim-landing-produto .vida-conhecer { margin-top: var(--e-2); font-size: 13px; }

body.odim-landing-produto :is(.motion-how, .motion-resources, .destaque, .planos-secao, .duvidas) { padding-block: var(--e-16); }
body.odim-landing-produto .secao-cabeca { margin-bottom: var(--e-8); }
body.odim-landing-produto .secao-cabeca h2 { font-size: clamp(25px, 2.4vw, 32px); line-height: 1.2; }
body.odim-landing-produto .secao-cabeca p { margin-top: var(--e-3); font-size: 15px; line-height: 1.6; }
body.odim-landing-produto .motion-how { border-top: 1px solid var(--borda); }
body.odim-landing-produto .motion-how-heading { margin-bottom: var(--e-8); }
body.odim-landing-produto .motion-how h2 { max-width: 28ch; }
body.odim-landing-produto .vitrine { gap: var(--e-6); }
body.odim-landing-produto .planos-vitrine .plano { padding: var(--e-5); }
body.odim-landing-produto .planos-vitrine .preco { font-size: 28px; }
body.odim-landing-produto .duvidas-grade { gap: var(--e-12); }
body.odim-landing-produto .duvidas h2 { font-size: clamp(25px, 2.4vw, 32px); }
body.odim-landing-produto .duvidas-lista summary { min-height: 64px; font-size: 15px; }

/* A coluna de etapas permanece quieta; só o painel selecionado demonstra
   a ação. Sem JavaScript, cada legenda acompanha seu exemplo estático. */
.flow-walkthrough { display: block; }
.flow-walkthrough[data-flow-ready] { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); align-items: center; gap: var(--e-12); }
.flow-tabs { display: grid; gap: var(--e-2); }
.flow-tabs[hidden] { display: none !important; }
.flow-tab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  width: 100%;
  min-height: 88px;
  padding: var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto-2);
  text-align: left;
  font: 400 14px/1.5 var(--fonte);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}
.flow-tab[aria-selected="true"], .flow-tab[aria-pressed="true"] { background: var(--odim-energia-suave); border-color: var(--borda-forte); color: var(--texto); }
.flow-tab-number { display: grid; place-items: center; width: 28px; height: 28px; flex: none; margin-top: 2px; border: 1px solid var(--borda-forte); border-radius: 50%; font: 500 11px/1 var(--fonte-mono); color: var(--texto-3); }
.flow-tab[aria-selected="true"] .flow-tab-number, .flow-tab[aria-pressed="true"] .flow-tab-number { color: var(--acao-texto); border-color: var(--acao); background: var(--acao); }
.flow-tab-copy { display: grid; gap: var(--e-2); min-width: 0; }
.flow-tab-copy b, .flow-tab-copy strong { font: 700 17px/1.35 var(--fonte-titulo); letter-spacing: -.025em; color: var(--texto); }
.flow-tab-copy > span { font-size: 13px; color: var(--texto-3); line-height: 1.6; text-wrap: pretty; }
.flow-stage { min-width: 0; }
.flow-walkthrough:not([data-flow-ready]) .flow-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.flow-stage .motion-card { width: 100%; max-width: none; margin: 0; border-radius: var(--raio-g); }
.flow-stage .motion-card[hidden] { display: none !important; }
.flow-demo[data-flow-ready] .motion-card-copy { display: none; }
/* A prévia e o pedido ocupam linhas distintas. Nenhuma fase transforma
   esses blocos em cartões flutuantes sobre o conteúdo do site. */
.flow-stage .walk-art { display: grid; grid-template-rows: auto auto; gap: var(--e-4); height: auto; min-height: 384px; padding: var(--e-5); container-type: inline-size; background: var(--fundo); }
.flow-stage .walk-art::after { content: none; }
.walk-browser { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--landing-papel); box-shadow: var(--sombra-2); color: var(--texto); }
.walk-site-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 40px; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borda); }
.walk-site-nav > strong { font: 600 11px/1 var(--fonte-titulo); letter-spacing: .14em; }
.walk-site-nav > div { display: flex; gap: var(--e-4); font-size: 9px; color: var(--texto-3); }
.walk-site-hero { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: var(--e-5); padding: var(--e-5) var(--e-4); }
.walk-site-copy { min-width: 0; }
.walk-site-copy small { display: block; font: 500 8px/1.4 var(--fonte); color: var(--texto-3); letter-spacing: .1em; margin-bottom: var(--e-3); }
.walk-site-copy .walk-title { position: relative; min-height: 2.2em; font: 600 clamp(20px, 4.3cqw, 29px)/1.08 var(--fonte-titulo); letter-spacing: -.045em; margin: 0 0 var(--e-3); text-wrap: balance; }
.walk-site-copy .walk-title::before { content: ''; position: absolute; inset: -4px; border: 1px solid var(--acao); border-radius: var(--raio-p); background: var(--odim-energia-suave); opacity: var(--walk-edit-highlight, 0); z-index: -1; }
.walk-site-copy > p { font-size: clamp(9px, 1.8cqw, 11px); line-height: 1.6; color: var(--texto-3); margin: 0 0 var(--e-3); }
.walk-site-cta { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 28px; padding: var(--e-2) var(--e-3); border-radius: var(--raio-p); background: var(--odim-noite-2); color: var(--texto-no-escuro); font-size: 9px; }
.walk-site-cta::after { content: '↗'; font-size: 12px; }
.walk-site-photo { height: 186px; border-radius: var(--raio-p) var(--e-8) var(--raio-p) var(--raio-p); overflow: hidden; }
.walk-site-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.walk-site-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin: 0 var(--e-4); padding: var(--e-3) 0; border-top: 1px solid var(--borda); color: var(--texto-3); }
.walk-site-services > span { display: flex; gap: var(--e-2); font-size: 8px; line-height: 1.5; }
.walk-site-services i { font: 500 7px/1.5 var(--fonte-mono); font-style: normal; }
.walk-prompt, .walk-publish-panel { position: relative; min-width: 0; padding: var(--e-3) var(--e-4); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-elevado); box-shadow: var(--sombra-1); }
.walk-prompt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2); min-height: 17px; margin-bottom: var(--e-2); color: var(--texto-3); font-size: 10px; }
.walk-status, .walk-publish-status { font-size: 10px; }
.walk-prompt-row { display: flex; align-items: center; gap: var(--e-3); min-height: 36px; }
.walk-prompt-text { flex: 1; min-width: 0; min-height: 2.8em; margin: 0; color: var(--texto); font: 400 13px/1.4 var(--fonte); }
.walk-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--raio-p); color: var(--acao-texto); background: var(--acao); }
.walk-send svg { width: 18px; height: 18px; }
.walk-address { flex: 1; min-width: 0; font: 400 12px/1.5 var(--fonte-mono); overflow-wrap: anywhere; color: var(--texto); }
.walk-publish-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 32px; padding: var(--e-2) var(--e-3); border-radius: var(--raio-p); background: var(--acao); color: var(--acao-texto); font-size: 11px; }
.walk-publish-button svg { width: 14px; height: 14px; flex: none; }
.walk-publish-progress { position: absolute; left: var(--e-4); right: var(--e-4); bottom: 0; height: 2px; background: var(--acao); transform: scaleX(var(--walk-publish-progress, 1)); transform-origin: left; }
.motion-card[data-phase="created"] .walk-status, .motion-card[data-phase="complete"] .walk-status, .motion-card[data-phase="published"] .walk-publish-status { color: var(--ok); }
.motion-card[data-phase="published"] .walk-publish-button { color: var(--ok); background: var(--ok-suave); }
.motion-card[data-phase="published"] .walk-publish-progress { opacity: 0; }
/* A criação parte de uma tela branca. A página inteira, inclusive a
   navegação, só aparece depois do envio do pedido. */
.motion-card[data-motion-scene="create"][data-motion-ready]:is([data-phase="typing"], [data-phase="building"]) .walk-browser { background: var(--fundo-elevado); }
.motion-card[data-motion-scene="create"][data-motion-ready] .walk-browser > * { opacity: var(--walk-reveal, 1); }
.motion-card[data-motion-scene="create"][data-motion-ready] .walk-site-copy,
.motion-card[data-motion-scene="create"][data-motion-ready] .walk-site-photo,
.motion-card[data-motion-scene="create"][data-motion-ready] .walk-site-services { transform: translateY(calc((1 - var(--walk-reveal, 1)) * 8px)); }
.flow-stage .motion-card[data-phase="changed"] [data-edit-title] { outline: none; background: transparent; }
.flow-stage .walk-title { isolation: isolate; }
[data-motion-running="false"] *, [data-motion-running="false"] *::before, [data-motion-running="false"] *::after { animation-play-state: paused !important; }

/* O Cloud tem um capítulo próprio, reconhecível também na navegação. A
   demonstração clara continua legível dentro da faixa de contraste. */
body.odim-landing-produto .cloud-section { padding-block: var(--e-16); background: linear-gradient(120deg, var(--odim-noite), var(--odim-noite-3)); color: var(--texto-no-escuro); }
.cloud-section .cloud-feature { margin: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-12); border: 0; background: transparent; box-shadow: none; overflow: visible; }
.cloud-section .cloud-copy { padding: 0; }
.cloud-section .cloud-label { margin-bottom: var(--e-5); color: var(--texto-no-escuro); gap: var(--e-3); }
.cloud-section .cloud-label > strong { font: 800 22px/1.3 var(--fonte-titulo); letter-spacing: -.025em; }
.cloud-section .cloud-label img { width: 28px; height: 28px; }
.cloud-section .cloud-badge { background: var(--odim-noite-3); border-color: var(--texto-3); color: var(--texto-no-escuro); font-size: 11px; }
.cloud-section .cloud-copy :is(h2, h3) { max-width: 20ch; margin: 0 0 var(--e-4); color: var(--texto-no-escuro); font: 800 clamp(26px, 2.5vw, 34px)/1.18 var(--fonte-titulo); letter-spacing: -.035em; text-wrap: balance; }
.cloud-section .cloud-description { color: var(--texto-no-escuro-2); font-size: 14px; max-width: 44ch; }
.cloud-section .cloud-benefits { margin-block: var(--e-5); gap: var(--e-2); }
.cloud-section .cloud-benefits li { color: var(--texto-no-escuro); font-size: 13px; }
.cloud-section .cloud-benefits svg { color: var(--foco-cor-escuro); }
.cloud-section .cloud-infrastructure { color: var(--texto-no-escuro-2); max-width: 48ch; font-size: 11px; }
.cloud-section .cloud-art.motion-resource-art { min-height: 376px; border: 1px solid var(--borda); border-radius: var(--raio-g); padding: var(--e-12) var(--e-6) var(--e-6); background: var(--fundo); }
.cloud-section .cloud-flow { max-width: 384px; }
.cloud-section .cloud-request { min-height: 92px; padding: var(--e-3) var(--e-4); }
.cloud-section .cloud-request p { font-size: 13px; }
.cloud-section .cloud-database-head { min-height: 48px; }
.cloud-section .cloud-table-header, .cloud-section .cloud-row { min-height: 32px; }
.cloud-section .cloud-confirmation { min-height: 36px; }

/* Integrações com nomes claros, seguidas de dois benefícios compactos. */
body.odim-landing-produto .motion-resources { background: var(--fundo-elevado); }
body.odim-landing-produto .motion-resource-grid { gap: var(--e-6); }
.motion-resource-grid > .motion-resource { display: flex; flex-direction: column; border-radius: var(--raio-g); }
.integration-heading { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-6) var(--e-6) var(--e-4); }
.integration-heading > img { width: 32px; height: 32px; margin-top: 1px; object-fit: contain; flex: none; }
.integration-heading h3 { margin: 0; color: var(--texto); font: 800 22px/1.3 var(--fonte-titulo); letter-spacing: -.025em; }
.integration-heading p { margin: var(--e-1) 0 0; color: var(--texto-3); font-size: 13px; }
.motion-resource-grid .motion-resource-copy { padding: var(--e-4) var(--e-6) var(--e-6); }
.motion-resource-grid .motion-resource-copy p { font-size: 13px; line-height: 1.65; }
.motion-resource-grid .motion-resource-art { height: 220px; padding: var(--e-5) var(--e-6); margin-top: auto; }
.motion-resource-grid .motion-resource-art::after { content: none; }
.motion-resource-grid .motion-data-art { gap: var(--e-3); }
.motion-resource-grid .motion-data-link { max-width: 308px; grid-template-columns: 80px minmax(32px, 1fr) 80px; }
.motion-resource-grid .motion-service-mark { height: 80px; gap: var(--e-2); }
.motion-resource-grid .motion-service-mark img { width: 28px; height: 28px; }
.motion-resource-grid .motion-service-mark b { font-size: 11px; }
.motion-resource-grid .motion-repo-header { min-height: 42px; }
.motion-resource-grid .motion-commit { min-height: 32px; }
.motion-resource-grid .motion-repo-status { min-height: 30px; }
.project-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-12); margin-top: var(--e-8); padding-top: var(--e-8); border-top: 1px solid var(--borda); }
.project-tool { display: flex; align-items: flex-start; gap: var(--e-4); min-width: 0; }
.project-tool-icon { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--link); }
.project-tool h3 { margin: 0 0 var(--e-2); font: 700 17px/1.4 var(--fonte-titulo); }
.project-tool p { margin: 0; max-width: 48ch; color: var(--texto-3); font-size: 13px; line-height: 1.65; }
body.odim-landing-produto .vida-conexoes { margin-top: var(--e-10); padding-top: var(--e-8); }
body.odim-landing-produto .vida-conexoes h3 { font-size: 22px; }
body.odim-landing-produto .vida-conexoes > p { font-size: 14px; margin-block: var(--e-2); }
body.odim-landing-produto .vida-logos { gap: var(--e-2); margin-top: var(--e-5); }
body.odim-landing-produto .vida-logos li { padding: var(--e-2) var(--e-3); gap: var(--e-2); font-size: 12px; }
body.odim-landing-produto .vida-logos img { width: 22px; height: 22px; }

/* CTA e rodapé formam um único encerramento, com duas colunas de links. */
body.odim-landing-produto .precos { background: var(--odim-noite); }
body.odim-landing-produto .precos-grade { min-height: 376px; gap: var(--e-16); padding-block: var(--e-12); }
body.odim-landing-produto .precos-caixa { padding: 0; }
body.odim-landing-produto .precos h2 { font-size: clamp(30px, 3vw, 40px); }
body.odim-landing-produto .precos-caixa p { font-size: 16px; margin-top: var(--e-4); }
body.odim-landing-produto .precos-acoes { margin-top: var(--e-6); }
body.odim-landing-produto .precos-arte { max-width: 480px; margin: 0; }
body.odim-landing-produto .rodape { padding-block: var(--e-10) var(--e-5); background: var(--odim-noite); border-top: 1px solid var(--odim-noite-3); color: var(--texto-no-escuro-2); }
body.odim-landing-produto .rodape-grade { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: var(--e-12); }
body.odim-landing-produto .rodape .odim-logo { min-height: 44px; color: var(--texto-no-escuro); }
.rodape-marca > p { max-width: 28ch; color: var(--texto-no-escuro-2); font-size: 13px; line-height: 1.6; margin: var(--e-4) 0 0; }
body.odim-landing-produto .rodape-titulo { margin-bottom: var(--e-2); font-size: 12px; color: var(--texto-no-escuro); }
body.odim-landing-produto .rodape nav { gap: 0; }
body.odim-landing-produto .rodape nav a { color: var(--texto-no-escuro-2); min-height: 36px; min-width: 44px; font-size: 13px; }
body.odim-landing-produto .rodape-fim { margin-top: var(--e-8); padding-top: var(--e-4); border-top-color: var(--odim-noite-3); color: var(--texto-no-escuro-2); font-size: 11px; }
body.odim-landing-produto .rodape .rodape-legal { flex-direction: row; flex-wrap: wrap; gap: var(--e-4); align-items: center; }
body.odim-landing-produto .rodape .rodape-legal a { min-height: 44px; font-size: 11px; }
.rodape-utilidades { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-6); }
body.odim-landing-produto .rodape .motion-preferencia,
body.odim-landing-produto .rodape .odim-idioma { color: var(--texto-no-escuro-2); font-size: 11px; }
body.odim-landing-produto .rodape .odim-idioma-select { min-height: 44px; }
body.odim-landing-produto .rodape :focus-visible { outline-color: var(--foco-cor-escuro); }

@media (hover: hover) {
  .flow-tab:hover { background: var(--fundo); }
  .flow-tab:is([aria-selected="true"], [aria-pressed="true"]):hover { background: var(--odim-energia-suave); }
  body.odim-landing-produto .rodape nav a:hover,
  body.odim-landing-produto .rodape .odim-idioma-select:hover { color: var(--texto-no-escuro); }
}

@media (max-width: 1080px) {
  body.odim-landing-produto .menu { gap: var(--e-4); }
  body.odim-landing-produto .topo-linha { gap: var(--e-4); }
  .flow-walkthrough[data-flow-ready] { gap: var(--e-6); }
  .cloud-section .cloud-feature { gap: var(--e-8); }
  .cloud-section .cloud-copy { padding: 0; }
  .cloud-section .cloud-art.motion-resource-art { padding-inline: var(--e-4); }
  .cloud-section .cloud-benefits { grid-template-columns: minmax(0, 1fr); }
  body.odim-landing-produto .rodape-fim { gap: var(--e-2) var(--e-6); }
}
@media (max-width: 900px) {
  body.odim-landing-produto .menu { display: none; }
  body.odim-landing-produto .topo-acoes { margin-left: auto; }
  body.odim-landing-produto .menu-celular { display: block; }
  body.odim-landing-produto .heroi-grade { padding-top: var(--e-16); padding-bottom: var(--e-12); }
  .flow-tab { gap: var(--e-3); padding: var(--e-4); }
  .flow-tab-copy b, .flow-tab-copy strong { font-size: 15px; }
  .cloud-section .cloud-feature { grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
  .cloud-section .cloud-copy :is(h2, h3) { max-width: 28ch; }
  .cloud-section .cloud-description { max-width: 58ch; }
  .cloud-section .cloud-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-section .cloud-art.motion-resource-art { min-height: 360px; max-width: 640px; width: 100%; justify-self: center; }
  .cloud-section .cloud-flow { max-width: 440px; }
  body.odim-landing-produto .precos-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); min-height: 0; }
  body.odim-landing-produto .precos h2 { font-size: 30px; }
  body.odim-landing-produto .rodape-grade { gap: var(--e-8); }
  body.odim-landing-produto .rodape-marca { grid-column: auto; }
  body.odim-landing-produto .rodape nav a { min-height: 44px; }
}
@media (max-width: 760px) {
  body.odim-landing-produto .largura { padding-inline: var(--e-5); }
  body.odim-landing-produto :is(.motion-how, .motion-resources, .destaque, .planos-secao, .duvidas, .cloud-section) { padding-block: var(--e-12); }
  body.odim-landing-produto .secao-cabeca { margin-bottom: var(--e-6); }
  .flow-walkthrough[data-flow-ready] { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  .flow-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); }
  .flow-tab { padding: var(--e-3) var(--e-2); min-height: 88px; align-items: center; flex-direction: column; gap: var(--e-2); text-align: center; }
  .flow-tab-number { width: 24px; height: 24px; margin-top: 0; }
  .flow-tab-copy b, .flow-tab-copy strong { font-size: 12px; }
  .flow-tab-copy > span { display: none; }
  .flow-demo[data-flow-ready] .motion-card-copy { display: block; padding: var(--e-5); border-top: 1px solid var(--borda); }
  .flow-demo[data-flow-ready] .motion-card-copy .motion-step { display: none; }
  .flow-stage .motion-card-copy h3 { font-size: 18px; margin-bottom: var(--e-2); }
  .flow-stage .motion-card-copy p { font-size: 13px; line-height: 1.55; }
  .flow-stage .walk-art { gap: var(--e-3); padding: var(--e-4); }
  .flow-walkthrough:not([data-flow-ready]) .flow-stage { grid-template-columns: minmax(0, 1fr); }
  .project-tools { gap: var(--e-6); }
  .project-tool { gap: var(--e-3); }
  .project-tool h3 { font-size: 15px; }
  body.odim-landing-produto .motion-resource-grid { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
  .motion-resource-grid .motion-resource-art { height: 212px; }
  body.odim-landing-produto .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); }
  body.odim-landing-produto .rodape-marca { grid-column: 1 / -1; }
  .rodape-marca > p { max-width: 48ch; margin-top: var(--e-2); }
  body.odim-landing-produto .rodape-fim { align-items: flex-start; flex-direction: column; }
  .rodape-utilidades { justify-content: space-between; width: 100%; gap: var(--e-3); }
}
@media (max-width: 520px) {
  body.odim-landing-produto .largura { padding-inline: var(--e-4); }
  body.odim-landing-produto .topo-linha { height: 64px; }
  body.odim-landing-produto .topo .odim-logo img { width: 25px; height: 25px; }
  body.odim-landing-produto .topo .odim-logo b { font-size: 20px; }
  body.odim-landing-produto .topo-acoes { gap: var(--e-1); }
  body.odim-landing-produto .topo .comecar { padding-inline: var(--e-3); }
  body.odim-landing-produto .heroi-grade { padding-top: var(--e-12); padding-bottom: var(--e-10); }
  body.odim-landing-produto .heroi .odim-display { font-size: 34px; }
  body.odim-landing-produto .heroi .odim-subtitulo { font-size: 15px; max-width: 30ch; margin-inline: auto; }
  body.odim-landing-produto .heroi-ideia { margin-top: var(--e-6); min-height: 144px; padding: var(--e-4); }
  body.odim-landing-produto .hero-campo { min-height: 68px; }
  body.odim-landing-produto .heroi-ideia textarea { min-height: 64px; }
  body.odim-landing-produto .movie-window { min-height: 198px; aspect-ratio: 16 / 10; }
  body.odim-landing-produto .movie-composer-text { min-height: 8cqw; font-size: 1.7cqw; }
  body.odim-landing-produto .produto-real { padding-bottom: var(--e-8); }
  .walk-site-nav { padding-inline: var(--e-3); gap: var(--e-2); }
  .walk-site-nav > div { gap: var(--e-2); font-size: 8px; }
  .walk-site-hero { grid-template-columns: 1.1fr 1fr; gap: var(--e-3); padding: var(--e-4) var(--e-3); }
  .walk-site-copy small { font-size: 6px; margin-bottom: var(--e-2); }
  .walk-site-copy .walk-title { font-size: 19px; min-height: 3.25em; }
  .walk-site-copy > p { font-size: 9px; line-height: 1.5; }
  .walk-site-photo { height: 196px; }
  .walk-site-cta { font-size: 8px; padding: var(--e-2); gap: var(--e-1); }
  .walk-site-services { margin-inline: var(--e-3); gap: var(--e-2); }
  .walk-site-services > span { font-size: 7px; gap: var(--e-1); }
  .walk-prompt, .walk-publish-panel { padding: var(--e-3); }
  .walk-prompt-text { font-size: 12px; }
  .walk-prompt-head, .walk-status, .walk-publish-status { font-size: 9px; }
  .walk-address { font-size: 10px; }
  .walk-publish-button { font-size: 10px; padding-inline: var(--e-2); gap: var(--e-1); }
  .project-tools { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); margin-top: var(--e-6); padding-top: var(--e-6); }
  .project-tool p { font-size: 12px; }
  .cloud-section .cloud-feature { gap: var(--e-6); }
  .cloud-section .cloud-label { gap: var(--e-2); }
  .cloud-section .cloud-label > strong { font-size: 21px; }
  .cloud-section .cloud-copy :is(h2, h3) { font-size: 27px; }
  .cloud-section .cloud-benefits { grid-template-columns: minmax(0, 1fr); }
  .cloud-section .cloud-art.motion-resource-art { min-height: 0; padding: var(--e-10) var(--e-3) var(--e-5); }
  .cloud-section .cloud-request p { min-height: 60px; }
  .cloud-section .cloud-example { right: var(--e-3); }
  .integration-heading { padding: var(--e-5) var(--e-5) var(--e-3); }
  .motion-resource-grid .motion-resource-art { padding-inline: var(--e-4); }
  .motion-resource-grid .motion-resource-copy { padding: var(--e-4) var(--e-5) var(--e-5); }
  body.odim-landing-produto .vida-logos { display: flex; flex-wrap: wrap; }
  body.odim-landing-produto .vida-logos li { padding: var(--e-2); font-size: 11px; }
  body.odim-landing-produto .vida-logos img { width: 20px; height: 20px; }
  body.odim-landing-produto .precos-grade { grid-template-columns: minmax(0, 1fr); padding-block: var(--e-10); }
  body.odim-landing-produto .precos h2 { max-width: 18ch; }
  body.odim-landing-produto .precos-arte { width: 100%; max-width: 380px; }
  body.odim-landing-produto .rodape { padding-top: var(--e-8); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.odim-landing-produto .topo::before,
  body.odim-landing-produto .heroi-ideia { background: var(--fundo-elevado); }
}
@media (prefers-reduced-transparency: reduce) {
  body.odim-landing-produto .topo::before,
  body.odim-landing-produto .heroi-ideia { background: var(--fundo-elevado); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.odim-landing-produto .topo::after { display: none; }
}