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

:root {
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1e40af;
  --gray-25: #fcfdfe;
  --gray-50: #f7f9fc;
  --gray-100: #e8eef5;
  --gray-200: #d9e2ec;
  --gray-300: #b9c5d1;
  --gray-400: #7f8c9a;
  --gray-500: #5f6c79;
  --gray-700: #324150;
  --gray-900: #182431;
  --success-50: #f3f8f5;
  --success-100: #d8e7dc;
  --success-700: #3e5d4c;
  --warning-50: #fff8ef;
  --warning-100: #efdcb9;
  --warning-800: #8a6935;
  --shadow-sm: 0 10px 24px rgba(15, 23, 42, .04);
  --radius-lg: 18px;
  --radius-md: 14px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--gray-900);
  background: linear-gradient(180deg, #f8fbfe 0%, #f3f7fb 100%);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(252, 253, 254, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
}

.logo {
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  color: var(--gray-900);
  letter-spacing: -.4px;
}

.logo span { color: var(--brand-600); }

nav a.back {
  font-size: 14px;
  color: var(--gray-500);
  text-decoration: none;
}

nav a.back:hover { color: var(--brand-600); }

.container {
  max-width: 860px;
  margin: 40px auto 80px;
  padding: 44px 40px 56px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

h1 {
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 800;
  letter-spacing: -1.2px;
  margin-bottom: 8px;
  line-height: 1.12;
}

.updated {
  font-size: 14px;
  color: var(--gray-400);
  margin-bottom: 36px;
}

h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 12px;
  color: var(--gray-900);
  letter-spacing: -.3px;
}

p {
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 14px;
}

ul { margin: 0 0 14px 20px; }

ul li {
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 8px;
}

a { color: var(--brand-600); }

.contact-box,
.info-box,
.highlight,
.check-card {
  border-radius: var(--radius-md);
}

.contact-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  padding: 24px;
  margin-top: 40px;
}

.contact-box p { margin: 0; }

.highlight {
  background: var(--warning-50);
  border: 1px solid var(--warning-100);
  padding: 16px 20px;
  margin: 20px 0;
}

.highlight p {
  margin: 0;
  font-size: 14px;
  color: var(--warning-800);
}

.info-box {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 20px 24px;
  margin: 24px 0;
}

.info-box p {
  margin: 0;
  font-size: 14px;
  color: var(--brand-700);
}

.check-card {
  background: var(--success-50);
  border: 1px solid var(--success-100);
  padding: 18px 20px;
  margin: 10px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.check-icon {
  color: var(--success-700);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.check-card strong {
  display: block;
  font-size: 15px;
  color: var(--gray-900);
  margin-bottom: 3px;
}

.check-card span {
  font-size: 14px;
  color: var(--gray-500);
}

@media (max-width: 720px) {
  nav {
    padding: 14px 18px;
  }

  .container {
    margin: 20px 16px 48px;
    padding: 30px 22px 40px;
  }
}