/* ═══════════════════════════════════════════════════════════════════════
   Components — buttons, links, rules, the signal dot.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Button ─────────────────────────────────────────────────────────────
   One shape, three finishes. The hover is a fill that rises from the floor
   of the control — no scaling, no shadow bloom. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--control-h-md);
  padding-inline: 26px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate3d(0, 101%, 0);
  transition: transform 520ms var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.btn--lg {
  height: var(--control-h-lg);
  padding-inline: 34px;
  font-size: var(--text-base);
}

.btn--sm {
  height: var(--control-h-sm);
  padding-inline: 20px;
  font-size: var(--text-xs);
}

.btn--primary {
  background: var(--mrk-blue);
  color: var(--mrk-ivory);
}
.btn--primary::before {
  background: var(--mrk-midnight);
}

.btn--secondary {
  border: 1px solid var(--mrk-line-strong);
  color: var(--text-strong);
}
.btn--secondary::before {
  background: var(--mrk-blue);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  color: var(--mrk-ivory);
  border-color: var(--mrk-blue);
}

.btn--ghost-ivory {
  border: 1px solid var(--border-on-blue);
  color: var(--text-on-blue);
}
.btn--ghost-ivory::before {
  background: var(--mrk-ivory);
}
.btn--ghost-ivory:hover,
.btn--ghost-ivory:focus-visible {
  color: var(--mrk-blue);
  border-color: var(--mrk-ivory);
}

.btn__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

/* ── Quiet text link with a rule that draws in ──────────────────────── */
.link {
  position: relative;
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-base) var(--ease-standard);
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--ease-out);
}
.link:hover,
.link:focus-visible {
  color: var(--mrk-blue);
}
.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── The Signal Green dot ───────────────────────────────────────────────
   The one place green is allowed to appear on its own. */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mrk-green);
  flex: none;
}

/* ── Hairline ───────────────────────────────────────────────────────── */
.rule {
  height: 1px;
  border: 0;
  background: var(--border-default);
}
.rule--on-blue {
  background: var(--border-on-blue);
}

/* ── Numeral used as a section counter ──────────────────────────────── */
.numeral {
  font-family: var(--font-tagline);
  font-size: 13px;
  letter-spacing: var(--track-kicker);
  color: var(--mrk-blue-500);
}