.s-page--space {
  --space-gap-tight: calc(var(--s-x) * .5);
  --space-gap-standard: var(--s-x);
  --space-gap-logo-top: calc(var(--s-x) * 3);
  --space-gap-major: calc(var(--s-x) * 4);
  --space-copy-line-height: 18px;
}

/* Let the route background provide the page color. The Space body itself
   must not paint a separate bottom/footer layer beneath the content. */
html.s-route:has(body.s-page--space) body.s-page--space {
  background-color: transparent !important;
  background-image: none !important;
}

@media (orientation: portrait) and (max-width: 600px) {
  html.s-route:has(body.s-page--space) {
    background-color: #000000;
    background-image: none;
  }

  html.s-route.is-day-mode:has(body.s-page--space) {
    background-color: #FFFFFF;
    background-image: none;
  }
}

body.s-page.s-page--space .space-details__frame {
  box-sizing: border-box;
  height: auto;
  min-height: var(--s-section-frame-height, 100dvh);
  max-height: none;
  overflow: visible;
  padding: var(--space-gap-logo-top) var(--space-gap-standard) 0;
}

/* Space dims its existing content elements only; the shared menu and top bar
   remain outside this state. */
body.s-page.s-page--space > .s-page__content > * {
  opacity: 1;
  transition: opacity .26s cubic-bezier(.22, .61, .36, 1);
}

body.s-page.s-page--space.is-menu-open > .s-page__content > * {
  opacity: .5;
  pointer-events: none;
}

body.s-page.s-page--space .space-details__frame--hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-gap-standard);
}

body.s-page.s-page--space .space-details__frame--continuation {
  min-height: 0;
  padding-top: 0;
  padding-bottom: calc(var(--space-gap-standard) + env(safe-area-inset-bottom, 0px));
}

.s-page--space .space-details__mark {
  display: block;
  width: var(--space-logo-fit-width, calc(clamp(96px, 22vw, 144px) * 1.10328585939));
  height: auto;
  margin: 0 auto var(--space-gap-major);
  overflow: visible;
}

.s-page--space .space-details__copy {
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}

.s-page--space .space-details__title {
  width: 100%;
  margin: 0;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  text-align: center;
}

.s-page--space .space-details__description {
  width: 100%;
  margin: var(--space-gap-tight) 0 0;
  color: #A6A6A6;
  font-size: 12px;
  font-weight: 500;
  line-height: var(--space-copy-line-height);
  text-align: center;
  text-wrap: pretty;
}

html[dir="rtl"] .s-page--space .space-details__title[lang="en"],
html[dir="rtl"] .s-page--space .space-details__description[lang="en"],
html[dir="ltr"] .s-page--space .space-details__title[lang="ar"],
html[dir="ltr"] .s-page--space .space-details__description[lang="ar"] {
  display: none;
}

html.s-route.is-day-mode .s-page--space .space-details__title { color: #111111; }
html.s-route.is-day-mode .s-page--space .space-details__description { color: #666666; }

.s-page--space .s-page__content {
  padding: 0;
}

.s-page--space .space-composition {
  position: relative;
  z-index: 1;
  inset-inline: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-gap-tight);
  text-align: center;
  pointer-events: none;
}

.s-page--space .space-composition-stage {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: var(--space-gap-major);
  overflow: visible;
}

@media (orientation: portrait) {
  .s-page--space .space-composition-stage {
    margin-top: calc(var(--space-gap-major) + var(--space-gap-major));
  }
}

.s-page--space .space-composition__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.s-page--space :is(.space-message, .space-baseline) {
  display: flex;
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: OOXMEScript, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
}

html.s-route.is-day-mode .s-page--space :is(.space-message, .space-baseline) {
  color: #000000;
}

html[dir="rtl"] .s-page--space .space-message[lang="en"],
html[dir="ltr"] .s-page--space .space-message[lang="ar"],
html[dir="rtl"] .s-page--space .space-baseline[lang="en"],
html[dir="ltr"] .s-page--space .space-baseline[lang="ar"] {
  display: none;
}

html[lang="ar"] .s-page--space :is(.space-message, .space-baseline) {
  font-family: OOXMETosh, OOXMEScript, Arial, sans-serif;
}

.s-page--space .s-main-hero-number {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  color: #0A84FF;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: OOXMETosh, OOXMEScript, Arial, sans-serif;
  font-size: clamp(56px, 14vw, 108px);
  font-style: normal;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: normal;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .045), 0 1px 1px rgba(0, 0, 0, .025);
}

.s-page--space .s-main-hero-number.is-digit-looping {
  white-space: nowrap;
}

