:root,
[data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #fbfbf9;
  --color-surface-offset: #f3f0ec;
  --color-border: #d4d1ca;
  --color-divider: #dcd9d5;
  --color-text: #28251d;
  --color-text-muted: #6c6a64;
  --color-text-faint: #9e9b94;
  --color-text-inverse: #f9f8f4;
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-primary-highlight: #cedcd8;
  --shadow-sm: 0 1px 2px rgba(40, 37, 29, 0.06);
  --shadow-md: 0 10px 30px rgba(40, 37, 29, 0.1);
  --content-default: 1100px;
  --font-display: "Boska", Georgia, serif;
  --font-body: "Satoshi", Inter, sans-serif;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] {
  --color-bg: #171614;
  --color-surface: #1c1b19;
  --color-surface-2: #201f1d;
  --color-surface-offset: #1d1c1a;
  --color-border: #393836;
  --color-divider: #262523;
  --color-text: #cdccca;
  --color-text-muted: #a3a19d;
  --color-text-faint: #797876;
  --color-text-inverse: #2b2a28;
  --color-primary: #4f98a3;
  --color-primary-hover: #227f8b;
  --color-primary-highlight: #313b3b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.hero {
  background: linear-gradient(135deg, #171614 0%, #171614 100%);
  color: #fff;
  padding: 60px 40px 50px;
  text-align: center;
  margin: 0 0 35px;
}

.hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1rem;
  color: #cde8d8;
}

.container {
  width: min(calc(100% - 2rem), 1100px);
  margin-inline: auto;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  padding: 48px 52px;
}

.effective-date {
  display: inline-block;
  background: #e8f5ee;
  color: #171614;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 32px;
  letter-spacing: 0.3px;
}

.contact-box {
  background: #f4fbf7;
  border: 1px solid #c2e0ce;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 16px;
}

.contact-box p {
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .card {
    padding: 28px 20px;
  }
  header {
    padding: 14px 18px;
  }
  .hero {
    padding: 40px 20px 35px;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
}