/* Socialfy · páginas de produto escritas (FormFlow, ECO)
 * Usa os tokens, a nav e o rodapé do soon.css; tudo aqui fica dentro de .pg.
 * criado 2026-10-22 20:30 BRT
 */
.pg { position: relative; overflow: clip; }
.pg .wrap { width: min(calc(100% - 32px), 1180px); margin-inline: auto; }
.pg section { padding: var(--space-3xl) 0; }
.pg h1, .pg h2, .pg h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
.pg h1 { margin: var(--space-lg) auto 0; max-width: 900px; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.045em; font-weight: 600; }
.pg h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 600; }
.pg h1 span, .pg h2 span { color: var(--ink-3); }
.pg h3 { margin: var(--space-md) 0 var(--space-xs); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.02em; }
.pg p { margin: 0; }

.pg .pg-hero { padding: var(--space-3xl) 0 var(--space-xl); text-align: center; background: radial-gradient(60% 50% at 50% 0%, oklch(56% 0.215 262 / 0.2), transparent 70%); }
.pg-eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.35rem 0.85rem; border: var(--hair) solid var(--rule); border-radius: 999px; color: var(--ink-2); font-size: var(--text-sm); }
.pg-eyebrow img { width: 20px; height: 20px; }
.pg-sub { max-width: 680px; margin: var(--space-lg) auto 0 !important; color: var(--ink-2); font-size: var(--text-md); line-height: 1.5; }
.pg-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

.pg-stage { margin: var(--space-2xl) auto 0; max-width: 1060px; padding: 12px; border: var(--hair) solid oklch(56% 0.215 262 / 0.35); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--night-3), var(--night-2)); box-shadow: var(--shadow-plate); }
.pg-stage--tall { max-width: 640px; }
.pg-stage img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.pg-stage figcaption { margin-top: var(--space-sm); color: var(--ink-3); font-size: var(--text-xs); text-align: center; }

.pg-steps, .pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.pg-card { padding: var(--space-lg); border: var(--hair) solid var(--rule); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--night-2), var(--night)); }
.pg-card p { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.pg-grid .pg-card h3 { margin-top: 0; }
.pg-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--text-sm); }

.pg-light { background: oklch(97% 0.008 262); color: oklch(20% 0.03 262); }
.pg-light h2 { color: oklch(18% 0.03 262); }
.pg-light h2 span, .pg-light .pg-lede { color: oklch(45% 0.03 262); }
.pg-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-2xl); align-items: center; }
.pg-lede { max-width: 620px; margin-top: var(--space-md) !important; color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; }
.pg-list { margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.pg-list li { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: var(--hair) solid oklch(88% 0.015 262); font-size: var(--text-base); }
.pg-list li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.pg-sheet { padding: var(--space-lg); border: var(--hair) solid oklch(88% 0.015 262); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 24px 60px oklch(20% 0.03 262 / 0.12); }
.pg-row { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-top: var(--hair) solid oklch(92% 0.01 262); font-size: var(--text-sm); color: oklch(45% 0.03 262); }
.pg-row:first-child { border-top: 0; }
.pg-row b { color: oklch(18% 0.03 262); font-weight: 600; text-align: right; }
.pg-honest { margin-top: var(--space-md) !important; font-size: var(--text-xs); color: oklch(45% 0.03 262); }
.pg-note { margin-top: var(--space-lg) !important; color: var(--ink-3); font-size: var(--text-sm); }

.pg-faq details { padding: var(--space-md) 0; border-top: var(--hair) solid var(--rule); }
.pg-faq summary { cursor: pointer; font-size: var(--text-base); color: var(--ink); }
.pg-faq details p { margin-top: var(--space-xs); color: var(--ink-2); line-height: 1.6; }
.pg-final { text-align: center; background: radial-gradient(50% 70% at 50% 100%, oklch(56% 0.215 262 / 0.22), transparent 70%); }

@media (max-width: 60rem) {
  .pg section { padding: var(--space-2xl) 0; }
  .pg-steps, .pg-grid { grid-template-columns: 1fr; }
  .pg-split { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* rodada 2 (2026-10-22 21:05 BRT): passo a passo em lista numerada, definição e tabela de comparação */
.pg ol.pg-steps { list-style: none; padding: 0; }
.pg-def { padding-bottom: 0 !important; }
.pg-def .pg-lede + .pg-lede { margin-top: var(--space-sm) !important; }
.pg-table { margin-top: var(--space-xl); overflow-x: auto; border: var(--hair) solid var(--rule); border-radius: var(--radius-lg); }
.pg-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-sm); }
.pg-table th, .pg-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-top: var(--hair) solid var(--rule-soft); color: var(--ink-2); vertical-align: top; }
.pg-table thead th { border-top: 0; color: var(--ink-3); font-weight: 500; background: var(--night-2); }
.pg-table tbody th { color: var(--ink); font-weight: 600; }
.pg-table td:last-child { color: var(--ink); }
.pg-table thead th:last-child { color: var(--accent-hi); }