/* ============================================================
   boson.css — /boson landing + /payment-success + /payment-error.
   Depends on tokens.css + site.css. Mobile-first.
   ============================================================ */

/* ---------- Hero ---------- */
.boson-hero {
  background: var(--c-tint-peach);
  border-bottom: 1px solid var(--c-line);
}
.boson-hero h1 { margin-bottom: var(--sp-4); }
.boson-hero .lead { margin-bottom: var(--sp-5); }
.boson-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Two-step "Raw Brain Analysis" process ---------- */
.boson-steps .step-card { position: relative; }
.step-no {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: var(--fw-heavy);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

/* ---------- Sample papers ---------- */
.papers-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.paper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 14px 18px;
  background: var(--ground);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.paper-title { font-weight: var(--fw-semi); }
.paper-soon { white-space: nowrap; }

/* ---------- Registration card + OTP flow (self-contained) ---------- */
.reg-wrap { max-width: 620px; margin-inline: auto; }
.reg-card { padding: var(--sp-6); text-align: left; }
@media (min-width: 640px) { .reg-card { padding: var(--sp-7); } }
.reg-card > h2 { margin-bottom: var(--sp-2); }
.reg-card .reg-sub { color: var(--c-ink-2); margin-bottom: var(--sp-5); }

.reg-alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-4);
}
.reg-alert-error { background: #FDECEC; color: #B42318; border: 1px solid #F6C9C4; }

.reg-otp-note { font-size: var(--fs-small); color: var(--c-ink-2); margin: 0 0 var(--sp-2); }
.reg-otp-note strong { color: var(--c-ink); }

.reg-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-2); }
.reg-resend {
  background: none;
  border: 0;
  padding: 8px 4px;
  color: var(--c-accent-press);
  font: inherit;
  font-weight: var(--fw-semi);
  font-size: var(--fs-small);
  cursor: pointer;
  text-decoration: underline;
}
.reg-resend:hover { color: var(--c-accent); }
.reg-card input[readonly] { background: var(--c-tint-blue); color: var(--c-ink-2); }

/* ---------- FAQ column ---------- */
.boson-faq { margin-inline: auto; }

/* ---------- Payment result pages ---------- */
.pay-result {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
}
@media (min-width: 640px) { .pay-result { padding: var(--sp-8) var(--sp-7); } }
.pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-bottom: var(--sp-4);
}
.pay-icon-ok { background: var(--c-wa-bg); color: var(--c-wa-ink); }
.pay-icon-err { background: #FDECEC; color: #B42318; }
.pay-result .lead { margin-inline: auto; margin-bottom: var(--sp-5); }
.pay-ref {
  background: var(--c-tint-blue);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: var(--sp-5);
}
.pay-next { text-align: left; max-width: 460px; margin: 0 auto var(--sp-6); }
.pay-next h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.pay-next ol { margin: 0; padding-left: 20px; color: var(--c-ink-2); display: grid; gap: var(--sp-2); }
.pay-result .cluster { justify-content: center; }