.about-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; }
.about-card { background: var(--bg-card, #fff); color: var(--text-primary, #1e3a5f); border: 1px solid var(--border-color, #dfe5ed); border-radius: 14px; padding: clamp(22px, 3vw, 36px); }
.about-card h3 { font-size: 24px; margin: 20px 0 12px; letter-spacing: -.4px; }
.about-card p { color: var(--text-secondary, #64748b); line-height: 1.7; }
.about-meta { margin-top: 30px; }
.about-meta > div { padding: 16px 0; border-top: 1px solid var(--border-color, #dfe5ed); display: flex; justify-content: space-between; gap: 16px; }
.about-meta dt { color: var(--text-secondary, #64748b); }.about-meta dd { margin: 0; font-weight: 700; }
.about-coffee { color: #ff8036; font-size: 36px; padding: 14px; background: #fff2e7; border-radius: 14px; }
.about-donation { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 24px 0; }
.about-donation strong { font-size: 26px; letter-spacing: 1px; user-select: text; }
.about-gcash-logo { width: 104px; height: auto; padding: 8px; background: #fff; border-radius: 8px; box-sizing: content-box; }
.chart-breakdown { margin-top: 18px; border-top: 1px solid var(--border, #dfe5ed); padding-top: 16px; font-size: 13px; }
.chart-breakdown-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chart-breakdown-total strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.chart-breakdown ul { list-style: none; padding: 0; margin: 14px 0; }
.chart-breakdown li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; gap: 10px; align-items: center; padding: 9px 0; }
.chart-breakdown-dot { width: 9px; height: 9px; border-radius: 50%; }
.chart-breakdown-name { overflow-wrap: anywhere; }
.chart-breakdown-share { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart-breakdown-note { font-size: 11px; line-height: 1.6; color: var(--text-secondary); margin-top: 12px; }
@media(max-width: 480px) {
  .chart-breakdown li { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .chart-breakdown li strong { grid-column: 2; grid-row: auto; }
  .chart-breakdown-share { grid-column: 3; }
}
.about-donation .btn-accent { min-height: 44px; }.about-note { font-size: 12px; }
@media(max-width: 800px) { .about-layout { grid-template-columns: 1fr; } }