/* ══════════════════════════════════════════════════════════════════
   /business/ — hosted-PBX signup wizard
   Layered on top of styles.css's tokens/nav/footer; this file only
   adds what the marketing site has no equivalent for yet: a form,
   a stepper, selectable plan cards, and a credentials summary.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────── intro ─────────────────── */
.biz-hero { padding-block: clamp(40px, 7vw, 72px) clamp(28px, 4vw, 40px); }
.biz-hero__title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(32px, 5vw, 52px); max-width: 18ch; margin-bottom: 16px;
}
.biz-hero__lede { font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); max-width: 56ch; }

/* ─────────────────── wizard shell ─────────────────── */
.wizard { padding-block: 0 clamp(56px, 8vw, 96px); }
.wizard__inner { display: flex; justify-content: center; }
.wizard__card {
  width: 100%; max-width: 640px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 40px);
}

.wizard__steps {
  list-style: none; margin: 0 0 clamp(24px, 4vw, 36px); padding: 0;
  display: flex; gap: 10px;
}
.wizard__step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink-3);
}
.wizard__step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-3);
  font-family: var(--body); font-weight: 600; font-size: 12px;
}
.wizard__step.is-active { color: var(--ink); }
.wizard__step.is-active span { background: var(--teal); color: var(--paper); }
.wizard__step.is-done span { background: var(--teal-deep); color: var(--paper); }
.wizard__step:not(:last-child)::after {
  content: ""; width: 20px; height: 1px; background: var(--rule); margin-inline: 2px;
  align-self: center;
}

.wizard__panel { display: none; }
.wizard__panel.is-active { display: block; animation: rise .4s var(--ease) both; }
.wizard__panel h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
.wizard__hint { color: var(--ink-2); font-size: 15px; margin-bottom: 26px; }
.wizard__note {
  font-size: 14px; color: var(--ink-2); background: var(--paper-2);
  border-radius: 12px; padding: 14px 16px; margin: 20px 0 26px;
}
.wizard__note a { color: var(--teal-deep); font-weight: 600; text-decoration: underline; }

/* ─────────────────── form fields ─────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field span { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--rule);
  border-radius: 12px; padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
.field input:focus { outline: none; border-color: var(--teal); background: var(--card); }
.field input:invalid:not(:placeholder-shown) { border-color: var(--red); }
.field small { font-size: 12.5px; color: var(--ink-3); }

.field--otp input {
  font-family: var(--mono); font-size: 26px; letter-spacing: .5em;
  text-align: center; padding-block: 14px;
}

/* ─────────────────── plan cards ─────────────────── */
.plans { border: 0; padding: 0; margin: 4px 0 22px; }
.plans legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding: 0; }
.plan-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid var(--rule); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.plan-card:hover { border-color: var(--ink-3); }
.plan-card input { margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.plan-card:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 8%, var(--card)); }
.plan-card__body { display: flex; flex-direction: column; gap: 4px; }
.plan-card__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-card__price { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--teal-deep); }
.plan-card__price small { font-weight: 500; font-size: 11px; color: var(--ink-3); }
.plan-card__meta { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.plan-card__meta::before { content: "· "; }
.plan-card__desc { font-size: 14px; color: var(--ink-2); }

/* ─────────────────── buttons + errors ─────────────────── */
.btn--lg { width: 100%; padding: 14px 20px; font-size: 16px; }
.btn--lg:disabled { opacity: .55; cursor: progress; transform: none !important; }
.btn-link {
  display: block; width: 100%; text-align: center; margin-top: 14px;
  background: none; border: 0; font: inherit; font-size: 14px;
  color: var(--teal-deep); text-decoration: underline; cursor: pointer;
}
.btn-link:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }

.wizard__error {
  font-size: 14px; color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
}

/* ─────────────────── credentials summary ─────────────────── */
.creds { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.creds > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 14px; background: var(--paper-2); border-radius: 12px;
}
.creds dt { font-size: 13px; color: var(--ink-2); }
.creds dd { margin: 0; font-weight: 600; }
.creds__mono { font-family: var(--mono); font-size: 14.5px; }

@media (max-width: 480px) {
  .creds > div { flex-direction: column; gap: 4px; }
}