/* Verifynance, camada base. Carregar depois de tokens.css e antes de responsive.css.
   So contem o que nao pode viver em style="" inline: regras que o responsive.css
   precisa de poder sobrepor (um estilo inline ganha sempre a uma classe). */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--vf-bg); }
body { -webkit-font-smoothing: antialiased; font-family: var(--vf-font-body); }
a { color: var(--vf-hl); text-decoration: none; }
a:hover { opacity: .72; }
::selection { background: var(--vf-accent); color: var(--vf-accent-fg); }

input::placeholder { color: var(--vf-muted-2); }
.vf-input:focus { border-color: var(--vf-accent) !important; outline: none; }
:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 2px; }

button[data-act="submit"]:hover:not(:disabled) { background: var(--vf-accent-fill-strong); }
button[data-act="submit"]:disabled { opacity: .55; cursor: progress; }

/* O eixo horizontal: o display vive aqui para o responsive.css o poder esconder. */
.vf-axis { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; max-width: 600px; }

/* Paddings tirados do inline para o responsive.css os poder apertar abaixo de 380px. */
.vf-plans__card { padding: 34px clamp(22px, 3vw, 32px) 38px; }
.vf-never__item { padding: 24px 0 24px clamp(18px, 3vw, 26px); }

.vf-toggle a[aria-current="page"] { pointer-events: none; }