.s-page--space .s-main-hero-digit {
  display: inline-block;
  animation: s-main-number-digit-loop 1800ms cubic-bezier(.22, .61, .36, 1) infinite;
  animation-delay: var(--s-main-digit-delay);
  transform-origin: center;
}

@keyframes s-main-number-digit-loop {
  0%, 100% { transform: scale(1); }
  10% { transform: scale(1.12); }
  18% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .s-page--space .s-main-hero-digit { animation: none; }
}

.s-page--space .space-rewards-stage,
.s-page--space .space-application__surface {
  --s-composer-surface: rgba(255, 255, 255, .16);
  --s-composer-stroke: var(--s-glass-stroke);
  --s-composer-shadow: 0 2px 7px rgba(0, 0, 0, .045), 0 1px 1px rgba(0, 0, 0, .025);
  --s-composer-backdrop: blur(20px) saturate(125%);
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: 100%;
}

.s-page--space .space-rewards-stage {
  margin: calc(var(--space-gap-major) - var(--space-gap-standard)) auto 0;
}

@media (orientation: portrait) {
  .s-page--space .space-rewards-stage {
    margin-top: calc(var(--space-gap-major) + var(--space-gap-major) - var(--space-gap-standard));
  }
}

.s-page--space .space-application__surface {
  margin: 0;
}

.s-page--space .space-rewards__header {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  display: flex;
  width: min(340px, calc(100vw - (var(--s-x) * 2)));
  height: auto;
  margin: 0 auto;
  padding: var(--space-gap-standard);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--s-composer-stroke);
  border-top: 0;
  border-bottom: 0;
  border-radius: var(--s-composer-radius) var(--s-composer-radius) 0 0;
  background: rgba(10, 132, 255, .16);
  box-shadow: inset 0 1px var(--s-composer-stroke), var(--s-composer-shadow);
  -webkit-backdrop-filter: var(--s-composer-backdrop);
  backdrop-filter: var(--s-composer-backdrop);
  text-align: center;
}

.s-page--space .space-rewards {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--space-gap-standard);
  border: 1px solid var(--s-composer-stroke);
  border-radius: var(--s-composer-radius);
  background: var(--s-composer-surface);
  box-shadow: var(--s-composer-shadow);
  -webkit-backdrop-filter: var(--s-composer-backdrop);
  backdrop-filter: var(--s-composer-backdrop);
  text-align: center;
}

html.s-route.is-day-mode .s-page--space :is(.space-rewards-stage, .space-application__surface) {
  --s-composer-surface: rgba(255, 255, 255, .42);
  --s-composer-shadow: 0 2px 6px rgba(0, 0, 0, .022), 0 1px 1px rgba(0, 0, 0, .012);
}

html.s-route.is-day-mode .s-page--space .space-rewards__header {
  background: rgba(10, 132, 255, .42);
}

.s-page--space .space-rewards__list {
  display: grid;
  margin-top: 0;
}

.s-page--space .space-rewards__heading {
  margin: 0;
}

.s-page--space .space-rewards__item {
  margin: 0;
  padding-block: var(--space-gap-standard);
}

.s-page--space .space-rewards__item:first-child {
  padding-top: 0;
}

.s-page--space .space-rewards__item:last-child {
  padding-bottom: 0;
}

.s-page--space .space-rewards__item + .space-rewards__item {
  border-top: 1px solid rgba(255, 255, 255, .14);
}

html.s-route.is-day-mode .s-page--space .space-rewards__item + .space-rewards__item {
  border-color: rgba(0, 0, 0, .12);
}

.s-page--space .space-faq {
  width: min(340px, calc(100vw - (var(--s-x) * 2)));
  max-width: min(340px, calc(100vw - (var(--s-x) * 2)));
  margin: var(--space-gap-major) auto 0;
}

@media (orientation: portrait) {
  .s-page--space .space-faq {
    margin-top: calc(var(--space-gap-major) + var(--space-gap-major));
  }
}

.s-page--space .space-faq__heading {
  margin: 0 0 var(--space-gap-standard);
  text-align: center;
}

.s-page--space .space-faq__list {
  width: 100%;
}

.s-page--space .space-faq__item {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

html.s-route.is-day-mode .s-page--space .space-faq__item {
  border-color: rgba(0, 0, 0, .12);
}

.s-page--space .space-faq__question {
  display: flex;
  width: 100%;
  margin: 0;
  padding: var(--space-gap-standard) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap-standard);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  direction: inherit;
  text-align: start;
}

.s-page--space .space-faq__question .space-details__title {
  width: auto;
  flex: 1 1 auto;
  text-align: start;
}

