/* ═══════════════════════════════════════════════════════════════════════════
   LP-FUNIL — sistema de design
   ───────────────────────────────────────────────────────────────────────────
   O que veio de onde (design-systems/brands/, lidos em 2026-08-04):

   · STRIPE   — disciplina de PAPÉIS de cor num canvas branco: heading ≠ label ≠
                body ≠ muted, cada um com um hex só e um trabalho só; borda
                clarinha única (#e5edf5 lá, --line aqui); raio conservador 4-8;
                e a sombra TINGIDA com a cor da marca em vez de cinza neutro.
   · LINEAR   — tracking negativo que aperta conforme o corpo cresce (-0.022em a
                40px, 0 abaixo de 20px) e sistema de 3-4 pesos, nunca mais.
                Também: a borda é a estrutura, a sombra é sussurro.
   · AIRBNB   — o formulário longo que não cansa: elevação em 3 camadas fracas
                (0.02/0.04/0.10) em vez de uma sombra forte; foco = borda vira
                tinta + anel de 3px; press = scale; alvo de toque >= 44px com
                >= 8px de respiro entre eles.
   · FRAMER   — "denso dentro, espaçoso fora": o cartão é compacto, o entorno
                respira; e o hover mexe no ANEL, não na sombra inteira.
   · FIGMA    — profundidade vem de contraste de fundo e do próprio conteúdo;
                sombra é o último recurso, não o primeiro.

   ESCALA TIPOGRÁFICA (razão 1.25, base 16 — número, não adjetivo)
     display 40/1.08/-0.022em/700 · (mobile 30)
     h2      32/1.12/-0.020em/700 · (mobile 26)
     title   17/1.30/-0.006em/600
     body    17/1.55/0/400          · (mobile 16 — mínimo legível)
     sub     15/1.45/0/400
     label   14/1.40/0/500
     badge   12/1.00/+0.08em/700 uppercase
     legal   13/1.50/0/400

   PESOS: 400 ler · 500 rotular · 600 título de cartão · 700 anunciar. Só 4.

   ESPAÇAMENTO: base 4, ritmo 8 → 4 8 12 16 20 24 32 40 56 72 (--s1..--s10)

   RAIO: 8 campo · 12 botão/cartão · 16 painel · 999 pílula. Só 4, por papel.

   MOVIMENTO: 180ms hover · 260ms troca de passo · curva (.2,.8,.2,1)
              press = scale(.985) · prefers-reduced-motion desliga tudo
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Display';
  src: url('/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Display';
  src: url('/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  /* ── cor DO CLIENTE (build.mjs injeta) ─────────────────────────────────── */
  --brand: #101f62;
  --brand-soft: #1b2f8c;
  --accent: #f5720a;
  --brand-rgb: 16 31 98;
  --accent-rgb: 245 114 10;

  /* ── papéis de texto (Stripe): 4 níveis, e cada um tem um trabalho ─────── */
  --ink: var(--brand); /* heading — a navy da marca faz o papel do #061b31 */
  --label: #2e3a5c; /* rótulo de campo, título de cartão */
  --body: #5f6b88; /* texto secundário — 4.9:1 no branco */
  --muted: #8792ac; /* legal/metadados — só >= 14px */

  /* ── superfícies e linhas ──────────────────────────────────────────────── */
  --paper: #fff;
  --canvas: #f6f8fc;
  --line: #e4e9f2;
  --line-strong: #cfd7e6;

  --ok: #0f8a4a;
  --bad: #c0341a;

  /* ── espaçamento ───────────────────────────────────────────────────────── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 56px;
  --s10: 72px;

  /* ── raio ──────────────────────────────────────────────────────────────── */
  --r-field: 8px;
  --r-card: 12px;
  --r-panel: 16px;
  --r-pill: 999px;

  /* ── elevação: 3 camadas fracas (Airbnb) tingidas de marca (Stripe) ────── */
  --sh-card: 0 0 0 1px rgb(var(--brand-rgb) / 0.07), 0 1px 2px rgb(var(--brand-rgb) / 0.04),
    0 8px 20px -14px rgb(var(--brand-rgb) / 0.16);
  --sh-panel: 0 0 0 1px rgb(var(--brand-rgb) / 0.06), 0 2px 6px rgb(var(--brand-rgb) / 0.04),
    0 28px 56px -28px rgb(var(--brand-rgb) / 0.18);
  --sh-cta: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 22px -12px rgb(0 0 0 / 0.45);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 17px/1.55 ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
