/* Official "Sign in with Gully ID" HTML button (Gully ID brand kit v1). <link rel="stylesheet" href="https://gullyid.xyz/assets/sign-in-with-gully.css">
   <a class="gully-signin" href="...">Sign in with Gully ID</a>   add .gully-signin--light on light backgrounds; --s / --l for 44 / 56 px (default 48). */
.gully-signin { box-sizing: border-box; display: inline-flex; align-items: center; gap: 11px; height: 48px; min-width: 48px; padding: 0 22px 0 18px; border-radius: 999px; border: 1px solid #22344F; background: #05080D; color: #FDFDFD; font: 600 16px/1 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .16s cubic-bezier(.2,.8,.2,1), border-color .16s cubic-bezier(.2,.8,.2,1); }
.gully-signin::before { content: ""; flex: none; width: 20px; height: 24px; background: url("brand/gullyid/logo/gullyid-mark.svg") center / contain no-repeat; }
.gully-signin:hover { background: #0A1018; border-color: #2E4566; }
.gully-signin:active { transform: scale(.98); }
.gully-signin:focus-visible { outline: 2px solid #00F7FC; outline-offset: 2px; }
.gully-signin--light { background: #FFFFFF; color: #0B0D12; border-color: #D5D9E0; }
.gully-signin--light::before { background-image: url("brand/gullyid/logo/gullyid-mark-on-light.svg"); }
.gully-signin--light:hover { background: #F6F7F9; border-color: #B9C0CB; }
.gully-signin--light:focus-visible { outline-color: #0096A0; }
.gully-signin--s { height: 44px; gap: 10px; padding: 0 20px 0 16px; font-size: 15px; }
.gully-signin--s::before { width: 19px; height: 22px; }
.gully-signin--l { height: 56px; gap: 13px; padding: 0 26px 0 22px; font-size: 18px; }
.gully-signin--l::before { width: 24px; height: 28px; }