.earn-signin-note{margin:0;padding:.9rem 1rem;border-radius:var(--radius-control,10px);background:var(--color-accent-soft,#eef6f2);color:var(--color-ink);line-height:1.5;display:grid;gap:.35rem;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:var(--color-accent-soft,#121413)}}
.earn-signin-note :is(h2,p){margin:0}
/* Earn arrival: the generic feature list and sign-in blurb give way so Google, Apple and email sit near the top. */
[data-earn-arrival] :is(.supporter-welcome,[data-supporter-signin-intro]){display:none!important}
/* The section and buttons inherit My Stuff's panel and pill styles; only earn-specific layout lives here. */
.earn{min-width:0}
.earn[hidden],.earn [hidden]{display:none}
.earn h2{margin:0;font-size:1.35rem}
.earn h3{margin:0;font-size:1.05rem}
.earn p{margin:0;line-height:1.55;overflow-wrap:anywhere}
.earn__head{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.earn__head>div{flex:1 1 22rem;min-width:0}
.earn__head p{margin-top:.35rem;color:var(--color-muted,#526580);max-width:60ch;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn__code{font-size:var(--fs-ui)}
.earn__code summary{min-height:44px;display:flex;gap:.3rem;align-items:center;cursor:pointer;color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn__code form{display:grid;gap:.5rem;margin-top:.5rem;max-width:18rem}
.earn__code small{color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn__programs{display:grid;gap:.75rem}
.earn-card{display:grid;gap:.9rem;padding:1rem;border:1px solid var(--color-rule);border-radius:12px;min-width:0}
.earn-card[data-status="active"]{border-color:#b9d8c9;background:#f7fbf9;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){border-color:#2e3a34;background:#171817}}
.earn-card__who{display:flex;gap:.75rem;align-items:center;min-width:0}
.earn-card__who>div{display:grid;gap:.15rem;min-width:0}
.earn-card__who strong{font-size:1.02rem;overflow-wrap:anywhere}
.earn-card__who small{color:var(--color-muted,#526580);line-height:1.45;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn-card__avatar{flex:0 0 2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--color-ink);color:var(--color-paper);font-weight:700;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:oklch(22% 0.035 188);color:oklch(98% 0.008 170)}}
.earn-card[data-status="paused"] .earn-card__avatar{opacity:.45}
.earn-card__share{display:grid;gap:.6rem;min-width:0}
.earn-card__share input{width:100%;box-sizing:border-box;min-height:44px;padding:.55rem .75rem;border:1px solid var(--color-rule-strong,#b8c4cf);border-radius:10px;background:#fff;font:inherit;font-size:var(--fs-ui);color:var(--color-ink);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){border:1px solid var(--color-rule-strong,#373c41);background:#1d1e1e}}
.earn-card__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.earn-card__impact{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;margin:0;padding:.7rem .9rem;border-radius:10px;background:#eaf5ef;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:#121312}}
.earn-card__impact>div{display:grid;gap:.1rem;min-width:0}
.earn-card__impact dd{margin:0;font-size:1.35rem;font-weight:750;line-height:1.15;color:var(--color-accent-dark,#1f5a43);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:#81c9ab}}
.earn-card__impact dt{font-size:var(--fs-sm);color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn-card__qr{width:10rem;height:10rem;image-rendering:pixelated;border:1px solid var(--color-rule);border-radius:8px;background:#fff;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:#1d1e1e}}
.earn-card__join{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.supporter-account .earn-card__agree{display:flex;flex:0 1 auto;gap:.6rem;align-items:center;min-height:44px;font-weight:600;font-size:var(--fs-ui);cursor:pointer}
.earn-card__agree input{width:1.15rem;height:1.15rem;flex:0 0 auto}
.earn-card__note{color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.supporter-account .earn-button:not(.earn-button--primary){background:transparent;color:var(--color-ink);border:1px solid var(--color-rule-strong)}
.earn :is(button,a,input,summary):focus-visible{outline:2px solid var(--color-focus,#245746);outline-offset:3px;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){outline:2px solid #81c9ab}}
.earn__paid{display:grid;gap:.75rem}
.earn__balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0}
.earn__balances div{padding:.75rem;border-radius:10px;background:#f7f8fa;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:#151615}}
.earn__balances dt{font-size:var(--fs-sm);color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn__balances dd{margin:.2rem 0 0;font-size:1.25rem;font-weight:700}
.earn__next{font-weight:600}
.earn__stripe{display:grid;gap:.5rem;justify-items:start}.earn-card__agreed{color:var(--color-muted,#56665d);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#dce2df)}}.earn-card__agreed a{color:inherit}.earn__stripe p{margin:0}.earn__stripe>div{justify-self:stretch}
.earn__code input{min-height:44px;box-sizing:border-box;width:100%;padding:.55rem .75rem;border:1px solid var(--color-rule-strong,#b8c4cf);border-radius:10px;font:inherit;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){border:1px solid var(--color-rule-strong,#373c41)}}
.earn__history{list-style:none;margin:0;padding:0;display:grid}
.earn__history li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.6rem 0;border-top:1px solid var(--color-rule)}
.earn__history span{color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn__status:empty{display:none}
.earn__status{font-weight:600}
.earn__fine{font-size:var(--fs-sm);color:var(--color-muted,#526580);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
.earn__fine a{color:inherit}
@media(max-width:38rem){.earn{padding:1rem}.earn-card__join{align-items:stretch}.earn-card__join .earn-button{width:100%}}
.earn a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Big numbers and a big button: the link is the point of the card. */
.earn-steps{list-style:none;margin:.9rem 0 1rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.earn-steps li{display:grid;gap:.2rem;align-content:start;padding:.9rem;border:1px solid var(--color-rule);border-radius:12px;min-width:0}
.earn-steps__icon{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;background:var(--color-accent-soft,#e4f1ea);color:var(--color-accent-dark,#1f5a43);margin-bottom:.25rem;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:var(--color-accent-soft,#101110);color:#81c9ab}}
.earn-steps span:not(.earn-steps__icon){color:var(--color-muted,#526580);font-size:var(--fs-ui);line-height:1.4;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){color:var(--color-muted,#d9e0e9)}}
@media(max-width:640px){.earn-steps{grid-template-columns:minmax(0,1fr)}.earn-steps li{grid-template-columns:auto minmax(0,1fr);column-gap:.75rem}.earn-steps__icon{grid-row:1 / span 2}}
.earn-card__impact{background:transparent;border:1px solid var(--color-rule);gap:.5rem 2.25rem;padding:.8rem 1rem}
.earn-card__impact dd{font-size:2rem}
.earn-card__share input{min-height:52px;font-size:var(--fs-body);font-weight:650}
.earn-card__actions .earn-button--primary{flex:1 1 12rem;min-height:52px;font-size:1.0625rem}
.earn-card[data-status="active"]{background:var(--color-panel,#fff);&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:var(--color-panel,#1d1e1e)}}
.supporter-account .earn-button--primary{background:var(--color-accent-dark,#1f5a43);color:#fff;border:1px solid transparent;&:where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))):where(:not(.force-light, .force-light *)), :where(:root):where([data-scheme="dark"]:not(:has(.storefront-body))) &:where(:not(.force-light, .force-light *)){background:#0e7a5a}}