button,
input {
  font: inherit;
  color: inherit;
}
b,
strong {
  font-weight: 600;
}

/* O canvas não é branco chapado: um véu radial fraquíssimo na cor da marca dá
   atmosfera sem virar "gradiente de IA". Uma camada, 4% de opacidade. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 85% 0%, rgb(var(--brand-rgb) / 0.05), transparent 60%);
}

/* ═══ CABEÇALHO ════════════════════════════════════════════════════════════ */
.hd {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.hd-brand img {
  height: 40px;
  width: auto;
}
.hd-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hd-meta b {
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hd-rate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.hd-rate .st {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: 12px;
}
.hd-rate .g {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}
.hd-rate i {
  font-style: normal;
}
.hd-tel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.hd-tel:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.14);
}
.hd-tel svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Barra de progresso — 6px. A 3px da 1ª rodada era fina demais para ler o avanço
   num relance, e num funil o avanço é metade da motivação de continuar. */
.prog {
  height: 6px;
  background: var(--line);
}
.prog i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-soft), var(--accent));
  transition: width 320ms var(--ease);
}

/* ═══ ATMOSFERA ════════════════════════════════════════════════════════════
   O erro da 1ª rodada não foi feiura, foi AUSÊNCIA DE LUGAR: branco, correto e
   podia ser de qualquer empresa de qualquer cidade. O WindProof opera numa ILHA
   e existe porque VENTO ARRANCA TELHADO. A foto é o lugar; o card branco por
   cima continua sendo o protagonista. Profundidade por CONTRASTE DE FUNDO
   (régua do figma.md), não por sombra mais pesada. */
.atmo {
  position: absolute;
  inset: -100px 50% auto 50%;
  translate: -50% 0;
  width: 100vw;
  height: 560px;
  z-index: 0;
  overflow: hidden;
  display: block;
  pointer-events: none;
}
.atmo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* Véu em 2 paradas: o topo escurece para o cabeçalho respirar, a base dissolve no
   canvas para a foto não terminar em linha reta. Uma camada, não três. */
.atmo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--brand-rgb) / 0.8) 0%,
    rgb(var(--brand-rgb) / 0.52) 46%,
    var(--canvas) 100%
  );
}
/* Cliente sem foto verificada: atmosfera pintada com a cor da marca. Nunca banco
   de imagem — foto genérica é pior que espaço honesto. */
.atmo.painted {
  background: radial-gradient(90% 120% at 50% -10%, var(--brand-soft), var(--brand) 55%, var(--canvas) 100%);
}

/* ═══ PALCO ════════════════════════════════════════════════════════════════ */
.stage {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s8) var(--s5) var(--s9);
  position: relative;
  z-index: 1;
}
.stage.first {
  padding-top: var(--s9);
}
/* `:not(.atmo)` não é preciosismo: sem ele esta regra ganha em especificidade da
   `.atmo { position: absolute }` lá em cima, a foto volta para o fluxo e empurra
   o funil inteiro 600px para baixo. Aconteceu. */
.stage.first > :not(.atmo) {
  position: relative;
  z-index: 1;
}
/* Sobre a foto o título é branco. Contraste medido: #fff sobre o véu a 0.72 da
   navy #101F62 dá ~11:1 — passa AAA folgado. */
.stage.first .display {
  color: #fff;
  text-shadow: 0 2px 20px rgb(var(--brand-rgb) / 0.45);
}
@media (max-width: 640px) {
  .stage {
    padding: var(--s6) var(--s4) var(--s8);
  }
}

