:root {
  --support-canvas: #fbfaff;
  --support-canvas-soft: #f4f1ff;
  --support-ink: #24183f;
  --support-heading: #312052;
  --support-muted: #625c70;
  --support-action: #4a2fa9;
  --support-action-strong: #3a247f;
  --support-progress: #5e43da;
  --support-iris: #a6a0fd;
  --support-border: rgba(94, 67, 218, 0.18);
  --support-callout: rgba(166, 160, 253, 0.14);
  --support-focus: rgba(94, 67, 218, 0.35);
}

* {
  box-sizing: border-box;
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px);
  color: var(--support-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(166, 160, 253, 0.18), transparent 24rem),
    radial-gradient(circle at 100% 18%, rgba(94, 67, 218, 0.1), transparent 26rem),
    linear-gradient(180deg, var(--support-canvas), var(--support-canvas-soft));
  font-family: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--support-action);
  text-decoration-color: rgba(94, 67, 218, 0.42);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--support-action-strong);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 3px solid var(--support-focus);
  outline-offset: 4px;
  border-radius: 11px;
}

h1 {
  margin-bottom: 30px;
  color: var(--support-heading);
  letter-spacing: -0.03em;
}

h2 {
  margin-top: 30px;
  color: var(--support-action);
}

strong,
::marker {
  color: var(--support-heading);
}

.last-updated {
  color: var(--support-muted);
  font-style: italic;
}

.nav-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--support-action);
  font-weight: 700;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

.request-box {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid var(--support-border);
  border-radius: 17px;
  background: var(--support-callout);
}