.hero-grid {
  display: grid;
  gap: var(--space-4);
}

.hero-note {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid #d4dfce;
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.hero-visual {
  margin-top: var(--space-3);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.metric {
  background: #f8fbf5;
  border: 1px solid #d6e2d0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.metric strong {
  display: block;
  font-size: 1.2rem;
  color: var(--primary-strong);
}

.task-list {
  display: grid;
  gap: var(--space-2);
}

.task-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.task-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: start;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.badge-grid {
  display: grid;
  gap: var(--space-3);
}

.badge-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #fff, #f2f7ec);
  padding: var(--space-4);
}

.badge-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #bcd2af, #2f5d46);
  margin-bottom: var(--space-2);
}

.banner {
  border: 1px dashed #b3c6aa;
  background: #eef5e8;
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.map-shell {
  background: repeating-linear-gradient(
    45deg,
    #ebf2e5,
    #ebf2e5 14px,
    #f7faf3 14px,
    #f7faf3 28px
  );
  border: 1px solid #d2decb;
  border-radius: var(--radius-md);
  min-height: 180px;
  padding: var(--space-3);
}

.map-stack {
  display: grid;
  gap: var(--space-2);
}

.illustration-inline {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid #d0dcc8;
}

.quote-card {
  border-radius: var(--radius-md);
  border: 1px solid #cedbc7;
  background: #f8fbf5;
  padding: var(--space-3);
  font-size: 0.95rem;
  color: #465b4e;
}

.checkpoint-dot {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  background: #9bb293;
}

.checkpoint-dot.ready {
  background: #5f8f6c;
}

.empty-state {
  border: 1px dashed #bfd0b8;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #f8fbf4;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }

  .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}