.display {
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 var(--s7);
  text-align: center;
  text-wrap: balance;
}
.stage h2 {
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
.stage .sub {
  margin: 0 0 var(--s6);
  font-size: 17px;
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}
@media (max-width: 640px) {
  .display {
    font-size: 30px;
  }
  .stage h2 {
    font-size: 26px;
  }
  .stage .sub {
    font-size: 16px;
  }
  body {
    font-size: 16px;
  }
}

/* linha do topo do passo: ← Back à esquerda, STEP n OF ~m à direita */
.top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  min-height: 32px;
}
.back {
  appearance: none;
  border: 0;
  background: none;
  min-height: 44px;
  padding: 6px 12px 6px 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-field);
  transition: color 180ms var(--ease);
}
.back:hover {
  color: var(--ink);
}
.badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(var(--brand-rgb) / 0.06);
  color: var(--brand-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: right;
}
.badge.go {
  background: rgb(var(--accent-rgb) / 0.1);
  color: #a8480a;
}
.badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══ PAINEL (tela do CEP) ═════════════════════════════════════════════════ */
.panel {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--s8) var(--s7) var(--s6);
  margin-top: var(--s10);
}
@media (max-width: 640px) {
  /* ⚠️ 05/08: aqui o padding do topo era `--s7` e o mascote, que sobe 56% para
     fora do card, POUSAVA EM CIMA do rótulo "Enter your ZIP code" — o primeiro
     texto que a pessoa precisa ler. O card é mais estreito no celular, então o
     medalhão cobre proporcionalmente mais. O respiro do topo tem que caber o
     raio dele, não ser o mesmo do desktop. */
  .panel {
    padding: var(--s9) var(--s5) var(--s5);
  }
  .plate {
    width: 104px;
    height: 104px;
  }
  .plate .mascot {
    width: 80px;
  }
}
/* o mascote coroa o card — o ativo de reconhecimento mais barato do cliente */
.plate {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -56%;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--sh-card);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.plate .mascot {
  width: 96px;
  height: auto;
  object-fit: cover;
  object-position: top center;
}
.lbl {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--label);
  margin-bottom: var(--s2);
}
.zip {
  width: 100%;
  padding: 16px var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  background: var(--paper);
  color: var(--ink);
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-align: center;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.zip::placeholder {
  color: #b9c2d4;
  font-weight: 600;
}
.zip:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22);
}
.bad .zip {
  border-color: var(--bad);
}

/* ═══ BOTÃO PRINCIPAL ══════════════════════════════════════════════════════ */
.cta {
  width: 100%;
  margin-top: var(--s4);
  min-height: 56px;
  padding: 16px var(--s5);
  border: 0;
  border-radius: var(--r-card);
  background: var(--accent);
  color: #fff;
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  box-shadow: var(--sh-cta);
  transition: transform 180ms var(--ease), filter 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 14px 28px -12px rgb(0 0 0 / 0.5);
}
.cta:active {
  transform: scale(0.985);
}
.cta:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px rgb(var(--accent-rgb) / 0.45);
}
.cta[disabled] {
  opacity: 0.55;
  cursor: default;
}
/* TODO ao contrário: isto vale para QUALQUER svg dentro do botão. Em 04/08 a regra
   valia só para `.arw` e o ícone de pin da tela "fora de área" nasceu com 700px de
   altura, laranja e preto, ocupando a tela inteira. Nenhum portão viu; o olho viu. */
.cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cta .arw {
  transition: translate 180ms var(--ease);
}
.cta:hover .arw {
  translate: 3px 0;
}

/* ═══ LINHA DE CONFIANÇA ═══════════════════════════════════════════════════ */
.trust {
  margin: var(--s4) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s5);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.stage > .trust {
  margin-top: var(--s7);
}

/* ═══ CARTÕES DE OPÇÃO — o coração do funil ════════════════════════════════ */
.opts {
  display: grid;
  gap: var(--s3);
}
@media (min-width: 720px) {
  .opts {
    grid-template-columns: 1fr 1fr;
  }
}
.opt {
  appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--s5);
  min-height: 84px;
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: center;
  gap: var(--s4);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
    border-color 180ms var(--ease);
}
.opt:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(0deg, rgb(var(--accent-rgb) / 0.04), rgb(var(--accent-rgb) / 0.04)), var(--paper);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.55), 0 4px 8px rgb(var(--brand-rgb) / 0.06),
    0 22px 40px -20px rgb(var(--brand-rgb) / 0.38);
}
.opt:hover .ico {
  background: rgb(var(--accent-rgb) / 0.14);
}
.opt:hover .ico svg {
  stroke: var(--accent);
}
.opt:active {
  transform: translateY(0) scale(0.98);
}
.opt:focus-visible {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.3);
}
.opt.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 16px 32px -18px rgb(var(--brand-rgb) / 0.3);
}
.opt .ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgb(var(--brand-rgb) / 0.1);
  display: grid;
  place-items: center;
}
.opt .ico svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.opt.on .ico {
  background: rgb(var(--accent-rgb) / 0.12);
}
.opt.on .ico svg {
  stroke: var(--accent);
}
.opt .t {
  display: block;
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.opt .s {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--body);
}
.opt .go {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms var(--ease), translate 180ms var(--ease);
}
.opt:hover .go {
  stroke: var(--accent);
  translate: 3px 0;
}

