/* ==========================================================================
 * activate.css
 * 用途：激活页（activate.html）专用样式。原为页面内联 <style>，此处抽离为独立
 *       文件。用于在 base.css + cards.css 之上微调卡片布局：卡片等高、名称占位、
 *       按钮下对齐，以及卡片内「小节标签」与「特性列表」的快照式排版。
 * 引用页面：activate.html
 * 说明：本文件由页面内联样式规范化拆行并补充注释，样式内容保持零改动；
 *       本文件不含 url() 资源引用，无需改写路径。
 * ========================================================================== */

/* ---------- 卡片布局微调 ---------- */
.grid {
  align-items: stretch
}

.card {
  display: flex;
  flex-direction: column
}

.card-head .name {
  min-height: 2.8em
}

.card-btn {
  margin-top: auto;
  align-self: stretch;
  text-align: center
}

/* ---------- 卡片小节与标签 ---------- */
.card-sec {
  margin-bottom: 10px
}

.card-sec:last-of-type {
  margin-bottom: 12px
}

.sec-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .62;
  margin-bottom: 6px
}

.sec-label::before {
  content: "";
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
  opacity: .85
}

/* ---------- 特性列表 ---------- */
.feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px
}

.feat-list li {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.65;
  opacity: .82
}

.feat-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5
}