/* Full-purple holding screens: the Coming Zoon page and the brand site's sign-in. One stylesheet, so they never drift. */
.soon { position: relative; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; color: var(--z-text-on-brand); isolation: isolate; }
.soon .signin__art { position: fixed; inset: 0; z-index: -1; }
.soon__top { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; }
.soon__mark { display: block; width: 132px; height: 42px; background: var(--z-text-on-brand); -webkit-mask: var(--logo) no-repeat left center / contain; mask: var(--logo) no-repeat left center / contain; }
[dir="rtl"] .soon__mark { -webkit-mask-position: right center; mask-position: right center; }
.soon__lang { color: var(--z-text-on-brand); text-decoration: none; font: var(--z-type-label); padding: 8px 16px; border-radius: 999px; background: rgb(255 255 255 / .18); }
.soon__lang:hover { background: rgb(255 255 255 / .3); }
.soon a:focus-visible { outline: 3px solid var(--z-accent-yellow); outline-offset: 3px; }
.soon__main { display: grid; place-content: center; text-align: center; gap: 18px; padding: 24px; }
.soon h1 { margin: 0; font: 800 clamp(48px, 13vw, 128px)/1 var(--z-font); letter-spacing: -0.03em; text-wrap: balance; }
.soon h1:lang(ar) { line-height: 1.3; letter-spacing: 0; }
.soon__line { margin: 0; font: 700 clamp(18px, 3.4vw, 28px)/1.3 var(--z-font); }
.soon__sub { margin: 0 auto; max-width: 46ch; font: var(--z-type-body-lg); opacity: .9; }
.soon__foot { padding: 20px 24px; text-align: center; font: var(--z-type-caption); opacity: .85; }
.soon__spark { display: inline-block; width: .5em; height: .5em; margin-inline-start: .08em; vertical-align: top; background: var(--z-accent-yellow); border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: soon-spark 2.4s ease-in-out infinite; }
@keyframes soon-spark { 50% { transform: rotate(18deg) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .soon__spark { animation: none; } }
.soon__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; background: var(--z-text-on-brand); color: var(--z-brand); font: 700 17px/1 var(--z-font); box-shadow: 0 6px 24px rgb(26 26 26 / .22); transition: transform var(--z-duration-fast); }
.soon__btn:hover { transform: translateY(-2px); }
.soon__btn--ghost { background: rgb(255 255 255 / .18); color: var(--z-text-on-brand); box-shadow: none; }
.soon__fine { margin: 0; font: var(--z-type-caption); opacity: .85; }