/* Building blocks shared by several marketing pages. */

/* Section kicker above a heading */
.mk-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Section heading (h2) */
.mk-heading {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

/* Page title (h1) on inner pages */
.mk-title {
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Kicker + heading + lead block */
.mk-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

/* Lead paragraph under a title */
.mk-lead {
  margin: 0;
  font-size: 18px;
  color: var(--color-text-subtle);
  text-wrap: pretty;
}

/* Full-width section with the page gutter */
.mk-section {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Main column of inner pages (help, faq, support, contact, terms) */
.mk-main {
  flex: 1;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 64px) 80px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Grey band behind a section */
.mk-band {
  background: var(--color-surface-sunken);
}

/* Form field label */
.mk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}