/*
  🧩 More from the Boy apps (promo.js): a card for ChoreBoy and one for DressBoy, then the SuperBoy package
  plan, in the app's own modal. Also the welcome page's prices and "The Boy apps" row (auth.js), which
  share the plan lines. No motion of its own: the modal is the app's.
*/
.promo-lede { margin: -.35rem 0 .9rem; color: var(--text-2); }
.promo-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@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%; } }