/* Páginas de funcionalidade — vale para as sete.
   O grosso (chain, antes/depois, cards, badges, faq, chips)
   já está no site.css. Aqui fica só o hero de duas colunas. */

.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.1}
.hero-sub{max-width:46ch}
.hero-list{margin-top:26px;list-style:none;display:grid;gap:11px}
.hero-list li{position:relative;padding-left:28px;font-size:.97rem;color:rgba(255,255,255,.9)}
.hero-list li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:rgba(34,211,238,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322D3EE' stroke-width='2.4'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

.mod-note{display:inline-block;margin-top:14px;font-size:.85rem;color:var(--muted);background:var(--tile);border:1px solid var(--line);padding:6px 12px;border-radius:999px}

@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}

/* Container do print/screenshot real */
.screenshot {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Ajuste da imagem para caber no container */
.screenshot__img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
}
/* cursor e overlay de zoom agora ficam em site.css, valendo pro site inteiro */

.screenshot--900x1200 {
  width: 350px;
  max-width: 100%;
  aspect-ratio: 450 / 600;
  margin-inline: auto;
}

.screenshot--900x1200 .screenshot__img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ou cover */
}

.screenshot {
  position: relative;
}
.screenshot__img {
  display: block;
  width: 100%;
}

.screenshot__caption {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: #555555; /* cinza forte */
}

.mock--users {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mock--users > span {
  display: block;
  width: 100%;
  padding: 28px;
}

.mock--users strong {
  display: block;
  font-size: 24px;
  margin-bottom: 4px;
}

.mock--users > span > small {
  display: block;
  font-size: 15px;
}

.users-visual {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px auto;
  max-width: 430px;
}

.users-visual span {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 14px;
}

.mock--users > span > b {
  display: block;
  font-size: 52px;
  line-height: 1;
  margin-top: 10px;
}