/* The public site's element defaults and type classes (it-340). Elements first, then the type scale as classes. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--mkt-space-6);
}

body {
  background: var(--mkt-surface);
  color: var(--mkt-ink);
  font-family: var(--mkt-font-body);
  font-size: var(--mkt-size-body);
  line-height: var(--mkt-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--mkt-purple);
}

a:hover {
  color: var(--mkt-purple-hover);
}

/* The focus ring is an outline, outside every control — a component's own shadow (an outline button's ring, a tab's
 * lift) can't paint over it. */
:focus-visible {
  outline: var(--mkt-line-bold) solid var(--mkt-purple);
  outline-offset: var(--mkt-space-0-5);
}

::selection {
  background: var(--mkt-tint-deep);
  color: var(--mkt-ink);
}

b,
strong {
  font-weight: var(--mkt-weight-strong);
}

/* A skip link, the first thing a keyboard reaches. */
.mkt-skip {
  position: absolute;
  left: var(--mkt-space-4);
  top: var(--mkt-space-4);
  transform: translateY(calc(-100% - 2 * var(--mkt-space-4)));
  z-index: var(--mkt-layer-skip);
  padding: var(--mkt-space-3) var(--mkt-space-5);
  border-radius: var(--mkt-radius-pill);
  background: var(--mkt-ink);
  color: var(--mkt-surface);
  font-weight: var(--mkt-weight-semibold);
  text-decoration: none;
}

.mkt-skip:focus {
  transform: none;
  color: var(--mkt-surface);
}

/* ── Type scale ───────────────────────────────────────────────────────────────────────────────────────────── */

.mkt-display {
  font-family: var(--mkt-font-display);
  font-weight: var(--mkt-weight-bold);
  font-size: var(--mkt-size-hero);
  line-height: var(--mkt-leading-display);
  letter-spacing: var(--mkt-tracking-display);
  text-wrap: balance;
}

.mkt-h2 {
  font-family: var(--mkt-font-display);
  font-weight: var(--mkt-weight-bold);
  font-size: var(--mkt-size-h2);
  line-height: var(--mkt-leading-tight);
  letter-spacing: var(--mkt-tracking-heading);
  text-wrap: balance;
}

.mkt-h2--xl {
  font-size: var(--mkt-size-h2-xl);
  line-height: var(--mkt-leading-tight);
}

.mkt-h2--sm {
  font-size: var(--mkt-size-h2-sm);
  line-height: var(--mkt-leading-snug);
  letter-spacing: var(--mkt-tracking-heading);
}

.mkt-h2--cta {
  font-size: var(--mkt-size-cta);
  line-height: var(--mkt-leading-tight);
  letter-spacing: var(--mkt-tracking-display);
}

.mkt-h3 {
  font-family: var(--mkt-font-display);
  font-weight: var(--mkt-weight-bold);
  font-size: var(--mkt-size-h3);
  line-height: var(--mkt-leading-title);
  letter-spacing: var(--mkt-tracking-tight);
}

.mkt-h3--lg {
  font-size: var(--mkt-size-h3-lg);
}

.mkt-h4 {
  font-size: var(--mkt-size-h4);
  font-weight: var(--mkt-weight-bold);
  line-height: var(--mkt-leading-compact);
}

.mkt-lead {
  font-size: var(--mkt-size-lead);
  line-height: var(--mkt-leading-relaxed);
  color: var(--mkt-text);
  max-width: var(--mkt-measure-lg);
}

.mkt-body-lg {
  font-size: var(--mkt-size-body-lg);
  line-height: var(--mkt-leading-relaxed);
  color: var(--mkt-text);
}

.mkt-body {
  font-size: var(--mkt-size-md);
  line-height: var(--mkt-leading-relaxed);
  color: var(--mkt-text);
}

.mkt-accent {
  color: var(--mkt-purple);
}

/* The section label: a dot, then small caps. */
.mkt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mkt-space-2-5);
  margin-bottom: var(--mkt-space-4-5);
  font-size: var(--mkt-size-xs);
  font-weight: var(--mkt-weight-bold);
  letter-spacing: var(--mkt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mkt-purple);
}

.mkt-eyebrow::before {
  content: '';
  width: var(--mkt-dot);
  height: var(--mkt-dot);
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* A label: small caps without the dot — on a card, in a picture, on the purple card. */
.mkt-kicker {
  font-size: var(--mkt-size-2xs);
  font-weight: var(--mkt-weight-bold);
  letter-spacing: var(--mkt-tracking-label);
  text-transform: uppercase;
  color: var(--mkt-muted);
}

.mkt-kicker--sm { font-size: var(--mkt-size-3xs); }
.mkt-kicker--lg { font-size: var(--mkt-size-xs); }
.mkt-kicker--faint { color: var(--mkt-faint); }
.mkt-kicker--on-dark { color: var(--mkt-lilac-on-dark); }
.mkt-kicker--on-purple { color: var(--mkt-lilac-pale); }