/* Ads to Aid — brand layer on top of arcade.css (same fonts, same night palette, green promoted to the "aid" color). */
:root {
  --aid: #37e28a;          /* money that becomes aid */
  --aid-deep: #0f7a47;
  --coin: #ffd23f;         /* ad money, coins, gold */
  --coin-deep: #b8780c;
}

/* Wordmark: ADS→AID. The arrow is the whole idea. */
.a2a { display: inline-flex; align-items: center; gap: .32em; font-family: var(--display); font-size: var(--a2a-size, 22px); line-height: 1; letter-spacing: .02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.a2a .ads { color: var(--ink); }
.a2a .arrow { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, var(--coin) 55%, var(--coin-deep)); color: #2a1a05; font-size: .78em; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 14px rgba(255,210,63,.45); }
.a2a .aid { color: var(--aid); text-shadow: 0 0 16px rgba(55,226,138,.5); }
.a2a.small { --a2a-size: 16px; }
.a2a.big { --a2a-size: clamp(34px, 6vw, 64px); }
.a2a .sub { font-family: var(--mono); font-size: .42em; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-left: .5em; }

/* Mark alone: coin → heart */
.a2a-mark { display: inline-block; width: 44px; height: 44px; }

/* Pledge pill used on every surface */
.pledge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 999px; background: rgba(55,226,138,.1); border: 1px solid rgba(55,226,138,.35); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--aid); }
.pledge b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coin); color: #2a1a05; font-family: var(--display); font-size: 12px; }