@import url("./overview.css");

.atlas-v2 {
  background: #eceae6;
}

.atlas-v2 .atlas-header {
  min-height: 360px;
  padding: 58px 66px;
  border-bottom: 0;
  background: #302b27;
  color: #fffdf8;
}

.atlas-v2 .eyebrow {
  color: #ffad69;
}

.atlas-v2 .header-copy > p {
  color: rgba(255, 253, 248, 0.7);
}

.atlas-v2 .legend {
  color: rgba(255, 253, 248, 0.78);
}

.atlas-v2 .metric {
  border-color: rgba(255, 255, 255, 0.1);
  background: #413a34;
}

.atlas-v2 .metric strong {
  color: #fffdf8;
}

.atlas-v2 .metric span {
  color: rgba(255, 253, 248, 0.65);
}

.atlas-v2 .flow {
  padding: 48px 50px 58px;
}

.atlas-v2 .flow-entry { background: #fff8ed; }
.atlas-v2 .flow-binding { background: #eef7e7; }
.atlas-v2 .flow-social { background: #eaf5f8; }
.atlas-v2 .flow-manage { background: #fff0ed; }

.atlas-v2 .flow-heading {
  min-height: 112px;
  margin-bottom: 24px;
  padding: 0 8px 20px;
  border-bottom: 2px solid rgba(57, 40, 28, 0.12);
}

.atlas-v2 .flow-number {
  top: -22px;
  color: rgba(57, 40, 28, 0.08);
  font-size: 78px;
}

.atlas-v2 .state-grid {
  gap: 18px;
}

.atlas-v2 .state-card {
  border-color: rgba(57, 40, 28, 0.1);
  box-shadow: 0 7px 18px rgba(57, 40, 28, 0.09);
}

.atlas-v2 .state-copy {
  min-height: 92px;
  padding: 14px;
}

.atlas-v2 .state-copy > b {
  background: #ff8c42;
  color: #2d2118;
}

.atlas-v2 footer {
  min-height: 92px;
  background: #1f1c19;
}