.page-header {
  text-align: center;
  margin-block-end: var(--spacing-xxl);
}

.header-title {
  font-weight: var(--font-weight-light);
  color: var(--neutral-dark);
  margin-block-end: var(--spacing-lg);
  line-height: 1.3;
  font-size: calc(var(--base-unit) * 1.5);
}

.header-title .highlighted {
  font-weight: var(--font-weight-semibold);
  display: block;
}

.header-description {
  color: var(--neutral-medium);
  font-size: calc(var(--base-unit) * 0.9375);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.feature-card {
  background-color: var(--neutral-light);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl);
  box-shadow: var(--box-shadow);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--border-width);
}

.card-supervisor::before {
  background-color: var(--primary-cyan);
}

.card-team-builder::before {
  background-color: var(--primary-red);
}

.card-karma::before {
  background-color: var(--primary-orange);
}

.card-calculator::before {
  background-color: var(--primary-blue);
}

.feature-title {
  color: var(--neutral-dark);
  font-weight: var(--font-weight-semibold);
  font-size: calc(var(--base-unit) * 1.25);
  margin-block-end: var(--spacing-sm);
}

.feature-description {
  font-size: calc(var(--base-unit) * 0.9);
  margin-block-end: calc(var(--base-unit) * 2);
}

.feature-icon {
  display: block;
  margin-inline-start: auto;
  width: calc(var(--base-unit) * 3.5);
  height: calc(var(--base-unit) * 3.5);
}

.page-footer {
  margin-block-start: var(--spacing-xxl);
  text-align: center;
  font-size: calc(var(--base-unit) * 0.8);
}

.attribution a {
  color: var(--primary-blue);
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}