/* HERO — static component styles.
 * Search the sg- class in HTML to find the element. Reused classes share a rule.
 * The :is() scope preserves former inline priority over template selectors.
 * No element with id smart-static-priority is required. Keep this scope.
 * JavaScript can override normal properties inline during interactions.
 */

:is(#smart-static-priority,:root) .sg-hero-surface-01 {
  cursor: auto;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  display: block;
  object-fit: cover;
  background-color: var(--token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                          rgb(29, 29, 29)
                        );
  object-position: 50% 50%;
}

:is(#smart-static-priority,:root) .sg-hero-surface-02 {
  cursor: auto;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  background-color: var(--token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                          rgb(29, 29, 29)
                        );
  object-position: 50% 50%;
}

:is(#smart-static-priority,:root) .sg-hero-layout-01 {
  width: auto;
  aspect-ratio: 1.7198838896952104;
}

:is(#smart-static-priority,:root) .sg-hero-layout-02 {
  width: auto;
  aspect-ratio: 1.669467787114846;
}

:is(#smart-static-priority,:root) .sg-hero-surface-03 {
  background-color: var(--token-8a16c1e0-9178-435f-8361-d83efd74d213,
                          rgb(237, 241, 244)
                        );
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

:is(#smart-static-priority,:root) .sg-hero-layout-03 {
  --extracted-r6o4lv:  var(--variable-reference-rhGiDGRBu-J6sr42DwA);
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  --variable-reference-rhGiDGRBu-J6sr42DwA:  var(
                            --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                            rgb(29, 29, 29)
                          );
  transform: none;
}

:is(#smart-static-priority,:root) .sg-hero-text-01 {
  --fx-text-color:  var(
                              --extracted-r6o4lv,
                              var(--variable-reference-rhGiDGRBu-J6sr42DwA)
                            );
}

:is(#smart-static-priority,:root) .sg-hero-text-02 {
  --fx-text-alignment:  center;
  --fx-text-color:  var(
                        --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                        rgb(29, 29, 29)
                      );
}

:is(#smart-static-priority,:root) .sg-hero-text-03 {
  --fx-text-alignment:  center;
  --fx-text-color:  var(
                        --token-b923e1cb-cf6e-406c-a3d3-6c79738c4b54,
                        rgb(77, 88, 95)
                      );
}

:is(#smart-static-priority,:root) .sg-hero-control-01 {
  backdrop-filter: blur(5px);
  background-color: var(--token-1da6f336-7e27-4609-af93-da7817fb442b,
                            rgba(0, 0, 0, 0.3)
                          );
  -webkit-backdrop-filter: blur(5px);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

:is(#smart-static-priority,:root) .sg-hero-layout-04 {
  position: absolute;
  transform: scale(0);
}

:is(#smart-static-priority,:root) .sg-hero-layout-05 {
  height: auto;
  aspect-ratio: 1.6096579476861168;
}

:is(#smart-static-priority,:root) .sg-hero-layout-06 {
  width: auto;
  aspect-ratio: 2.164233576642336;
  transform: translateX(-50%);
}

:is(#smart-static-priority,:root) .sg-hero-control-02 {
  background-color: var(--token-260f9222-11bc-40e3-a74c-4f1dae7b4ffa,
                              rgb(255, 255, 255)
                            );
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

:is(#smart-static-priority,:root) .sg-hero-layout-07 {
  --extracted-r6o4lv:  var(--variable-reference-uoP_rcx83-o0wOfTO7b);
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  --variable-reference-uoP_rcx83-o0wOfTO7b:  var(
                                --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                                rgb(29, 29, 29)
                              );
  transform: none;
}

:is(#smart-static-priority,:root) .sg-hero-layout-08 {
  width: auto;
  aspect-ratio: 0.9444444444444444;
}

:is(#smart-static-priority,:root) .sg-hero-layout-09 {
  width: auto;
  aspect-ratio: 0.65;
}

:is(#smart-static-priority,:root) .sg-hero-layout-10 {
  will-change: transform;
  height: auto;
  aspect-ratio: 1.725997842502697;
  opacity: 1;
  transform: translateY(-190px) scale(0.64);
}

:is(#smart-static-priority,:root) .sg-hero-layout-11 {
  height: auto;
  aspect-ratio: 1.725997842502697;
  opacity: 1;
  transform: none;
}

:is(#smart-static-priority,:root) .sg-hero-layout-12 {
  will-change: transform;
  height: auto;
  aspect-ratio: 2.555410691003911;
  opacity: 1;
  transform: none;
}

:is(#smart-static-priority,:root) .sg-hero-layout-13 {
  --extracted-r6o4lv:  var(--variable-reference-rhGiDGRBu-J6sr42DwA);
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  --variable-reference-rhGiDGRBu-J6sr42DwA:  var(
                              --token-0edc2e6a-5fd1-47c5-a905-c3de9f07cea3,
                              rgb(29, 29, 29)
                            );
  transform: none;
}

:is(#smart-static-priority,:root) .sg-hero-control-03 {
  backdrop-filter: blur(5px);
  background-color: var(--token-1da6f336-7e27-4609-af93-da7817fb442b,
                              rgba(0, 0, 0, 0.3)
                            );
  -webkit-backdrop-filter: blur(5px);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

:is(#smart-static-priority,:root) .sg-hero-control-04 {
  backdrop-filter: blur(5px);
  background-color: var(--token-1da6f336-7e27-4609-af93-da7817fb442b,
                              rgba(0, 0, 0, 0.3)
                            );
  -webkit-backdrop-filter: blur(5px);
  width: 100%;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}