.topbar{gap:12px}
.subscription-renewal{display:flex;align-items:center;justify-content:center;gap:10px;flex:1 1 240px;min-width:0;max-width:720px;margin:0 12px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--cream);color:var(--ink);font-size:11px;line-height:1.4}
.subscription-renewal[hidden],.subscription-renewal [hidden]{display:none!important}
.subscription-renewal-copy{min-width:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px 10px}
.subscription-renewal time{overflow-wrap:anywhere}
.subscription-renewal strong{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.subscription-renewal small{flex-basis:100%;text-align:center;color:var(--muted);font-size:9px}
.subscription-renewal a{flex:none;padding:4px 8px;border:1px solid currentColor;border-radius:6px;color:var(--green);background:var(--paper);font-weight:800;font-size:10px;white-space:nowrap}
.subscription-renewal a:focus-visible{outline:2px solid var(--green-2);outline-offset:3px}
.subscription-renewal[data-tone="warning"]{border-color:#e6bf74;background:#fff8e8;color:#825718}
.subscription-renewal[data-tone="danger"]{border-color:#ecb8b3;background:#fff1f0;color:var(--red)}
.subscription-renewal[data-tone="neutral"]{color:var(--muted)}
.subscription-renewal[data-tone="warning"] a,.subscription-renewal[data-tone="danger"] a{color:inherit}
@media(max-width:1280px){
  .topbar{flex-wrap:wrap;height:auto;min-height:58px;padding-top:8px;padding-bottom:8px}
  .subscription-renewal{order:3;flex-basis:100%;max-width:none;margin:0;grid-column:1/-1}
  .topbar-actions{margin-left:auto}
}
@media(max-width:840px){
  .subscription-renewal{grid-row:3;font-size:10px}
  .subscription-renewal-copy{justify-content:flex-start}
  .subscription-renewal small{text-align:left}
}
.register-mode .subscription-renewal{display:none!important}