/* =====================================================
   MARKANT — Markant Lab: Extrator de Leads do Google Maps
   Mobile first. Cores só por tokens de style.css.
   ===================================================== */

.ext-hero .roi-hero-content { max-width: 760px; }
.ext-hero .roi-hero-subtitle { max-width: 720px; }

/* Tabela */
.ext-table-wrap {
  overflow: hidden;
  border: 1px solid var(--cinza);
  border-radius: var(--radius-btn);
  background: var(--cinza-escuro);
}

.ext-table-wrap table { width: 100%; border-collapse: collapse; }

.ext-table-wrap th,
.ext-table-wrap td {
  padding: 10px 14px;
  border-top: 1px solid color-mix(in srgb, var(--cinza) 50%, transparent);
  color: var(--branco);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.ext-table-wrap thead th {
  border-top: 0;
  color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro));
  font-size: 0.8125rem;
  font-weight: 700;
}

.ext-table-wrap tbody th { font-weight: 700; }

/* Conteúdo */
.ext { max-width: 900px; margin: 0 auto; padding: 8px 0 24px; }
.ext [id] { scroll-margin-top: 16px; }
.ext-section { padding: 40px 0; border-bottom: 1px solid color-mix(in srgb, var(--cinza) 50%, transparent); }

.ext p, .ext li { color: var(--branco); font-size: 1rem; line-height: 1.65; overflow-wrap: break-word; }
.ext p { margin: 0 0 14px; }
.ext strong { color: var(--branco); font-weight: 700; }
.ext a:not(.btn-primary):not(.btn-outline) { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; }
.ext a:focus-visible, .ext button:focus-visible, .ext summary:focus-visible,
.ext-hero a:focus-visible, .ext-final a:focus-visible, .ext-credits a:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }

.ext h2, .ext h3, .ext h4 { color: var(--branco); font-family: var(--font-heading); font-weight: 700; }
.ext h2 { margin: 0 0 14px; font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.12; }
.ext h3 { margin: 0 0 10px; font-size: 1.3125rem; line-height: 1.25; }
.ext h4 { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.3; }

.ext code, .ext pre { font-family: Consolas, Menlo, monospace; }
.ext code { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--cinza) 50%, transparent); color: var(--branco); font-size: 0.92em; overflow-wrap: anywhere; }

/* Cards */
.ext-cards { display: grid; gap: 14px; margin-top: 18px; }

.ext-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--lima) 25%, transparent);
  border-radius: var(--radius-card);
}

.ext-card p:last-child { margin-bottom: 0; }

.ext-card--alert { border: 2px solid var(--lima); }

.ext .ext-alert {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: var(--radius-btn);
  background: var(--lima);
  color: var(--cinza-escuro);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 4.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
}

.ext .ext-alert strong { color: var(--cinza-escuro); }

.ext-shot { margin: 14px 0 0; }
.ext-shot img { display: block; width: auto; max-width: 100%; height: auto; border-radius: var(--radius-btn); }

/* Passo a passo */
.ext-step { padding: 24px 0; border-top: 1px solid color-mix(in srgb, var(--cinza) 30%, transparent); }
.ext-step:first-of-type { border-top: 0; }
.ext-step-tag { margin: 0 0 6px; color: var(--lima) !important; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700; }

.ext-steps { margin: 0 0 14px; padding-left: 22px; list-style: decimal; }
.ext-steps li { margin-bottom: 6px; }
.ext-steps li::marker { color: var(--lima); font-weight: 700; }
.ext-list { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.ext-list li { margin-bottom: 6px; }
.ext-list li::marker { color: var(--lima); }

.ext-copy-row { display: grid; gap: 10px; margin: 12px 0 14px; }
.ext-copy-row code { display: block; padding: 12px 14px; }
.ext-copy-row button, .ext-code-head button { min-height: 44px; justify-content: center; }

.ext .ext-warning {
  padding: 12px 14px;
  border-left: 3px solid var(--lima);
  background: color-mix(in srgb, var(--cinza) 22%, transparent);
  font-size: 0.9375rem;
}

.ext-code { overflow: hidden; margin: 12px 0 14px; border: 1px solid var(--cinza); border-radius: var(--radius-btn); }

.ext-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--cinza);
  color: var(--branco);
  font-size: 0.875rem;
  font-weight: 700;
}

.ext pre {
  margin: 0;
  padding: 14px;
  background: var(--cinza-fundo);
  color: var(--branco);
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ext-folder { margin: 12px 0 14px; border-radius: var(--radius-btn); }
.ext-note-small { font-size: 0.875rem !important; color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro)) !important; }

/* Score */
.ext-score { display: grid; gap: 6px; margin: 12px 0 14px; padding: 0; list-style: none; }
.ext .ext-score li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--cinza) 40%, transparent); }
.ext-score b { color: var(--lima); font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }

/* Perguntas frequentes: reaproveita .faq-item da Home */
.ext-faq { display: grid; margin-top: 18px; }

/* Uso responsável: fundo claro com texto escuro; nele a lima não entra */
.ext-responsible {
  margin: 40px 0 0;
  padding: 22px 20px;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--cinza) 12%, var(--branco));
}

.ext .ext-responsible h2 { color: var(--cinza-escuro); font-size: 1.125rem; }
.ext .ext-responsible li { color: var(--cinza-escuro); font-size: 0.9375rem; }
.ext .ext-responsible .ext-list { margin-bottom: 0; }
.ext .ext-responsible .ext-list li::marker { color: var(--verde); }

/* CTA final */
.ext-final .ext-lime { color: var(--lima); }
.ext-final .lab-cta-desc { color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro)); }

/* Créditos */
.ext-credits { padding: 24px 0; background: var(--cinza-escuro); }

.ext-credits p {
  max-width: 900px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--branco) 76%, var(--cinza-escuro));
  font-size: 0.875rem;
  line-height: 1.6;
}

.ext-credits a { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .ext-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ext-card--wide { grid-column: 1 / -1; }
  .ext-copy-row { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .ext-section { padding: 52px 0; }
  .ext-responsible { padding: 26px 30px; }
}

.ext-options-title { margin-top: 18px !important; }
.ext-glossary-title { margin-top: 26px !important; }
.ext-glossary-note { margin-top: 10px !important; }
#plano-b { margin-top: 8px; }
#score { margin-top: 18px; }