@font-face { font-family: Signup; src: url('./signup/regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Signup; src: url('./signup/semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Signup; src: url('./signup/bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: #000; background: #fff; font: 17px/1.5 Signup, sans-serif; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
a, .link { color: #0047ff; }
a { text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #0047ff; outline-offset: 2px; }
header { height: 67px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; gap: 0 20px; padding: 12px clamp(15px, 4vw, 30px); position: sticky; top: 0; z-index: 5; background: #fff; }
header .brand { font-weight: 700; color: #000; font-size: 22px; white-space: nowrap; height: 42px; display: inline-flex; align-items: center; }
header p { margin: 0; font-size: 14px; line-height: 1.8; letter-spacing: -.24px; text-align: right; }
header p a { font-weight: 700; display: inline-block; }
main { min-height: calc(100dvh - 109px); }
.signup-section { width: min(45%, 480px); margin: auto; padding: clamp(60px, 6vw, 70px) 0; }
.product-logo { display: inline-block; height: 48px; margin-bottom: 16px; }
.product-logo img { display: block; height: 48px; width: auto; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.48px; line-height: 1.2; margin: 0 0 8px; }
#signup-form { margin-top: clamp(18px, 3vw, 34px); }
.field { position: relative; margin-bottom: 12px; }
.field > input { display: block; width: 100%; padding: 32px 16px 8px; border: 1px solid #0000008c; border-radius: 8px; background: #fff; font: 600 16px/24px Signup, sans-serif; letter-spacing: -.32px; outline: none; }
.field > input:focus { border-color: #0047ff; outline: 1px solid #0047ff; }
.field > input[aria-invalid='true']:not(:focus) { border-color: #e81111; }
.field > label { position: absolute; left: 12px; top: 33px; transform: translateY(-50%); padding: 0 4px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; background: #fff; color: #0000008c; font-size: 16px; font-weight: 600; letter-spacing: -.32px; transition: top .2s, font-size .2s; }
/* signup-A002: native CSS follows focus and content without timers or layout polling. */
.field > input:focus + label, .field > input:not(:placeholder-shown) + label { top: 20px; font-size: 12px; }
.password-field > input { padding-right: 50px; }
#password-toggle { position: absolute; right: 20px; top: 20.5px; width: 24px; height: 25px; border: 0; padding: 0; background: transparent url('./signup/field-sprite.svg') -78px 0 / 700px auto no-repeat; }
#password-toggle svg { display: none; }
#password-toggle[aria-pressed='true'] { background-position: -52px 0; }
.phone-field > input { padding-left: 80px; }
.phone-prefix { position: absolute; top: 32px; left: 16px; pointer-events: none; font: 600 16px/24px Signup; visibility: hidden; }
.phone-field > input:focus ~ .phone-prefix, .phone-field > input:not(:placeholder-shown) ~ .phone-prefix { visibility: visible; }
.error { margin: 0; padding: 4px 0 0 20px; font-size: 14px; letter-spacing: -.24px; line-height: 21px; position: relative; color: #e81111; overflow-wrap: anywhere; }
.error::before { content: ''; position: absolute; left: 0; top: 8px; width: 14px; height: 12px; background: url('./signup/field-sprite.svg') -60px -2px / 400px auto no-repeat; }
.error a, .consent a { text-decoration: underline; }
.data-center { font-size: 14px; line-height: 22.4px; margin: 6px 0 12px; letter-spacing: -.24px; }
.consent { display: inline-block; width: 100%; margin-bottom: 14px; vertical-align: top; color: #0000008c; font-size: 14px; letter-spacing: -.24px; line-height: 21px; cursor: pointer; }
.consent input { width: 17px; height: 17px; margin: 3px 8px 3px 0; position: relative; bottom: -3px; vertical-align: baseline; accent-color: #019e0d; }
.consent:has(input:checked) { color: #000; }
.terms { margin: 0; }
#signup-submit, .submit { width: 100%; min-height: 56px; border: 0; border-radius: 4px; color: #fff; background: #e42527; padding: 12px 32px; font-size: 18px; font-weight: 600; text-transform: uppercase; }
button:disabled { cursor: wait; }
.social { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 14px; font-weight: 700; color: #595959; margin: 20px 0; }
.social button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent url('./signup/common-sprite.svg') no-repeat; }
.social button[data-provider='google'] { width: 29px; height: 28px; background-size: 667px auto; transform: scale(1.1); }
.social button[data-provider='azure'] { background-size: 1080px auto; background-position: -360px 0; }
footer { padding: 10px 16px; background: #f3f3f3; border-top: 1px solid #e2e2e2; text-align: center; font-size: 14px; line-height: 21px; }
#demo-open { position: fixed; right: -127px; top: 30%; z-index: 6; width: 80px; height: 100px; color: #fff; background: #0550e6; border: 0; border-left: 2px solid #a1a4ff; border-radius: 8px 0 0 8px; padding: 2px 5px; transition: right .55s ease; }
/* Reserve the source illustration's space; final image work is explicitly deferred. */
#demo-open::before { content: ''; display: inline-block; width: 52px; height: 44px; vertical-align: middle; }
#demo-open span { display: block; padding-top: 10px; font-size: 11px; line-height: 1.1; font-weight: 600; }
#demo-open.visible { right: 0; }
dialog { border: 0; padding: 0; color: #000; background: #fff; }
dialog::backdrop { background: #0008; }
.close { position: absolute; right: 15px; top: 10px; border: 0; background: transparent; width: 25px; height: 28px; padding: 0; font-size: 28px; line-height: 1; }
#demo-dialog { width: 460px; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; overflow: hidden; }
.drawer { padding: 50px 50px 30px; height: 100%; overflow-y: auto; }
#demo-dialog[open] { animation: signup-drawer .5s ease forwards; }
@keyframes signup-drawer { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer h2 { font-size: 22px; line-height: 24px; margin: 0 0 15px; }
#demo-form > label { display: block; margin-bottom: 15px; font-size: 14px; line-height: 25.5px; }
#demo-form input:not([type='checkbox']), #demo-form textarea, #demo-form select { width: 100%; display: block; border: 1px solid #dbdbdb; border-radius: 2px; padding: 10px 12px; margin-top: 8px; font-size: 15px; line-height: 19px; }
#demo-form textarea { height: 100px; }
#demo-form input:focus, #demo-form textarea:focus, #demo-form select:focus { outline: 1px solid #0047ff; }
#demo-location, .privacy-note { font-size: 14px; line-height: 21px; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; }
.captcha { display: flex; gap: 5px; align-items: center; }
.captcha input { min-width: 0; }
#captcha-image { font-size: 12px; min-width: 110px; color: #777; }
#captcha-reload { border: 0; background: none; font-size: 24px; }
#cookie-banner { position: fixed; bottom: 0; width: 100%; background: #000; color: #fff; z-index: 10; padding: 15px 4%; font-size: 14px; line-height: 20px; }
#cookie-banner p { margin: 0 0 10px; }
#cookie-banner a { color: #00aeef; }
.cookie-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-buttons button { background: none; color: #00aeef; border: 1px solid #00aeef; padding: 7px 14px; font-size: 12px; font-weight: 700; }
#cookie-widget { position: fixed; bottom: 10px; left: 10px; width: 40px; height: 40px; border: 0; background: #fff; color: #000; box-shadow: 0 1px 5px #0003; border-radius: 50%; z-index: 7; }
#cookie-dialog { width: 560px; max-width: calc(100% - 30px); max-height: 84dvh; margin: 8dvh auto auto; padding: 25px; border-radius: 5px; font-size: 14px; line-height: 22.4px; opacity: 0; transition: opacity .2s, display .3s allow-discrete, overlay .3s allow-discrete; }
#cookie-dialog[open] { opacity: 1; }
#cookie-dialog.from-widget { inset: auto auto 83px 10px; margin: 0; }
#cookie-dialog.from-widget[open] { animation: cookie-popup .5s ease; }
/* Match the source widget's distinct entrance, separate from the banner's opacity transition. */
@keyframes cookie-popup { from { transform: translate3d(-10px, 70px, -20px); } to { transform: translate3d(0, 0, 0); } }
#cookie-dialog::backdrop { background: transparent; transition: background-color .3s, display .3s allow-discrete, overlay .3s allow-discrete; }
#cookie-dialog[open]::backdrop { background: #0006; }
@starting-style { #cookie-dialog[open] { opacity: 0; } #cookie-dialog[open]::backdrop { background: transparent; } }
#cookie-dialog h2 { font-size: 18px; margin: 0 0 5px; padding: 0 10px; }
#cookie-dialog > p { padding: 0 10px; }
#cookie-dialog details { position: relative; padding: 20px 20px 20px 35px; margin-bottom: 20px; background: #f8f8f8; }
#cookie-dialog summary { position: relative; font-size: 16px; line-height: 25.6px; font-weight: 600; padding-right: 48px; list-style: none; }
#cookie-dialog summary::before { content: '+'; position: absolute; left: -20px; font-weight: 400; }
#cookie-dialog details[open] > summary::before { content: '−'; }
/* Native intrinsic-size transitions reproduce the source's 300ms accordion without a permanent frame loop. */
#cookie-dialog details::details-content { block-size: 0; overflow: clip; interpolate-size: allow-keywords; transition: block-size .3s, content-visibility .3s allow-discrete; }
#cookie-dialog details[open]::details-content { block-size: auto; }
#cookie-dialog details p { margin: 10px 0; }
.cookie-switch, .always-on { position: absolute; right: 0; top: 2px; width: 44px; height: 20px; }
.cookie-switch input { appearance: none; width: 24px; height: 16px; border-radius: 18px; margin: 2px 10px; background: #a7a7a7; cursor: pointer; }
.cookie-switch input::after { content: ''; position: absolute; width: 20px; height: 20px; left: 0; top: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 7px -2px #7d7d7d; transition: left .3s; }
.cookie-switch input:checked { background: #03a9f5; }
.cookie-switch input:checked::after { left: 22px; }
#cookie-save { border: 0; background: #03a9f5; color: #fff; font-size: 12px; font-weight: 600; padding: 8px 22px; }
@media (max-width: 991px) { .signup-section { width: min(81%, 480px); padding-bottom: 40px; } }
@media (max-width: 767px) { #cookie-widget { display: none; } #cookie-dialog[open]::backdrop { background: #000b; } }
@media (max-width: 600px) { #cookie-dialog { width: 90%; max-width: none; padding: 15px; } }
@media (max-width: 480px) {
  #cookie-dialog { width: 96%; margin-left: 1%; }
  header { height: auto; flex-wrap: wrap; text-align: center; }
  header .brand { font-size: 22px; margin: auto; }
  header p { width: 100%; margin: 16px auto 10px; text-align: center; }
  .drawer { padding: 40px 35px 80px; }
  .social { flex-wrap: wrap; justify-content: center; }
}