.container {
  max-width: var(--ds-container-max-width);
  margin: 0 auto;
  padding: 0 var(--ds-container-padding);
}

.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-2 {
  gap: calc(var(--ds-spacing-unit) * 2);
}

.gap-3 {
  gap: calc(var(--ds-spacing-unit) * 3);
}

.gap-4 {
  gap: calc(var(--ds-spacing-unit) * 4);
}

.gap-6 {
  gap: calc(var(--ds-spacing-unit) * 6);
}

.mb-2 {
  margin-bottom: calc(var(--ds-spacing-unit) * 2);
}

.mb-4 {
  margin-bottom: calc(var(--ds-spacing-unit) * 4);
}

.mb-6 {
  margin-bottom: calc(var(--ds-spacing-unit) * 6);
}

.mb-8 {
  margin-bottom: calc(var(--ds-spacing-unit) * 8);
}

.mb-12 {
  margin-bottom: calc(var(--ds-spacing-unit) * 12);
}

.mt-2 {
  margin-top: calc(var(--ds-spacing-unit) * 2);
}

.mt-4 {
  margin-top: calc(var(--ds-spacing-unit) * 4);
}

.mt-6 {
  margin-top: calc(var(--ds-spacing-unit) * 6);
}

.mt-8 {
  margin-top: calc(var(--ds-spacing-unit) * 8);
}

.p-2 {
  padding: calc(var(--ds-spacing-unit) * 2);
}

.p-4 {
  padding: calc(var(--ds-spacing-unit) * 4);
}

.p-6 {
  padding: calc(var(--ds-spacing-unit) * 6);
}

.p-8 {
  padding: calc(var(--ds-spacing-unit) * 8);
}

.px-4 {
  padding-left: calc(var(--ds-spacing-unit) * 4);
  padding-right: calc(var(--ds-spacing-unit) * 4);
}

.px-6 {
  padding-left: calc(var(--ds-spacing-unit) * 6);
  padding-right: calc(var(--ds-spacing-unit) * 6);
}

.py-4 {
  padding-top: calc(var(--ds-spacing-unit) * 4);
  padding-bottom: calc(var(--ds-spacing-unit) * 4);
}

.py-6 {
  padding-top: calc(var(--ds-spacing-unit) * 6);
  padding-bottom: calc(var(--ds-spacing-unit) * 6);
}

.text-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

.text-subtitle {
  color: var(--ds-color-secondary);
  margin: calc(var(--ds-spacing-unit) * 2) 0 0;
}

.ds-link-reset {
  color: inherit;
  text-decoration: none;
}

.ds-link-reset:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.htmx-indicator {
  display: none;
}

.htmx-request.htmx-indicator {
  display: inline-flex;
}

/* External Link Decoration */
.ds-link-external::after {
  content: ' ↗';
  display: inline-block;
  font-size: 0.8em;
  opacity: 0.5;
  transition: transform 0.3s var(--ds-animation-easing), opacity 0.3s;
}

.ds-link-external:hover::after {
  opacity: 1;
  transform: translate(2px, -2px);
}