/* ScaleTrade new-home UI kit.
 * Canonical BEM primitives live here; section-specific compositions stay in new-home.css.
 */
.nh-page {
  --nh-container: 1280px;
  --nh-gutter: 20px;
  --nh-section-space: 96px;
  --nh-radius-surface: 28px;
  --nh-radius-panel: 20px;
  --nh-radius-control: 12px;
  --nh-title-size: 64px;
  --nh-title-leading: 1.02;
  --nh-copy-size: 18px;
  --nh-copy-leading: 1.65;
}

.nh-page .nh-section {
  width: 100%;
}

.nh-page .nh-container,
.nh-page .nh-section__inner {
  width: min(var(--nh-container), calc(100% - (var(--nh-gutter) * 2)));
  margin-inline: auto;
}

.nh-page .nh-section__eyebrow {
  display: block;
  margin: 0 0 12px;
  color: #c652fd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nh-page .nh-section__title {
  max-width: 820px;
  color: var(--brand-text);
  font-size: var(--nh-title-size);
  line-height: var(--nh-title-leading);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.nh-page .nh-section__lead {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--brand-text-muted);
  font-size: var(--nh-copy-size);
  line-height: var(--nh-copy-leading);
}

.nh-page .nh-surface {
  border: 1px solid var(--brand-border);
  border-radius: var(--nh-radius-surface);
  background: var(--brand-surface);
}

.nh-page .nh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (max-width: 1319px) {
  .nh-page {
    --nh-title-size: clamp(48px, 4.85vw, 64px);
    --nh-section-space: clamp(76px, 7.3vw, 96px);
  }
}

@media (max-width: 900px) {
  .nh-page {
    --nh-gutter: 24px;
    --nh-title-size: clamp(42px, 7vw, 58px);
    --nh-section-space: 76px;
  }
}

@media (max-width: 680px) {
  .nh-page {
    --nh-gutter: 16px;
    --nh-title-size: clamp(34px, 10vw, 46px);
    --nh-copy-size: 16px;
    --nh-section-space: 60px;
    --nh-radius-surface: 24px;
  }

  .nh-page .nh-actions {
    align-items: stretch;
    flex-direction: column;
  }
}