/* Demonstração (/contato) — página de conversão na linguagem escura da Home: promessa curta, o
   formulário logo no primeiro rolar do celular, o que acontece depois, selos e dúvidas. O cartão
   do formulário é o componente comum (.lead-card, styles.css). Quebras 621, 981 e 1101px. */
.cf-page{overflow:clip;background:radial-gradient(60% 50% at 85% 0%,rgba(33,112,237,.22),transparent 70%),radial-gradient(50% 40% at 0% 60%,rgba(3,166,232,.1),transparent 70%),var(--page);color:var(--white)}
.cf-hero{padding:24px 0 clamp(48px,7vw,96px)}
.cf-grid{display:grid;gap:28px;grid-template-areas:"intro" "form" "next" "trust"}
.cf-intro{grid-area:intro}
.cf-form-area{grid-area:form;min-width:0}
.cf-next{grid-area:next}
.cf-trust{grid-area:trust}

.cf-breadcrumb{margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px;color:var(--label);font-size:12px}
.cf-breadcrumb a{margin-block:-12px;padding-block:12px;color:var(--text-dim)}
.cf-breadcrumb a:hover{color:var(--white)}
.cf-intro h1{max-width:640px;font-size:clamp(31px,8.4vw,40px);line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.cf-intro h1 em{margin-top:6px;color:var(--accent-text);font-weight:650}
.cf-lede{max-width:520px;margin-top:16px;color:var(--text-dim);font-size:16px;line-height:1.6}
.cf-intro .audience-switch{margin-top:22px}

/* Cartão do formulário */
.cf-card{scroll-margin-top:90px}
.cf-card-title{margin:0;color:var(--white);font:650 clamp(21px,5.4vw,26px)/1.18 var(--display);letter-spacing:-.03em}
.cf-card-title:focus{outline:0}
.cf-card .lead-done .text-link{display:inline-flex;min-height:44px;align-items:center}
.cf-alt{margin-top:14px;color:var(--text-dim);font-size:14px;text-align:center}
.cf-alt a{color:var(--light);text-decoration:underline;text-underline-offset:3px}

/* O que acontece depois */
.cf-next h2{color:var(--white);font:650 20px var(--display);letter-spacing:-.02em}
.cf-next ol{margin:16px 0 0;padding:0;display:grid;gap:4px;list-style:none;counter-reset:passo}
.cf-next li{position:relative;padding:12px 0 14px 46px;display:grid;gap:4px;counter-increment:passo}
.cf-next li::before{content:counter(passo);position:absolute;left:0;top:10px;width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(122,170,247,.45);border-radius:50%;background:rgba(33,112,237,.16);color:var(--light);font:600 13px var(--label-font)}
.cf-next li:not(:last-child)::after{content:"";position:absolute;left:15px;top:44px;bottom:-6px;width:1px;background:linear-gradient(rgba(122,170,247,.45),transparent)}
.cf-next b{color:var(--text-strong);font:600 16px/1.3 var(--display)}
.cf-next span{color:var(--text-dim);font-size:14.5px;line-height:1.5}

/* Selos */
.cf-trust{margin:0;padding:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--border-quiet);list-style:none}
.cf-trust li{min-height:64px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:1px solid var(--border-quiet);border-radius:var(--radius-md);background:rgba(5,11,22,.6);color:var(--text-dim);font-size:12.5px;line-height:1.35}
.cf-trust img{width:auto;height:28px;flex:none;padding:4px 6px;border-radius:8px;background:#fff;box-sizing:content-box;object-fit:contain}
.cf-trust strong{color:var(--white);font:700 22px var(--display);letter-spacing:-.03em}
.cf-trust li:last-child{justify-content:center}
.cf-trust li:last-child img{height:34px;padding:0;background:none}
.cf-trust a{display:block}

/* Dúvidas */
.cf-faq{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--border-quiet)}
.cf-faq .accordion{counter-reset:pergunta}
.cf-faq h2{margin-bottom:20px;color:var(--white);font:650 var(--h2)/1.05 var(--display);letter-spacing:-.04em}

@media (min-width:621px){
  .cf-hero{padding-top:36px}
  .cf-intro h1{font-size:clamp(40px,5.6vw,52px)}
  .cf-lede{font-size:17px}
  .cf-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:981px){
  .cf-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"intro form" "next form" "trust form";grid-template-rows:auto auto 1fr;column-gap:clamp(40px,5vw,88px);row-gap:36px;align-items:start}
  .cf-form-area{position:sticky;top:96px}
  .cf-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
}

@media (min-width:1101px){
  .cf-intro h1{font-size:clamp(48px,4.4vw,60px)}
  .cf-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
}