/* The platform's additions to the security pages: the brand lockup (as on every page) and the "can see billing"
   switch under a viewer's role. Colors are brand tokens (brand.py). */
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-ink);min-height:44px}
.lockup:hover{color:var(--on-ink)}
.lockup .lk-name{font-weight:var(--bold);font-size:17px;letter-spacing:-0.01em;line-height:1.1;display:block}
.lockup .lk-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;line-height:1.2;display:block;margin-top:2px;color:var(--on-ink-3)}
.side .trial-pill{display:inline-block;margin-top:8px;font:500 12px var(--mono);color:var(--on-ink);background:var(--ink-hover);border:1px solid var(--ink-line);border-left:3px solid var(--ledger);border-radius:var(--radius-pill);padding:3px 8px}
.billing-access{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.billing-access .btn{min-height:44px}

/* Nov 4: the product's name and slogan above the sign-in card (the slogan is public-page only, with ™) */
.auth-brand{width:100%;max-width:448px;display:flex;flex-direction:column;gap:2px}
.auth-brand .ab-name{margin:0;font-weight:var(--bold);font-size:20px;letter-spacing:-0.015em;color:var(--ink)}
.auth-brand .slogan{margin:0;font-size:15px;font-style:italic;color:var(--ink-2)}
sup.tm{font-size:.55em;line-height:0;vertical-align:super;margin-left:1px;font-weight:400}

/* Nov 4 review: the sign-in and two-step pages' ink bar matches the public pages' (the same width, so the lockup sits
   in the same place, and the same height) */
.topbar-in{max-width:1200px;min-height:0;padding:8px 32px}
@media (max-width:760px){.topbar-in{padding:8px 18px}}