/* ═══ FORMULÁRIO DE CONTATO ════════════════════════════════════════════════ */
.form {
  background: var(--paper);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--s7);
  display: grid;
  gap: var(--s5);
}
@media (max-width: 640px) {
  .form {
    padding: var(--s5);
  }
}
.row {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 640px) {
  .row.two {
    grid-template-columns: 1fr 1fr;
  }
}
.f label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--label);
  margin-bottom: 6px;
}
.f input[type='text'],
.f input[type='tel'],
.f input[type='email'] {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-field);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.f input::placeholder {
  color: #b9c2d4;
}
.f input:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.22);
}
.f .err {
  display: none;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--bad);
}
.f.bad input {
  border-color: var(--bad);
}
.f.bad .err {
  display: block;
}
.err {
  margin: var(--s2) 0 0;
  font-size: 13px;
  color: var(--bad);
}

.check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.f.bad .check {
  color: var(--bad);
}
.hp {
  position: absolute;
  left: -9999px;
}

.callnow {
  margin: var(--s5) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
.callnow a {
  color: var(--ink);
  font-weight: 600;
}

/* ═══ DONO / PROVA ═════════════════════════════════════════════════════════ */
.owner {
  margin: var(--s7) auto 0;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: rgb(255 255 255 / 0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.owner img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 52px;
}
.owner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--body);
}
.owner b {
  color: var(--ink);
  font-weight: 600;
}

/* ═══ TELA FINAL ═══════════════════════════════════════════════════════════ */
.done {
  text-align: center;
}
.tick {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  display: grid;
  place-items: center;
}
.tick svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* O mascote ENTREGA: sai por cima da borda do bloco escuro, do jeito que ele
   coroa o card do CEP. É o mesmo gesto nas duas pontas do funil. */
