/*
 * 首頁下載按鈕下方的累積用戶指標卡：數字＋迷你累計曲線＋「成長時間線」入口。
 * 只顯示已核實的快照；數字不做計數動畫。成長時間線頁的樣式在 growth-page.css。
 */
.hero-inner > .public-stats {
  width: min(100%, 34rem);
  margin-top: 2rem;
  padding: 16px 20px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline, var(--line)), 0 18px 40px -24px rgba(0, 0, 0, .22);
  text-align: start;
  animation: none;
}

.public-stats-grid { display: block; }

.public-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "number spark link"
    "label  spark link"
    "detail detail detail";
  align-items: center;
  column-gap: 24px;
  min-width: 0;
}

.public-stat dt {
  grid-area: label;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.public-stat-number {
  grid-area: number;
  max-width: 100%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.public-spark {
  grid-area: spark;
  justify-self: stretch;
  min-width: 0;
  height: 44px;
}

.public-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.public-spark-area { fill: var(--accent); opacity: .12; }
.public-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.public-stat-link { grid-area: link; }

.public-growth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--paper-alt);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease;
}

.public-growth-link svg { width: 16px; height: 16px; flex: none; color: var(--accent); transition: transform .2s ease; }
.public-growth-link:hover { background: color-mix(in srgb, var(--accent) 12%, var(--paper-alt)); }
.public-growth-link:hover svg { transform: translateX(2px); }

.public-stat-detail {
  grid-area: detail;
  margin-top: 8px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.public-stat-detail p { display: inline; }
.public-stat-detail p + p::before { content: " · "; }

@media (max-width: 560px) {
  .hero-inner > .public-stats { padding: 16px 18px; }
  .public-stat {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "number spark"
      "label  spark"
      "link   link"
      "detail detail";
    column-gap: 16px;
  }
  .public-stat-link { margin-top: 10px; }
  .public-stat-detail p { display: block; }
  .public-stat-detail p + p::before { content: none; }
}

@media (prefers-contrast: more) {
  .hero-inner > .public-stats { box-shadow: inset 0 0 0 1px var(--ink); }
  .public-stat dt, .public-stat-detail { color: var(--ink); }
}