/* Shared visual components and type treatments. */

.reach-eyebrow {
  margin: 0 0 0.65rem;
  color: var(--theme-text-soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.reach-title {
  color: var(--theme-text);
  letter-spacing: -0.045em;
}

.reach-copy {
  max-width: 780px;
  color: var(--theme-text-muted);
  font-size: 1.08rem;
  line-height: 1.85;
}

.reach-copy p:last-child,
.reach-copy ul:last-child,
.reach-copy ol:last-child {
  margin-bottom: 0;
}

.reach-copy ul,
.reach-copy ol {
  padding-left: 1.5rem;
}

.reach-copy li {
  margin-bottom: 0.5rem;
}

.reach-image-frame {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--theme-border-soft);
  border-radius: var(--theme-radius-xl);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-lg);
}

.reach-image-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}

.reach-surface-card {
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow-md);
}

@media (max-width: 575.98px) {
  .reach-copy {
    font-size: 1rem;
  }
}

.reach-neutral-btn {
  --bs-btn-color: var(--theme-primary-contrast);
  --bs-btn-bg: var(--theme-text);
  --bs-btn-border-color: var(--theme-text);
  --bs-btn-hover-color: var(--theme-primary-contrast);
  --bs-btn-hover-bg: color-mix(in srgb, var(--theme-text) 84%, var(--theme-background));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--theme-text) 84%, var(--theme-background));
  border-radius: var(--theme-radius-pill);
}

.reach-alert {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

.reach-modal {
  background: var(--theme-surface);
  color: var(--theme-text);
}

.reach-page .text-secondary,
.reach-page .text-body-secondary {
  color: var(--theme-text-muted) !important;
}

.reach-page .spinner-border.text-primary {
  color: var(--theme-primary) !important;
}