.payoff .mark {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 14px 30px -14px rgb(var(--brand-rgb) / 0.55);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.payoff .mark img {
  width: 84px;
  height: auto;
  max-width: none;
}
.payoff .hand {
  margin: 0 0 var(--s5);
  color: #fff;
  font-size: 26px;
  line-height: 1.15;
}
/* O card de payoff. A referência põe um PREÇO aqui; a gente não inventa preço —
   põe a única coisa verificável e igualmente concreta: QUANDO o telefone toca. */
.payoff {
  position: relative;
  margin: var(--s10) 0 0;
  padding: var(--s10) var(--s7) var(--s8);
  border-radius: var(--r-panel);
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  color: #fff;
  box-shadow: 0 24px 48px -24px rgb(var(--brand-rgb) / 0.55);
}
.payoff .k {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.16);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.payoff .v {
  margin: var(--s4) 0 0;
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
@media (max-width: 640px) {
  .payoff .v {
    font-size: 28px;
  }
}
.payoff .n {
  margin: var(--s3) 0 0;
  font-size: 15px;
  color: rgb(255 255 255 / 0.78);
}
.payoff .num {
  display: inline-block;
  margin-top: var(--s5);
  padding: 12px var(--s6);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
}
.seals {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}
@media (min-width: 640px) {
  .seals {
    grid-template-columns: 1fr 1fr;
  }
}
.seal {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-align: left;
  padding: var(--s4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
/* O CORPO DA PÁGINA DE VENDAS — seções abaixo do quiz.
   Cada seção é um argumento com um CTA que devolve para o CEP. Largura de leitura
   contida (~64ch): parágrafo largo demais é o que faz ninguém ler página de venda. */
.sell {
  margin-top: var(--s10);
  padding-top: var(--s9);
  border-top: 1px solid var(--line);
}
/* ⚠️ 05/08 — O Roberto: "não está parecendo nada com os dos nossos concorrentes,
   está feia". Comparei as seções deles (não só a dobra, que foi meu erro anterior)
   e a diferença é estrutural, não de acabamento:
     · as deles são blocos de BORDA A BORDA; a nossa era uma coluna de 660px
     · título GIGANTE, caixa alta, CENTRALIZADO; o nosso era pequeno e à esquerda
     · FOTO grande dividindo a seção com o texto; a nossa não tinha nenhuma
     · botão com uma linha de segurança embaixo ("No Hassles Or Obligation")
   Coluna estreita e alinhada à esquerda faz parecer artigo. Seção larga, título
   centralizado e foto fazem parecer anúncio. */
.sec {
  max-width: 860px;
  margin: 0 auto var(--s10);
  text-align: center;
}
.sec h2 {
  font-size: clamp(30px, 5.2vw, 44px) !important;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}
/* O texto continua em largura de LEITURA mesmo com a seção larga — parágrafo de
   860px ninguém lê. Larga a moldura, não a linha. */
.sec .prose,
.sec .faq {
  max-width: 660px;
  margin-inline: auto;
  text-align: left;
}
/* A linha de segurança embaixo do botão: o concorrente repete "No Hassles Or
   Obligation" em TODO CTA. Custa nada e tira o medo de clicar. */
.cta-sec {
  margin-inline: auto;
}
.reassure {
  margin: var(--s3) 0 0;
  font-size: 14px;
  color: var(--muted);
}
.sec.dark .reassure {
  color: rgb(255 255 255 / 0.66);
}

/* SEÇÃO DIVIDIDA — foto de um lado, argumento do outro, de borda a borda.
   É o formato que faz a página deles parecer anúncio e a nossa parecer artigo. */
.sec.split {
  max-width: none;
  padding: 0;
  margin-bottom: 0;
  background: var(--brand);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.sec.split .splitimg {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.sec.split .splitbody {
  padding: var(--s9) var(--s7);
  text-align: left;
  max-width: 560px;
}
.sec.split h2 {
  color: #fff;
  text-align: left;
}
.sec.split .prose {
  margin-inline: 0;
}
.sec.split .prose p {
  color: rgb(255 255 255 / 0.86);
}
.sec.split .eyebrow {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}
@media (max-width: 820px) {
  .sec.split {
    grid-template-columns: 1fr;
  }
  .sec.split .splitimg {
    min-height: 240px;
  }
  .sec.split .splitbody {
    padding: var(--s7) var(--s5);
  }
}
.sec .eyebrow {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 0.1);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.sec h2 {
  margin: 0 0 var(--s4);
  font-size: clamp(26px, 4.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}
.secphoto {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--s4);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 10px rgb(16 24 40 / 0.12);
}
.prose p {
  margin: 0 0 var(--s4);
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
}
.prose p.fine {
  font-size: 13.5px;
  color: var(--muted);
}
.prose blockquote {
  margin: 0 0 var(--s4);
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--accent);
  background: rgb(var(--brand-rgb) / 0.035);
  border-radius: 0 10px 10px 0;
}
.prose blockquote p {
  margin: 0 0 6px;
  font-size: 16px;
  font-style: italic;
  color: var(--ink);
}
.prose blockquote cite {
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
}
/* ⚠️ 05/08: esta lista colapsou para 56px de largura e quebrou "…$0 down — nothing
   up front" uma palavra por linha, POR CIMA do parágrafo seguinte. `display:grid`
   num contexto que dimensiona pelo conteúdo encolhe o container. Largura explícita
   e itens em bloco resolvem, e não dependem do que o pai for. */
.prose ul.offerlist {
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
  width: 100%;
  display: block;
}
.prose ul.offerlist li {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.08);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.prose .svc {
  margin: 0 0 var(--s4);
}
.prose .svc dt {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-top: var(--s4);
}
.prose .svc dd {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.prose ol.proc {
  margin: 0 0 var(--s4);
  padding-left: 22px;
  display: grid;
  gap: var(--s4);
}
.prose ol.proc li {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
}
.prose ol.proc b {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}
.cta-sec {
  display: inline-flex;
  width: auto;
  margin-top: var(--s2);
}
/* ⚠️ 05/08 — RITMO VISUAL. O Roberto olhou e disse: "está mais para um blog do que
   uma página de vendas". Ele estava certo, e a causa era estrutural: TODA seção
   tinha a mesma forma — sobrancelha, título, parágrafo, botão, oito vezes. Página
   de venda alterna ritmo; blog repete. Cada bloco abaixo dá uma forma diferente a
   uma seção, e o fundo alterna para o olho contar seções em vez de ler uma coluna. */

/* BORDA A BORDA de verdade. `max-width:none` não bastava: o contêiner pai continua
   prendendo o bloco. `margin-inline: calc(50% - 50vw)` faz a seção escapar da coluna
   e ocupar a largura da janela — é o que dá o peso de anúncio em vez de artigo. */
.sec.tint,
.sec.dark,
.sec.split {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
  border-radius: 0;
}
.sec.tint,
.sec.dark {
  padding: var(--s9) var(--s6);
  margin-bottom: 0;
}
.sec.tint {
  background: rgb(var(--brand-rgb) / 0.035);
  border-block: 1px solid var(--line);
}
.sec.dark {
  background: var(--brand);
  color: #fff;
}
.sec.tint > *,
.sec.dark > * {
  max-width: 660px;
  margin-inline: auto;
}
.sec.dark h2,
.sec.dark .prose p {
  color: #fff;
}
.sec.dark .prose p.fine {
  color: rgb(255 255 255 / 0.6);
}
.sec.dark .eyebrow {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}

/* OS NÚMEROS DA OFERTA. Financiamento em lista de texto é ignorado; em número
   grande é lido em um relance. É o eixo da oferta escolhido pelo Roberto. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s6) auto var(--s6);
}
.stats div {
  text-align: center;
  padding: var(--s5) var(--s3);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
}
.stats b {
  display: block;
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.stats span {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
}
.sec.dark .prose ul.offerlist {
  display: none;
}

/* DEPOIMENTOS EM GRADE. Empilhados viravam parede de texto — quatro citações
   seguidas ninguém lê. Em duas colunas o olho varre e pega o padrão: "ele veio". */
.lay-quotes .prose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}
.lay-quotes .prose blockquote {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

/* CARTÕES DE SERVIÇO — ícone + título + bullets de benefício.
   O caderno de Google Ads separa amador de profissional exatamente aqui:
   amador = parágrafo técnico corrido e imagem de banco; profissional = bloco
   escaneável com ícone vetorial, título em negrito e bullets de benefício. */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
}
.card {
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgb(var(--brand-rgb) / 0.04);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.card:hover {
  border-color: rgb(var(--accent-rgb) / 0.45);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.09);
}
.cico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s3);
  border-radius: 10px;
  background: rgb(var(--accent-rgb) / 0.1);
}
.cico svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card b {
  display: block;
  margin-bottom: var(--s3);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.card li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
}
.card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--accent-rgb) / 0.55);
}

