/* components.css — Smile Oasis · Clint Bruyere, DDS */
.cta {
  display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: .98rem;
  background: var(--color-accent); color: var(--color-surface); text-decoration: none;
  border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer;
  transition-property: background-color, color;
}
.cta:hover { background: var(--color-link); }
.cta:active { scale: .96; } /* press — жест пользователя, transform-семейство */
.cta-ghost { background: transparent; border: 1px solid var(--color-mist); color: var(--color-surface); }
.cta-ghost:hover { background: var(--navy-55); }
.cta-nav { padding: 10px 18px; font-size: .88rem; margin-left: auto; }
@media (max-width: 760px) { .cta-nav { display: none; } }
.text-link { font-family: var(--font-ui); font-weight: 700; }

/* funnel (consult) */
.funnel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg);
  box-shadow: 0 24px 50px var(--shadow-card); padding: 34px 30px; max-width: 680px;
  will-change: transform, opacity;
}
.f-step { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.f-step[hidden] { display: none; }
.f-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--color-navy-900); padding: 0; margin-bottom: 6px; }
.f-field { display: grid; gap: 6px; font-family: var(--font-ui); font-weight: 700; font-size: .85rem; color: var(--color-slate); }
.f-input {
  font: inherit; font-weight: 400; color: var(--color-navy-900);
  border: 1px solid var(--color-border); border-radius: var(--r); padding: 12px 14px;
  background: var(--color-bg-soft); width: 100%;
}
.f-input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.f-done { font-size: 1.02rem; color: var(--color-slate); }
.f-done[hidden] { display: none; }
.f-done a { font-weight: 700; }