/* rowcrate — landing page.
   Sem framework, sem build. As cores e a tipografia vem de tokens.css, que e copia de
   brand/tokens.css. Se mudar a marca, rode:
       cp brand/tokens.css acquisition/landing/tokens.css
*/

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rc-paper);
  color: var(--rc-ink);
  font-family: var(--rc-font-sans);
  font-size: var(--rc-size-body);
  line-height: var(--rc-leading-body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--rc-s5); }
section.wrap { padding-top: var(--rc-s8); padding-bottom: var(--rc-s8); }

/* --- cabecalho --- */
header.wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--rc-s5); padding-bottom: var(--rc-s5);
}
.mark {
  display: inline-flex; align-items: center; gap: var(--rc-s2);
  color: var(--rc-ink); text-decoration: none;
  font-size: 1.15rem; font-weight: 500; letter-spacing: -0.4px;
}
.nav-cta {
  font-family: var(--rc-font-mono); font-size: var(--rc-size-micro);
  letter-spacing: var(--rc-track-label); text-transform: uppercase;
  color: var(--rc-ink); text-decoration: none;
  border: var(--rc-border); border-radius: var(--rc-radius);
  padding: var(--rc-s2) var(--rc-s4);
}
.nav-cta:hover { border-color: var(--rc-accent); color: var(--rc-accent-ink); }

/* --- tipografia --- */
h1 {
  font-size: clamp(2.25rem, 6vw, var(--rc-size-display));
  font-weight: 500; letter-spacing: -2px;
  line-height: var(--rc-leading-tight);
  margin: 0 0 var(--rc-s5);
}
h2 {
  font-size: clamp(1.5rem, 3.4vw, var(--rc-size-h1));
  font-weight: 500; letter-spacing: -0.8px;
  margin: 0 0 var(--rc-s5);
}
h3 {
  font-size: var(--rc-size-h2); font-weight: 500;
  letter-spacing: -0.3px; margin: var(--rc-s2) 0 var(--rc-s3);
}
p { margin: 0 0 var(--rc-s4); }
.lede { font-size: 1.125rem; max-width: 62ch; }
.muted { color: var(--rc-steel); }
.note { color: var(--rc-steel); font-size: var(--rc-size-small); }
.fineprint {
  color: var(--rc-steel); font-size: var(--rc-size-small);
  margin-top: var(--rc-s3);
}
code {
  font-family: var(--rc-font-mono); font-size: 0.92em;
  background: var(--rc-white); border: var(--rc-border);
  border-radius: 2px; padding: 1px 4px;
}
a { color: var(--rc-accent-ink); }
hr.rule {
  border: 0; border-top: 4px solid var(--rc-accent);
  width: 64px; margin: 0 0 var(--rc-s5);
}

/* --- hero --- */
.hero { padding-top: var(--rc-s7); }

.btn {
  display: inline-block; margin-top: var(--rc-s4);
  background: var(--rc-ink); color: var(--rc-paper);
  text-decoration: none; border-radius: var(--rc-radius);
  padding: var(--rc-s4) var(--rc-s6);
  font-weight: 500;
}
.btn:hover { background: var(--rc-accent); color: #fff; }

/* --- faixa de numeros --- */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--rc-s4);
  border-top: var(--rc-border); border-bottom: var(--rc-border);
  padding-top: var(--rc-s5); padding-bottom: var(--rc-s5);
}
.strip p { margin: 0; }
.strip .rc-num { font-size: 1.25rem; margin-top: var(--rc-s1); }

/* --- cartoes --- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--rc-s4);
}
.card {
  background: var(--rc-white); border: var(--rc-border);
  border-radius: var(--rc-radius); padding: var(--rc-s5);
}
.card p:last-child { margin-bottom: 0; }
.card.accent { border-color: var(--rc-accent); border-width: 2px; }
.price { font-size: 1.9rem; margin: var(--rc-s2) 0 var(--rc-s3); }
.price span { font-size: 0.95rem; color: var(--rc-steel); }

/* --- passos --- */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--rc-s5);
}
.steps li { border-top: 3px solid var(--rc-ink); padding-top: var(--rc-s4); }
.steps li:first-child { border-top-color: var(--rc-accent); }
.steps h3 { margin-top: var(--rc-s2); }

/* --- formulario --- */
.sample { background: var(--rc-white); border-block: var(--rc-border); max-width: none; }
.sample > * { max-width: 1000px; margin-inline: auto; }
.form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--rc-s4); align-items: end;
  margin-top: var(--rc-s5);
}
.form label { display: block; }
.form label span {
  display: block; margin-bottom: var(--rc-s2);
  font-family: var(--rc-font-mono); font-size: var(--rc-size-micro);
  letter-spacing: var(--rc-track-label); text-transform: uppercase;
  color: var(--rc-steel);
}
.form input[type="text"], .form input[type="email"] {
  width: 100%; padding: var(--rc-s3) var(--rc-s4);
  border: var(--rc-border); border-radius: var(--rc-radius);
  background: var(--rc-paper); color: var(--rc-ink);
  font-family: var(--rc-font-sans); font-size: 1rem;
}
.form input:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 1px; }
.form button {
  grid-column: 1 / -1; justify-self: start;
  background: var(--rc-ink); color: var(--rc-paper);
  border: 0; border-radius: var(--rc-radius);
  padding: var(--rc-s4) var(--rc-s6);
  font-family: var(--rc-font-sans); font-size: 1rem; font-weight: 500;
  cursor: pointer;
}
.form button:hover { background: var(--rc-accent); color: #fff; }
/* honeypot anti-spam: invisivel para gente, preenchido por robo */
.form input[name="_gotcha"] { position: absolute; left: -9999px; }

/* --- regras --- */
.two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rc-s5);
}
.two ul { list-style: none; padding: 0; margin: 0; }
.two li {
  padding: var(--rc-s3) 0 var(--rc-s3) var(--rc-s5);
  border-bottom: 1px solid var(--rc-mist); position: relative;
}
.two li::before {
  position: absolute; left: 0; top: var(--rc-s3);
  font-family: var(--rc-font-mono); font-weight: 700;
}
.yes li::before { content: "+"; color: var(--rc-accent); }
.no li::before { content: "\2212"; color: var(--rc-steel); }
.rules .note { margin-top: var(--rc-s5); max-width: 66ch; }

/* --- faq --- */
.faq dl { margin: 0; }
.faq dt {
  font-weight: 500; font-size: 1.0625rem;
  border-top: var(--rc-border); padding-top: var(--rc-s4);
  margin-top: var(--rc-s4);
}
.faq dd { margin: var(--rc-s2) 0 var(--rc-s4); color: var(--rc-steel); max-width: 66ch; }

/* --- fechamento --- */
.closing { text-align: center; }
.closing .lede { margin-inline: auto; }

/* --- rodape --- */
footer.wrap {
  border-top: var(--rc-border);
  padding-top: var(--rc-s5); padding-bottom: var(--rc-s7);
  display: flex; flex-wrap: wrap; gap: var(--rc-s4);
  justify-content: space-between;
}
footer p { margin: 0; }

/* --- respeito a quem prefere menos movimento e a telas pequenas --- */
@media (max-width: 560px) {
  section.wrap { padding-top: var(--rc-s7); padding-bottom: var(--rc-s7); }
  .btn { display: block; text-align: center; }
}