/* FAQ — a 7ª seção da ordem ideal, e a nossa página não tinha nenhuma.
   É onde a objeção morre antes de virar motivo para não ligar. `<details>` nativo:
   acessível, funciona sem JS e não custa um byte de script. */
.faq {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s3);
}
.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.faq summary {
  padding: var(--s4) var(--s5);
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform 180ms var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  margin: 0;
  padding: 0 var(--s5) var(--s5);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--body);
}

/* SERVIÇOS EM CARTÃO. Lista de definição corrida é catálogo; cartão é oferta. */
.lay-cards .prose .svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
}
.lay-cards .prose .svc dt {
  margin: 0;
  padding: var(--s4) var(--s5) 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.lay-cards .prose .svc dd {
  margin: 0;
  padding: 6px var(--s5) var(--s5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  font-size: 15px;
}

/* O PROCESSO EM PASSOS NUMERADOS. O número é o produto aqui: mostra que são
   cinco etapas curtas, não um compromisso vago. */
.lay-steps .prose ol.proc {
  counter-reset: p;
  padding: 0;
  list-style: none;
  gap: var(--s3);
}
.lay-steps .prose ol.proc li {
  counter-increment: p;
  position: relative;
  padding: var(--s4) var(--s5) var(--s4) 62px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.lay-steps .prose ol.proc li::before {
  content: counter(p);
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.sec.close {
  text-align: center;
  padding: var(--s8) var(--s6);
  background: var(--brand);
  border-radius: var(--r-panel);
  color: #fff;
}
.sec.close h2,
.sec.close .prose p {
  color: #fff;
}
@media (max-width: 560px) {
  .sell {
    margin-top: var(--s8);
  }
  .sec {
    margin-bottom: var(--s8);
  }
}

/* OS BLOCOS DA TELA DE OBRIGADO.
   A tela era um recibo: o visitante no pico de atenção recebia uma confirmação e
   nada mais. Cada cartão aqui tem um trabalho — fazer ATENDER a ligação, tirar o
   medo de venda por telefone, e repetir a garantia no momento de maior atenção. */
.dblk {
  max-width: 620px;
  margin: 0 auto var(--s5);
  padding: var(--s5) var(--s6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-align: left;
}
.dblk h3 {
  margin: 0 0 var(--s3);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.006em;
}
.dblk p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.steps2 {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: var(--s3);
}
.steps2 li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}
.steps2 b {
  color: var(--ink);
}
.dfoot {
  margin-top: var(--s3) !important;
  font-size: 14.5px !important;
  color: var(--muted) !important;
}
.dlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.dlist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.dlist svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dquote {
  max-width: 620px;
  margin: 0 auto var(--s5);
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--accent);
  background: var(--brand-tint, rgb(var(--brand-rgb) / 0.04));
  border-radius: 0 var(--r-card) var(--r-card) 0;
  text-align: left;
}
.dquote p {
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
}
.dquote cite {
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
}
@media (max-width: 560px) {
  .dblk,
  .dquote {
    padding: var(--s4) var(--s5);
  }
}

/* BARRA FIXA DE LIGAÇÃO — só no celular.
   76% das buscas locais de home services saem de smartphone. É o 2º elemento de
   maior impacto em LP de lead gen local segundo o caderno de Google Ads: quem não
   vai preencher formulário nenhum ainda liga, e sem isto esse visitante ia embora.
   Escondida no desktop, onde o telefone do cabeçalho já resolve. */
.callbar {
  display: none;
}
@media (max-width: 760px) {
  .callbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgb(16 24 40 / 0.28);
  }
  .callbar svg {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
  }
  /* respiro para a barra não cobrir o fim do conteúdo */
  .ft {
    padding-bottom: 84px;
  }
}

/* RODAPÉ COM CONTEÚDO — serviços, região e credencial.
   Rodapé de LP não é enfeite legal: é onde quem rolou até o fim confirma que a
   empresa é real e faz o serviço dele. Tudo aqui sai do site do próprio cliente. */
.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s5);
  max-width: 900px;
  margin: 0 auto var(--s5);
  text-align: left;
}
.ft-grid h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ft-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-grid li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}

