:root {
  --color-primary: #4cc7c1;
  --color-offwhite: #f7f8f9;
  --color-gray-100: #e6e8ea;
  --color-gray-300: #c5c7c9;
  --color-gray-700: #4a4d4f;
  --color-charcoal: #1c1e20;
  --color-accent: #2a6f6a;
  --color-success: #3baa6c;
  --color-error: #d9534f;
  --color-border: var(--color-gray-100);
  --shadow-soft: 0 12px 32px rgba(28, 30, 32, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-offwhite);
  color: var(--color-charcoal);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent);
}

.btn-primary {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-charcoal);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--color-accent);
  color: var(--color-offwhite);
}

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
}

.card > :first-child {
  margin-top: 0;
}