/* Legible closing actions on copper backgrounds. */
:root body .cta .hero-actions a.button.secondary{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
:root body .cta .hero-actions a.button.primary{background:var(--ivory);border-color:var(--ivory);color:var(--espresso)}
:root body .cta .hero-actions a.button .button-label{color:inherit}
:root body .cta .hero-actions a.button:is(:focus-visible,:active){background:var(--ivory);border-color:var(--ivory);color:var(--espresso);outline-color:var(--on-dark)}
/* A quiet outlined link makes the billing overview clearly actionable. */
:root body a.access-overview-link{border:1px solid var(--bronze);padding:22px 24px;gap:12px 28px;margin-top:24px;align-items:center;background:transparent;color:var(--bronze-text);transition:border-color .2s ease,color .2s ease,transform .2s ease}
:root body a.access-overview-link strong{color:var(--bronze-text)}
:root body a.access-overview-link span{color:var(--muted)}
:root body a.access-overview-link:is(:focus-visible,:active){border-color:var(--espresso);outline-color:var(--espresso)}
:root body a.access-overview-link:is(:focus-visible,:active) :is(strong,span){color:var(--espresso)}
@media(hover:hover) and (pointer:fine){
 :root body .cta .hero-actions a.button:hover{background:var(--ivory);border-color:var(--ivory);color:var(--espresso)}
 :root body a.access-overview-link:hover{border-color:var(--espresso);transform:translateY(-2px)}
 :root body a.access-overview-link:hover :is(strong,span){color:var(--espresso)}
}
@media(max-width:680px){:root body a.access-overview-link{align-items:flex-start;padding:20px;gap:8px}}
@media(prefers-reduced-motion:reduce){:root body a.access-overview-link{transition:none;transform:none}}

/* Light primary closing buttons need a visibly different hover state. */
@media(hover:hover) and (pointer:fine){
 :root body .cta .hero-actions a.button.primary:hover{background:transparent;border-color:var(--on-dark);color:var(--on-dark)}
}