/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

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

body {
  background: #eef2f5;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: #1a2a3a;
  padding: 2rem 1rem;
}

.article-card {
  max-width: 900px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.hero {
  background: linear-gradient(135deg, #2c3e44 0%, #1f4e5c 100%);
  padding: 2rem 2rem 1.5rem 2rem;
  color: white;
}

.hero h1 {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.hero .meta {
  font-size: 0.9rem;
  opacity: 0.85;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.content {
  padding: 2rem 2rem 2rem 2rem;
}

.content h2 {
  font-size: 1.5rem;
  color: #1f4e5c;
  margin: 1.5rem 0 0.75rem 0;
  font-weight: 600;
  border-left: 5px solid #e09d32;
  padding-left: 1rem;
}

.content h2:first-of-type {
  margin-top: 0;
}

.content p {
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  color: #2c3e44;
}

.checklist {
  background: #fef9e6;
  border-radius: 20px;
  padding: 1.2rem 1.8rem;
  margin: 1.5rem 0;
  border: 1px solid #ffe0a3;
}

.checklist h3 {
  color: #c27a1a;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}

.checklist ul {
  margin-left: 1.2rem;
}

.checklist li {
  margin-bottom: 0.5rem;
}

hr {
  margin: 2rem 0 1rem;
  border: none;
  height: 1px;
  background: #dce5e9;
}

.footer-note {
  font-size: 0.85rem;
  color: #6c868e;
  text-align: center;
  margin-top: 1rem;
}

@media (max-width: 600px) {
  .hero h1 { font-size: 1.5rem; }
  .content { padding: 1.5rem; }
}