/* Sample pyramids, shared by the home page and the pyramid chooser. */
.sample { display: flex; flex-direction: column; gap: 12px; background: var(--page); border-radius: 12px; padding: 20px; min-width: 0; }
.sample__caption { font-size: 13px; color: var(--ink-3); }

.sample-gift { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 13px; font-variant-numeric: tabular-nums; }
.sample-gift__row { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); }
.sample-gift__row:last-child { border-bottom: 0; }
.sample-gift__row--head { background: var(--green-900); color: #FFFFFF; font-weight: 600; font-size: 12px; }
.sample-gift__row--lead { background: var(--green-50); }
.sample-gift__row--more { color: var(--ink-3); }

.sample-tiers { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
.sample-tiers svg { flex: none; max-width: 100%; height: auto; }
.sample-tiers__list { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sample-tiers__item { height: 36px; display: flex; flex-direction: column; justify-content: center; }
.sample-tiers__item span { color: var(--ink-2); }

.sample-moves { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.sample-moves dt { color: var(--ink-3); }
.sample-moves dd { margin: 0; font-weight: 600; }

.sample-true__chart { width: 100%; }
.sample-true__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 13px; font-variant-numeric: tabular-nums; }
.sample-true__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.sample-true__name { font-weight: 600; grid-row: span 2; }
.sample-true__def { color: var(--ink); }
.sample-true__nums { color: var(--ink-2); }
.sample-true__ready { color: var(--purple-600); font-weight: 600; }

/* Phones: less padding so the four gift columns keep their headers apart. */
@media (max-width: 480px) {
  .sample { padding: 12px; }
  .sample-gift__row { padding: 6px 8px; gap: 6px; }
  .sample-gift__row--head { font-size: 11px; }
}