/* GARANTIA + FINANCIAMENTO acima da dobra.
   Não é enfeite: o caderno de Google Ads mede +15% de conversão quando a garantia
   aparece acima da dobra, porque num ticket de $11k-$25k o medo é financeiro antes
   de ser técnico. Fica sobre a foto, então precisa de fundo próprio. */
.warr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s4);
  margin: 0 auto var(--s5);
  padding: 0;
  list-style: none;
  max-width: 760px;
}
.warr li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(16 31 98 / 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.warr svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A LINHA DE TERRITÓRIO do topo, sobre a foto.
   Em 05/08 ela existia no HTML e não tinha CSS: saía cinza-claro sobre foto
   clara e sumia. Texto sobre foto não se resolve com cor — se resolve com
   FUNDO PRÓPRIO. Vira pastilha, que é o que o concorrente que converte faz
   ("SERVING GREATER PUGET SOUND") e o que garante contraste em qualquer foto
   que o cliente mandar depois. */
.where {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 auto var(--s4);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgb(16 31 98 / 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .where {
    white-space: normal;
    text-align: center;
  }
}

/* TRILHA DE CREDENCIAL da 1ª tela — GAF, Google e licença.
   Em 05/08 este bloco existia no gerador e NÃO tinha CSS: virava uma linha de
   texto corrido com os ícones grudados nas palavras. Prova social em texto não
   converte; o concorrente que converte mostra cartão com logo, estrela e número.
   Cada item é um cartão próprio — a separação é o que faz o olho contar "três
   credenciais" em vez de ler uma frase. */
.rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin: var(--s6) auto 0;
  max-width: 720px;
}
.rail-i {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}
.rail-i img,
.rail-i svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
}
/* Os ícones da casa são de TRAÇO. Sem estas 3 linhas o escudo vira uma mancha
   preta sólida — o navegador preenche o path por padrão. Medido em 05/08. */
.rail-i svg {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-i b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
}
/* As estrelas: o número sozinho não é lido como avaliação. */
.rail-i .stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: 13px;
  margin-right: 2px;
}
@media (max-width: 560px) {
  .rail-i b {
    white-space: normal;
  }
}

/* PISO GLOBAL DE ÍCONE — não remover.
   SVG embutido não tem tamanho intrínseco: sem regra de largura ele ocupa todo o
   espaço disponível. Em 05/08 o escudo do selo "Licensed & insured" nasceu com a
   altura da tela inteira e engoliu o título, o campo de CEP e o botão da tela 0 —
   e o portão passou verde, porque portão não vê tamanho.
   Seletor de elemento puro (especificidade 0,0,1): qualquer regra com classe
   continua vencendo. Isto é o chão, não o teto. */
