.hero-shot { display: grid; place-items: center; }
.duo { display: grid; grid-template-columns: 1fr; gap: 28px; justify-items: center; padding: clamp(24px, 4vw, 48px); background: var(--surface-2); border-radius: var(--r-lg); }
.duo figure { margin: 0; display: grid; justify-items: center; }
@media (min-width: 700px) { .duo { grid-template-columns: 1fr 1fr; } }

.ageing { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ageing { grid-template-columns: repeat(5, 1fr); } }
.ageing li { display: grid; gap: 4px; align-content: start; }
.ageing-bar { display: block; height: 8px; border-radius: 999px; background: var(--accent); opacity: .35; margin-bottom: 6px; }
.ageing-bar[data-w="2"] { opacity: .5; } .ageing-bar[data-w="3"] { opacity: .65; background: var(--warn); }
.ageing-bar[data-w="4"] { opacity: .85; background: var(--warn); } .ageing-bar[data-w="5"] { opacity: 1; background: var(--danger); }

.names { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--ink-3); }

.expenses { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; justify-items: start; }
@media (min-width: 900px) { .expenses { grid-template-columns: 1fr 300px 1fr; } }
.exp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.exp-points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.exp-points li > i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.35rem; }
:root[data-theme="dark"] .exp-points li > i { color: #7cc4f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .exp-points li > i { color: #7cc4f0; } }

.ledger .row > span:first-child i { margin-right: 6px; color: var(--ink-3); }
.ledger .row .small { text-align: right; }

.gct { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .gct { grid-template-columns: 1fr 1fr; } }
.gct-form { display: grid; gap: 20px; }
.gct-form input { font-family: var(--font-mono); }
.gct-result .ledger .row.total .num { font-size: 1.15rem; }