.hero-shot { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 900px) { .hero-shot { align-items: flex-end; } }
.hero-shot .shot-caption { text-align: center; }
.ladder h3 { margin-top: 2px; }
.ladder .dot { font-size: 1.15rem; }
.ladder .dot i { color: inherit; }
.ladder li p { margin: 4px 0 0; }
.offline-head { max-width: 62ch; }
.offline-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .offline-grid { grid-template-columns: 1fr 1fr; } }
.offline-grid h3 { display: flex; align-items: center; gap: 10px; }
.offline-grid h3 i { color: var(--accent-ink); }
.offline-grid .ledger .row { align-items: center; }
.tier-picker { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tier-picker { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.tier-options { display: grid; gap: 10px; }
.tier-options button { text-align: left; display: grid; gap: 4px; min-height: 64px; padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--canvas); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .18s, background-color .18s; }
.tier-options button strong { font: 650 1.0625rem/1.2 var(--font-display); }
.tier-options button span { color: var(--ink-3); font-size: .9rem; }
.tier-options button:hover { border-color: var(--ink-3); }
.tier-options button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tier-options button[aria-checked="true"] span { color: var(--ink-2); }
.tier-result .ledger .row { align-items: center; }
.roles .row { flex-direction: column; gap: 2px; padding: 16px 0; }
.roles .row strong { font: 650 1.1rem/1.3 var(--font-display); color: var(--ink); }
.roles .row span { color: var(--ink-2); flex: 1; text-align: left; }
@media (min-width: 640px) { .roles .row { flex-direction: row; gap: 24px; } .roles .row strong { flex: 0 0 120px; } }
.share-grid { gap: 20px; }
.share-card { border: 1px solid var(--line); background: var(--canvas); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 28px); }
.share-card h3 { display: flex; align-items: center; gap: 10px; }
:root[data-theme="dark"] .history { border: 1px dashed var(--line); background: transparent; }
.cta-card .actions { align-items: center; }