/* ✨ More from Flying Marmot (promo.js): a card per sister app (ChoreBoy, DressBoy, ChefBoy), then the SuperBoy plan, in the app's own modal. */
.promo-lede { margin: -.35rem 0 .9rem; color: var(--text-2); }
.promo-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 860px) { .promo-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .promo-apps { grid-template-columns: minmax(0, 1fr); } }
.promo-app { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .85rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.promo-app-head { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.promo-app-head img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius); }
.promo-app h4 { margin: 0; font-size: 1.05rem; }
.promo-app .sub { margin: .1rem 0 0; overflow-wrap: anywhere; }
.promo-points { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--text-2); display: flex; flex-direction: column; gap: .2rem; }
.promo-app .btn { align-self: flex-start; margin-top: auto; }
.promo-plan { margin-top: .9rem; padding: .85rem .95rem; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }
.promo-plan h4 { margin: 0 0 .35rem; font-size: 1rem; color: var(--accent-text); }
.promo-plan-line { margin: .2rem 0 0; font-size: .92rem; }
/* --text-2, not .muted's --text-3: small text on --accent-soft needs it for 4.5:1. */
.promo-plan-soon { margin: .45rem 0 0; color: var(--text-2); }
.promo-foot { margin-top: 1rem; }
@media (max-width: 360px) { .promo-foot .btn { flex: 1 1 100%; } }