svg {
  width: 1em;
  height: 1em;
  flex: none;
}

.seal img,
.seal svg {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px;
}
.seal b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.seal span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.shot {
  margin: var(--s5) 0 0;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
}
.shot img {
  width: 100%;
  height: auto;
}
.shot figcaption {
  padding: 10px var(--s4);
  font-size: 13px;
  color: var(--muted);
  background: var(--paper);
  text-align: left;
}
.slot {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--canvas);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: var(--s5);
  margin-top: var(--s5);
}

/* ═══ FORA DE ÁREA ═════════════════════════════════════════════════════════ */
.anyway {
  appearance: none;
  border: 0;
  background: none;
  margin-top: var(--s5);
  padding: 12px 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s4);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgb(15 138 74 / 0.1);
  color: var(--ok);
  font-size: 14px;
  font-weight: 600;
}
.hit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══ RODAPÉ ═══════════════════════════════════════════════════════════════ */
.ft {
  border-top: 1px solid var(--line);
  padding: var(--s6) var(--s5) var(--s7);
  text-align: center;
}
.ft p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.ft b {
  color: var(--label);
}
.ft a {
  color: var(--label);
}
.pend {
  font-style: normal;
  font-size: 12px;
  color: #a26b12;
}
.ft-pend {
  display: block;
  margin-top: var(--s5);
  font-size: 11px;
  line-height: 1.6;
  color: #a9a190;
}
.pend {
  display: inline;
}

/* ═══ CEP DE FORA — aviso, nunca porta ═════════════════════════════════════
   Discreto de propósito. É informação honesta, não punição: quem digitou um CEP
   de fora continua preenchendo o mesmo formulário, no mesmo lugar da tela. */
.afar {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: var(--s3) 0 0;
  padding: 10px var(--s3);
  border-radius: var(--r-field);
  background: rgb(var(--accent-rgb) / 0.07);
  font-size: 13px;
  line-height: 1.5;
  color: var(--label);
}
.afar svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 3px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══ O MOMENTO DO SATÉLITE ════════════════════════════════════════════════
   Teatro de esforço entre "enviei" e "chegou". Sem isto o envio é cadastro. */
.find {
  text-align: center;
  padding: var(--s9) 0 var(--s10);
}
.radar {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto var(--s6);
  display: grid;
  place-items: center;
}
.radar i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgb(var(--accent-rgb) / 0.55);
  animation: ping 2.1s var(--ease) infinite;
}
.radar i:nth-child(2) {
  animation-delay: 0.7s;
}
.radar i:nth-child(3) {
  animation-delay: 1.4s;
}
.radar svg {
  position: relative;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes ping {
  from {
    scale: 0.35;
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    scale: 1;
    opacity: 0;
  }
}
.find-addr {
  margin: 0 0 var(--s6);
  font-family: 'Display', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.find-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 340px;
  text-align: left;
  display: grid;
  gap: var(--s3);
}
.find-steps li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 15px;
  color: var(--body);
  opacity: 0;
  animation: in 380ms var(--ease) forwards;
}
.find-steps svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══ ENTRADA DE PASSO ═════════════════════════════════════════════════════ */
.in {
  animation: in 260ms var(--ease) both;
}
@keyframes in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══ CELULAR ══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .badge {
    font-size: 11px;
    padding: 5px 10px;
  }
  .hd-in {
    padding: 10px var(--s4);
    gap: var(--s3);
  }
  .hd-brand img {
    height: 32px;
  }
  .hd-meta {
    display: none;
  }
  .hd-tel {
    padding: 9px 14px;
    font-size: 14px;
  }
  /* O prato NÃO encolhe no celular: o tamanho dele vem do tema (a coroa do
     KingRoof é retangular, o elefante é redondo) e media query com regra genérica
     brigava com o inline do tema. O que muda no celular é a folga acima. */
  .panel {
    margin-top: var(--s10);
  }
  .opt {
    grid-template-columns: 40px 1fr 16px;
    gap: var(--s3);
    padding: var(--s4);
    min-height: 76px;
  }
  .payoff {
    padding: var(--s6) var(--s5);
  }
}

/* ── tema: Wind Proof Roofing ── */
:root{--brand:#101F62;--brand-soft:#1b2f8c;--accent:#F5720A;--brand-rgb:16 31 98;--accent-rgb:245 114 10}
.cta{text-decoration:none}