:root { color-scheme: light dark; --green: #24E66D; --bg: #0b0d10; --card: #14171b;
    --text1: #f4f6f5; --text2: #b7bfc2; --text3: #7c8688; --border: rgba(255,255,255,0.10); }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--text1); line-height: 1.5; }
  @media (prefers-color-scheme: light) {
    :root { --bg: #f7f8f7; --card: #ffffff; --text1: #12161a; --text2: #4a5559; --text3: #7c8688; --border: rgba(0,0,0,0.08); }
  }
  .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
  .logo { font-weight: 800; font-size: 20px; letter-spacing: 2px; text-transform: uppercase;
    padding: 28px 0 0; text-align: center; }
  .logo span { color: var(--green); }
  .hero { text-align: center; padding: 28px 0 8px; }
  .kicker { color: var(--green); font-weight: 800; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; margin: 0 0 10px; }
  h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; }
  h1 .accent { color: var(--green); }
  .sub { color: var(--text2); font-size: 17px; max-width: 480px; margin: 0 auto 28px; }
  .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
  form { display: flex; flex-direction: column; gap: 12px; }
  .toggle { display: flex; border: 1px solid var(--border); border-radius: 10px; padding: 4px; gap: 4px; }
  .toggle label { flex: 1; text-align: center; padding: 10px 8px; border-radius: 7px; font-weight: 700;
    font-size: 14px; color: var(--text2); cursor: pointer; }
  .toggle input { position: absolute; opacity: 0; pointer-events: none; }
  .toggle input:checked + label { background: var(--green); color: #06210f; }
  input[type=email], input[type=text], input[type=tel] {
    width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border);
    background: transparent; color: var(--text1); font-size: 15px; }
  input::placeholder { color: var(--text3); }
  .optional-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 480px) { .optional-row { grid-template-columns: 1fr; } }
  .cta { background: var(--green); color: #06210f; border: none; border-radius: 10px;
    padding: 15px; font-size: 15px; font-weight: 800; cursor: pointer; }
  .cta:hover { filter: brightness(1.05); }
  .proof { text-align: center; color: var(--text3); font-size: 13px; margin-top: 14px; }
  .error-box { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.28);
    color: #fca5a5; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 4px; }
  .success-box { text-align: center; padding: 20px 4px; }
  .success-box .check { width: 52px; height: 52px; border-radius: 50%; background: var(--green);
    color: #06210f; display: flex; align-items: center; justify-content: center; font-size: 26px;
    font-weight: 800; margin: 0 auto 16px; }
  section { padding: 56px 0; }
  section h2 { font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 32px; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  @media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
  .feature { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
  .feature .icon { font-size: 22px; margin-bottom: 10px; }
  .feature h3 { font-size: 15px; margin: 0 0 6px; }
  .feature p { font-size: 13.5px; color: var(--text2); margin: 0; }
  .benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .benefits li { display: flex; gap: 10px; align-items: flex-start; color: var(--text2); font-size: 15px; }
  .benefits li b { color: var(--text1); }
  .check-mark { color: var(--green); font-weight: 800; flex-shrink: 0; }
  footer { border-top: 1px solid var(--border); padding: 28px 0; text-align: center;
    color: var(--text3); font-size: 13px; }
  footer a { color: var(--text2); text-decoration: none; margin: 0 8px; }
  footer a:hover { color: var(--green); }

  /* Personalização por audiência - só CSS, sem JS. Aluno é o estado padrão
     (radio "checked" no HTML); quando o radio profissional é marcado,
     .wrap:has() inverte qual variante de cada bloco aparece. Funciona
     mesmo com o toggle posicionado abaixo do conteúdo que ele afeta,
     porque :has() não depende de ordem no DOM, só de conter o elemento.

     Seletores compostos (span.for-pro, .feature.for-pro, li.for-pro) de
     propósito, em vez de um .for-pro genérico: a regra padrão de "esconder"
     precisa ganhar de .benefits li (que já define display:flex com a
     mesma especificidade de li.for-pro) - um .for-pro sozinho (uma classe
     só) perde essa disputa e o item vazava mostrado mesmo escondido.
     Cada tipo de elemento também recebe seu display correto ao reaparecer
     (inline pro texto trocado via both(), block pro card de feature, flex
     pro item de benefício) - um valor genérico quebraria o layout dos
     outros dois tipos. */
  span.for-pro, .feature.for-pro, li.for-pro { display: none; }
  .wrap:has(#aud-professional:checked) span.for-client,
  .wrap:has(#aud-professional:checked) .feature.for-client,
  .wrap:has(#aud-professional:checked) li.for-client { display: none; }
  .wrap:has(#aud-professional:checked) span.for-pro { display: inline; }
  .wrap:has(#aud-professional:checked) .feature.for-pro { display: block; }
  .wrap:has(#aud-professional:checked) li.for-pro { display: flex; }