/* FEATURES — 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-features-text-01 {
  --fx-text-alignment:  right;
  --fx-text-color:  var(
                              --token-b923e1cb-cf6e-406c-a3d3-6c79738c4b54,
                              rgb(77, 88, 95)
                            );
}

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

:is(#smart-static-priority,:root) .sg-features-layout-01 {
  height: auto;
  aspect-ratio: 0.7661538461538462;
}

:is(#smart-static-priority,:root) .sg-features-layout-02 {
  display: flex;
  position: relative;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  transform: translateX(-20px);
}

:is(#smart-static-priority,:root) .sg-features-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-b923e1cb-cf6e-406c-a3d3-6c79738c4b54,
                                      rgb(77, 88, 95)
                                    );
  transform: none;
}

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

:is(#smart-static-priority,:root) .sg-features-layout-04 {
  height: auto;
  aspect-ratio: 1.2317073170731707;
}

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

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

:is(#smart-static-priority,:root) .sg-features-layout-06 {
  will-change: transform;
  height: auto;
  aspect-ratio: 1.0723404255319149;
  opacity: 1;
  transform: translateX(20px) translateY(40px) rotate(-5deg);
}

:is(#smart-static-priority,:root) .sg-features-layout-07 {
  will-change: transform;
  height: auto;
  aspect-ratio: 1.0857142857142856;
  opacity: 1;
  transform: translateX(-20px) translateY(40px) rotate(12deg);
}

:is(#smart-static-priority,:root) .sg-features-layout-08 {
  --fx-text-alignment:  center;
  --fx-text-color:  var(
                              --token-260f9222-11bc-40e3-a74c-4f1dae7b4ffa,
                              rgb(255, 255, 255)
                            );
}

:is(#smart-static-priority,:root) .sg-features-layout-09 {
  height: 100%;
  width: 100%;
}

:is(#smart-static-priority,:root) .sg-features-layout-10 {
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
}

:is(#smart-static-priority,:root) .sg-features-text-05 {
  background-image: linear-gradient(0deg,var(--token-5a4e4777-8abf-440c-b816-af317d987f6d,
                                            rgb(242, 135, 120)
                                          ) 0%,var(--token-014f2a3f-947b-4963-813b-cb48c53d14f1,
                                            rgb(245, 28, 35)
                                          ) 100%);
}

:is(#smart-static-priority,:root) .sg-features-layout-11 {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

:is(#smart-static-priority,:root) .sg-features-surface-01 {
  background: linear-gradient(180deg,var(--token-1b8f888c-e7bb-4096-83cf-bc6a0a87c24d,
                                          rgba(255, 255, 255, 0)
                                        ) 0%,var(--token-1da6f336-7e27-4609-af93-da7817fb442b,
                                          rgba(0, 0, 0, 0.3)
                                        ) 40%,var(--token-f02a5c8a-b667-414e-a18b-3b00bb922668,
                                          rgba(0, 0, 0, 0.8)
                                        ) 68%,var(--token-a4ae1e21-2b71-445e-8792-31bd9220629a,
                                          rgb(0, 0, 0)
                                        ) 100%);
}

:is(#smart-static-priority,:root) .sg-features-layout-12 {
  --fx-link-text-color:  rgb(0, 153, 255);
  --fx-link-text-decoration:  underline;
  opacity: 0.2;
  transform: rotateX(-180deg);
}

:is(#smart-static-priority,:root) .sg-features-text-06 {
  background-image: linear-gradient(0deg,var(--token-5a4e4777-8abf-440c-b816-af317d987f6d,
                                              rgb(242, 135, 120)
                                            ) 0%,var(--token-014f2a3f-947b-4963-813b-cb48c53d14f1,
                                              rgb(245, 28, 35)
                                            ) 100%);
}

:is(#smart-static-priority,:root) .sg-features-text-07 {
  --fx-text-alignment:  center;
  --fx-text-color:  var(
                              --token-51f94b53-bb42-43ec-9cc4-5f5eec0c08b0,
                              rgb(186, 186, 186)
                            );
}

:is(#smart-static-priority,:root) .sg-features-border-01 {
  --border-bottom-width:  1px;
  --border-color:  var(
                                    --token-3992e4b1-4934-4fc5-9122-067e1dd544fa,
                                    rgb(221, 229, 237)
                                  );
  --border-left-width:  1px;
  --border-right-width:  1px;
  --border-style:  solid;
  --border-top-width:  1px;
  height: auto;
  aspect-ratio: 4;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

:is(#smart-static-priority,:root) .sg-features-border-02 {
  --border-bottom-width:  1px;
  --border-color:  var(
                                    --token-3992e4b1-4934-4fc5-9122-067e1dd544fa,
                                    rgb(221, 229, 237)
                                  );
  --border-left-width:  1px;
  --border-right-width:  1px;
  --border-style:  solid;
  --border-top-width:  1px;
  height: auto;
  aspect-ratio: 4;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: translateX(-50%);
}

:is(#smart-static-priority,:root) .sg-features-layout-13 {
  height: auto;
  aspect-ratio: 1.1824324324324325;
}