.s-page--space .space-faq__toggle {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: #0A84FF;
  color: #FFFFFF;
  font-size: 0;
  transform: rotate(0deg);
  transition: transform .22s ease;
}

.s-page--space .space-faq__toggle::before,
.s-page--space .space-faq__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.s-page--space .space-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.s-page--space .space-faq__item.is-open .space-faq__toggle {
  transform: rotate(45deg);
}

.s-page--space .space-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .28s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
}

.s-page--space .space-faq__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.s-page--space .space-faq__answer-text {
  margin: 0;
  padding-bottom: var(--space-gap-standard);
  text-align: start;
}

.s-page--space .space-faq__item.is-open .space-faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.s-page--space .space-application {
  --s-composer-surface: rgba(255, 255, 255, .16);
  --s-composer-stroke: var(--s-glass-stroke);
  --s-composer-shadow: 0 2px 7px rgba(0, 0, 0, .045), 0 1px 1px rgba(0, 0, 0, .025);
  --s-composer-backdrop: blur(20px) saturate(125%);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: var(--space-gap-major) auto 0;
  text-align: center;
}

@media (orientation: portrait) {
  .s-page--space .space-application {
    margin-top: calc(var(--space-gap-major) + var(--space-gap-major));
  }
}

html.s-route.is-day-mode .s-page--space .space-application {
  --s-composer-surface: rgba(255, 255, 255, .42);
  --s-composer-shadow: 0 2px 6px rgba(0, 0, 0, .022), 0 1px 1px rgba(0, 0, 0, .012);
}

.s-page--space .space-application__heading {
  margin: 0;
}

.s-page--space .space-application__copy {
  display: grid;
  gap: var(--space-gap-standard);
  margin-top: 0;
}

.s-page--space .space-application__group {
  margin: 0;
}

.s-page--space .space-application__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-gap-standard);
  width: min(340px, calc(100vw - (var(--s-x) * 2)));
  max-width: min(340px, calc(100vw - (var(--s-x) * 2)));
  margin-top: var(--space-gap-standard);
  margin-inline: auto;
}

.s-page--space .space-application__button {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-width: 0;
  margin: 0;
  align-items: center;
  block-size: var(--s-x-closed-notice-height);
  min-block-size: var(--s-x-closed-notice-height);
  padding: 0;
  font: 500 12px/1 OOXMEScript, Arial, sans-serif;
  border-color: var(--s-composer-stroke);
  border-radius: var(--s-composer-radius);
  background: var(--s-composer-surface);
  box-shadow: var(--s-composer-shadow);
  text-decoration: none;
  -webkit-backdrop-filter: var(--s-composer-backdrop);
  backdrop-filter: var(--s-composer-backdrop);
}

.s-page--space .space-application__button:any-link,
.s-page--space .space-application__button:any-link:hover,
.s-page--space .space-application__button:any-link:focus-visible,
.s-page--space .space-application__button:any-link:active {
  text-decoration: none;
}

.s-page--space .space-application__button:hover,
.s-page--space .space-application__button:focus-visible {
  border-color: var(--s-composer-stroke);
  background: var(--s-composer-surface);
}

.s-page--space .space-application__button--join {
  border-color: var(--s-composer-stroke);
  background: #0A84FF;
  color: #FFFFFF;
}

.s-page--space .space-application__button--join:hover,
.s-page--space .space-application__button--join:focus-visible {
  border-color: var(--s-composer-stroke);
  background: #0A84FF;
}

html.s-route.is-day-mode .s-page--space .space-application__button--join,
html.s-route.is-day-mode .s-page--space .space-application__button--join:is(:any-link, :hover, :focus-visible, :active) {
  background: #0A84FF;
  color: #FFFFFF;
}

html[dir="rtl"] .s-page--space .space-application__button [lang="en"],
html[dir="ltr"] .s-page--space .space-application__button [lang="ar"] {
  display: none;
}

.s-page--space :is(
  .space-rewards-stage.is-pulsing,
  .space-application__surface.is-pulsing,
  .space-application__button.is-pulsing,
  .space-details__mark.is-pulsing
) {
  transform-box: border-box;
  transform-origin: 50% 50%;
  animation: s-page-composer-pulse .18s ease-out;
}

.s-page--space .space-application__button:active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .s-page--space :is(
    .space-rewards-stage.is-pulsing,
    .space-application__surface.is-pulsing,
    .space-application__button.is-pulsing,
    .space-details__mark.is-pulsing
  ) {
    animation: none;
  }

  .s-page--space :is(.space-faq__answer, .space-faq__toggle) {
    transition: none;
  }
}