/* NOTE Designframe 0.99.30 Release														*/

/* -------------------------------------------------------------------------------------------- */

/* NOTE Getting Started 																		*/

/* -------------------------------------------------------------------------------------------- */

/* Designframe can be configured using the calculator then implementing output values in the	*/

/* "SECTION CONFIG" sections below.																*/

/* 	* You can edit your Theme, change specific values, and add custom classes in this file.		*/

/* 	* Keeping the default Designframe Preferred Values is strongly recommended.					*/

/* 	* Icon Fonts (e.g. Font Awesome) are implemented independently of Designframe. 				*/

/* 	* Official Tailwind Forms Plug-In REQUIRED 													*/

/* -------------------------------------------------------------------------------------------- */

/* VS CODE USERS: Table of Contents and Sections Anchors are implemented using					*/

/* https://marketplace.visualstudio.com/items?itemName=ExodiusStudios.comment-anchors 			*/

/* with LAYER as a custom anchor tag.															*/

/* -------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* PROJECT CUSTOMIZATION GUIDELINES																													*/

/* Any customizations specific to your project should use a unique prefix to avoid conflicts with future Designframe updates. 						*/

/* For example, if your project is called "Example", you could use the prefix "ex-" for all customizations.											*/

/* e.g. ".ex-" for classes, "#ex-" for IDs, and "--ex-" for variables.																				*/

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* All custom CSS variables should be placed in the CONFIG Custom Variables section at the top part of this file.									*/

/* All custom CSS classes and IDs should be placed in the CONFIG Custom CSS Classes section at the bottom of this file.								*/

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* CUSTOMIZATION NOTES 																																*/

/* This file can be customized for your project with custom utilities. 																				*/

/* If you do so, use a prefix for any custom utilities you create, such as "xx".																	*/

/* e.g. ".xx-" for classes, "#xx-" for IDs, and "--xx-" for variables.																				*/

/* This file also contains additional custom utilities, indicated by the prefix "cx-".																*/

/* Do not use "qs" or "cx" prefixes to avoid conflicts with future Designframe updates.																*/

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */

/* -------------------------------------------------------------------------------------------- */

/* SECTION Required Tailwind Directives - DO NOT EDIT 											*/

/* -------------------------------------------------------------------------------------------- */

/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com														*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

/* Do not edit 	*/

/* ---------------------------- */

/* SECTION - FONT IMPORT START  */

/* ---------------------------- */

/* ANCHOR Font Setup 			*/

/* ---------------------------- */

/* Add and name your fonts.		*/

/* Preferred approach is to set a specific font for each weight and style combination for Display, Heading, and Body typography. */

/* TODO Test/Check Font rendering for italic and weights to verify loading different font, NOT system pseudo-variant. */

/* CXJS Theme Base Variables - Fonts */

@font-face {
  font-family: 'displayFontFamily';

  /* CXJS Do not change this variable. Always keep "displayFontFamily" */

  /* Add your Display and/or Heading Font - Use additional font-face entries with the same font-family name but different weights and/or styles to preserve tailwind text utilities */

  src: url('../src/assets/fonts/DIN2014-Bold.woff') format('woff');

  /* CXJS Use {font_display_src} and {font_display_format} to load from Google Font per User-Specified Single Font with User-Specified Single Weight as URL parameter, independent of the font-weight and font-style below. */

  font-weight: 400;

  /* CXJS Do not change this variable. Always keep "400" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */

  font-style: normal;

  /* CXJS Do not change this variable. Always keep "normal" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */
}

@font-face {
  font-family: 'headingFontFamily';

  /* CXJS Do not change this variable. Always keep "headingFontFamily" */

  /* Add your Display and/or Heading Font - Use additional font-face entries with the same font-family name but different weights and/or styles to preserve tailwind text utilities */

  src: url('../src/assets/fonts/DIN2014-Bold.woff') format('woff');

  /* CXJS Use {font_heading_src} and {font_heading_format} to load from Google Font per User-Specified Single Font with User-Specified Single Weight as URL parameter, independent of the font-weight and font-style below. */

  font-weight: 400;

  /* CXJS Do not change this variable. Always keep "400" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */

  font-style: normal;

  /* CXJS Do not change this variable. Always keep "normal" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */
}

@font-face {
  font-family: 'bodyFontFamily';

  /* CXJS Do not change this variable. Always keep "bodyFontFamily" */

  /* Add your Body Font - Use additional font-face entries with the same font-family name but different weights and/or styles to preserve tailwind text utilities */

  src: url('../src/assets/fonts/NotoSans-Regular.ttf') format('truetype');

  /* CXJS Use {font_body_src} and {font_body_format} to load from Google Font per User-Specified Single Font with User-Specified Single Weight as URL parameter, independent of the font-weight and font-style below. */

  font-weight: 400;

  /* CXJS Do not change this variable. Always keep "400" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */

  font-style: normal;

  /* CXJS Do not change this variable. Always keep "normal" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */
}

/* Commonspace - Defines specific font to use for notoSans without any weight/style classes. Body uses a single font family but with specific different styled fonts within the family for different weights and styles */

@font-face {
  font-family: 'bodyFontFamily';

  /* CXJS Do not change this variable. Always keep "bodyFontFamily" */

  /* Add your Body Font - Use additional font-face entries with the same font-family name definition but different weights and/or styles to preserve tailwind text utilities */

  src: url('../src/assets/fonts/NotoSans-Italic.ttf') format('truetype');

  /* CXJS Use {font_body_italic_src} and {font_body_italic_format} to load from Google Font per User-Specified Single Font with User-Specified Single Weight as URL parameter, independent of the font-weight and font-style below. */

  font-weight: normal;

  /* CXJS Do not change this variable. Always keep "normal" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */

  font-style: italic;

  /* CXJS Do not change this variable. Always keep "italic" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */
}

/* Commonspace - Defines specific font to use for notoSans with the italic class applied. Body uses a single font family but with specific different styled fonts within the family for different weights and styles */

@font-face {
  font-family: 'bodyFontFamily';

  /* CXJS Do not change this variable. Always keep "bodyFontFamily" */

  /* Add your Body Font - Use additional font-face entries with the same font-family name definition but different weights and/or styles to preserve tailwind text utilities */

  src: url('../src/assets/fonts/NotoSans-SemiBold.ttf') format('truetype');

  /* CXJS Use {font_body_bold_src} and {font_body_bold_format} to load from Google Font per User-Specified Single Font with User-Specified Single Weight as URL parameter, independent of the font-weight and font-style below. */

  font-weight: 700;

  /* CXJS Do not change this variable. Always keep "700" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */

  font-style: normal;

  /* CXJS Do not change this variable. Always keep "normal" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */
}

/* Commonspace - Defines specific font to use for notoSans with the bold class applied. Body uses a single font family but with specific different styled fonts within the family for different weights and styles */

@font-face {
  font-family: 'bodyFontFamily';

  /* CXJS Do not change this variable. Always keep "bodyFontFamily" */

  /* Add your Body Font - Use additional font-face entries with the same font-family name definition but different weights and/or styles to preserve tailwind text utilities */

  src: url('../src/assets/fonts/NotoSans-SemiBoldItalic.ttf') format('truetype');

  /* CXJS Use {font_body_bold_italic_src} and {font_body_bold_italic_format} to load from Google Font per User-Specified Single Font with User-Specified Single Weight as URL parameter, independent of the font-weight and font-style below. */

  font-weight: 700;

  /* CXJS Do not change this variable. Always keep "700" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */

  font-style: italic;

  /* CXJS Do not change this variable. Always keep "italic" */

  /* This should be set to match the intended behavior to the corresponding tailwind class equivalent to preserve utility function */
}

/* !SECTION - FONT IMPORT END   */

/* -------------------------------- */

/* Do not edit 	*/

/* ---------------------------- */

/* ---------------------------- */

/* ANCHOR  Backgrounds			*/

/* ---------------------------- */

/* Sets the default colors for base sections. */

body, header, main, footer, .card, .card-base {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

/* ---------------------------- */

/* ANCHOR  Typography			*/

/* ---------------------------- */

/* Applies the default styles for basic type elements. */

body {
  font-family: var(--font-body), var(--font-body-alt1), var(--font-body-alt2);
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card, .card-base {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading), var(--font-heading-alt1), var(--font-heading-alt2);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
}

h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
}

h5 {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
}

h6 {
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
}

nav a {
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-lh);
}

a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

button i {
  font-size: var(--text-nav-size);
  line-height: var(--element-base-size);
}

input label {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

::-moz-placeholder {
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

::placeholder {
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

ul {
  list-style-position: outside;
  list-style-type: disc;
}

ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--layout-unit) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--layout-unit) * var(--tw-space-y-reverse));
}

ul {
  padding-left: var(--offset-li-base);
}

ol {
  list-style-position: outside;
  list-style-type: decimal;
}

ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--layout-unit) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--layout-unit) * var(--tw-space-y-reverse));
}

ol {
  padding-left: var(--offset-li-base);
}

p.title {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  font-weight: 700;
}

i {
  line-height: inherit;
}

/* ---------------------------- */

/* ANCHOR  Nav Links			*/

/* ---------------------------- */

/* Sets the default colors for header nav elements. */

nav a, nav a:link, nav a:visited, nav a:focus {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

nav a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

nav a:active {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

nav a.active, nav a.active p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

/* ---------------------------- */

/* ANCHOR  Mobile Menu			*/

/* ---------------------------- */

/* Sets the default colors and structure for mobile menu elements. */

#header-nav-menu {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

& #header-nav-menu {
  nav a {
    width: 100%;
  }
  nav a {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  }
  nav a {
    padding-left: 0px;
    padding-right: 0px;
  }
  nav a {
    text-align: center;
  }
  nav a.nav-gradient {
    /* Do not edit */
  }
  nav a.nav-gradient {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  nav a.nav-gradient {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav a.nav-gradient {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  nav a p {
    padding-left: var(--pad-element-base);
    padding-right: var(--pad-element-base);
  }
  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    nav a p {
      padding-left: var(--pad-element-sm);
      padding-right: var(--pad-element-sm);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    nav a p {
      padding-left: var(--pad-element-md);
      padding-right: var(--pad-element-md);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    nav a p {
      padding-left: var(--pad-element-lg);
      padding-right: var(--pad-element-lg);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    nav a p {
      padding-left: var(--pad-element-xl);
      padding-right: var(--pad-element-xl);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    nav a p {
      padding-left: var(--pad-element-2xl);
      padding-right: var(--pad-element-2xl);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
  nav a p {
    width: 100%;
  }
  nav a p {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
  nav a p {
    font-size: var(--text-nav-size);
    line-height: var(--text-nav-lh);
  }
  nav a p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav a:hover p {
    --tw-bg-opacity: 0;
  }
  nav a:hover p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

/* ---------------------------- */

/* ANCHOR  Links & Interactions	*/

/* ---------------------------- */

/* Sets the default colors and behavior for basic interactions. */

button {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

a {
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key-end) / var(--tw-text-opacity));
}

:focus-visible {
  outline-color: rgb(var(--color-key));
}

/* ---------------------------- */

/* ANCHOR  Other Elements		*/

/* ---------------------------- */

/* Sets the default colors and behavior for other HTML elements. */

hr {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  grid-column: 1 / -1;
  margin-top: var(--pad-article-base);
  margin-bottom: var(--pad-article-base);
  height: 1px;
  width: 100%;
  border-width: 0px;
  /* CXNOTE DF specific gradient vs key-color */
}

/* -------------------------------- */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* Injects Tailwind base styles and any other plugin base styles.								*/

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 960px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::placeholder,.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-input::-webkit-datetime-edit {
  display: inline-flex;
}

.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

/* Do not edit	*/

/* -------------------------------- */

/* ANCHOR Layout Utilities */

/* HEADER & FOOTER NAVIGATION - Edit the CSS below to set default positioning. */

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-flex > nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.header-grid {
  display: grid;
}

.header-grid > nav {
  grid-column: 1 / -1;
}

.footer-base {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.footer-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-flex > nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.footer-grid {
  display: grid;
}

.footer-grid > nav {
  grid-column: 1 / -1;
}

.section-flex, .flex-base {
  display: flex;
  flex-wrap: wrap;
}

.section-grid, .grid-base {
  display: grid;
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .centerframe-flex {
    max-width: 640px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .centerframe-flex {
    max-width: 768px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .centerframe-flex {
    max-width: 960px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .centerframe-flex {
    max-width: 1440px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .centerframe-flex {
    max-width: 1600px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.centerframe-flex {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .centerframe-grid {
    max-width: 640px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .centerframe-grid {
    max-width: 768px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .centerframe-grid {
    max-width: 960px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .centerframe-grid {
    max-width: 1440px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .centerframe-grid {
    max-width: 1600px;
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.centerframe-grid {
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

/* .centered — vertically centers content, scrolls if it overflows */

.centerframe-grid.centered, .centerframe-flex.centered {
  min-height: 100%;
  place-content: center;
}

.main-flex {
  display: flex;
}

.main-grid {
  display: grid;
}

/* ---------------------------- */

/* ANCHOR Layout Shell          */

/* ---------------------------- */

/* Body-level Structure class for viewport-locked app shell layouts.
	   Sets up flex-col flow where header/footer shrink and main fills remaining space.
	   Aside and content children get independent scroll contexts.
	   Width on aside comes from block-* classes. Visual styling from aside.sidebar or inline. */

body.layout-split {
  display: flex;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
}

body.layout-split > header, body.layout-split header.layout-split-header {
  flex-shrink: 0;
}

body.layout-split > main, body.layout-split main.layout-split-main {
  min-height: 0px;
  flex: 1 1 0%;
  gap: 0px;
}

body.layout-split > main > aside, body.layout-split  main.layout-split-main aside.layout-split-aside {
  overflow-y: auto;
}

body.layout-split > main > aside ~ *, body.layout-split main.layout-split-main aside.layout-split-aside ~ * {
  flex: 1 1 0%;
  overflow-y: auto;
}

body.layout-split > main > aside.sidebar, body.layout-split main.layout-split-main aside.layout-split-aside.sidebar {
  flex-shrink: 0;
  flex-grow: 0;
}

body.layout-split > footer, body.layout-split footer.layout-split-footer {
  flex-shrink: 0;
}

/* ---------------------------- */

/* ANCHOR Scroll Bottom         */

/* ---------------------------- */

/* Bottom-anchored scroll container. Content starts at the bottom and
	   scrolls upward. Used for chat panes, activity feeds, notification panels.
	   Uses flex-col-reverse to flip the scroll anchor. Wrap children in a
	   single <div> to prevent DOM reordering of direct children.
	   Browser note: Firefox may require the inner wrapper div for correct
	   scroll anchoring behavior. */

.scroll-bottom {
  display: flex;
  min-height: 0px;
  flex-direction: column-reverse;
  overflow-y: auto;
}

.stack-col-base {
  display: flex;
  flex-direction: column;
}

.stack-col-min {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sub-base);
}

.stack-row-base {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.stack-row-min {
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

.datarow, .formrow {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.controlrow {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* .toggle-set — pill-shaped container for toggle buttons */

.toggle-set {
  display: flex;
  align-items: center;
  -moz-column-gap: var(--layout-unit);
       column-gap: var(--layout-unit);
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  padding: calc(var(--layout-unit) / 2);
}

.toggle-set > * {
  flex: 1 1 0%;
}

/* Default: inactive = transparent + invert text, active = bg-background + key text */

.toggle-set .button,
	.toggle-set .button:hover {
  background-color: transparent;
  background-clip: border-box;
  --tw-ring-color: transparent;
}

.toggle-set .button p, .toggle-set .button i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.toggle-set .button:hover p, .toggle-set .button:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  opacity: 0.75;
}

.toggle-set .button.active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  background-image: none;
  background-clip: border-box;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.toggle-set .button.active p, .toggle-set .button.active i,
	.toggle-set .button.active:hover p, .toggle-set .button.active:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  opacity: 1;
}

/* .air — light gradient wrapper, all text uses key color */

.toggle-set.air {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-background-start) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-background-start) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-background-end) / 1) var(--tw-gradient-to-position);
  background: linear-gradient(to var(--color-background-direction), rgba(var(--color-background-start-rgb), 1), rgba(var(--color-background-end-rgb), 1)) ;
}

.toggle-set.air .button p, .toggle-set.air .button i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.toggle-set.air .button:hover p, .toggle-set.air .button:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0.75;
}

.toggle-set.air .button.active p, .toggle-set.air .button.active i,
	.toggle-set.air .button.active:hover p, .toggle-set.air .button.active:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 1;
}

.datarow > *, .formrow > * {
  width: 100%;
}

.datarow.title, .formrow.title {
  align-items: baseline;
}

.data-item {
  display: flex;
  width: 100%;
  align-items: center;
}

.data-item.row {
  flex-direction: row;
}

.data-item.col {
  flex-direction: column;
}

.stack-title-row {
  display: flex;
  flex-direction: row;
  gap: var(--gap-element-base);
}

.stack-title-row > p:first-child {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  font-family: var(--font-body), var(--font-body-alt1), var(--font-body-alt2);
}

.stack-title-row > p:last-child {
  font-style: italic;
}

.stack-row.split, .stack-row-wrap.split, .stack-row-base.split {
  justify-content: space-between;
}

.stack-button-info .stack-title-row {
  justify-content: center;
}

.button-dropdown-gradient-alt.secondary.stack-row.split > div:first-child span > i:first-child,.button-dropdown-gradient-alt.secondary .stack-row-wrap.split > div:first-child span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.stack-row.split > div:first-child > span > p,.button-dropdown-gradient-alt.secondary .stack-row-wrap.split > div:first-child > span > p {
  text-align: left;
  width: 100%;
}

.stack-row.split > div:first-child, .stack-row-wrap.split > div:first-child {
  text-align: left;
}

.stack-row.split > div:last-child, .stack-row-wrap.split > div:last-child {
  text-align: right;
}

.stack-avatar.min,
	.stack-avatar-min {
  isolation: isolate;
  display: flex;
}

.stack-avatar.min > :not([hidden]) ~ :not([hidden]),
	.stack-avatar-min > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-min) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-min) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

.stack-avatar {
  isolation: isolate;
  display: flex;
}

.stack-avatar > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-base) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-base) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

.stack-avatar.sm,
	.stack-avatar-sm {
  isolation: isolate;
  display: flex;
}

.stack-avatar.sm > :not([hidden]) ~ :not([hidden]),
	.stack-avatar-sm > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-sm) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-sm) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

.stack-avatar.md,
	.stack-avatar-md {
  isolation: isolate;
  display: flex;
}

.stack-avatar.md > :not([hidden]) ~ :not([hidden]),
	.stack-avatar-md > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-md) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-md) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

.stack-avatar.lg,
	.stack-avatar-lg {
  isolation: isolate;
  display: flex;
}

.stack-avatar.lg > :not([hidden]) ~ :not([hidden]),
	.stack-avatar-lg > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-lg) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-lg) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

.stack-avatar.xl,
	.stack-avatar-xl {
  isolation: isolate;
  display: flex;
}

.stack-avatar.xl > :not([hidden]) ~ :not([hidden]),
	.stack-avatar-xl > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-xl) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-xl) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

.stack-buttons {
  display: flex;
  width: 100%;
  row-gap: var(--gap-element-base);
}

.stack-buttons .button {
  width: 100%;
}

.stack-buttons.col {
  flex-direction: column;
}

.stack-buttons.row {
  flex-direction: row;
}

.stack-buttons.wrap {
  flex-wrap: wrap;
}

.z-to-t :nth-child(1) {
  z-index: 10;
}

.z-to-t :nth-child(2) {
  z-index: 20;
}

.z-to-t :nth-child(3) {
  z-index: 30;
}

.z-to-t :nth-child(4) {
  z-index: 40;
}

.z-to-t :nth-child(5) {
  z-index: 50;
}

.z-to-t :nth-child(6) {
  z-index: 60;
}

.z-to-t :nth-child(7) {
  z-index: 70;
}

.z-to-t :nth-child(8) {
  z-index: 80;
}

.z-to-t :nth-child(9) {
  z-index: 90;
}

.z-to-t :nth-child(10) {
  z-index: 100;
}

.z-to-t :nth-child(11) {
  z-index: 110;
}

.z-to-t :nth-child(12) {
  z-index: 120;
}

.z-to-t :nth-child(13) {
  z-index: 130;
}

.z-to-t :nth-child(14) {
  z-index: 140;
}

.z-to-t :nth-child(15) {
  z-index: 150;
}

.z-to-t :nth-child(16) {
  z-index: 160;
}

.z-to-t :nth-child(17) {
  z-index: 170;
}

.z-to-t :nth-child(18) {
  z-index: 180;
}

.z-to-t :nth-child(19) {
  z-index: 190;
}

.z-to-t :nth-child(20) {
  z-index: 200;
}

.z-to-t :nth-child(21) {
  z-index: 210;
}

.z-to-t :nth-child(22) {
  z-index: 220;
}

.z-to-t :nth-child(23) {
  z-index: 230;
}

.z-to-t :nth-child(24) {
  z-index: 240;
}

.z-to-b :nth-child(1) {
  z-index: 240;
}

.z-to-b :nth-child(2) {
  z-index: 230;
}

.z-to-b :nth-child(3) {
  z-index: 220;
}

.z-to-b :nth-child(4) {
  z-index: 210;
}

.z-to-b :nth-child(5) {
  z-index: 200;
}

.z-to-b :nth-child(6) {
  z-index: 190;
}

.z-to-b :nth-child(7) {
  z-index: 180;
}

.z-to-b :nth-child(8) {
  z-index: 170;
}

.z-to-b :nth-child(9) {
  z-index: 160;
}

.z-to-b :nth-child(10) {
  z-index: 150;
}

.z-to-b :nth-child(11) {
  z-index: 140;
}

.z-to-b :nth-child(12) {
  z-index: 130;
}

.z-to-b :nth-child(13) {
  z-index: 120;
}

.z-to-b :nth-child(14) {
  z-index: 110;
}

.z-to-b :nth-child(15) {
  z-index: 100;
}

.z-to-b :nth-child(16) {
  z-index: 90;
}

.z-to-b :nth-child(17) {
  z-index: 80;
}

.z-to-b :nth-child(18) {
  z-index: 70;
}

.z-to-b :nth-child(19) {
  z-index: 60;
}

.z-to-b :nth-child(20) {
  z-index: 50;
}

.z-to-b :nth-child(21) {
  z-index: 40;
}

.z-to-b :nth-child(22) {
  z-index: 30;
}

.z-to-b :nth-child(23) {
  z-index: 20;
}

.z-to-b :nth-child(24) {
  z-index: 10;
}

/* -------------------------------- */

/* Do not edit	*/

/* ---------------------------------*/

/* ---------------------------- */

/* ANCHOR  Color Utilities		*/

/* ---------------------------- */

.transparent {
  border-color: transparent !important;
  background-color: transparent !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
  --tw-ring-color: transparent !important;
}

.disabled {
  cursor: default !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

a.disabled {
  --tw-border-opacity: 1 !important;
  border-color: rgb(var(--color-disabled) / var(--tw-border-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-disabled) / var(--tw-text-opacity)) !important;
  opacity: 1;
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(var(--color-disabled) / var(--tw-ring-opacity)) !important;
}

a.disabled:hover {
  background-color: transparent !important;
}

.disabled p, .disabled h2, .disabled h3, .disabled h4, .disabled h5, .disabled h6, .disabled i {
  background-image: none !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-disabled) / var(--tw-text-opacity)) !important;
}

.disabled .button, .disabled .button::before, .disabled .button:hover::before {
  cursor: default !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--color-disabled) / var(--tw-bg-opacity)) !important;
  background-image: none !important;
}

.button.disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--color-disabled) / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-invert) / var(--tw-text-opacity)) !important;
}

.button.disabled p {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-invert) / var(--tw-text-opacity)) !important;
}

.button.secondary.disabled .button.secondary.disabled:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--color-disabled) / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-invert) / var(--tw-text-opacity)) !important;
}

.button.secondary.disabled::before {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--color-disabled) / var(--tw-bg-opacity)) !important;
  background-image: none !important;
}

.button.secondary.disabled:hover span {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity)) !important;
}

.button.secondary.disabled p {
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity)) !important;
}

.ghost {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-disabled) / var(--tw-bg-opacity));
  background-image: none;
  opacity: 0.5;
  --tw-blur: blur(calc(var(--layout-unit) / 2));
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* -------------------------------- */

/* ANCHOR  Font Awesome Specific	*/

/* -------------------------------- */

i.fa-circle-xmark {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

/* ---------------------------- */

/* ANCHOR  Gradient Utilities	*/

/* ---------------------------- */

/* Edit the XX in bg-gradient-to-XX to change the linear-gradient direction using top, bottom, left, and right combinations. For example, bg-gradient-to-r sets the direction to the right, and bg-gradient-to-tr sets the direction to the top right. You can always use the Tailwind bg-gradient-* utility normally with your gradient-key-start and gradient-key-end and alt colors. */

.gradient-key {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

/* Do not edit */

.gradient-key-opacity-invert {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
}

/* Do not edit */

/* Do not edit */

.gradient-key-transparent {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), 0), rgba(var(--color-key-end-rgb), 0)) ;
  /* Gradient background Opacity Variant */
}

/* Do not edit */

.gradient-key-invert {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
}

/* Do not edit */

.gradient-text-key {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Do not edit */

.gradient-text-key-invert {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Do not edit */

.gradient-key-alt {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
}

/* Do not edit */

/* Do not edit */

.gradient-text-key-alt {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Do not edit */

.gradient-text-key-alt-invert {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt-invert) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt-invert) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt-invert) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Do not edit */

.gradient-bg {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-background-start) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-background-start) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-background-end) / 1) var(--tw-gradient-to-position);
  background: linear-gradient(to var(--color-background-direction), rgba(var(--color-background-start-rgb), 1), rgba(var(--color-background-end-rgb), 1)) ;
}

/* Do not edit */

.gradient-bg-alt {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-background-start-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-background-start-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-background-end-alt) / 1) var(--tw-gradient-to-position);
  background: linear-gradient(to var(--color-background-alt-direction), rgba(var(--color-background-start-alt-rgb), 1), rgba(var(--color-background-end-alt-rgb), 1)) ;
}

/* Do not edit */

/* Do not edit */

/* Do not edit */

/* Do not edit */

/* ---------------------------- */

/* ANCHOR  Effects Utilities	*/

/* ---------------------------- */

/* TODO Convert to TW Extension and confirm no conflict with -inner prefix. */

/* SHADOWS */

.shadow-inner-light-y {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light)),
					inset 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
}

.shadow-inner-light-t {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
}

/* ---------------------------- */

/* ANCHOR  Shader Utilities		*/

/* ---------------------------- */

/* SHADERS */

/* ---------------------------- */

/* ANCHOR Transition Utilities	*/

/* ---------------------------- */

.focus-set {
  /* TODO Convert to Variables Basis */
}

.focus-set:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.transition-set {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
}

/* ---------------------------- */

/* ANCHOR  Media Utilities		*/

/* ---------------------------- */

/* ---------------------------- */

/* ANCHOR Animation Utilities 	*/

/* ---------------------------- */

/* GLOWS */

/* TODO Convert Rounding to auto-utility classes. */

/* ---------------------------- */

/* ANCHOR Badging Utilities 	*/

/* ---------------------------- */

/* Avatar Badge Combo */

.avatar:has(i) {
  position: relative;
}

.avatar i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
}

/* Badge sizing by avatar size — scales icon from i5 (base) down to i6 (min) and up to i1 (xl) */

.avatar i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i5-size);
  line-height: var(--text-i5-lh);
  height: var(--text-i5-size);
  width: var(--text-i5-size);
}

.avatar.min i {
  right: calc(var(--layout-unit) / -2);
  font-size: var(--text-i6-size);
  line-height: var(--text-i6-lh);
  height: var(--text-i6-size);
  width: var(--text-i6-size);
}

.avatar.sm i {
  font-size: var(--text-i4-size);
  line-height: var(--text-i4-lh);
  height: var(--text-i4-size);
  width: var(--text-i4-size);
}

.avatar.md i {
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
  height: var(--text-i3-size);
  width: var(--text-i3-size);
}

.avatar.lg i {
  right: 0;
  font-size: var(--text-i2-size);
  line-height: var(--text-i2-lh);
  height: var(--text-i2-size);
  width: var(--text-i2-size);
}

.avatar.xl i {
  right: 0;
  font-size: var(--text-i1-size);
  line-height: var(--text-i1-lh);
  height: var(--text-i1-size);
  width: var(--text-i1-size);
}

/* Avatar Badge Legacy (deprecated — use .avatar.{size} i) */

.avatar-min:has(i), .avatar-gradient-min:has(i), .avatar:has(i), .avatar-gradient:has(i), .avatar-sm:has(i), .avatar-gradient-sm:has(i), .avatar-md:has(i), .avatar-gradient-md:has(i), .avatar-lg:has(i), .avatar-gradient-lg:has(i), .avatar-xl:has(i), .avatar-gradient-xl:has(i) {
  position: relative;
}

.avatar-min i, .avatar-gradient-min i, .avatar-gradient i, .avatar-sm i, .avatar-gradient-sm i, .avatar-md i, .avatar-gradient-md i, .avatar-lg i, .avatar-gradient-lg i, .avatar-xl i, .avatar-gradient-xl i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
}

.avatar-min i, .avatar-gradient-min i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) / -2);
  font-size: var(--text-i6-size);
  line-height: var(--text-i6-lh);
  height: var(--text-i6-size);
  width: var(--text-i6-size);
}

.avatar-gradient i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i5-size);
  line-height: var(--text-i5-lh);
  height: var(--text-i5-size);
  width: var(--text-i5-size);
}

.avatar-sm i, .avatar-gradient-sm i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i4-size);
  line-height: var(--text-i4-lh);
  height: var(--text-i4-size);
  width: var(--text-i4-size);
}

.avatar-md i, .avatar-gradient-md i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
  height: var(--text-i3-size);
  width: var(--text-i3-size);
}

.avatar-lg i, .avatar-gradient-lg i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: 0;
  font-size: var(--text-i2-size);
  line-height: var(--text-i2-lh);
  height: var(--text-i2-size);
  width: var(--text-i2-size);
}

.avatar-xl i, .avatar-gradient-xl i {
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: 0;
  font-size: var(--text-i1-size);
  line-height: var(--text-i1-lh);
  height: var(--text-i1-size);
  width: var(--text-i1-size);
}

/* ---------------------------- */

/* ANCHOR Other Utilities 		*/

/* ---------------------------- */

.hr-inline.gradient::after {
  content: '';
  background: linear-gradient(to right, rgba(var(--color-key-rgb), 1), rgba(var(--color-key-end-rgb), 1));
}

/* -------------------------------- */

/* Do not edit	*/

/* ---------------------------------*/

div.screen-modal,
	section.screen-modal {
  position: fixed;
  inset: 0px;
  z-index: 888;
  height: 100dvh;
  width: 100vw;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow-y: scroll;
  border-radius: 0px;
  opacity: 1;
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  --tw-backdrop-blur: blur(var(--blur-heavy));
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-duration: var(--transition-duration-base);
}

@media (prefers-reduced-motion: reduce) {
  div.screen-modal,
	section.screen-modal {
    transition-property: none;
  }
}

div.screen-modal.hide,
	section.screen-modal.hide {
  visibility: hidden;
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: var(--screen-xl);
  opacity: 0;
  --tw-blur: blur(var(--blur-max));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  --tw-backdrop-blur: blur(0);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-duration: calc(2 * var(--transition-duration-base));
}

@media (prefers-reduced-motion: reduce) {
  div.screen-modal.hide,
	section.screen-modal.hide {
    transition-property: none;
  }
}

@media (min-width: 960px) {
  div.screen-modal.hide,
	section.screen-modal.hide {
    border-radius: var(--screen-2xl);
  }
}

div.screen-modal .modal-block,
	section.screen-modal .modal-block {
  max-height: 100%;
  flex-grow: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow: scroll;
  opacity: 1;
  transition-duration: calc(3 * var(--transition-duration-base));
}

@media (prefers-reduced-motion: reduce) {
  div.screen-modal .modal-block,
	section.screen-modal .modal-block {
    transition-property: none;
  }
}

div.screen-modal.hide .modal-block,
	section.screen-modal.hide .modal-block {
  visibility: hidden;
  --tw-scale-x: .5;
  --tw-scale-y: .5;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transition-duration: var(--transition-duration-base);
}

@media (prefers-reduced-motion: reduce) {
  div.screen-modal.hide .modal-block,
	section.screen-modal.hide .modal-block {
    transition-property: none;
  }
}

.frame-modal {
  height: 100%;
  align-content: center;
  justify-content: center;
}

.lock-body {
  position: fixed;
  height: 100svh;
  width: 100%;
  overflow-y: hidden;
}

div.screen-modal.theme-transparent,
	section.screen-modal.theme-transparent {
  /* Do not edit */
  background: linear-gradient(
			to top right, 
			rgba(var(--color-key-rgb), var(--shader-light)), 
			rgba(var(--color-key-end-rgb), var(--shader-light))
			);
}

#header-nav-menu-open.hide, #header-nav-menu-close.hide, #header-nav-menu.hide, #mobile-footer-menu-open.hide, #mobile-footer-menu-close.hide, #mobile-footer-menu.hide {
  display: none;
}

/* ---------------------------- */

/* ANCHOR Buttons & Forms		*/

/* ---------------------------- */

/* DEPRECATED — Legacy hyphenated button selectors below.
	   Use combo equivalents: .button, .button.gradient, .button.gradient.secondary,
	   .button.gradient.alt, .button.gradient.air, .button.icon, .button.icon.gradient,
	   .button.icon.dropdown, .button.icon.filter, etc.
	   These legacy selectors share rules with combo selectors via dual-selector patterns.
	   They will be split out and removed in a future release. */

a.button-primary, a.button-secondary {
  display: inline-block;
  min-width: -moz-min-content;
  min-width: min-content;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  text-align: center;
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

button.primary, button.secondary {
  display: inline-block;
  min-width: -moz-min-content;
  min-width: min-content;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  text-align: center;
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

a.button-primary-gradient, button.primary-gradient, a.button-secondary-gradient, button.secondary-gradient {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: var(--border-button);
  text-align: center;
}

a.button-primary-gradient span, button.primary-gradient span, a.button-secondary-gradient span, button.secondary-gradient span {
  width: 100%;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
}

a.button-primary-gradient p, button.primary-gradient p, 
	a.button-secondary-gradient p, button.secondary-gradient p {
  text-align: center;
  font-size: var(--text-button-size);
  line-height: calc(var(--text-button-lh) - var(--border-base) - var(--border-base));
}

a.button-primary-gradient p i, button.primary-gradient p i, a.button-secondary-gradient p i, button.secondary-gradient p i {
  text-align: center;
  font-size: var(--text-button-size);
  line-height: calc(var(--text-button-lh) - var(--border-base) - var(--border-base));
}

a.button-primary-gradient.sm p, button.primary-gradient.sm p, a.button-secondary-gradient.sm p, button.secondary-gradient.sm p, 
	a.button-primary-gradient.sm p i, button.primary-gradient.sm p i, a.button-secondary-gradient.sm p i, button.secondary-gradient.sm p i {
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p3-lh);
}

a.button-primary-gradient.md p, button.primary-gradient.md p, a.button-secondary-gradient.md p, button.secondary-gradient.md p, 
	a.button-primary-gradient.md p i, button.primary-gradient.md p i, a.button-secondary-gradient.md p i, button.secondary-gradient.md p i {
  text-align: center;
  font-size: var(--text-p3-size);
  line-height: var(--text-p1-lh);
}

a.button-primary-gradient-alt, button.primary-gradient-alt, a.button-secondary-gradient-alt, button.secondary-gradient-alt,
	.button.gradient.alt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 0;
}

a.button-icon-round-gradient-alt, button.icon-round-gradient-alt,
	.button.icon.gradient.alt {
  position: relative;
  display: inline-flex;
  height: var(--element-base-size);
  width: var(--element-base-size);
  align-items: center;
  justify-content: center;
  padding: var(--border-button);
  text-align: center;
  z-index: 0;
}

a.button-primary-gradient-alt span, button.primary-gradient-alt span, a.button-secondary-gradient-alt span, button.secondary-gradient-alt span,
	.button.gradient.alt > span {
  position: relative;
  width: 100%;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  z-index: 1;
}

a.button-icon-round-gradient-alt span, button.icon-round-gradient-alt span,
	.button.icon.gradient.alt span {
  position: relative;
  height: 100%;
  width: 100%;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: transparent;
  z-index: 1;
}

a.button-primary-gradient-alt p, button.primary-gradient-alt p, a.button-secondary-gradient-alt p, button.secondary-gradient-alt p,
	.button.gradient.alt p {
  position: relative;
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  z-index: 1;
}

a.button-icon-round-gradient-alt p, button.icon-round-gradient-alt p,
	.button.icon.gradient.alt p {
  position: relative;
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  z-index: 1;
}

a.button-primary-gradient-alt::before, button.primary-gradient-alt::before,
	.button.gradient.alt::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: '';
  z-index: 0;
}

a.button-secondary-gradient-alt::before, button.secondary-gradient-alt::before,
	.button.gradient.alt.secondary::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: '';
  z-index: 0;
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

a.button-icon-round-gradient-alt::before, button.icon-round-gradient-alt::before,
	.button.icon.gradient.alt::before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  content: '';
  z-index: 0;
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

button.primary.squared, button.secondary.squared, a.button-primary.squared, a.button-secondary.squared, 
	a.button-primary-gradient.squared, button.primary-gradient.squared, a.button-secondary-gradient.squared, button.secondary-gradient.squared {
  border-radius: var(--rounded-base);
}

button.primary.squared span, button.secondary.squared span, a.button-primary.squared span, a.button-secondary.squared span,
	a.button-primary-gradient.squared span, button.primary-gradient.squared span, a.button-secondary-gradient.squared span, button.secondary-gradient.squared span {
  border-radius: calc(var(--rounded-base) - var(--border-button));
}

a.button-primary i, 
	a.button-primary-gradient i, button.primary-gradient i, 
	a.button-secondary-gradient i, button.secondary-gradient i {
  padding-right: var(--layout-unit);
}

a.button-primary i.i-r, button.primary i.i-r, a.buttton-secondary i.i-r, button.secondary i.i-r, 
	a.button-primary-gradient i.i-r, button.primary-gradient i.i-r, 
	a.button-secondary-gradient i.i-r, button.secondary-gradient i.i-r {
  padding-right: 0px;
  padding-left: var(--layout-unit);
}

a.button-icon-round, button.icon-round,
	.button.icon {
  height: var(--element-base-size);
  width: var(--element-base-size);
  background-color: transparent;
  text-align: center;
  font-size: var(--text-nav-size);
  line-height: var(--element-base-size);
}

a.button-icon-round:hover, button.icon-round:hover,
	.button.icon:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

a.button-icon-round-gradient, button.icon-round-gradient,
	.button-icon.square.gradient,
	.button.icon.gradient {
  position: relative;
  display: inline-flex;
  height: var(--element-base-size);
  width: var(--element-base-size);
  align-items: center;
  justify-content: center;
  padding: var(--border-button);
  text-align: center;
}

a.button-icon-round-gradient p, button.icon-round-gradient p,
	.button-icon.square.gradient p,
	.button.icon.gradient p {
  font-size: var(--text-nav-size);
  line-height: calc(var(--text-button-lh) - var(--border-base) - var(--border-base));
}

a.button-icon-round-gradient span, button.icon-round-gradient span,
	.button-icon.square.gradient span,
	.button.icon.gradient span {
  width: 100%;
}

a.chip-primary-gradient, a.chip-secondary-gradient {
  padding: var(--border-button);
}

a.chip-primary-gradient p, a.chip-secondary-gradient p {
  padding-left: var(--pad-x-chip);
  padding-right: var(--pad-x-chip);
  font-size: var(--text-chip-size);
  line-height: var(--text-chip-lh);
  font-weight: 700;
}

a.chip-primary-gradient span, a.chip-secondary-gradient span {
  display: block;
  width: 100%;
}

button.filter-dropdown, button.filter-dropdown-gradient,
	.button.icon.filter, .button.icon.filter.gradient {
  display: flex;
  align-items: center;
}

button.button-dropdown-gradient-alt.secondary.filter-dropdown p span > i:first-child, button.button-dropdown-gradient-alt.secondary.filter-dropdown-gradient p span > i:first-child,.button-dropdown-gradient-alt.secondary
	.button.icon.filter p span > i:first-child,.button-dropdown-gradient-alt.secondary .button.icon.filter.gradient p span > i:first-child {
  display: none;
}

button.button-dropdown-gradient-alt.secondary.filter-dropdown p > span > p, button.button-dropdown-gradient-alt.secondary.filter-dropdown-gradient p > span > p,.button-dropdown-gradient-alt.secondary
	.button.icon.filter p > span > p,.button-dropdown-gradient-alt.secondary .button.icon.filter.gradient p > span > p {
  text-align: left;
  width: 100%;
}

button.filter-dropdown p, button.filter-dropdown-gradient p,
	.button.icon.filter p, .button.icon.filter.gradient p {
  margin-left: auto;
  margin-right: auto;
  flex-grow: 1;
  white-space: nowrap;
  text-align: left;
  font-size: var(--text-button-size);
}

@media (min-width: 960px) {
  button.filter-dropdown p, button.filter-dropdown-gradient p,
	.button.icon.filter p, .button.icon.filter.gradient p {
    font-size: var(--text-p1-size);
    line-height: var(--text-p1-lh);
  }
}

button.filter-dropdown i, button.filter-dropdown-gradient i,
	.button.icon.filter i, .button.icon.filter.gradient i {
  padding-left: var(--spacing-sub-base);
  font-size: var(--text-button-size);
}

@media (min-width: 960px) {
  button.filter-dropdown i, button.filter-dropdown-gradient i,
	.button.icon.filter i, .button.icon.filter.gradient i {
    font-size: var(--text-p1-size);
    line-height: var(--text-p1-lh);
  }
}

button.icon-dropdown,
	.button.icon.dropdown {
  display: flex;
  height: var(--element-base-size);
  width: 100%;
  min-width: -moz-min-content;
  min-width: min-content;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

button.icon-dropdown p,
	.button.icon.dropdown p {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  flex-grow: 1;
  text-align: center;
  font-size: var(--text-button-size);
}

@media (min-width: 960px) {
  button.icon-dropdown p,
	.button.icon.dropdown p {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

button.icon-dropdown i,
	button.icon-dropdown-gradient i,
	button.icon-dropdown-gradient-alt i,
	button.icon-dropdown-gradient-alt.secondary i,
	.button.icon.dropdown i {
  min-width: var(--element-sub-size);
}

button.icon-dropdown-gradient, button.icon-dropdown-gradient-alt,
	.button.icon.dropdown.gradient, .button.icon.dropdown.gradient.alt {
  position: relative;
  display: inline-flex;
  width: 100%;
  padding: var(--border-button);
  text-align: center;
}

.button-dropdown-gradient-alt.secondary,
	.button.icon.dropdown.gradient.alt.secondary {
  position: relative;
  display: inline-flex;
  width: 100%;
  padding: var(--border-button);
  text-align: center;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.button-dropdown-gradient-alt.secondary i,
	.button.icon.dropdown.gradient.alt.secondary i {
  min-width: var(--element-sub-size);
  padding-right: 0px;
}

.button-dropdown-gradient-alt.secondary.text-left span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.text-left > span > p {
  text-align: left;
  width: 100%;
}

button.icon-dropdown-gradient span, button.icon-dropdown-gradient-alt span,
	.button-dropdown-gradient-alt.secondary span,
	.button.icon.dropdown.gradient span, .button.icon.dropdown.gradient.alt span,
	.button.icon.dropdown.gradient.alt.secondary span {
  display: flex;
  height: 100%;
  width: 100%;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
}

button.icon-dropdown-gradient p, button.icon-dropdown-gradient-alt p,
	.button-dropdown-gradient-alt.secondary p,
	.button.icon.dropdown.gradient p, .button.icon.dropdown.gradient.alt p,
	.button.icon.dropdown.gradient.alt.secondary p {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: var(--text-button-size);
}

button.icon-dropdown-gradient i, button.icon-dropdown-gradient-alt i,
	.button-dropdown-gradient-alt.secondary i,
	.button.icon.dropdown.gradient i, .button.icon.dropdown.gradient.alt i,
	.button.icon.dropdown.gradient.alt.secondary i {
  line-height: calc(var(--text-button-lh) - var(--border-base) - var(--border-base));
}

a.button-icon-base-gradient,
	.button.icon.base.gradient {
  height: var(--element-base-size);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
}

.dropdown-menu {
  z-index: 10;
  margin-top: var(--spacing-sub-base);
}

.dropdown-menu > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(var(--color-secondary) / 0.2);
}

.dropdown-menu {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 0.05;
}

.dropdown-menu:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dropdown-menu div.title-block {
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
}

.dropdown-menu div {
  padding-top: var(--pad-base-base);
  padding-bottom: var(--pad-base-base);
}

.dropdown-menu p.title {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.button-dropdown-gradient-alt.secondary.dropdown-menu button span > i:first-child,.button-dropdown-gradient-alt.secondary .dropdown-menu a span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.dropdown-menu button > span > p,.button-dropdown-gradient-alt.secondary .dropdown-menu a > span > p {
  text-align: left;
  width: 100%;
}

.dropdown-menu button, .dropdown-menu a {
  display: block;
  width: 100%;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
  text-align: left;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.dropdown-menu.gradient,
	.dropdown-menu-gradient {
  z-index: 10;
  margin-top: var(--spacing-sub-base);
}

.dropdown-menu.gradient:focus,
	.dropdown-menu-gradient:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

div.dropdown-menu.gradient > :not([hidden]) ~ :not([hidden]),
	div.dropdown-menu-gradient > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: rgb(var(--color-secondary) / 0.2);
}

.dropdown-menu.gradient div.title-block,
	.dropdown-menu-gradient div.title-block {
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
}

.dropdown-menu.gradient div,
	.dropdown-menu-gradient div {
  padding-top: var(--pad-base-base);
  padding-bottom: var(--pad-base-base);
}

.dropdown-menu.gradient p.title,
	.dropdown-menu-gradient p.title {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.button-dropdown-gradient-alt.secondary.dropdown-menu.gradient button span > i:first-child,.button-dropdown-gradient-alt.secondary .dropdown-menu.gradient a span > i:first-child,.button-dropdown-gradient-alt.secondary .dropdown-menu.gradient li span > i:first-child,.button-dropdown-gradient-alt.secondary
	.dropdown-menu-gradient button span > i:first-child,.button-dropdown-gradient-alt.secondary .dropdown-menu-gradient a span > i:first-child,.button-dropdown-gradient-alt.secondary .dropdown-menu-gradient li span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.dropdown-menu.gradient button > span > p,.button-dropdown-gradient-alt.secondary .dropdown-menu.gradient a > span > p,.button-dropdown-gradient-alt.secondary .dropdown-menu.gradient li > span > p,.button-dropdown-gradient-alt.secondary
	.dropdown-menu-gradient button > span > p,.button-dropdown-gradient-alt.secondary .dropdown-menu-gradient a > span > p,.button-dropdown-gradient-alt.secondary .dropdown-menu-gradient li > span > p {
  text-align: left;
  width: 100%;
}

.dropdown-menu.gradient button, .dropdown-menu.gradient a, .dropdown-menu.gradient li,
	.dropdown-menu-gradient button, .dropdown-menu-gradient a, .dropdown-menu-gradient li {
  display: block;
  width: 100%;
  cursor: pointer;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
  text-align: left;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

ul.dropdown-menu.gradient,
	ul.dropdown-menu-gradient {
  position: absolute;
  margin-left: var(--pad-element-base);
  margin-right: var(--pad-element-base);
  margin-top: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding: 0px;
  width: calc(100% - 32px);
}

ul.dropdown-menu.gradient li:last-child,
	ul.dropdown-menu-gradient li:last-child {
  border-bottom-right-radius: var(--rounded-corner);
  border-bottom-left-radius: var(--rounded-corner);
}

ul.dropdown-menu.gradient li,
	ul.dropdown-menu-gradient li {
  position: relative;
  list-style-type: none;
  border-top-width: 0px;
  text-align: center;
}

ul.dropdown-menu.gradient.hide,
	ul.dropdown-menu-gradient.hide {
  display: none;
}

.dropdown-menu-set {
  position: relative;
  width: 100%;
}

.form-input-dropdown.gradient span p,
	.form-input-dropdown.gradient span i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.form-input-dropdown.air {
  display: flex;
  flex-direction: column;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-input-dropdown.air span {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.form-input, 
	.form-input-file {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 9999px;
  border-width: 0px;
  padding: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-form) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.form-input > span,
	.form-input-file > span {
  width: 100%;
}

.form-input-combo {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input-combo:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-input-combo::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input-combo::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input-combo::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input-combo::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-input-combo::-webkit-datetime-edit {
  display: inline-flex;
}

.form-input-combo::-webkit-datetime-edit,.form-input-combo::-webkit-datetime-edit-year-field,.form-input-combo::-webkit-datetime-edit-month-field,.form-input-combo::-webkit-datetime-edit-day-field,.form-input-combo::-webkit-datetime-edit-hour-field,.form-input-combo::-webkit-datetime-edit-minute-field,.form-input-combo::-webkit-datetime-edit-second-field,.form-input-combo::-webkit-datetime-edit-millisecond-field,.form-input-combo::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-input-combo {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 9999px;
  border-width: 0px;
  padding: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-form) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.form-input-combo > span {
  width: 100%;
}

.form-input-combo.gradient > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
}

.form-input-combo label {
  width: 40%;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-input-combo label.icon-label {
  width: -moz-fit-content;
  width: fit-content;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-input-combo.gradient.expandable::before {
  border-radius: var(--rounded-field);
}

.form-input-combo.gradient.expandable > span {
  border-radius: calc(var(--rounded-field) - var(--border-button));
}

.form-input-combo.gradient.expandable textarea {
  align-items: flex-start;
  border-width: 0px;
  border-color: transparent;
  margin-right: var(--rounded-field);
}

.form-input-combo.gradient.expandable textarea:focus {
  --tw-ring-color: transparent;
}

.form-input-combo.expandable textarea {
  width: 100%;
  min-height: var(--element-compact-size);
  height: auto;
  resize: vertical;
  overflow-y: hidden;
}

.form-input-combo.unlabeled label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.form-input-combo input {
  margin: var(--layout-unit);
  height: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  width: 100%;
  min-width: var(--element-base-size);
  flex: 1 1 auto;
  border-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: var(--spacing-sub-xl);
  padding-right: var(--spacing-sub-xl);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-input-combo.air {
  display: flex;
  flex-direction: column;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-input-combo.air > label {
  width: 100%;
  padding-left: 0px;
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .form-input-combo.air > label {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.form-input-combo.air > input {
  margin: 0px;
  width: 100%;
}

.form-input-combo .alert {
  align-self: flex-start;
}

.form-input-combo {
  border-radius: 9999px;
}

.form-input-combo input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.form-input-combo.unlabeled input {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.form-input-combo.air input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.form-input-combo input:focus {
  --tw-ring-color: transparent;
}

.form-input-combo.gradient {
  position: relative;
  padding: var(--border-button);
}

.form-input-combo.gradient > span {
  border-radius: 9999px;
}

.form-input-combo.gradient::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  content: '';
  z-index: 0;
}

.form-input-combo.gradient {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-input-combo.gradient > span {
  position: relative;
  z-index: 1;
}

.form-input-combo.gradient::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.form-input-combo.gradient {
  background-color: transparent;
}

.form-input-combo.gradient > span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.form-input-combo label {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.form-input-combo.air input {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

.form-input-combo.air input:hover,.form-input-combo.air input:focus {
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-top-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.form-input-combo {
  background-color: transparent;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.form-input-combo input {
  background-color: transparent;
}

.form-input-combo input:hover,.form-input-combo input:focus {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

.form-input-combo {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 9999px;
  border-width: 0px;
  padding: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-form) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.cx-form-color-picker div.form-input-combo.air {
  width: 100%;
}

.screen-modal .card .form-input-combo.air input,
.cx-dash-card .form-input-combo.air input {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.screen-modal .card .form-input-combo.gradient > span,
.cx-dash-card .form-input-combo.gradient > span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
}

.screen-modal .card .form-input-combo.gradient label,
.cx-dash-card .form-input-combo.gradient label {
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.screen-modal .card .form-input-combo.gradient input:hover,
.cx-dash-card .form-input-combo.gradient input:hover {
  /* Do not edit */
  /* Gradient background Opacity Variant */
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
}

.formrow.split > div.form-input-combo {
  width: 100%;
}

.cx-stack-create-account .form-input-combo label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: nowrap;
}

.cx-stack-contact-form .stack-row .form-input-combo {
  width: 100%;
}

.cx-form-drag-link .form-input-combo input {
  font-size: var(--text-p3-size);
}

.form-input-combo button p, .form-input-combo a p {
  white-space: nowrap;
}

.form-input.gradient > span,
	.form-input-file.gradient > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
}

.form-input label,
	.form-input-file label {
  width: 40%;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-input label.icon-label {
  width: -moz-fit-content;
  width: fit-content;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-input.gradient.expandable::before {
  border-radius: var(--rounded-field);
}

.form-input.gradient.expandable > span {
  border-radius: calc(var(--rounded-field) - var(--border-button));
}

.form-input.gradient.expandable textarea {
  align-items: flex-start;
  border-width: 0px;
  border-color: transparent;
  margin-right: var(--rounded-field);
}

.form-input.gradient.expandable textarea:focus {
  --tw-ring-color: transparent;
}

.form-input.expandable textarea {
  width: 100%;
  min-height: var(--element-compact-size);
  height: auto;
  resize: vertical;
  overflow-y: hidden;
}

.form-input.unlabeled label,
	.form-input-file.unlabeled label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.form-input-combo label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.form-textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-textarea::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-textarea::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-textarea::-webkit-datetime-edit {
  display: inline-flex;
}

.form-textarea::-webkit-datetime-edit,.form-textarea::-webkit-datetime-edit-year-field,.form-textarea::-webkit-datetime-edit-month-field,.form-textarea::-webkit-datetime-edit-day-field,.form-textarea::-webkit-datetime-edit-hour-field,.form-textarea::-webkit-datetime-edit-minute-field,.form-textarea::-webkit-datetime-edit-second-field,.form-textarea::-webkit-datetime-edit-millisecond-field,.form-textarea::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-textarea {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 9999px;
  border-width: 0px;
  padding: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-form) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.form-textarea > span {
  width: 100%;
}

.form-textarea.gradient > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
}

.form-textarea label {
  width: 40%;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-textarea label.icon-label {
  width: -moz-fit-content;
  width: fit-content;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-textarea.gradient.expandable::before {
  border-radius: var(--rounded-field);
}

.form-textarea.gradient.expandable > span {
  border-radius: calc(var(--rounded-field) - var(--border-button));
}

.form-textarea.gradient.expandable textarea {
  align-items: flex-start;
  border-width: 0px;
  border-color: transparent;
  margin-right: var(--rounded-field);
}

.form-textarea.gradient.expandable textarea:focus {
  --tw-ring-color: transparent;
}

.form-textarea.expandable textarea {
  width: 100%;
  min-height: var(--element-compact-size);
  height: auto;
  resize: vertical;
  overflow-y: hidden;
}

.form-textarea.unlabeled label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.form-textarea input {
  margin: var(--layout-unit);
  height: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  width: 100%;
  min-width: var(--element-base-size);
  flex: 1 1 auto;
  border-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: var(--spacing-sub-xl);
  padding-right: var(--spacing-sub-xl);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-textarea.air {
  display: flex;
  flex-direction: column;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-textarea.air > label {
  width: 100%;
  padding-left: 0px;
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .form-textarea.air > label {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.form-textarea.air > input {
  margin: 0px;
  width: 100%;
}

.form-textarea .alert {
  align-self: flex-start;
}

.form-textarea {
  border-radius: 9999px;
}

.form-textarea input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.form-textarea.unlabeled input {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.form-textarea.air input {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.form-textarea input:focus {
  --tw-ring-color: transparent;
}

.form-textarea.gradient {
  position: relative;
  padding: var(--border-button);
}

.form-textarea.gradient > span {
  border-radius: 9999px;
}

.form-textarea.gradient::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  content: '';
  z-index: 0;
}

.form-textarea.gradient {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-textarea.gradient > span {
  position: relative;
  z-index: 1;
}

.form-textarea.gradient::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.form-textarea.gradient {
  background-color: transparent;
}

.form-textarea.gradient > span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.form-textarea label {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.form-textarea.air input {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

.form-textarea.air input:hover,.form-textarea.air input:focus {
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-top-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.form-textarea {
  background-color: transparent;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.form-textarea input {
  background-color: transparent;
}

.form-textarea input:hover,.form-textarea input:focus {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

.form-textarea {
  display: flex;
  border-radius: var(--rounded-field);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-form) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.cx-form-color-picker div.form-textarea.air {
  width: 100%;
}

.screen-modal .card .form-textarea.air input,
.cx-dash-card .form-textarea.air input {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.screen-modal .card .form-textarea.gradient > span,
.cx-dash-card .form-textarea.gradient > span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
}

.screen-modal .card .form-textarea.gradient label,
.cx-dash-card .form-textarea.gradient label {
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.screen-modal .card .form-textarea.gradient input:hover,
.cx-dash-card .form-textarea.gradient input:hover {
  /* Do not edit */
  /* Gradient background Opacity Variant */
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
}

.formrow.split > div.form-textarea {
  width: 100%;
}

.cx-stack-create-account .form-textarea label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: nowrap;
}

.cx-stack-contact-form .stack-row .form-textarea {
  width: 100%;
}

.cx-form-drag-link .form-textarea input {
  font-size: var(--text-p3-size);
}

.form-textarea {
  /* NOTE Flex is REQUIRED to remove the mystery bottom spacing below textarea elements that is present in all browsers as of 2024. */
}

.form-textarea textarea {
  width: 100%;
}

.form-textarea.air > label {
  width: 100%;
  padding-left: 0px;
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
}

.form-textarea.air textarea {
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-color: transparent;
}

/* ANCHOR Combo: .form-select */

.form-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 9999px;
  border-width: 0px;
  padding: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-form) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.form-select > span {
  width: 100%;
}

.form-select label {
  width: 40%;
  padding-left: var(--pad-element-base);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-select select {
  margin: var(--layout-unit);
  height: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  width: 100%;
  min-width: var(--element-base-size);
  flex: 1 1 auto;
  border-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: var(--spacing-sub-xl);
  padding-right: var(--spacing-sub-xl);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-select.unlabeled label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.form-select.air {
  display: flex;
  flex-direction: column;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-select.air > label {
  width: 100%;
  padding-left: 0px;
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .form-select.air > label {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.form-select.air > select {
  margin: 0px;
  width: 100%;
}

.form-select select:focus {
  --tw-ring-color: transparent;
}

.form-select.gradient > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
}

.form-input input, .form-input-file input, .form-input-combo input, .form-input-dropdown span {
  margin: var(--layout-unit);
  height: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  width: 100%;
  min-width: var(--element-base-size);
  flex: 1 1 auto;
  border-width: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: var(--spacing-sub-xl);
  padding-right: var(--spacing-sub-xl);
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.form-input.air,
	.form-input-file.air {
  display: flex;
  flex-direction: column;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-input.air > label,
	.form-input-file.air > label {
  width: 100%;
  padding-left: 0px;
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .form-input.air > label,
	.form-input-file.air > label {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.form-input.air > input,
	.form-input-file.air > input {
  margin: 0px;
  width: 100%;
}

.form-input-media {
  position: relative;
  border-radius: var(--rounded-base);
  background-size: cover;
  background-position: center;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.form-input-media > video {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.form-input-media a {
  display: block;
  min-height: var(--element-base-size);
  min-width: var(--element-base-size);
  align-content: center;
  border-radius: var(--rounded-base);
  text-align: center;
}

.form-input-media a:hover {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

.form-input-media a i {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  font-size: var(--text-i5-size);
  line-height: var(--text-i5-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.form-input-media.sm, .form-input-media.sm a {
  height: var(--element-c-sm);
}

.form-input-media.md, .form-input-media.md a {
  height: var(--element-c-md);
}

.form-input-media.lg, .form-input-media.lg a {
  height: var(--element-c-lg);
}

.form-input-media.air {
  border-radius: var(--rounded-base);
  background-color: rgb(var(--color-invert) / var(--shader-base));
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-color: transparent;
}

.form-input-media.air > video {
  border-radius: var(--rounded-base);
}

.form-input-media.air a:hover {
  background-color: rgb(var(--color-invert) / 0.5);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.form-input-media.air.corner-i a:hover {
  --tw-ring-color: transparent;
}

.form-input-media.square, .form-input-media.square a {
  aspect-ratio: 1 / 1;
}

.form-input-media.video, .form-input-media.video a {
  aspect-ratio: 16 / 9;
}

.form-input-media.circle, .form-input-media.circle a {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
}

.form-input-media.circle > video {
  border-radius: 9999px;
}

.form-input-media.corner-i, .form-input-media.corner-i a {
  position: relative;
}

.form-input-media.corner-i a i, .form-input-media.sm.corner-i a i {
  display: block;
  position: absolute;
  top: calc( (var(--text-i5-size) / 4) * -1);
  right: calc( (var(--text-i5-size) / 4) * -1);
  font-size: var(--text-i5-size);
  line-height: var(--text-i5-lh);
  height: var(--text-i5-size);
  width: var(--text-i5-size);
  transition: none;
}

.form-input-media.md.corner-i a i {
  display: block;
  position: absolute;
  top: calc( var(--layout-unit) * -1);
  right: calc( var(--layout-unit) * -1);
  font-size: var(--text-i4-size);
  line-height: var(--text-i4-lh);
  height: var(--text-i4-size);
  width: var(--text-i4-size);
  transition: none;
}

.form-input-media.lg.corner-i a i {
  display: block;
  position: absolute;
  top: calc( var(--layout-unit) * -1);
  right: calc( var(--layout-unit) * -1);
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
  height: var(--text-i3-size);
  width: var(--text-i3-size);
  transition: none;
}

.form-input-media.corner-i a:hover i {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-input-media.nohover a:hover {
  cursor: default;
  background-color: rgb(var(--color-invert) / 0);
  --tw-ring-color: transparent;
}

.form-input-checkbox {
  display: flex;
  align-items: center;
}

.form-input-checkbox.row {
  width: 100%;
  flex-direction: row;
  -moz-column-gap: var(--layout-unit);
       column-gap: var(--layout-unit);
}

.form-input-checkbox .checkbox {
  display: flex;
  aspect-ratio: 1 / 1;
  min-height: var(--element-sub-size);
  min-width: var(--element-sub-size);
  align-items: center;
}

.form-input-checkbox .checkbox input {
  /* TODO Convert to Variables Basis */
}

.form-input-checkbox .checkbox input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.form-input-checkbox .checkbox input {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.form-input-checkbox.sm {
  -moz-column-gap: var(--layout-unit);
       column-gap: var(--layout-unit);
}

.form-input-checkbox.md {
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

.form-input-checkbox.lg {
  -moz-column-gap: var(--gap-element-base);
       column-gap: var(--gap-element-base);
}

.form-input-checkbox.sm .checkbox {
  height: var(--element-sub-size);
  width: var(--element-sub-size);
  min-width: var(--element-sub-size);
}

.form-input-checkbox.md .checkbox {
  height: calc(var(--element-sub-size) + var(--layout-unit));
  width: calc(var(--element-sub-size) + var(--layout-unit));
  min-width: calc(var(--element-sub-size) + var(--layout-unit));
}

.form-input-checkbox.lg .checkbox {
  height: var(--element-min-size);
  width: var(--element-min-size);
  min-width: var(--element-min-size);
}

.form-input-checkbox.rounded .checkbox {
  border-radius: var(--rounded-min);
}

.form-input-checkbox.rounded .checkbox input {
  border-radius: calc(var(--rounded-min) - var(--border-button));
}

.form-input-checkbox.circle .checkbox {
  border-radius: 9999px;
}

.form-input-checkbox.circle .checkbox input {
  border-radius: 9999px;
}

.form-input-checkbox.gradient .checkbox {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
}

.form-input-checkbox.gradient .checkbox input {
  border-width: 0px;
}

.form-input-checkbox.gradient .checkbox input:checked {
  background-color: transparent;
}

.form-input-checkbox.sm div p {
  font-size: var(--text-p4-size);
  line-height: var(--text-p3-lh);
}

.form-input-checkbox.md div p {
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
}

.form-input-checkbox.lg div p {
  font-size: var(--text-p2-size);
  line-height: var(--text-p3-lh);
}

.form-radio-set label {
  margin-left: var(--spacing-sub-base);
}

.form-radio-option {
  display: flex;
  cursor: pointer;
  align-items: center;
}

.form-radio-set.simple legend {
  margin-bottom: var(--gap-hgroup-title);
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.form-radio-set.simple > p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.form-radio-set.simple .form-stack-radio-options {
  margin-top: var(--pad-element-base);
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-form-sm);
}

.form-radio-set.card-stack .form-stack-radio-options label {
  margin: 0px;
  border-radius: var(--rounded-corner);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label > div {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--rounded-corner) - var(--border-button));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
  padding: var(--pad-element-base);
}

.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label:hover > div,
	.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label:has(input[type="radio"]:checked) > div {
  background-color: transparent;
}

.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label:hover > div p,
	.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label:has(input[type="radio"]:checked) > div p,
	.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label:hover > div i,
	.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label:has(input[type="radio"]:checked) > div i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.form-radio-set.card-block {
  border-radius: var(--rounded-corner);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-radio-set.card-block.gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  border-radius: var(--rounded-corner);
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-radio-set.card-block.gradient.secondary {
  padding: var(--border-button);
}

.form-radio-set.card-block.gradient.secondary .form-stack-radio-options {
  display: flex;
  flex-direction: column;
  row-gap: 1px;
}

.form-radio-set.card-block.gradient.secondary.row .form-stack-radio-options {
  display: flex;
  flex-direction: row;
  -moz-column-gap: 1px;
       column-gap: 1px;
}

.form-radio-set.card-block.gradient.secondary .form-stack-radio-options label {
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.form-radio-set.card-block.gradient.secondary .form-stack-radio-options label span:first-child p {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
}

.form-radio-set.card-block.gradient.secondary .form-stack-radio-options label:hover span:first-child p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.form-radio-set.card-block .form-stack-radio-options {
  position: relative;
}

.form-radio-set.card-block .form-stack-radio-options > .form-radio-option:first-child {
  border-top-left-radius: calc(var(--rounded-corner) - var(--border-button));
  border-top-right-radius: calc(var(--rounded-corner) - var(--border-button));
}

.form-radio-set.card-block.row .form-stack-radio-options > .form-radio-option:first-child {
  border-top-left-radius: calc(var(--rounded-corner) - var(--border-button));
  border-bottom-left-radius: calc(var(--rounded-corner) - var(--border-button));
  border-top-right-radius: 0px;
}

.form-radio-set.card-block .form-stack-radio-options > .form-radio-option:last-child {
  border-bottom-right-radius: calc(var(--rounded-corner) - var(--border-button));
  border-bottom-left-radius: calc(var(--rounded-corner) - var(--border-button));
}

.form-radio-set.card-block.row .form-stack-radio-options > .form-radio-option:last-child {
  border-top-right-radius: calc(var(--rounded-corner) - var(--border-button));
  border-bottom-right-radius: calc(var(--rounded-corner) - var(--border-button));
  border-bottom-left-radius: 0px;
}

.form-radio-set.card-block .form-radio-option {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
}

.form-radio-set.card-block .form-radio-option:hover {
  background-color: transparent;
}

.form-radio-set.card-block .form-radio-option:hover label, .form-radio-set.card-block .form-radio-option:hover p {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.form-radio-set.card-block .form-radio-option {
  position: relative;
  display: flex;
  width: 100%;
  cursor: pointer;
  flex-direction: row;
  -moz-column-gap: var(--gap-form-sm);
       column-gap: var(--gap-form-sm);
  padding: var(--pad-element-base);
}

.form-radio-set.card-block .form-radio-option:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-radio-set.card-block .form-radio-option span {
  display: flex;
  align-items: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.form-radio-set.card-block label {
  margin-left: 0px;
}

.form-radio-set.card-block input {
  margin-right: var(--spacing-sub-base);
}

.form-radio-set.card-block label:has(input[type="radio"]:checked) {
  background-color: transparent;
}

.form-radio-set.card-block label:has(input[type="radio"]:checked) p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.form-radio-set.card-block.secondary label:has(input[type="radio"]:checked) :first-child p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.set-input-hidden input {
  display: none;
}

/* ---------------------------- */

/* ANCHOR Alerts				*/

/* ---------------------------- */

/* Alert Structure - All */

.alert {
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--gap-article-base);
       column-gap: var(--gap-article-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
}

.alert a {
  font-size: var(--text-p4-size);
  line-height: var(--text-h6-lh);
}

.alert .button {
  height: var(--element-min-size);
  white-space: nowrap;
  padding-left: var(--spacing-sub-2xl);
  padding-right: var(--spacing-sub-2xl);
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: var(--text-heb-size);
  line-height: var(--text-h6-lh);
}

.alert .content > hgroup, .alert .content > div {
  gap: var(--gap-hgroup-heading);
}

.alert .content p {
  font-size: var(--text-p4-size);
  line-height: var(--text-h6-lh);
}

.form-input .alert {
  align-self: flex-start;
}

/* Alert Structure - Banner */

.alert.banner {
  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light)),
					0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  width: 100%;
}

.alert.banner .content {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -moz-column-gap: var(--gap-article-base);
       column-gap: var(--gap-article-base);
  row-gap: calc(var(--layout-unit) / 2);
}

.alert.banner .content > hgroup, .alert.banner .content > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.alert.banner .action a i {
  width: var(--element-min-size);
  text-align: center;
}

.alert.banner .action {
  min-width: var(--element-min-size);
  max-width: -moz-fit-content;
  max-width: fit-content;
  align-items: center;
  font-size: var(--text-p3-size);
  line-height: var(--text-h6-lh);
}

/* Alert Structure - Callout */

.alert.callout {
  margin-top: var(--pad-element-base);
  margin-bottom: var(--pad-element-base);
  justify-content: center;
  border-radius: var(--rounded-field);
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
}

.card .alert.callout .content h6, .card .alert.callout .content p {
  line-height: var(--text-p5-lh);
}

.alert.callout .content > hgroup, .alert.callout .content > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.alert.callout .action a i {
  padding-left: calc(var(--layout-unit) / 2);
}

.alert.callout .content h6 i, .alert.callout .content p i {
  padding-right: calc(var(--layout-unit) / 2);
}

/* Alert Structure - Box */

.alert.box {
  margin-top: var(--pad-element-base);
  margin-bottom: var(--pad-element-base);
  width: 100%;
  border-radius: var(--rounded-corner);
  padding: var(--pad-element-base);
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.alert.box .action a i {
  padding-left: calc(var(--layout-unit) / 2);
}

.alert.box .content {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: var(--gap-article-base);
}

.alert.box .content ul li {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

/* Alert Theme - Default */

.alert div .button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.alert div .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.alert .action a:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.alert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

/* Alert Theme - Key */

.alert.key {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert.key h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert.key a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert.key a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key-end) / var(--tw-text-opacity));
}

.alert.key .button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
}

.alert.key .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.alert.key .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  opacity: var(--color-key-gradient-active-opacity);
}

.alert.key .action a:hover i {
  opacity: 1;
}

/* Alert Theme - Key Gradient */

.alert.key-gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert.key-gradient h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert.key-gradient a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.alert.key-gradient a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key-end) / var(--tw-text-opacity));
}

.alert.key-gradient .button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
}

.alert.key-gradient .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-active-opacity);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.alert.key-gradient .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  opacity: var(--color-key-gradient-active-opacity);
}

.alert.key-gradient .action a:hover i {
  opacity: 1;
}

/* Alert Theme - Notify */

.alert.notify {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-notify-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify-text) / var(--tw-text-opacity));
}

.alert.notify h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify-heading) / var(--tw-text-opacity));
}

.alert.notify a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify) / var(--tw-text-opacity));
}

.alert.notify a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify-heading) / var(--tw-text-opacity));
}

.alert.notify .button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify-heading) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-notify-heading) / var(--tw-ring-opacity));
}

.alert.notify .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-notify) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify-background) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-notify) / var(--tw-ring-opacity));
}

.alert.notify .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify) / var(--tw-text-opacity));
}

.alert.notify .action a:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify-heading) / var(--tw-text-opacity));
}

/* Alert Theme - Warning */

.alert.warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-warning-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning-text) / var(--tw-text-opacity));
}

.alert.warning h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning-heading) / var(--tw-text-opacity));
}

.alert.warning a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning) / var(--tw-text-opacity));
}

.alert.warning a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning-heading) / var(--tw-text-opacity));
}

.alert.warning .button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning-heading) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-warning-heading) / var(--tw-ring-opacity));
}

.alert.warning .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-warning) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning-background) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-warning) / var(--tw-ring-opacity));
}

.alert.warning .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning) / var(--tw-text-opacity));
}

.alert.warning .action a:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning-heading) / var(--tw-text-opacity));
}

/* Alert Theme - Error */

.alert.error {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-error-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-text) / var(--tw-text-opacity));
}

.alert.error h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-heading) / var(--tw-text-opacity));
}

.alert.error a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error) / var(--tw-text-opacity));
}

.alert.error a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-heading) / var(--tw-text-opacity));
}

.alert.error .button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-heading) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-error-heading) / var(--tw-ring-opacity));
}

.alert.error .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-error) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-background) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-error) / var(--tw-ring-opacity));
}

.alert.error .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error) / var(--tw-text-opacity));
}

.alert.error .action a:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-heading) / var(--tw-text-opacity));
}

/* Alert Theme - Success */

.alert.success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-success-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success-text) / var(--tw-text-opacity));
}

.alert.success h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success-heading) / var(--tw-text-opacity));
}

.alert.success a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error) / var(--tw-text-opacity));
}

.alert.success a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error-heading) / var(--tw-text-opacity));
}

.alert.success .button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success-heading) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-success-heading) / var(--tw-ring-opacity));
}

.alert.success .button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-success) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success-background) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-alert-success) / var(--tw-ring-opacity));
}

.alert.success .action a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success) / var(--tw-text-opacity));
}

.alert.success .action a:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success-heading) / var(--tw-text-opacity));
}

/* ---------------------------- */

/* ANCHOR Special Blocks		*/

/* ---------------------------- */

/* ---------------------------- */

/* ANCHOR Other Elements		*/

/* ---------------------------- */

.toggle-menu, .toggle-menu-gradient {
  font-size: var(--text-nav-size);
  line-height: var(--element-base-size);
}

/* ---------------------------- */

/* ANCHOR Menu					*/

/* ---------------------------- */

/* Full-screen overlay menu. Apply on <nav> element: nav.menu
	   Designed for combo class extension: nav.menu.gradient, nav.menu.dark, etc. */

nav.menu {
  padding-top: var(--pad-header-base);
  padding-bottom: var(--pad-header-base);
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  nav.menu {
    padding-top: var(--pad-header-sm);
    padding-bottom: var(--pad-header-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  nav.menu {
    padding-top: var(--pad-header-md);
    padding-bottom: var(--pad-header-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  nav.menu {
    padding-top: var(--pad-header-lg);
    padding-bottom: var(--pad-header-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  nav.menu {
    padding-top: var(--pad-header-xl);
    padding-bottom: var(--pad-header-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  nav.menu {
    padding-top: var(--pad-header-2xl);
    padding-bottom: var(--pad-header-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

nav.menu {
  display: flex;
  height: 100dvh;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

nav.menu a {
  width: 100%;
  text-align: center;
}

nav.menu a p {
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  nav.menu a p {
    padding-left: var(--pad-element-sm);
    padding-right: var(--pad-element-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  nav.menu a p {
    padding-left: var(--pad-element-md);
    padding-right: var(--pad-element-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  nav.menu a p {
    padding-left: var(--pad-element-lg);
    padding-right: var(--pad-element-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  nav.menu a p {
    padding-left: var(--pad-element-xl);
    padding-right: var(--pad-element-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  nav.menu a p {
    padding-left: var(--pad-element-2xl);
    padding-right: var(--pad-element-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

nav.menu a p {
  width: 100%;
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-lh);
}

/* ---------------------------- */

/* ANCHOR Sidebar				*/

/* ---------------------------- */

/* Content class for aside elements that function as sidebars.
	   Provides structural defaults (shrink-0, flex-col) and base spacing.
	   Width comes from block-* classes on the aside.
	   Scroll behavior inherited from body.layout-split or added inline.
	   Mobile hide/show handled inline (hidden lg:flex).
	   Theme and visual styling applied via theme classes or inline. */

aside.sidebar {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
  padding-top: var(--pad-section-base);
  padding-bottom: var(--pad-section-base);
  gap: var(--gap-article-base);
}

/* ---------------------------- */

/* ANCHOR Chat					*/

/* ---------------------------- */

/* Chat message and bubble components for messaging/comment UIs.
	   chat-message: flex row container for avatar + bubble.
	   chat-bubble: message bubble with padding, bg, shadow, and symmetric radius.
	   Asymmetric radius applied automatically based on avatar sibling position:
	     avatar before bubble → square top-left corner
	     bubble before avatar → square top-right corner
	     no avatar → fully symmetric radius
	   Uses :has() for backward sibling detection (Chrome 105+, Safari 15.4+, Firefox 121+). */

.chat-message {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sub-base);
}

.chat-bubble {
  border-radius: var(--rounded-field);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  padding: var(--spacing-card-base);
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.chat-message .avatar ~ .chat-bubble {
  border-top-left-radius: 0;
}

.chat-message .chat-bubble:has(~ .avatar) {
  border-top-right-radius: 0;
}

/* ---------------------------- */

/* ANCHOR Breadcrumbs			*/

/* ---------------------------- */

/* Breadcrumb navigation with auto-generated chevron separators.
	   Apply on <nav> element: nav.breadcrumbs
	   Links inside <p> elements, separators generated via ::after */

nav.breadcrumbs {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

@media (min-width: 640px) {
  nav.breadcrumbs {
    display: flex;
  }
}

nav.breadcrumbs p a {
  font-weight: 700;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

nav.breadcrumbs p a:hover, nav.breadcrumbs p a.active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

nav.breadcrumbs p i {
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-lh);
}

nav.breadcrumbs p::after {
  content: "\f054";
  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: var(--spacing-gutter-base);
}

nav.breadcrumbs p:last-child::after {
  content: '';
  display: none;
}

/* CHIPS */

.chip, .chip.gradient, .chip-gradient {
  padding-left: var(--pad-x-chip);
  padding-right: var(--pad-x-chip);
  font-size: var(--text-chip-size);
  line-height: var(--text-chip-lh);
  font-weight: 700;
}

/* -------------------------------- */

/* Do not edit	*/

/* ---------------------------------*/

/* ---------------------------- */

/* ANCHOR Links					*/

/* ---------------------------- */

nav a, nav a:link, nav a:visited, main p a, main p a:link, main p a:visited, footer p a, footer p a:link, footer p a:visited {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

.toggle-menu, .toggle-menu-gradient {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

#header-nav-menu nav a, #header-nav-menu nav a p {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

/* ---------------------------- */

/* ANCHOR Avatars				*/

/* ---------------------------- */

/* TODO Create all avatar variations */

/* Avatar New Combo */

.avatar {
  aspect-ratio: 1 / 1;
  height: var(--element-base-size);
  width: var(--element-base-size);
  border-radius: 9999px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  padding: var(--border-button);
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.avatar:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.avatar img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.avatar.preview, .avatar.preview img {
  aspect-ratio: 432 / 280;
  width: auto;
  border-radius: var(--rounded-base);
}

.avatar.preview.sm, .avatar.preview.sm img,
	.avatar.preview-rounded.sm, .avatar.preview-rounded.sm img {
  height: var(--element-c-sm);
  width: auto;
}

.avatar.preview-rounded, .avatar.preview-rounded img {
  aspect-ratio: 432 / 280;
  width: auto;
  border-radius: var(--rounded-corner);
}

.avatar.gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.avatar.min {
  height: var(--element-min-size);
  width: var(--element-min-size);
}

.avatar.sm {
  height: var(--element-c-sm);
  width: var(--element-c-sm);
}

.avatar.md {
  height: var(--element-c-md);
  width: var(--element-c-md);
}

.avatar.lg {
  height: var(--element-c-lg);
  width: var(--element-c-lg);
}

.avatar.xl {
  height: var(--element-c-xl);
  width: var(--element-c-xl);
}

/* .squared / .square — rounded-base (square with subtle rounding) */

.avatar.squared, .avatar.squared img,
	.avatar.square, .avatar.square img {
  border-radius: var(--rounded-base);
}

/* .cornered — rounded-corner (soft rounded corners) */

.avatar.cornered {
  border-radius: var(--rounded-corner);
}

.avatar.cornered img {
  border-radius: calc(var(--rounded-corner) - var(--border-button));
}

/* deprecated */

.avatar.square-rounded {
  border-radius: var(--rounded-corner);
}

.avatar.square-rounded img {
  border-radius: calc(var(--rounded-corner) - var(--border-button));
}

.avatar.circle, .avatar.circle img {
  border-radius: 9999px;
}

.avatar.hexagon, .avatar.hexagon img {
  border-radius: 0;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
          clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

.avatar.hexagon-rounded, .avatar.hexagon-rounded img {
  border-radius: 0;
  -webkit-clip-path: polygon( 1.336% 54.545%,1.336% 54.545%,0.942% 53.683%,0.636% 52.79%,0.417% 51.873%,0.286% 50.94%,0.242% 50%,0.286% 49.06%,0.417% 48.127%,0.636% 47.21%,0.942% 46.317%,1.336% 45.455%,22.133% 5.339%,22.133% 5.339%,22.607% 4.529%,23.148% 3.787%,23.752% 3.117%,24.412% 2.524%,25.121% 2.012%,25.874% 1.584%,26.665% 1.244%,27.488% 0.997%,28.336% 0.845%,29.203% 0.794%,70.797% 0.794%,70.797% 0.794%,71.664% 0.845%,72.512% 0.997%,73.335% 1.244%,74.126% 1.584%,74.879% 2.012%,75.588% 2.524%,76.248% 3.117%,76.852% 3.787%,77.393% 4.529%,77.867% 5.339%,98.664% 45.455%,98.664% 45.455%,99.058% 46.317%,99.364% 47.21%,99.583% 48.127%,99.714% 49.06%,99.758% 50%,99.714% 50.94%,99.583% 51.873%,99.364% 52.79%,99.058% 53.683%,98.664% 54.545%,77.867% 94.661%,77.867% 94.661%,77.393% 95.471%,76.852% 96.213%,76.248% 96.883%,75.588% 97.476%,74.879% 97.988%,74.126% 98.416%,73.335% 98.756%,72.512% 99.003%,71.664% 99.155%,70.797% 99.206%,29.203% 99.206%,29.203% 99.206%,28.336% 99.155%,27.488% 99.003%,26.665% 98.756%,25.874% 98.416%,25.121% 97.988%,24.412% 97.476%,23.752% 96.883%,23.148% 96.213%,22.607% 95.471%,22.133% 94.661%,1.336% 54.545%);
          clip-path: polygon( 1.336% 54.545%,1.336% 54.545%,0.942% 53.683%,0.636% 52.79%,0.417% 51.873%,0.286% 50.94%,0.242% 50%,0.286% 49.06%,0.417% 48.127%,0.636% 47.21%,0.942% 46.317%,1.336% 45.455%,22.133% 5.339%,22.133% 5.339%,22.607% 4.529%,23.148% 3.787%,23.752% 3.117%,24.412% 2.524%,25.121% 2.012%,25.874% 1.584%,26.665% 1.244%,27.488% 0.997%,28.336% 0.845%,29.203% 0.794%,70.797% 0.794%,70.797% 0.794%,71.664% 0.845%,72.512% 0.997%,73.335% 1.244%,74.126% 1.584%,74.879% 2.012%,75.588% 2.524%,76.248% 3.117%,76.852% 3.787%,77.393% 4.529%,77.867% 5.339%,98.664% 45.455%,98.664% 45.455%,99.058% 46.317%,99.364% 47.21%,99.583% 48.127%,99.714% 49.06%,99.758% 50%,99.714% 50.94%,99.583% 51.873%,99.364% 52.79%,99.058% 53.683%,98.664% 54.545%,77.867% 94.661%,77.867% 94.661%,77.393% 95.471%,76.852% 96.213%,76.248% 96.883%,75.588% 97.476%,74.879% 97.988%,74.126% 98.416%,73.335% 98.756%,72.512% 99.003%,71.664% 99.155%,70.797% 99.206%,29.203% 99.206%,29.203% 99.206%,28.336% 99.155%,27.488% 99.003%,26.665% 98.756%,25.874% 98.416%,25.121% 97.988%,24.412% 97.476%,23.752% 96.883%,23.148% 96.213%,22.607% 95.471%,22.133% 94.661%,1.336% 54.545%);
}

/* Style: bordered — border replaces bg+padding, keeps shadow. Image same effective size. */

.avatar.bordered {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  background-color: transparent;
  padding: 0px;
}

/* Style: basic — no bg, no border, no padding, no shadow. Image fills full avatar dimensions. */

.avatar.basic {
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* CXNOTE CX Specific */

.avatar.cx-avatar-item, .avatar.cx-avatar-item img {
  border-radius: 0;
  -webkit-clip-path: polygon(
			25% 10%, 26% 8%, 28% 6%, 30% 5%, 
		 	70% 5%, 72% 6%, 74% 8%, 75% 10%,
			98% 46%, 99% 49%, 99% 51%, 98% 54%, 
			75% 90%, 74% 92%, 72% 94%, 70% 95%,
			30% 95%, 28% 94%, 26% 92%, 25% 90%,
			2% 54%, 1% 51%, 1% 49%, 2% 46%);
          clip-path: polygon(
			25% 10%, 26% 8%, 28% 6%, 30% 5%, 
		 	70% 5%, 72% 6%, 74% 8%, 75% 10%,
			98% 46%, 99% 49%, 99% 51%, 98% 54%, 
			75% 90%, 74% 92%, 72% 94%, 70% 95%,
			30% 95%, 28% 94%, 26% 92%, 25% 90%,
			2% 54%, 1% 51%, 1% 49%, 2% 46%);
}

.avatar.cx-avatar-membership {
  border-radius: var(--rounded-corner);
}

.avatar.cx-avatar-membership img {
  border-radius: calc(var(--rounded-corner) - var(--border-button));
}

/* DEPRECATED — Legacy hyphenated avatar selectors below.
	   Use combo equivalents: .avatar, .avatar.gradient, .avatar.min/.sm/.md/.lg/.xl,
	   .avatar.squared, .avatar.cornered, .avatar.bordered, .avatar.basic, etc.
	   Compositions work naturally: .avatar.gradient.sm.squared
	   These legacy selectors will be removed in a future release. */

/* Sizing & Base Effects */

.avatar-min, .avatar-gradient-min, .avatar-square-min, .avatar-square-gradient-min,
	.avatar-gradient, .avatar-square, .avatar-square-gradient,
	.avatar-sm, .avatar-gradient-sm, .avatar-square-sm, .avatar-square-gradient-sm,
	.avatar-md, .avatar-gradient-md, .avatar-square-md, .avatar-square-gradient-md,
	.avatar-lg, .avatar-gradient-lg, .avatar-square-lg, .avatar-square-gradient-lg,
	.avatar-xl, .avatar-gradient-xl, .avatar-square-xl, .avatar-square-gradient-xl {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
}

.avatar-min img, .avatar-gradient-min img, .avatar-square-min img, .avatar-square-gradient-min img, 
	.avatar-gradient img, .avatar-square img, .avatar-square-gradient img,
	.avatar-sm img, .avatar-gradient-sm img, .avatar-square-sm img, .avatar-square-gradient-sm img,
	.avatar-md img, .avatar-gradient-md img, .avatar-square-md img, .avatar-square-gradient-md img,
	.avatar-lg img, .avatar-gradient-lg img, .avatar-square-lg img, .avatar-square-gradient-lg img,
	.avatar-xl img, .avatar-gradient-xl img, .avatar-square-xl img, .avatar-square-gradient-xl img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

a.avatar-min:hover img, a.avatar-gradient-min:hover img, a.avatar-square-min:hover img, a.avatar-square-gradient-min:hover img,
	a.avatar:hover img, a.avatar-gradient:hover img, a.avatar-square:hover img, a.avatar-square-gradient:hover img,
	a.avatar-sm:hover img, a.avatar-gradient-sm:hover img, a.avatar-square-sm:hover img, a.avatar-square-gradient-sm:hover img,
	a.avatar-md:hover img, a.avatar-gradient-md:hover img, a.avatar-square-md:hover img, a.avatar-square-gradient-md:hover img,
	a.avatar-lg:hover img, a.avatar-gradient-lg:hover img, a.avatar-square-lg:hover img, a.avatar-square-gradient-lg:hover img,
	a.avatar-xl:hover img, a.avatar-gradient-xl:hover img, a.avatar-square-xl:hover img, a.avatar-square-gradient-xl:hover img {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  /* CXNOTE CX Specific */
}

.avatar-min, .avatar-gradient-min, .avatar-square-min, .avatar-square-gradient-min {
  height: var(--element-min-size);
  width: var(--element-min-size);
}

.avatar-gradient, .avatar-square, .avatar-square-gradient {
  height: var(--element-base-size);
  width: var(--element-base-size);
}

.avatar-sm, .avatar-gradient-sm, .avatar-square-sm, .avatar-square-gradient-sm {
  height: var(--element-c-sm);
  width: var(--element-c-sm);
}

.avatar-md, .avatar-gradient-md, .avatar-square-md, .avatar-square-gradient-md {
  height: var(--element-c-md);
  width: var(--element-c-md);
}

.avatar-lg, .avatar-gradient-lg, .avatar-square-lg, .avatar-square-gradient-lg {
  height: var(--element-c-lg);
  width: var(--element-c-lg);
}

.avatar-xl, .avatar-gradient-xl, .avatar-square-xl, .avatar-square-gradient-xl {
  height: var(--element-c-xl);
  width: var(--element-c-xl);
}

/* NOTE DF v2 - potential to apply sizing (base, sm, md, etc as "unit size" vs "unit-size", possibly could do same with gradients (mix-ins vs combo class */

.avatar-min, .avatar-square-min, 
	.avatar-square,
	.avatar-sm, .avatar-square-sm,
	.avatar-md, .avatar-square-md,
	.avatar-lg, .avatar-square-lg,
	.avatar-xl, .avatar-square-xl {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.avatar-min, .avatar-sm, .avatar-md, .avatar-lg, .avatar-xl,
	.avatar-gradient-min, .avatar-gradient, .avatar-gradient-sm, .avatar-gradient-md, .avatar-gradient-lg, .avatar-gradient-xl {
  border-radius: 9999px;
}

.avatar-min img, .avatar-sm img, .avatar-md img, .avatar-lg img, .avatar-xl img,
	.avatar-gradient-min img, .avatar-gradient img, .avatar-gradient-sm img, .avatar-gradient-md img, .avatar-gradient-lg img, .avatar-gradient-xl img {
  border-radius: 9999px;
}

.avatar-square-min, .avatar-square, .avatar-square-sm, .avatar-square-md, .avatar-square-lg, .avatar-square-xl,
	.avatar-square-gradient-min, .avatar-square-gradient, .avatar-square-gradient-sm, .avatar-square-gradient-md, .avatar-square-gradient-lg, .avatar-square-gradient-xl {
  border-radius: var(--rounded-base);
}

.avatar-square-min img, .avatar-square img, .avatar-square-sm img, .avatar-square-md img, .avatar-square-lg img, .avatar-square-xl img,
	.avatar-square-gradient-min img, .avatar-square-gradient img, .avatar-square-gradient-sm img, .avatar-square-gradient-md img, .avatar-square-gradient-lg img, .avatar-square-gradient-xl img {
  border-radius: var(--rounded-base);
}

.avatar-gradient-min, .avatar-gradient, .avatar-gradient-sm, .avatar-gradient-md, .avatar-gradient-lg, .avatar-gradient-xl,
	.avatar-square-gradient-min, .avatar-square-gradient, .avatar-square-gradient-sm, .avatar-square-gradient-md, .avatar-square-gradient-lg, .avatar-square-gradient-xl {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
}

/* ---------------------------- */

/* ANCHOR Buttons & Forms		*/

/* ---------------------------- */

button.primary, button.secondary, a.button-primary, a.button-secondary, a.button-primary-gradient, button.primary-gradient, a.button-secondary-gradient, button.secondary-gradient, a.button-primary-gradient-alt, button.primary-gradient-alt, a.button-secondary-gradient-alt, button.secondary-gradient-alt, button.icon-dropdown, button.icon-dropdown-gradient, button.icon-dropdown-gradient-alt,
	.button-dropdown-gradient-alt.secondary,
	.button.gradient.alt,
	.button.icon.dropdown, .button.icon.dropdown.gradient, .button.icon.dropdown.gradient.alt,
	.button.icon.dropdown.gradient.alt.secondary {
  /* TODO Convert to Variables Basis */
}

button.primary:focus, button.secondary:focus, a.button-primary:focus, a.button-secondary:focus, a.button-primary-gradient:focus, button.primary-gradient:focus, a.button-secondary-gradient:focus, button.secondary-gradient:focus, a.button-primary-gradient-alt:focus, button.primary-gradient-alt:focus, a.button-secondary-gradient-alt:focus, button.secondary-gradient-alt:focus, button.icon-dropdown:focus, button.icon-dropdown-gradient:focus, button.icon-dropdown-gradient-alt:focus,
	.button-dropdown-gradient-alt.secondary:focus,
	.button.gradient.alt:focus,
	.button.icon.dropdown:focus, .button.icon.dropdown.gradient:focus, .button.icon.dropdown.gradient.alt:focus,
	.button.icon.dropdown.gradient.alt.secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

button.primary, button.secondary, a.button-primary, a.button-secondary, a.button-primary-gradient, button.primary-gradient, a.button-secondary-gradient, button.secondary-gradient, a.button-primary-gradient-alt, button.primary-gradient-alt, a.button-secondary-gradient-alt, button.secondary-gradient-alt, button.icon-dropdown, button.icon-dropdown-gradient, button.icon-dropdown-gradient-alt,
	.button-dropdown-gradient-alt.secondary,
	.button.gradient.alt,
	.button.icon.dropdown, .button.icon.dropdown.gradient, .button.icon.dropdown.gradient.alt,
	.button.icon.dropdown.gradient.alt.secondary {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: 9999px;
}

a.button-icon-round-gradient-alt, button.icon-round-gradient-alt,
	.button.icon.gradient.alt {
  /* TODO Convert to Variables Basis */
}

a.button-icon-round-gradient-alt:focus, button.icon-round-gradient-alt:focus,
	.button.icon.gradient.alt:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.button-icon-round-gradient-alt, button.icon-round-gradient-alt,
	.button.icon.gradient.alt {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: 9999px;
}

a.button-primary-gradient span, button.primary-gradient span, a.button-secondary-gradient span, button.secondary-gradient span, a.button-primary-gradient-alt span, button.primary-gradient-alt span, a.button-secondary-gradient-alt span, button.secondary-gradient-alt span, button.icon-dropdown-gradient span, button.icon-dropdown-gradient-alt span, .button-dropdown-gradient-alt.secondary span,
	.button.gradient.alt > span,
	.button.icon.dropdown.gradient span, .button.icon.dropdown.gradient.alt span,
	.button.icon.dropdown.gradient.alt.secondary span {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: 9999px;
}

a.button-icon-round-gradient-alt span, button.icon-round-gradient-alt span,
	.button.icon.gradient.alt span {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: 9999px;
}

a.button-primary-gradient p, button.primary-gradient p, a.button-primary-gradient p i, button.primary-gradient p i, 
	a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i, 
	a.button-primary-gradient-alt p, button.primary-gradient-alt p, a.button-secondary-gradient-alt p, button.secondary-gradient-alt p, button.icon-dropdown-gradient p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient i, button.icon-dropdown-gradient-alt i, a.chip-secondary-gradient p,
	.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
	.button.gradient.alt p, .button.gradient.alt i,
	.button.icon.dropdown.gradient p, .button.icon.dropdown.gradient i,
	.button.icon.dropdown.gradient.alt p, .button.icon.dropdown.gradient.alt i,
	.button.icon.dropdown.gradient.alt.secondary p, .button.icon.dropdown.gradient.alt.secondary i {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

a.button-icon-round-gradient-alt i, button.icon-round-gradient-alt i,
	.button.icon.gradient.alt i {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

a.button-primary-gradient-alt::before, button.primary-gradient-alt::before, a.button-secondary-gradient-alt::before, button.secondary-gradient-alt::before,
	.button.gradient.alt::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: 9999px;
}

a.button-icon-round-gradient-alt::before, button.icon-round-gradient-alt::before,
	.button.icon.gradient.alt::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: 9999px;
}

a.button-icon-round, button.icon-round, a.button-icon-round-gradient, button.icon-round-gradient,
	.button.icon, .button.icon.gradient {
  /* TODO Convert to Variables Basis */
}

a.button-icon-round:focus, button.icon-round:focus, a.button-icon-round-gradient:focus, button.icon-round-gradient:focus,
	.button.icon:focus, .button.icon.gradient:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.button-icon-round, button.icon-round, a.button-icon-round-gradient, button.icon-round-gradient,
	.button.icon, .button.icon.gradient {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  border-radius: 9999px;
}

.button-icon.square.gradient,
	.button.icon.square.gradient {
  /* TODO Convert to Variables Basis */
}

.button-icon.square.gradient:focus,
	.button.icon.square.gradient:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button-icon.square.gradient,
	.button.icon.square.gradient {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  border-radius: var(--rounded-base);
}

a.button-icon-round-gradient span, button.icon-round-gradient span, .form-input, .form-input-combo,
	.button.icon.gradient span {
  border-radius: 9999px;
}

.button-icon.square.gradient span,
	.button.icon.square.gradient span {
  /* TODO Convert to Variables Basis */
}

.button-icon.square.gradient span:focus,
	.button.icon.square.gradient span:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button-icon.square.gradient span,
	.button.icon.square.gradient span {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  border-radius: var(--rounded-base);
}

a.chip-primary-gradient, a.chip-secondary-gradient {
  /* TODO Convert to Variables Basis */
}

a.chip-primary-gradient:focus, a.chip-secondary-gradient:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.chip-primary-gradient, a.chip-secondary-gradient {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: var(--rounded-chip);
}

a.chip-primary-gradient span, a.chip-secondary-gradient span {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: calc(var(--rounded-chip) - var(--border-button));
}

button.filter-dropdown, button.filter-dropdown-gradient,
	.button.icon.filter, .button.icon.filter.gradient {
  /* TODO Convert to Variables Basis */
}

button.filter-dropdown:focus, button.filter-dropdown-gradient:focus,
	.button.icon.filter:focus, .button.icon.filter.gradient:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

button.filter-dropdown, button.filter-dropdown-gradient,
	.button.icon.filter, .button.icon.filter.gradient {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

.dropdown-menu, .dropdown-menu.gradient, .dropdown-menu-gradient {
  border-radius: var(--rounded-corner);
  --tw-shadow: var(--shadow-base);
  --tw-shadow-colored: var(--shadow-base);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

nav.pagination {
  isolation: isolate;
  display: inline-flex;
}

nav.pagination > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}

nav.pagination {
  border-radius: 0.375rem;
}

nav.pagination a, nav.pagination span.pagination-ellipsis {
  position: relative;
  display: inline-flex;
  min-height: var(--element-base-size);
  min-width: calc(var(--element-base-size) + var(--layout-unit) + var(--layout-unit));
  align-items: center;
  justify-content: center;
  padding: var(--layout-unit);
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: rgb(var(--color-secondary) / 0.2);
}

nav.pagination a:hover, nav.pagination span.pagination-ellipsis:hover {
  z-index: 40;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

nav.pagination a:focus, nav.pagination span.pagination-ellipsis:focus {
  z-index: 20;
  outline-offset: 0px;
}

nav.pagination a:active {
  z-index: 50;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

nav.pagination a.pagination-extra {
  display: none;
}

@media (min-width: 960px) {
  nav.pagination a.pagination-extra {
    display: inline-flex;
  }
}

nav.pagination a.pagination-next {
  border-top-right-radius: var(--rounded-corner);
  border-bottom-right-radius: var(--rounded-corner);
}

nav.pagination a.pagination-previous {
  border-top-left-radius: var(--rounded-corner);
  border-bottom-left-radius: var(--rounded-corner);
}

nav.pagination-gradient {
  isolation: isolate;
  display: inline-flex;
}

nav.pagination-gradient > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}

nav.pagination-gradient {
  border-radius: var(--rounded-corner);
}

nav.pagination-gradient a, nav.pagination-gradient span.pagination-ellipsis {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* TODO Convert to Variables Basis */
}

nav.pagination-gradient a:focus, nav.pagination-gradient span.pagination-ellipsis:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

nav.pagination-gradient a, nav.pagination-gradient span.pagination-ellipsis {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: relative;
  display: inline-flex;
  min-height: var(--element-base-size);
  min-width: var(--element-base-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-corner);
  padding: var(--layout-unit);
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
  font-weight: 700;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: transparent;
}

nav.pagination-gradient a:focus, nav.pagination-gradient span.pagination-ellipsis:focus {
  z-index: 20;
  outline-offset: 0px;
}

@media (min-width: 640px) {
  nav.pagination-gradient a, nav.pagination-gradient span.pagination-ellipsis {
    min-width: calc(var(--element-base-size) + var(--layout-unit) + var(--layout-unit));
  }
}

nav.pagination-gradient a::before, nav.pagination-gradient span.pagination-ellipsis::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: var(--rounded-corner);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  content: '';
  z-index: 0;
  opacity: 0;
}

nav.pagination-gradient a:hover, nav.pagination-gradient span.pagination-ellipsis:hover {
  z-index: 50;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

nav.pagination-gradient a:hover::before, nav.pagination-gradient span.pagination-ellipsis:hover::before {
  z-index: 30;
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

nav.pagination-gradient a:active {
  z-index: 40;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  background-clip: border-box;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

nav.pagination-gradient a.pagination-extra {
  display: none;
}

@media (min-width: 960px) {
  nav.pagination-gradient a.pagination-extra {
    display: inline-flex;
  }
}

nav.pagination-gradient a.pagination-next {
  border-top-right-radius: var(--rounded-corner);
  border-bottom-right-radius: var(--rounded-corner);
}

nav.pagination-gradient a.pagination-previous {
  border-top-left-radius: var(--rounded-corner);
  border-bottom-left-radius: var(--rounded-corner);
}

.button-gradient-air {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* TODO Convert to Variables Basis */
}

.button-gradient-air:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button-gradient-air {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: relative;
  display: inline-flex;
  height: var(--element-base-size);
  min-width: var(--element-base-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-corner);
  padding: var(--layout-unit);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: transparent;
}

a.button-icon-square-gradient-air,
	.button.icon.square.gradient.air {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* TODO Convert to Variables Basis */
}

a.button-icon-square-gradient-air:focus,
	.button.icon.square.gradient.air:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.button-icon-square-gradient-air,
	.button.icon.square.gradient.air {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: relative;
  display: inline-flex;
  height: var(--element-base-size);
  width: var(--element-base-size);
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-corner);
  padding: var(--layout-unit);
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
  font-weight: 700;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: transparent;
}

.button-gradient-air::before, a.button-icon-square-gradient-air::before,
	.button.icon.square.gradient.air::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: var(--rounded-corner);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  content: '';
  z-index: 0;
  opacity: 0;
}

.button-gradient-air:hover, a.button-icon-square-gradient-air:hover,
	.button.icon.square.gradient.air:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

a.button-icon-square-gradient-air:active,
	.button.icon.square.gradient.air:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  background-clip: border-box;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.button-gradient-air:hover::before, a.button-icon-square-gradient-air:hover::before,
	.button.icon.square.gradient.air:hover::before {
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

.button.basic.secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* ANCHOR Combo: .button.air */

.button.air {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: transparent;
}

.button.air p, .button.air i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.button.air::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  content: '';
  z-index: 0;
  opacity: 0;
}

.button.air > span {
  position: relative;
  background-color: transparent;
  z-index: 1;
}

.button.air:hover > span, .button.air.active > span {
  background-color: transparent;
}

.button.air:hover, .button.air.active {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.button.air:hover p, .button.air:hover i,
	.button.air.active p, .button.air.active i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.button.air:hover::before, .button.air.active::before {
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

/* Combo: .button.gradient.air */

.button.gradient.air {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: transparent;
}

.button.gradient.air p, .button.gradient.air i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.button.gradient.air::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  content: '';
  z-index: 0;
  opacity: 0;
}

.button.gradient.air > span {
  position: relative;
  background-color: transparent;
  z-index: 1;
}

.button.gradient.air:hover > span, .button.gradient.air.active > span {
  background-color: transparent;
}

.button.gradient.air:hover, .button.gradient.air.active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.button.gradient.air:hover p, .button.gradient.air:hover i,
	.button.gradient.air.active p, .button.gradient.air.active i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.button.gradient.air:hover::before, .button.gradient.air.active::before {
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

a.button-icon-base-gradient,
	.button.icon.base.gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

a.button-icon-base-gradient:hover,
	.button.icon.base.gradient:hover {
  opacity: 0.9;
}

a.button-icon-base-gradient,
	.button.icon.base.gradient {
  active:gradient-text-key;
}

.form-input input, .form-input-file input, .form-input-dropdown span, .form-select select {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.form-input.unlabeled input, .form-select.unlabeled select {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.form-input-dropdown.air span,
	.form-input.air input,
	.form-select.air select {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.form-input-combo input {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.form-input input:focus, .form-input-file input:focus, .form-input-combo input:focus, .form-textarea textarea:focus, .form-select select:focus {
  --tw-ring-color: transparent;
}

/* ---------------------------- */

/* ANCHOR Other Elements		*/

/* ---------------------------- */

.chip, .chip.gradient, .chip-gradient {
  /* TODO Convert to Variables Basis */
}

.chip:focus, .chip.gradient:focus, .chip-gradient:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.chip, .chip.gradient, .chip-gradient {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  border-radius: var(--rounded-chip);
}

/* -------------------------------- */

/* Do not edit	*/

/* ---------------------------------*/

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* ---------------------------- */

/* ANCHOR Buttons & Forms		*/

/* ---------------------------- */

/* SECTION COMBO BUTTON CLASSES ----------------------------------------- */

/* Base */

.button {
  /* TODO Convert to Variables Basis */
}

.button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: relative;
  display: inline-flex;
  height: var(--element-base-size);
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: var(--border-button);
  text-align: center;
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  z-index:1;
}

/* TODO Need to resolve standard i position in span vs in p element to ensure vertical spacing alignment. */

/* Fallback padding for buttons without <span> wrapper (bare text usage) */

.button:not(:has(> span)) {
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
}

.button > span {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
  border-radius: 9999px;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
}

.button i {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  font-size: var(--text-button-size);
  line-height: var(--text-button-lh);
}

/* TODO REMOVE THIS OVERRIDE AFTER OLD BUTTONS ARE CONVERTED */

button.button.secondary:has(> span) {
  padding-left: var(--border-button);
  padding-right: var(--border-button);
}

.form-input.gradient,
	.form-input-file.gradient,
	.form-select.gradient {
  position: relative;
  padding: var(--border-button);
}

.form-input.gradient > span,
	.form-input-file.gradient > span,
	.form-select.gradient > span {
  border-radius: 9999px;
}

.form-input.gradient::before,
	.form-input-file.gradient::before,
	.form-select.gradient::before,
	.button.gradient::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  content: '';
  z-index: 0;
}

.form-input.gradient,
	.form-input-file.gradient,
	.form-select.gradient,
	.button.gradient {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-input.gradient > span,
	.form-input-file.gradient > span,
	.form-select.gradient > span,
	.button.gradient > span {
  position: relative;
  z-index: 1;
}

.button.gradient > span > p {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

/* Colors */

.button,
	.button.secondary:hover, .button.secondary.active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button p, .button i {
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.button:hover, .button.active,
	.button.secondary {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.button:hover p, .button:hover i,
	.button.secondary p, .button.secondary i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.button.secondary:hover p, .button.secondary:hover i,
	.button.secondary.active p, .button.secondary.active i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.form-input.gradient::before,
	.form-input-file.gradient::before,
	.form-select.gradient::before,
	.button.gradient::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.form-input.gradient,
	.form-input-file.gradient,
	.form-select.gradient,
	.button.gradient {
  background-color: transparent;
}

.button.gradient > span,
	.button.gradient.secondary:hover > span, 
	.button.gradient.secondary.active > span {
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0;
}

.form-input.gradient > span,
	.form-input-file.gradient > span,
	.form-select.gradient > span,
	.button.gradient:hover > span, .button.gradient.active > span,
	.button.gradient.secondary > span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.button.gradient > span p, .button.gradient > span i,
	.button.gradient.secondary:hover > span p, .button.gradient.secondary:hover > span i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.button.gradient:hover > span p, .button.gradient:hover > span i,
	.button.gradient.secondary > span p, .button.gradient.secondary > span i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Sizing */

.button.sm {
  height: var(--element-min-size);
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p3-lh);
}

.button.md {
  height: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  text-align: center;
  font-size: var(--text-p3-size);
  line-height: var(--text-h3-lh);
}

/* Shaping */

/* .cornered — rounded-corner (soft rounded corners) */

.button.cornered, .button.cornered::before,
	.button.air.cornered::before,
	.button.gradient.air.cornered::before,
	.button.rounded-corners , .button.rounded-corners::before {
  border-radius: var(--rounded-corner);
}

.button.cornered span,
	.button.rounded-corners span {
  border-radius: calc(var(--rounded-corner) - var(--border-button));
}

/* .squared / .square — rounded-base (square with subtle rounding) */

.button.squared, .button.squared::before,
	.button.square, .button.square::before,
	.button.air.squared::before, .button.air.square::before,
	.button.gradient.air.squared::before, .button.gradient.air.square::before,
	.button.rounded-corners-base , .button.rounded-corners-base::before {
  border-radius: var(--rounded-base);
}

.button.squared span, .button.square span,
	.button.rounded-corners-base span {
  border-radius: calc(var(--rounded-base) - var(--border-button));
}

/* .pill — rounded-full (explicit alias for default shape) */

.button.pill, .button.pill::before {
  border-radius: 9999px;
}

.button.pill span {
  border-radius: 9999px;
}

/* Spacing */

.button.dropdown > span,
	.button.distribute > span {
  justify-content: space-between;
}

.button-dropdown-gradient-alt.secondary.button.dropdown > span > i:first-child span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.button.dropdown > span > i:first-child > span > p {
  text-align: left;
  width: 100%;
}

.button.dropdown > span > i:first-child {
  width: var(--element-base-size);
  padding-right: 0px;
  text-align: left;
}

.button.dropdown > span > i:last-child {
  width: var(--element-base-size);
  padding-left: 0px;
  text-align: right;
}

.button.centered.dropdown > span > p {
  width: 100%;
  padding-left: var(--element-base-unit);
}

/* !SECTION COMBO BUTTON CLASSES ----------------------------------------- */

button.primary, button.secondary, a.button-primary, a.button-secondary {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

button.primary, a.button-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

button.primary:hover, a.button-primary:hover {
  background-color: rgb(var(--color-key) / 0.05);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

button.secondary, a.button-secondary {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

button.secondary:hover, a.button-secondary:hover {
  background-color: rgb(var(--color-key) / 0.95);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

a.button-primary-gradient, button.primary-gradient, a.button-secondary-gradient, button.secondary-gradient, button.icon-dropdown-gradient, button.icon-dropdown-gradient-alt,
	.button-dropdown-gradient-alt.secondary,
	a.chip-primary-gradient, a.chip-secondary-gradient,
	.button.icon.dropdown.gradient, .button.icon.dropdown.gradient.alt,
	.button.icon.dropdown.gradient.alt.secondary {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

a.button-primary-gradient span, button.primary-gradient span, a.button-icon-round-gradient > span, button.icon-round-gradient > span, a.chip-primary-gradient span,
	.button-icon.square.gradient > span,
	.button.icon.gradient > span {
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0;
}

a.button-primary-gradient:hover span, button.primary-gradient:hover span,
	a.button-icon-round-gradient:hover span, button.icon-round-gradient:hover span,
	button.icon-dropdown-gradient-alt:hover span,
	.button-dropdown-gradient-alt.secondary:hover span,
	a.chip-primary-gradient:hover span,
	.button-icon.square.gradient:hover span,
	.button.icon.gradient:hover span,
	.button.icon.dropdown.gradient.alt:hover span {
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

button.icon-dropdown-gradient,
	button.icon-dropdown-gradient-alt,
	.button.icon.dropdown.gradient, .button.icon.dropdown.gradient.alt {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.button-dropdown-gradient-alt.secondary span,
	.icon-dropdown-gradient-alt.secondary span,
	.button-dropdown-gradient-alt.secondary span {
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.icon-dropdown-gradient-alt.secondary span:hover, .icon-dropdown-gradient-alt.secondary.active span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  opacity: 0.95;
}

a.button-primary-gradient p, button.primary-gradient p, a.button-primary-gradient p i, button.primary-gradient p i,
	a.button-primary-gradient-alt p, button.primary-gradient-alt p,
	a.button-secondary-gradient-alt p, button.secondary-gradient-alt p,
	a.button-secondary-gradient:hover p, button.secondary-gradient:hover p, a.button-secondary-gradient:hover p i, button.secondary-gradient:hover p i,
	button.icon-dropdown-gradient p, button.icon-dropdown-gradient i,
	button.icon-dropdown-gradient.secondary:hover p, button.icon-dropdown:hover p, button.icon-dropdown-gradient.secondary:hover i,
	a.chip-primary-gradient p, a.chip-secondary-gradient:hover p,
	a.button-icon-round-gradient-alt p, button.icon-round-gradient-alt p,
	.button.gradient.alt p, .button.gradient.alt i,
	.button.icon.gradient.alt p, .button.icon.gradient.alt i,
	.button.icon.dropdown.gradient p, .button.icon.dropdown.gradient i,
	.button.icon.dropdown:hover p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

a.button-primary-gradient:hover p, button.primary-gradient:hover p,
	a.button-primary-gradient:hover p i, button.primary-gradient:hover p i,
	a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
	a.button-icon-round-gradient p, button.icon-round-gradient p,
	a.button-icon-round-gradient p i, button.icon-round-gradient p i,
	button.icon-dropdown-gradient:hover p, button.icon-dropdown-gradient:hover i,
	button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p,
	button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i,
	.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
	a.chip-primary-gradient:hover p, a.chip-secondary-gradient p,
	.button-icon.square.gradient p, .button-icon.square.gradient p i,
	.button.icon.gradient p, .button.icon.gradient p i,
	.button.icon.dropdown.gradient:hover p, .button.icon.dropdown.gradient:hover i,
	.button.icon.dropdown.gradient.alt p, .button.icon.dropdown.gradient.alt i,
	.button.icon.dropdown.gradient.alt.secondary p, .button.icon.dropdown.gradient.alt.secondary i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

nav a.button-icon-round-gradient p i, button.icon-round-gradient p i,
	nav a.button-icon-round-gradient p, button.icon-round-gradient p {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

a.button-secondary-gradient span, button.secondary-gradient span,
	button.icon-dropdown-gradient:hover span, button.icon-dropdown-gradient.secondary span,
	a.chip-secondary-gradient span,
	.button.icon.dropdown.gradient:hover span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

a.button-secondary-gradient:hover span, button.secondary-gradient:hover span, button.icon-dropdown-gradient.secondary:hover span, a.chip-secondary-gradient:hover span {
  --tw-bg-opacity: 0;
}

a.button-primary-gradient-alt, button.primary-gradient-alt,
	a.button-secondary-gradient-alt, button.secondary-gradient-alt,
	a.button-icon-round-gradient-alt, button.icon-round-gradient-alt,
	.button.icon.gradient.alt {
  background-color: transparent;
}

a.button-secondary-gradient-alt span, button.secondary-gradient-alt span {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.button-secondary-gradient-alt span:hover, button.secondary-gradient-alt span:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.button-secondary-gradient-alt::before, button.secondary-gradient-alt::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

a.button-icon-round-gradient-alt::before, button.icon-round-gradient-alt::before,
	.button.icon.gradient.alt::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  opacity: 0;
}

a.button-secondary-gradient-alt:hover::before, button.secondary-gradient-alt:hover::before {
  opacity: 1;
}

a.button-icon-round-gradient-alt:hover::before, button.icon-round-gradient-alt:hover::before,
	.button.icon.gradient.alt:hover::before {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

a.button-icon-round-gradient-alt:hover span, button.icon-round-gradient-alt:hover span,
	.button.icon.gradient.alt:hover span {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

/* ANCHOR Combo: .button.gradient.alt */

.button.gradient.alt {
  background-color: transparent;
}

.button.gradient.alt > span {
  --tw-ring-color: transparent;
}

.button.gradient.alt:hover > span {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button.gradient.alt::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  opacity: 1;
}

.button.gradient.alt:hover::before {
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

/* Combo: .button.gradient.alt.secondary */

.button.gradient.alt.secondary > span {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button.gradient.alt.secondary:hover > span {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.button.gradient.alt.secondary::before {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  opacity: calc(1 - var(--color-key-gradient-invert-opacity));
}

.button.gradient.alt.secondary:hover::before {
  opacity: 1;
}

a.button-icon-round, button.icon-round, button.icon-dropdown p,
	.button.icon {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

a.button-icon-round:hover, button.icon-round:hover,
	.button.icon:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

a.button-icon-round-gradient, button.icon-round-gradient,
	.button-icon.square.gradient,
	.button.icon.gradient {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 0) var(--tw-gradient-to-position);
}

a.button-icon-round-gradient:hover, button.icon-round-gradient:hover,
	.button-icon.square.gradient:hover,
	.button.icon.gradient:hover {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

button.filter-dropdown,
	.button.icon.filter {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

button.filter-dropdown:hover,
	.button.icon.filter:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key-end) / var(--tw-text-opacity));
}

button.filter-dropdown-gradient,
	.button.icon.filter.gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

button.filter-dropdown-gradient:hover,
	.button.icon.filter.gradient:hover {
  opacity: var(--color-key-gradient-active-opacity);
}

button.icon-dropdown,
	.button.icon.dropdown {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

button.icon-dropdown:hover,
	.button.icon.dropdown:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.button-dropdown-gradient-alt span,
	button.icon-dropdown-gradient-alt span,
	.button.icon.dropdown.gradient.alt span {
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: 1;
}

.dropdown-menu, .dropdown-menu.gradient, .dropdown-menu-gradient {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-secondary) / var(--tw-ring-opacity));
}

.dropdown-menu p.title, .dropdown-menu.gradient p.title, .dropdown-menu-gradient p.title {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.dropdown-menu button, .dropdown-menu a, .dropdown-menu.gradient button, .dropdown-menu.gradient a, .dropdown-menu.gradient li,
	.dropdown-menu-gradient button, .dropdown-menu-gradient a, .dropdown-menu-gradient li {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.dropdown-menu button:hover, .dropdown-menu a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.dropdown-menu.gradient button:hover, .dropdown-menu.gradient a:hover, .dropdown-menu.gradient li:hover,
	.dropdown-menu-gradient button:hover, .dropdown-menu-gradient a:hover, .dropdown-menu-gradient li:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  /* Use bg-key instead of gradient-key for solid color background */
}

.form-input label,
	.form-input-file label {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.form-input-dropdown.air span,
	.form-input.air input, .form-textarea.air textarea {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

.form-input-dropdown.air span:hover,
	.form-input.air input:hover, .form-input.air input:focus, .form-textarea.air textarea:hover, .form-textarea.air textarea:focus {
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-top-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.form-input, .form-input-combo, .form-textarea {
  background-color: transparent;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.form-input input, .form-input-file input, .form-input-combo input, .form-textarea textarea {
  background-color: transparent;
}

.form-input-dropdown span:hover,
	.form-input input:hover, .form-input input:focus, 
	.form-input-file input:hover, .form-input-file input:focus, 
	.form-input-combo input:hover, .form-input-combo input:focus, .form-textarea textarea:hover, .form-textarea textarea:focus {
  background-color: rgb(var(--color-invert) / var(--shader-base));
}

/* ---------------------------- */

/* ANCHOR Alerts				*/

/* ---------------------------- */

/* ---------------------------- */

/* ANCHOR Other Elements		*/

/* ---------------------------- */

.chip {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.chip:hover {
  background-color: rgb(var(--color-key) / 0.05);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.chip.secondary {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.chip.secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.chip.gradient, .chip-gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  background-clip: border-box;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.chip.gradient:hover, .chip-gradient:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

/* Menu Visuals */

nav.menu {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
}

nav.menu a p {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

nav.menu a:hover p {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

nav.menu a.nav-gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.toggle-menu-gradient i, .toggle-menu-gradient:link i, .toggle-menu-gradient:visited i, .toggle-menu-gradient:focus i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.toggle-menu-gradient:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

.toggle-menu-gradient:active i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

/* -------------------------------- */

/* Do not edit	*/

/* ---------------------------------*/

/* IMPORTANT Only change the CSS below if you changed the default screen values or if you want to change the theme color logic. */

/* -------------------------------------------------------------------- */

/* SECTION Global														*/

/* -------------------------------------------------------------------- */

/* ---------------------------- */

/* ANCHOR Text					*/

/* ---------------------------- */

h1, h2 ,h3 ,h4 ,h5, h6 {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add hover plus any additional default global styles. */
}

h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

p a {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

p a:link, p a:visited, p a:focus {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

p a:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add hover plus any additional default global styles. */
}

p a:active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

/* -------------------------------------------------------------------- */

/* !SECTION Global														*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme & Theme Transparent									*/

/* -------------------------------------------------------------------- */

/* Currently, no theme/theme-transparent overrides of DF Core/Component Visuals styles are needed here. */

/* -------------------------------------------------------------------- */

/* !SECTION Theme & Theme Transparent									*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Invert & Theme Invert Transparent						*/

/* -------------------------------------------------------------------- */

& .theme-invert, & .theme-invert-transparent,
	& .theme-alt-invert, & .theme-alt-invert-transparent {
  /* ---------------------------- */
  /* ANCHOR Buttons & Forms		*/
  /* ---------------------------- */
  a.button-primary-gradient span, button.primary-gradient span, a.button-icon-round-gradient span, button.icon-round-gradient span,
		.button-icon.square.gradient span,
		.button.icon.gradient span, .button.icon.square.gradient span {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  }
  a.button-primary-gradient span, button.primary-gradient span, a.button-icon-round-gradient span, button.icon-round-gradient span,
		.button-icon.square.gradient span,
		.button.icon.gradient span, .button.icon.square.gradient span {
    --tw-bg-opacity: 0;
  }
  a.button-primary-gradient:hover span, button.primary-gradient:hover span, a.button-icon-round-gradient:hover span, button.icon-round-gradient:hover span, button.icon-dropdown-gradient-alt:hover span,
		.button-dropdown-gradient-alt.secondary:hover span,
		.button-icon.square.gradient:hover span,
		.button.icon.gradient:hover span, .button.icon.square.gradient:hover span {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  }
  a.button-primary-gradient:hover span, button.primary-gradient:hover span, a.button-icon-round-gradient:hover span, button.icon-round-gradient:hover span, button.icon-dropdown-gradient-alt:hover span,
		.button-dropdown-gradient-alt.secondary:hover span,
		.button-icon.square.gradient:hover span,
		.button.icon.gradient:hover span, .button.icon.square.gradient:hover span {
    --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
  }
  a.button-primary-gradient p, button.primary-gradient p, a.button-primary-gradient p i, button.primary-gradient p i, 
		a.button-primary-gradient-alt p, button.primary-gradient-alt p, a.button-secondary-gradient-alt p, button.secondary-gradient-alt p, 
		a.button-secondary-gradient:hover p, button.secondary-gradient:hover p, a.button-secondary-gradient:hover p i, button.secondary-gradient:hover p i, 
		button.icon-dropdown-gradient.secondary:hover p, button.icon-dropdown:hover p, button.icon-dropdown-gradient.secondary:hover i, a.chip-secondary-gradient:hover p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  a.button-primary-gradient:hover p, button.primary-gradient:hover p, a.button-primary-gradient:hover p i, button.primary-gradient:hover p i, 
		a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
		a.button-icon-round-gradient p, button.icon-round-gradient p, button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i, 
		.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
		a.chip-secondary-gradient p,
		.button-icon.square.gradient p,
		.button.icon.gradient p, .button.icon.square.gradient p {
    /* Do not edit */
  }
  a.button-primary-gradient:hover p, button.primary-gradient:hover p, a.button-primary-gradient:hover p i, button.primary-gradient:hover p i, 
		a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
		a.button-icon-round-gradient p, button.icon-round-gradient p, button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i, 
		.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
		a.chip-secondary-gradient p,
		.button-icon.square.gradient p,
		.button.icon.gradient p, .button.icon.square.gradient p {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  a.button-primary-gradient:hover p, button.primary-gradient:hover p, a.button-primary-gradient:hover p i, button.primary-gradient:hover p i, 
		a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
		a.button-icon-round-gradient p, button.icon-round-gradient p, button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i, 
		.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
		a.chip-secondary-gradient p,
		.button-icon.square.gradient p,
		.button.icon.gradient p, .button.icon.square.gradient p {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  a.button-primary-gradient:hover p, button.primary-gradient:hover p, a.button-primary-gradient:hover p i, button.primary-gradient:hover p i, 
		a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
		a.button-icon-round-gradient p, button.icon-round-gradient p, button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i, 
		.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
		a.chip-secondary-gradient p,
		.button-icon.square.gradient p,
		.button.icon.gradient p, .button.icon.square.gradient p {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  a.button-primary-gradient:hover p, button.primary-gradient:hover p, a.button-primary-gradient:hover p i, button.primary-gradient:hover p i, 
		a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
		a.button-icon-round-gradient p, button.icon-round-gradient p, button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i, 
		.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
		a.chip-secondary-gradient p,
		.button-icon.square.gradient p,
		.button.icon.gradient p, .button.icon.square.gradient p {
    -webkit-background-clip: text;
            background-clip: text;
  }
  a.button-primary-gradient:hover p, button.primary-gradient:hover p, a.button-primary-gradient:hover p i, button.primary-gradient:hover p i, 
		a.button-secondary-gradient p, button.secondary-gradient p, a.button-secondary-gradient p i, button.secondary-gradient p i,
		a.button-icon-round-gradient p, button.icon-round-gradient p, button.icon-dropdown-gradient.secondary p, button.icon-dropdown-gradient-alt p, button.icon-dropdown-gradient.secondary i, button.icon-dropdown-gradient-alt i, 
		.button-dropdown-gradient-alt.secondary p, .button-dropdown-gradient-alt.secondary i,
		a.chip-secondary-gradient p,
		.button-icon.square.gradient p,
		.button.icon.gradient p, .button.icon.square.gradient p {
    color: transparent;
  }
  a.button-secondary-gradient span, button.secondary-gradient span, button.icon-dropdown-gradient.secondary span, a.chip-secondary-gradient span {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  }
  a.button-secondary-gradient span, button.secondary-gradient span, button.icon-dropdown-gradient.secondary span, a.chip-secondary-gradient span {
    --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
  }
  a.button-secondary-gradient:hover span, button.secondary-gradient:hover span, button.icon-dropdown-gradient.secondary:hover span, a.chip-secondary-gradient:hover span {
    --tw-bg-opacity: 0;
  }
  button.icon-dropdown-gradient-alt span,
		.button.icon.dropdown.gradient.alt span {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  }
  button.icon-dropdown-gradient-alt span,
		.button.icon.dropdown.gradient.alt span {
    --tw-bg-opacity: 1;
  }
  .form-input-dropdown span:hover,
		.form-input input:hover, .form-input input:focus, 
		.form-input-file input:hover, .form-input-file input:focus, 
		.form-input-combo input:hover, .form-input-combo input:focus {
    /* Do not edit */
    background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
    /* Gradient background Opacity Variant */
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Invert & Theme Invert Transparent						*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Key & Theme Key Gradient								*/

/* -------------------------------------------------------------------- */

/* Key themes invert the contrast model: components use bg-invert/		*/

/* text-key instead of bg-key/text-invert. Shared selector covers both	*/

/* theme-key (main palette) and theme-key-alt (alt palette via cascade).*/

& .theme-key, & .theme-key-gradient,
	& .theme-key-alt, & .theme-key-alt-gradient {
  /* ---------------------------- */
  /* ANCHOR Buttons				*/
  /* ---------------------------- */
  .button,
		.button.secondary:hover, .button.secondary.active {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  }
  .button,
		.button.secondary:hover, .button.secondary.active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  .button,
		.button.secondary:hover, .button.secondary.active {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  .button p, .button i {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  .button:hover, .button.active,
		.button.secondary {
    background-color: transparent;
  }
  .button:hover, .button.active,
		.button.secondary {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  .button:hover p, .button:hover i {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  button.primary, a.button-primary {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  }
  button.primary, a.button-primary {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  button.primary, a.button-primary {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  button.primary:hover, a.button-primary:hover {
    background-color: rgb(var(--color-invert) / 0.05);
  }
  button.primary:hover, a.button-primary:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  button.secondary, a.button-secondary {
    background-color: transparent;
  }
  button.secondary, a.button-secondary {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  button.secondary, a.button-secondary {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  button.secondary:hover, a.button-secondary:hover {
    background-color: rgb(var(--color-invert) / 0.95);
  }
  button.secondary:hover, a.button-secondary:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  /* ---------------------------- */
  /* ANCHOR Chips					*/
  /* ---------------------------- */
  .chip {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  }
  .chip {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  .chip {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
  .chip {
    --tw-ring-inset: inset;
  }
  .chip {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  .chip:hover {
    background-color: rgb(var(--color-invert) / 0.05);
  }
  .chip:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  .chip.secondary {
    background-color: transparent;
  }
  .chip.secondary {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  .chip.secondary {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--border-button) + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }
  .chip.secondary {
    --tw-ring-inset: inset;
  }
  .chip.secondary {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  .chip.secondary:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  }
  .chip.secondary:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  /* ---------------------------- */
  /* ANCHOR Forms					*/
  /* ---------------------------- */
  .form-input, .form-input-combo, .form-textarea {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  .form-input label, .form-input-file label {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  /* ---------------------------- */
  /* ANCHOR Icon & Dropdown		*/
  /* ---------------------------- */
  a.button-icon-round, button.icon-round, button.icon-dropdown p,
		.button.icon, .button.icon.dropdown p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  a.button-icon-round:hover, button.icon-round:hover,
		.button.icon:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  button.icon-dropdown,
		.button.icon.dropdown {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  button.icon-dropdown,
		.button.icon.dropdown {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }
  button.icon-dropdown:hover,
		.button.icon.dropdown:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  }
  button.icon-dropdown:hover,
		.button.icon.dropdown:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
  button.filter-dropdown,
		.button.icon.filter {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  button.filter-dropdown:hover,
		.button.icon.filter:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  button.filter-dropdown:hover,
		.button.icon.filter:hover {
    opacity: var(--color-key-gradient-active-opacity);
  }
  /* ---------------------------- */
  /* ANCHOR Other Elements		*/
  /* ---------------------------- */
  .block-callout {
    /* Do not edit */
  }
  .block-callout {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  .block-callout {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .block-callout {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  .block-callout {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Key & Theme Key Gradient								*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Alt Variable Cascade									*/

/* -------------------------------------------------------------------- */

/* Reassign core color variables so all DF components automatically		*/

/* use the alt palette within theme-alt containers via CSS cascade.		*/

& .theme-alt, & .theme-alt-transparent,
	& .theme-alt-invert, & .theme-alt-invert-transparent,
	& .theme-key-alt, & .theme-key-alt-gradient {
  --color-key: var(--qs-color-key-alt);
  --color-key-rgb: var(--qs-color-key-alt-rgb);
  --color-key-end: var(--qs-color-key-end-alt);
  --color-key-end-rgb: var(--qs-color-key-end-alt-rgb);
  --color-primary: var(--qs-color-primary-alt);
  --color-secondary: var(--qs-color-secondary-alt);
  --color-tertiary: var(--qs-color-tertiary-alt);
  --color-invert: var(--qs-color-invert-alt);
  --color-background: var(--qs-color-background-alt);
  --color-background-start: var(--qs-color-background-start-alt);
  --color-background-start-rgb: var(--qs-color-background-start-alt-rgb);
  --color-background-end: var(--qs-color-background-end-alt);
  --color-background-end-rgb: var(--qs-color-background-end-alt-rgb);
  --color-background-direction: var(--qs-color-background-alt-direction);
  --color-key-invert: var(--color-key-alt-invert);
  --color-key-invert-end: var(--color-key-end-alt-invert);
  --color-key-gradient-invert: var(--color-key-alt-gradient-invert);
  --color-key-gradient-invert-opacity: var(--color-key-alt-gradient-invert-opacity);
  --color-key-gradient-active-opacity: var(--color-key-alt-gradient-active-opacity);
  --color-disabled: var(--qs-color-disabled-alt);
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Alt Variable Cascade									*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Alt & Theme Alt Transparent							*/

/* -------------------------------------------------------------------- */

/* Currently, no theme-alt/theme-alt-transparent overrides are needed here. */

/* Alt palette colors cascade via the Theme Alt Variable Cascade above. */

/* -------------------------------------------------------------------- */

/* !SECTION Theme Alt & Theme Alt Transparent							*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Alt Invert & Theme Alt Invert Transparent				*/

/* -------------------------------------------------------------------- */

/* Currently, no separate theme-alt-invert overrides are needed here.	*/

/* Alt palette cascades via Variable Cascade; invert-specific gradient	*/

/* span behavior is handled by the extended Theme Invert selector above.*/

/* -------------------------------------------------------------------- */

/* !SECTION Theme Alt Invert & Theme Alt Invert Transparent				*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Key Alt & Theme Key Alt Gradient						*/

/* -------------------------------------------------------------------- */

/* Currently, no separate theme-key-alt overrides are needed here.		*/

/* Alt palette cascades via Variable Cascade; key contrast overrides		*/

/* are handled by the shared Theme Key selector above.					*/

/* -------------------------------------------------------------------- */

/* !SECTION Theme Key Alt & Theme Key Alt Gradient						*/

/* -------------------------------------------------------------------- */

/* -------------------------------- */

/* Do not edit 	*/

/* -------------------------------- */

/* --------------------------------------------------------------------	*/

/* SECTION UTILITIES - ALL SCREENS										*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

.mobile-none-block {
  display: none;
}

@media (min-width: 640px) {
  .mobile-none-block {
    display: block;
  }
}

.mobile-none-flex {
  display: none;
}

@media (min-width: 640px) {
  .mobile-none-flex {
    display: flex;
  }
}

.mobile-only-block {
  display: block;
}

@media (min-width: 640px) {
  .mobile-only-block {
    display: none;
  }
}

.mobile-1 {
  order: 1;
}

@media (min-width: 640px) {
  .mobile-1 {
    order: 0;
  }
}

.mobile-2 {
  order: 2;
}

@media (min-width: 640px) {
  .mobile-2 {
    order: 0;
  }
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION UTILITIES - ALL SCREENS										*/

/* --------------------------------------------------------------------	*/

/* TODO Re-Factor Adaptives to use TW Screen Prefixes */

/* --------------------------------------------------------------------	*/

/* SECTION BASE (<640px & undefined) Screens 										*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

header {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
  padding-top: var(--pad-header-base);
  padding-bottom: var(--pad-header-base);
}

.header-base {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.header-grid {
  grid-template-columns: repeat(var(--layout-cols-base), minmax(0, 1fr));
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

.header-flex nav {
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

footer {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
  padding-top: var(--pad-section-base);
  padding-bottom: var(--pad-section-base);
}

.footer-base {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.footer-grid {
  grid-template-columns: repeat(var(--layout-cols-base), minmax(0, 1fr));
  gap: var(--spacing-gutter-base);
}

.footer-flex nav {
  gap: var(--spacing-gutter-base);
}

.block-logo {
  height: var(--element-base-size);
  align-items: center;
}

section {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
  padding-top: var(--pad-section-base);
  padding-bottom: var(--pad-section-base);
}

.section-grid, .centerframe-grid, .grid-base, main.main-grid {
  grid-template-columns: repeat(var(--layout-cols-base), minmax(0, 1fr));
  gap: var(--spacing-gutter-base);
}

.grid-cols {
  grid-template-columns: repeat(var(--layout-cols-base), minmax(0, 1fr));
}

.section-flex, .centerframe-flex, .flex-base, main.main-flex {
  gap: var(--spacing-gutter-base);
}

.pt-gutter {
  padding-top: var(--spacing-gutter-base);
}

.gap-gutter {
  gap: var(--spacing-gutter-base);
}

.gap-y-gutterxx {
  row-gap: calc(var(--spacing-gutter-base) + var(--layout-unit) + var(--layout-unit));
}

.gap-section {
  gap: var(--gap-section-base);
}

.gap-article {
  gap: var(--gap-article-base);
}

.gap-block {
  gap: var(--spacing-block-base);
}

.gap-card {
  gap: var(--spacing-card-base);
}

.gap-sub {
  gap: var(--spacing-sub-base);
}

.space-y-card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
}

.section-grid.gap-2gutter, .centerframe-grid.gap-2gutter, .grid-base.gap-2gutter, .section-flex.gap-2gutter, .centerframe-flex.gap-2gutter, .flex-base.gap-2gutter, main.main-flex.gap-2gutter {
  gap: calc(2 * var(--spacing-gutter-base));
}

.gap-2gutter {
  gap: calc(2 * var(--spacing-gutter-base));
}

.gap-x-gutter {
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

.section-grid .block-xs, .centerframe-grid .block-xs, .grid-base .block-xs, main.main-grid .block-xs {
  grid-column: span var(--layout-cols-base-min) / span var(--layout-cols-min-base);
}

.section-grid .block-sm, .centerframe-grid .block-sm, .grid-base .block-sm, main.main-grid .block-sm {
  grid-column: span var(--layout-cols-base-half) / span var(--layout-cols-base-half);
}

.section-grid .block-smx, .centerframe-grid .block-smx, .grid-base .block-smx, main.main-grid .block-smx {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-md, .centerframe-grid .block-md, .grid-base .block-md, main.main-grid .block-md {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-mdx, .centerframe-grid .block-mdx, .grid-base .block-mdx, main.main-grid .block-mdx {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-lg, .centerframe-grid .block-lg, .grid-base .block-lg, main.main-grid .block-lg {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-lgx, .centerframe-grid .block-lgx, .grid-base .block-lgx, main.main-grid .block-lgx {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-xl, .centerframe-grid .block-xl, .grid-base .block-xl, main.main-grid .block-xl {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-xlx, .centerframe-grid .block-xlx, .grid-base .block-xlx, main.main-grid .block-xlx {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-2xl, .centerframe-grid .block-2xl, .grid-base .block-2xl, main.main-grid .block-2xl {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-2xlx, .centerframe-grid .block-2xlx, .grid-base .block-2xlx, main.main-grid .block-2xlx {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.section-grid .block-full, .centerframe-grid .block-full, .grid-base .block-full, main.main-grid .block-full {
  grid-column: 1 / -1;
}

.section-flex .block-xs, .centerframe-flex .block-xs, .flex-base .block-xs, main.main-flex .block-xs {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: calc(33.333333% - var(--spacing-gutter-base));
}

.section-flex .block-sm, .centerframe-flex .block-sm, .flex-base .block-sm, main.main-flex .block-sm {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: calc(50% - var(--spacing-gutter-base));
}

.section-flex .block-smx, .centerframe-flex .block-smx, .flex-base .block-smx, main.main-flex .block-smx {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-md, .centerframe-flex .block-md, .flex-base .block-md, main.main-flex .block-md {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-mdx, .centerframe-flex .block-mdx, .flex-base .block-mdx, main.main-flex .block-mdx {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-lg, .centerframe-flex .block-lg, .flex-base .block-lg, main.main-flex .block-lg {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-lgx, .centerframe-flex .block-lgx, .flex-base .block-lgx, main.main-flex .block-lgx {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-xl, .centerframe-flex .block-xl, .flex-base .block-xl, main.main-flex .block-xl {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-xlx, .centerframe-flex .block-xlx, .flex-base .block-xlx, main.main-flex .block-xlx {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-2xl, .centerframe-flex .block-2xl, .flex-base .block-2xl, main.main-flex .block-2xl {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-2xlx, .centerframe-flex .block-2xlx, .flex-base .block-2xlx, main.main-flex .block-2xlx {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.section-flex .block-full, .centerframe-flex .block-full, .flex-base .block-full, main.main-flex .block-full {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.rounded-card {
  border-radius: var(--rounded-article-base);
}

.rounded-t-card {
  border-top-left-radius: var(--rounded-article-base);
  border-top-right-radius: var(--rounded-article-base);
}

.card {
  border-radius: var(--rounded-article-base);
  padding: var(--pad-article-base);
}

.card.interactive {
  cursor: pointer;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.card.interactive:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: var(--shadow-base);
  --tw-shadow-colored: var(--shadow-base);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-base {
  border-radius: var(--rounded-article-base);
}

.block-base > :not([hidden]) ~ :not([hidden]), .block-xs > :not([hidden]) ~ :not([hidden]), .block-sm > :not([hidden]) ~ :not([hidden]), .block-smx > :not([hidden]) ~ :not([hidden]), .block-md > :not([hidden]) ~ :not([hidden]), .block-mdx > :not([hidden]) ~ :not([hidden]), .block-lg > :not([hidden]) ~ :not([hidden]), .block-lgx > :not([hidden]) ~ :not([hidden]), .block-xl > :not([hidden]) ~ :not([hidden]), .block-xlx > :not([hidden]) ~ :not([hidden]), .block-2xl > :not([hidden]) ~ :not([hidden]), .block-2xlx > :not([hidden]) ~ :not([hidden]), .block-full > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-block-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-block-base) * var(--tw-space-y-reverse));
}

.block-base.card > :not([hidden]) ~ :not([hidden]), .block-xs.card > :not([hidden]) ~ :not([hidden]), .block-sm.card > :not([hidden]) ~ :not([hidden]), .block-smx.card > :not([hidden]) ~ :not([hidden]), .block-md.card > :not([hidden]) ~ :not([hidden]), .block-mdx.card > :not([hidden]) ~ :not([hidden]), .block-lg.card > :not([hidden]) ~ :not([hidden]), .block-lgx.card > :not([hidden]) ~ :not([hidden]), .block-xl.card > :not([hidden]) ~ :not([hidden]), .block-xlx.card > :not([hidden]) ~ :not([hidden]), .block-2xl.card > :not([hidden]) ~ :not([hidden]), .block-2xlx.card > :not([hidden]) ~ :not([hidden]), .block-full.card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
}

.block-base.card-base > :not([hidden]) ~ :not([hidden]), .block-xs.card-base > :not([hidden]) ~ :not([hidden]), .block-sm.card-base > :not([hidden]) ~ :not([hidden]), .block-smx.card-base > :not([hidden]) ~ :not([hidden]), .block-md.card-base > :not([hidden]) ~ :not([hidden]), .block-mdx.card-base > :not([hidden]) ~ :not([hidden]), .block-lg.card-base > :not([hidden]) ~ :not([hidden]), .block-lgx.card-base > :not([hidden]) ~ :not([hidden]), .block-xl.card-base > :not([hidden]) ~ :not([hidden]), .block-xlx.card-base > :not([hidden]) ~ :not([hidden]), .block-2xl.card-base > :not([hidden]) ~ :not([hidden]), .block-2xlx.card-base > :not([hidden]) ~ :not([hidden]), .block-full.card-base > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.stack-y > :not([hidden]) ~ :not([hidden]), .block-base.stack-y > :not([hidden]) ~ :not([hidden]), .block-xs.stack-y > :not([hidden]) ~ :not([hidden]), .block-sm.stack-y > :not([hidden]) ~ :not([hidden]), .block-smx.stack-y > :not([hidden]) ~ :not([hidden]), .block-md.stack-y > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-y > :not([hidden]) ~ :not([hidden]), .block-lg.stack-y > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-y > :not([hidden]) ~ :not([hidden]), .block-xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
}

.stack-x > :not([hidden]) ~ :not([hidden]), .block-base.stack-x > :not([hidden]) ~ :not([hidden]), .block-xs.stack-x > :not([hidden]) ~ :not([hidden]), .block-sm.stack-x > :not([hidden]) ~ :not([hidden]), .block-smx.stack-x > :not([hidden]) ~ :not([hidden]), .block-md.stack-x > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-x > :not([hidden]) ~ :not([hidden]), .block-lg.stack-x > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-x > :not([hidden]) ~ :not([hidden]), .block-xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--spacing-card-base) * var(--tw-space-x-reverse));
  margin-left: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-x-reverse)));
}

.datarow, .formrow, .controlrow {
  -moz-column-gap: var(--gap-stack-base);
       column-gap: var(--gap-stack-base);
  row-gap: var(--spacing-sub-base);
}

.card .datarow, .card-base .datarow,
	.card .formrow, .card-base .formrow {
  -moz-column-gap: var(--spacing-card-base);
       column-gap: var(--spacing-card-base);
  row-gap: var(--spacing-sub-base);
}

.stack-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  -moz-column-gap: var(--gap-stack-base);
       column-gap: var(--gap-stack-base);
}

.stack-row-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: var(--gap-stack-base);
       column-gap: var(--gap-stack-base);
  row-gap: var(--gap-stack-base);
}

.stack-col, .stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack-base);
}

.card .stack-row, .card-base .stack-row {
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--spacing-card-base);
       column-gap: var(--spacing-card-base);
}

.card .stack-row-wrap, .card-base .stack-row-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: var(--spacing-card-base);
       column-gap: var(--spacing-card-base);
  row-gap: var(--gap-stack-base);
}

.card .stack-col, .card-base .stack-col, .card .stack, .card-base .stack {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-card-base);
}

.p-header-safeview {
  padding-top: max(var(--pad-header-base), env(safe-area-inset-top));
  padding-left: max(var(--spacing-shoulder-base), env(safe-area-inset-left));
  padding-right: max(var(--spacing-shoulder-base), env(safe-area-inset-right));
  padding-bottom: var(--pad-header-base);
}

.p-section-safeview {
  padding-top: max(var(--pad-section-base), env(safe-area-inset-top));
  padding-left: max(var(--spacing-shoulder-base), env(safe-area-inset-left));
  padding-right: max(var(--spacing-shoulder-base), env(safe-area-inset-right));
  padding-bottom: max(var(--pad-section-base), env(safe-area-inset-bottom));
}

.pb-section-safeview {
  padding-bottom: max(var(--pad-section-base), env(safe-area-inset-bottom));
}

.px-section-safeview, .px-section-safeview-base {
  padding-left: max(var(--spacing-shoulder-base), env(safe-area-inset-left));
  padding-right: max(var(--spacing-shoulder-base), env(safe-area-inset-right));
}

.mr-section-safeview {
  margin-right: max(var(--spacing-shoulder-base), env(safe-area-inset-right));
}

.p-header {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
  padding-top: var(--pad-header-base);
  padding-bottom: var(--pad-header-base);
}

.p-footer {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
  padding-top: var(--pad-section-base);
  padding-bottom: var(--pad-section-base);
}

.py-header {
  padding-top: var(--pad-header-base);
  padding-bottom: var(--pad-header-base);
}

.p-shoulder {
  padding: var(--spacing-shoulder-base);
}

.px-shoulder {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
}

.pl-shoulder {
  padding-left: var(--spacing-shoulder-base);
}

.pr-shoulder {
  padding-right: var(--spacing-shoulder-base);
}

.p-section {
  padding: var(--pad-section-base);
}

.py-section {
  padding-top: var(--pad-section-base);
  padding-bottom: var(--pad-section-base);
}

.p-article {
  padding: var(--pad-article-base);
}

.p-block {
  padding: var(--spacing-block-base);
}

.p-card {
  padding: var(--spacing-card-base);
}

.p-sub {
  padding: var(--spacing-sub-base);
}

.px-sub {
  padding-left: var(--spacing-sub-base);
  padding-right: var(--spacing-sub-base);
}

.py-sub {
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
}

.h-3row {
  height: calc(3 * var(--layout-row-height-base) + 2 * var(--spacing-gutter-base));
}

.h-5row {
  height: calc(5 * var(--layout-row-height-base) + 4 * var(--spacing-gutter-base));
}

.max-h-element {
  max-height: var(--element-max-h-base);
}

img.card > :not([hidden]) ~ :not([hidden]), video.card > :not([hidden]) ~ :not([hidden]), img.card-base > :not([hidden]) ~ :not([hidden]), video.card-base > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}

img.card, video.card, img.card-base, video.card-base {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  padding: 0px;
}

hgroup.display > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-display) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-display) * var(--tw-space-y-reverse));
}

hgroup.heading > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-heading) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-heading) * var(--tw-space-y-reverse));
}

hgroup.title > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-title) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-title) * var(--tw-space-y-reverse));
}

.hgroup-heading > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-heading) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-heading) * var(--tw-space-y-reverse));
}

.hgroup-title > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-title) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-title) * var(--tw-space-y-reverse));
}

/* ---------------------------- */

/* ANCHOR Adaptive Text			*/

/* ---------------------------- */

.text-d1 {
  font-size: var(--text-d1a-size) !important;
  line-height: var(--text-d1a-lh) !important;
}

.text-d2 {
  font-size: var(--text-d2a-size) !important;
  line-height: var(--text-d2a-lh) !important;
}

.text-d3 {
  font-size: var(--text-d3a-size) !important;
  line-height: var(--text-d3a-lh) !important;
}

.text-i1 {
  font-size: var(--text-i1a-size) !important;
  line-height: var(--text-i1a-lh) !important;
}

h1 {
  font-size: var(--text-h1a-size);
  line-height: var(--text-h1a-lh);
}

header nav a.nav, header nav a:link.nav, header nav a:visited {
  font-size: var(--text-nava-size);
  line-height: var(--text-nava-lh);
}

footer nav a.nav, footer nav a:link.nav, footer nav a:visited {
  font-size: var(--text-nava-size);
  line-height: var(--text-p2-lh);
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION BASE (<640px) Screens 										*/

/* --------------------------------------------------------------------	*/

/* --------------------------------------------------------------------	*/

/* SECTION SM (640px+) Screens											*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  header {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
    padding-top: var(--pad-header-sm);
    padding-bottom: var(--pad-header-sm);
  }

  .header-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .header-grid nav {
    grid-template-columns: repeat(var(--layout-cols-sm), minmax(0, 1fr));
    -moz-column-gap: var(--spacing-gutter-sm);
         column-gap: var(--spacing-gutter-sm);
  }

  .header-flex nav {
    -moz-column-gap: var(--spacing-gutter-sm);
         column-gap: var(--spacing-gutter-sm);
  }

  footer {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
    padding-top: var(--pad-section-sm);
    padding-bottom: var(--pad-section-sm);
  }

  .footer-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .footer-grid {
    grid-template-columns: repeat(var(--layout-cols-sm), minmax(0, 1fr));
    gap: var(--spacing-gutter-sm);
  }

  .footer-flex nav {
    gap: var(--spacing-gutter-sm);
  }

  section {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
    padding-top: var(--pad-section-sm);
    padding-bottom: var(--pad-section-sm);
  }

  .section-grid, .centerframe-grid, .grid-base, main.main-grid {
    grid-template-columns: repeat(var(--layout-cols-sm), minmax(0, 1fr));
    gap: var(--spacing-gutter-sm);
  }

  .grid-cols {
    grid-template-columns: repeat(var(--layout-cols-sm), minmax(0, 1fr));
  }

  .section-flex, .centerframe-flex, .flex-base, main.main-flex {
    gap: var(--spacing-gutter-sm);
  }

  .mt-gutter {
    margin-top: var(--spacing-gutter-sm);
  }

  .mb-gutter {
    margin-bottom: var(--spacing-gutter-sm);
  }

  .ml-gutter {
    margin-left: var(--spacing-gutter-sm);
  }

  .mr-gutter {
    margin-right: var(--spacing-gutter-sm);
  }

  .pt-gutter {
    padding-top: var(--spacing-gutter-sm);
  }

  .pb-gutter {
    padding-bottom: var(--spacing-gutter-sm);
  }

  .pl-gutter {
    padding-left: var(--spacing-gutter-sm);
  }

  .pr-gutter {
    padding-right: var(--spacing-gutter-sm);
  }

  .mt-article {
    margin-top: var(--pad-article-sm);
  }

  .mb-article {
    margin-bottom: var(--pad-article-sm);
  }

  .ml-article {
    margin-left: var(--pad-article-sm);
  }

  .mr-article {
    margin-right: var(--pad-article-sm);
  }

  .gap-form {
    gap: var(--gap-form-sm);
  }

  .gap-gutter {
    gap: var(--spacing-gutter-sm);
  }

  .gap-gutterx {
    gap: calc(var(--spacing-gutter-sm) + var(--layout-unit));
  }

  .gap-x-gutterx {
    -moz-column-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit));
  }

  .gap-y-gutterx {
    row-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit));
  }

  .gap-gutterxx {
    gap: calc(var(--spacing-gutter-sm) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-x-gutterxx {
    -moz-column-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-y-gutterxx {
    row-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-section {
    gap: var(--gap-section-sm);
  }

  .gap-article {
    gap: var(--gap-article-sm);
  }

  .gap-block {
    gap: var(--spacing-block-sm);
  }

  .gap-card {
    gap: var(--spacing-card-sm);
  }

  .gap-sub {
    gap: var(--spacing-sub-sm);
  }

  .gap-stack {
    gap: var(--gap-stack-sm);
  }

  .gap-y-stack {
    row-gap: var(--gap-stack-sm);
  }

  .gap-x-stack {
    -moz-column-gap: var(--gap-stack-sm);
         column-gap: var(--gap-stack-sm);
  }

  .space-y-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .space-x-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
  }

  .section-grid.gap-2gutter, .centerframe-grid.gap-2gutter, .grid-base.gap-2gutter, .section-flex.gap-2gutter, .centerframe-flex.gap-2gutter, .flex-base.gap-2gutter, main.main-flex.gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-sm));
  }

  .gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-sm));
  }

  .gap-x-gutter {
    -moz-column-gap: var(--spacing-gutter-sm);
         column-gap: var(--spacing-gutter-sm);
  }

  .gap-y-gutter {
    row-gap: var(--spacing-gutter-sm);
  }

  .gap-x-2gutter {
    -moz-column-gap: calc(2 * var(--spacing-gutter-sm));
         column-gap: calc(2 * var(--spacing-gutter-sm));
  }

  .gap-y-2gutter {
    row-gap: calc(2 * var(--spacing-gutter-sm));
  }

  .section-grid .block-xs, .centerframe-grid .block-xs, .grid-base .block-xs, main.main-grid .block-xs {
    grid-column: span var(--layout-cols-sm-min) / span var(--layout-cols-sm-min);
  }

  .section-grid .block-sm, .centerframe-grid .block-sm, .grid-base .block-sm, main.main-grid .block-sm {
    grid-column: span var(--layout-cols-sm-third) / span var(--layout-cols-sm-third);
  }

  .section-grid .block-smx, .centerframe-grid .block-smx, .grid-base .block-smx, main.main-grid .block-smx {
    grid-column: span var(--layout-cols-sm-half) / span var(--layout-cols-sm-half);
  }

  .section-grid .block-md, .centerframe-grid .block-md, .grid-base .block-md, main.main-grid .block-md {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-mdx, .centerframe-grid .block-mdx, .grid-base .block-mdx, main.main-grid .block-mdx {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-lg, .centerframe-grid .block-lg, .grid-base .block-lg, main.main-grid .block-lg {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-lgx, .centerframe-grid .block-lgx, .grid-base .block-lgx, main.main-grid .block-lgx {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-xl, .centerframe-grid .block-xl, .grid-base .block-xl, main.main-grid .block-xl {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-xlx, .centerframe-grid .block-xlx, .grid-base .block-xlx, main.main-grid .block-xlx {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-2xl, .centerframe-grid .block-2xl, .grid-base .block-2xl, main.main-grid .block-2xl {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-2xlx, .centerframe-grid .block-2xlx, .grid-base .block-2xlx, main.main-grid .block-2xlx {
    grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
  }

  .section-grid .block-full, .centerframe-grid .block-full, .grid-base .block-full, main.main-grid .block-full {
    grid-column: 1 / -1;
  }

  .section-flex .block-xs, .centerframe-flex .block-xs, .flex-base .block-xs, main.main-flex .block-xs {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(16.666666% - var(--spacing-gutter-sm));
  }

  .section-flex .block-sm, .centerframe-flex .block-sm, .flex-base .block-sm, main.main-flex .block-sm {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(33.333333% - var(--spacing-gutter-sm));
  }

  .section-flex .block-smx, .centerframe-flex .block-smx, .flex-base .block-smx, main.main-flex .block-smx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(50% - var(--spacing-gutter-sm));
  }

  .section-flex .block-md, .centerframe-flex .block-md, .flex-base .block-md, main.main-flex .block-md {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-mdx, .centerframe-flex .block-mdx, .flex-base .block-mdx, main.main-flex .block-mdx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-lg, .centerframe-flex .block-lg, .flex-base .block-lg, main.main-flex .block-lg {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-lgx, .centerframe-flex .block-lgx, .flex-base .block-lgx, main.main-flex .block-lgx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-xl, .centerframe-flex .block-xl, .flex-base .block-xl, main.main-flex .block-xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-xlx, .centerframe-flex .block-xlx, .flex-base .block-xlx, main.main-flex .block-xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-2xl, .centerframe-flex .block-2xl, .flex-base .block-2xl, main.main-flex .block-2xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-2xlx, .centerframe-flex .block-2xlx, .flex-base .block-2xlx, main.main-flex .block-2xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-full, .centerframe-flex .block-full, .flex-base .block-full, main.main-flex .block-full {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .rounded-card {
    border-radius: var(--rounded-article-sm);
  }

  .rounded-t-card {
    border-top-left-radius: var(--rounded-article-sm);
    border-top-right-radius: var(--rounded-article-sm);
  }

  .rounded-b-card {
    border-bottom-right-radius: var(--rounded-article-sm);
    border-bottom-left-radius: var(--rounded-article-sm);
  }

  .rounded-l-card {
    border-top-left-radius: var(--rounded-article-sm);
    border-bottom-left-radius: var(--rounded-article-sm);
  }

  .rounded-r-card {
    border-top-right-radius: var(--rounded-article-sm);
    border-bottom-right-radius: var(--rounded-article-sm);
  }

  .card {
    border-radius: var(--rounded-article-sm);
    padding: var(--pad-article-sm);
  }

  .card-base {
    border-radius: var(--rounded-article-sm);
  }

  .block-base > :not([hidden]) ~ :not([hidden]), .block-xs > :not([hidden]) ~ :not([hidden]), .block-sm > :not([hidden]) ~ :not([hidden]), .block-smx > :not([hidden]) ~ :not([hidden]), .block-md > :not([hidden]) ~ :not([hidden]), .block-mdx > :not([hidden]) ~ :not([hidden]), .block-lg > :not([hidden]) ~ :not([hidden]), .block-lgx > :not([hidden]) ~ :not([hidden]), .block-xl > :not([hidden]) ~ :not([hidden]), .block-xlx > :not([hidden]) ~ :not([hidden]), .block-2xl > :not([hidden]) ~ :not([hidden]), .block-2xlx > :not([hidden]) ~ :not([hidden]), .block-full > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
  }

  .block-base.card > :not([hidden]) ~ :not([hidden]), .block-xs.card > :not([hidden]) ~ :not([hidden]), .block-sm.card > :not([hidden]) ~ :not([hidden]), .block-smx.card > :not([hidden]) ~ :not([hidden]), .block-md.card > :not([hidden]) ~ :not([hidden]), .block-mdx.card > :not([hidden]) ~ :not([hidden]), .block-lg.card > :not([hidden]) ~ :not([hidden]), .block-lgx.card > :not([hidden]) ~ :not([hidden]), .block-xl.card > :not([hidden]) ~ :not([hidden]), .block-xlx.card > :not([hidden]) ~ :not([hidden]), .block-2xl.card > :not([hidden]) ~ :not([hidden]), .block-2xlx.card > :not([hidden]) ~ :not([hidden]), .block-full.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .stack-y > :not([hidden]) ~ :not([hidden]), .block-base.stack-y > :not([hidden]) ~ :not([hidden]), .block-xs.stack-y > :not([hidden]) ~ :not([hidden]), .block-sm.stack-y > :not([hidden]) ~ :not([hidden]), .block-smx.stack-y > :not([hidden]) ~ :not([hidden]), .block-md.stack-y > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-y > :not([hidden]) ~ :not([hidden]), .block-lg.stack-y > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-y > :not([hidden]) ~ :not([hidden]), .block-xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .stack-x > :not([hidden]) ~ :not([hidden]), .block-base.stack-x > :not([hidden]) ~ :not([hidden]), .block-xs.stack-x > :not([hidden]) ~ :not([hidden]), .block-sm.stack-x > :not([hidden]) ~ :not([hidden]), .block-smx.stack-x > :not([hidden]) ~ :not([hidden]), .block-md.stack-x > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-x > :not([hidden]) ~ :not([hidden]), .block-lg.stack-x > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-x > :not([hidden]) ~ :not([hidden]), .block-xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
  }

  .datarow, .formrow, .controlrow {
    gap: var(--gap-stack-sm);
  }

  .card .datarow, .card-base .datarow,
		.card .formrow, .card-base .formrow {
    gap: var(--spacing-card-sm);
  }

  .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--gap-stack-sm);
         column-gap: var(--gap-stack-sm);
  }

  .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--gap-stack-sm);
         column-gap: var(--gap-stack-sm);
    row-gap: var(--gap-stack-sm);
  }

  .stack-col, .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-sm);
  }

  .stack-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-form-sm);
  }

  .card .stack-row, .card-base .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--spacing-card-sm);
         column-gap: var(--spacing-card-sm);
  }

  .card .stack-row-wrap, .card-base .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--spacing-card-sm);
         column-gap: var(--spacing-card-sm);
    row-gap: var(--gap-stack-sm);
  }

  .card .stack-col, .card-base .stack-col, .card .stack, .card-base .stack {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-sm);
  }

  .pl-half-gutter {
    padding-left: calc(var(--spacing-gutter-sm) / 2);
  }

  .pr-half-gutter {
    padding-right: calc(var(--spacing-gutter-sm) / 2);
  }

  .ml-half-gutter {
    margin-left: calc(var(--spacing-gutter-sm) / 2);
  }

  .mr-half-gutter {
    margin-right: calc(var(--spacing-gutter-sm) / 2);
  }

  .max-w-half-breakpoint-less-gutter {
    max-width: calc((var(--screen-sm) / 2) - var(--spacing-gutter-sm));
  }

  .max-w-half-breakpoint {
    max-width: calc(var(--screen-sm) / 2);
  }

  .max-w-breakpoint {
    max-width: 640px;
  }

  .pr-col {
    padding-right: var(--layout-col-width-sm);
  }

  .pl-col {
    padding-left: var(--layout-col-width-sm);
  }

  .p-header-safeview {
    padding-top: max(var(--pad-header-sm), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    padding-bottom: var(--pad-header-sm);
  }

  .p-section-safeview {
    padding-top: max(var(--pad-section-sm), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .pt-section-safeview {
    padding-top: max(var(--pad-section-sm), env(safe-area-inset-top));
  }

  .pb-section-safeview {
    padding-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .pl-section-safeview {
    padding-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
  }

  .pr-section-safeview {
    padding-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
  }

  .px-section-safeview {
    padding-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
  }

  .py-section-safeview {
    padding-top: max(var(--pad-section-sm), env(safe-area-inset-top));
    padding-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .p-footer-safeview {
    padding-top: var(--pad-section-sm);
    padding-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .m-header-safeview {
    margin-top: max(var(--pad-header-sm), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    margin-bottom: var(--pad-header-sm);
  }

  .m-section-safeview {
    margin-top: max(var(--pad-section-sm), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .ml-section-safeview {
    margin-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
  }

  .mr-section-safeview {
    margin-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
  }

  .mt-section-safeview {
    margin-top: max(var(--pad-section-sm), env(safe-area-inset-top));
  }

  .mb-section-safeview {
    margin-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .mx-section-safeview {
    margin-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
  }

  .my-section-safeview {
    margin-top: max(var(--pad-section-sm), env(safe-area-inset-top));
    margin-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .m-footer-safeview {
    margin-top: var(--pad-section-sm);
    margin-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
  }

  .p-header {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
    padding-top: var(--pad-header-sm);
    padding-bottom: var(--pad-header-sm);
  }

  .p-footer {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
    padding-top: var(--pad-section-sm);
    padding-bottom: var(--pad-section-sm);
  }

  .px-header {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
  }

  .py-header {
    padding-top: var(--pad-header-sm);
    padding-bottom: var(--pad-header-sm);
  }

  .p-shoulder {
    padding: var(--spacing-shoulder-sm);
  }

  .px-shoulder {
    padding-left: var(--spacing-shoulder-sm);
    padding-right: var(--spacing-shoulder-sm);
  }

  .pl-shoulder {
    padding-left: var(--spacing-shoulder-sm);
  }

  .pr-shoulder {
    padding-right: var(--spacing-shoulder-sm);
  }

  .p-section {
    padding: var(--pad-section-sm);
  }

  .px-section {
    padding-left: var(--pad-section-sm);
    padding-right: var(--pad-section-sm);
  }

  .py-section {
    padding-top: var(--pad-section-sm);
    padding-bottom: var(--pad-section-sm);
  }

  .pt-section {
    padding-top: var(--pad-section-sm);
  }

  .pb-section {
    padding-bottom: var(--pad-section-sm);
  }

  .pl-section {
    padding-left: var(--pad-section-sm);
  }

  .pr-section {
    padding-right: var(--pad-section-sm);
  }

  .p-article {
    padding: var(--pad-article-sm);
  }

  .px-article {
    padding-left: var(--pad-article-sm);
    padding-right: var(--pad-article-sm);
  }

  .py-article {
    padding-top: var(--pad-article-sm);
    padding-bottom: var(--pad-article-sm);
  }

  .p-block {
    padding: var(--spacing-block-sm);
  }

  .px-block {
    padding-left: var(--spacing-block-sm);
    padding-right: var(--spacing-block-sm);
  }

  .py-block {
    padding-top: var(--spacing-block-sm);
    padding-bottom: var(--spacing-block-sm);
  }

  .p-card {
    padding: var(--spacing-card-sm);
  }

  .px-card {
    padding-left: var(--spacing-card-sm);
    padding-right: var(--spacing-card-sm);
  }

  .py-card {
    padding-top: var(--spacing-card-sm);
    padding-bottom: var(--spacing-card-sm);
  }

  .p-element {
    padding: var(--pad-element-sm);
  }

  .px-element {
    padding-left: var(--pad-element-sm);
    padding-right: var(--pad-element-sm);
  }

  .py-element {
    padding-top: var(--pad-element-sm);
    padding-bottom: var(--pad-element-sm);
  }

  .pl-element {
    padding-left: var(--pad-element-sm);
  }

  .pr-element {
    padding-right: var(--pad-element-sm);
  }

  .pt-element {
    padding-top: var(--pad-element-sm);
  }

  .pb-element {
    padding-bottom: var(--pad-element-sm);
  }

  .p-sub {
    padding: var(--spacing-sub-sm);
  }

  .pt-sub {
    padding-top: var(--spacing-sub-sm);
  }

  .pb-sub {
    padding-bottom: var(--spacing-sub-sm);
  }

  .pl-sub {
    padding-left: var(--spacing-sub-sm);
  }

  .pr-sub {
    padding-right: var(--spacing-sub-sm);
  }

  .px-sub {
    padding-left: var(--spacing-sub-sm);
    padding-right: var(--spacing-sub-sm);
  }

  .py-sub {
    padding-top: var(--spacing-sub-sm);
    padding-bottom: var(--spacing-sub-sm);
  }

  .p-base {
    padding: var(--pad-base-sm);
  }

  .px-base {
    padding-left: var(--pad-base-sm);
    padding-right: var(--pad-base-sm);
  }

  .py-base {
    padding-top: var(--pad-base-sm);
    padding-bottom: var(--pad-base-sm);
  }

  .h-1row {
    height: var(--layout-row-height-sm);
  }

  .h-2row {
    height: calc(2 * var(--layout-row-height-sm) + var(--spacing-gutter-sm));
  }

  .h-3row {
    height: calc(3 * var(--layout-row-height-sm) + 2 * var(--spacing-gutter-sm));
  }

  .h-4row {
    height: calc(4 * var(--layout-row-height-sm) + 3 * var(--spacing-gutter-sm));
  }

  .h-5row {
    height: calc(5 * var(--layout-row-height-sm) + 4 * var(--spacing-gutter-sm));
  }

  .h-6row {
    height: calc(6 * var(--layout-row-height-sm) + 5 * var(--spacing-gutter-sm));
  }

  .h-7row {
    height: calc(7 * var(--layout-row-height-sm) + 6 * var(--spacing-gutter-sm));
  }

  .h-8row {
    height: calc(8 * var(--layout-row-height-sm) + 7 * var(--spacing-gutter-sm));
  }

  .max-h-element {
    max-height: var(--element-max-h-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  .text-d1 {
    font-size: var(--text-d1a-size) !important;
    line-height: var(--text-d1a-lh) !important;
  }

  .text-d2 {
    font-size: var(--text-d2a-size) !important;
    line-height: var(--text-d2a-lh) !important;
  }

  .text-d3 {
    font-size: var(--text-d3a-size) !important;
    line-height: var(--text-d3a-lh) !important;
  }

  .text-i1 {
    font-size: var(--text-i1a-size) !important;
    line-height: var(--text-i1a-lh) !important;
  }

  h1 {
    font-size: var(--text-h1a-size);
    line-height: var(--text-h1a-lh);
  }

  header nav a.nav, header nav a:link.nav, header nav a:visited {
    font-size: var(--text-nava-size);
    line-height: var(--text-nava-lh);
  }

  footer nav a.nav, footer nav a:link.nav, footer nav a:visited {
    font-size: var(--text-nava-size);
    line-height: var(--text-p2-lh);
  }
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION SM (640px+) Screens											*/

/* --------------------------------------------------------------------	*/

/* --------------------------------------------------------------------	*/

/* SECTION MD (768px+) Screens 											*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  header {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
    padding-top: var(--pad-header-md);
    padding-bottom: var(--pad-header-md);
  }

  .header-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .header-grid nav {
    grid-template-columns: repeat(var(--layout-cols-md), minmax(0, 1fr));
    -moz-column-gap: var(--spacing-gutter-md);
         column-gap: var(--spacing-gutter-md);
  }

  .header-flex nav {
    -moz-column-gap: var(--spacing-gutter-md);
         column-gap: var(--spacing-gutter-md);
  }

  footer {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
    padding-top: var(--pad-section-md);
    padding-bottom: var(--pad-section-md);
  }

  .footer-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .footer-grid {
    grid-template-columns: repeat(var(--layout-cols-md), minmax(0, 1fr));
    gap: var(--spacing-gutter-md);
  }

  .footer-flex nav {
    gap: var(--spacing-gutter-md);
  }

  section {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
    padding-top: var(--pad-section-md);
    padding-bottom: var(--pad-section-md);
  }

  .section-grid, .centerframe-grid, .grid-base, main.main-grid {
    grid-template-columns: repeat(var(--layout-cols-md), minmax(0, 1fr));
    gap: var(--spacing-gutter-md);
  }

  .grid-cols {
    grid-template-columns: repeat(var(--layout-cols-md), minmax(0, 1fr));
  }

  .section-flex, .centerframe-flex, .flex-base, main.main-flex {
    gap: var(--spacing-gutter-md);
  }

  .mt-gutter {
    margin-top: var(--spacing-gutter-md);
  }

  .mb-gutter {
    margin-bottom: var(--spacing-gutter-md);
  }

  .ml-gutter {
    margin-left: var(--spacing-gutter-md);
  }

  .mr-gutter {
    margin-right: var(--spacing-gutter-md);
  }

  .pt-gutter {
    padding-top: var(--spacing-gutter-md);
  }

  .pb-gutter {
    padding-bottom: var(--spacing-gutter-md);
  }

  .pl-gutter {
    padding-left: var(--spacing-gutter-md);
  }

  .pr-gutter {
    padding-right: var(--spacing-gutter-md);
  }

  .mt-article {
    margin-top: var(--pad-article-md);
  }

  .mb-article {
    margin-bottom: var(--pad-article-md);
  }

  .ml-article {
    margin-left: var(--pad-article-md);
  }

  .mr-article {
    margin-right: var(--pad-article-md);
  }

  .gap-form {
    gap: var(--gap-form-md);
  }

  .gap-gutter {
    gap: var(--spacing-gutter-md);
  }

  .gap-gutterx {
    gap: calc(var(--spacing-gutter-md) + var(--layout-unit));
  }

  .gap-x-gutterx {
    -moz-column-gap: calc(var(--spacing-gutter-md) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-md) + var(--layout-unit));
  }

  .gap-y-gutterx {
    row-gap: calc(var(--spacing-gutter-md) + var(--layout-unit));
  }

  .gap-gutterxx {
    gap: calc(var(--spacing-gutter-md) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-x-gutterxx {
    -moz-column-gap: calc(var(--spacing-gutter-md) + var(--layout-unit) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-md) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-y-gutterxx {
    row-gap: calc(var(--spacing-gutter-md) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-section {
    gap: var(--gap-section-md);
  }

  .gap-article {
    gap: var(--gap-article-md);
  }

  .gap-block {
    gap: var(--spacing-block-md);
  }

  .gap-card {
    gap: var(--spacing-card-md);
  }

  .gap-sub {
    gap: var(--spacing-sub-md);
  }

  .gap-stack {
    gap: var(--gap-stack-md);
  }

  .gap-y-stack {
    row-gap: var(--gap-stack-md);
  }

  .gap-x-stack {
    -moz-column-gap: var(--gap-stack-md);
         column-gap: var(--gap-stack-md);
  }

  .space-y-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .space-x-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
  }

  .section-grid.gap-2gutter, .centerframe-grid.gap-2gutter, .grid-base.gap-2gutter, .section-flex.gap-2gutter, .centerframe-flex.gap-2gutter, .flex-base.gap-2gutter, main.main-flex.gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-md));
  }

  .gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-md));
  }

  .gap-x-gutter {
    -moz-column-gap: var(--spacing-gutter-md);
         column-gap: var(--spacing-gutter-md);
  }

  .gap-y-gutter {
    row-gap: var(--spacing-gutter-md);
  }

  .gap-x-2gutter {
    -moz-column-gap: calc(2 * var(--spacing-gutter-md));
         column-gap: calc(2 * var(--spacing-gutter-md));
  }

  .gap-y-2gutter {
    row-gap: calc(2 * var(--spacing-gutter-md));
  }

  .section-grid .block-xs, .centerframe-grid .block-xs, .grid-base .block-xs, main.main-grid .block-xs {
    grid-column: span var(--layout-cols-md-min) / span var(--layout-cols-md-min);
  }

  .section-grid .block-sm, .centerframe-grid .block-sm, .grid-base .block-sm, main.main-grid .block-sm {
    grid-column: span var(--layout-cols-md-third) / span var(--layout-cols-md-third);
  }

  .section-grid .block-smx, .centerframe-grid .block-smx, .grid-base .block-smx, main.main-grid .block-smx {
    grid-column: span var(--layout-cols-md-half) / span var(--layout-cols-md-half);
  }

  .section-grid .block-md, .centerframe-grid .block-md, .grid-base .block-md, main.main-grid .block-md {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-mdx, .centerframe-grid .block-mdx, .grid-base .block-mdx, main.main-grid .block-mdx {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-lg, .centerframe-grid .block-lg, .grid-base .block-lg, main.main-grid .block-lg {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-lgx, .centerframe-grid .block-lgx, .grid-base .block-lgx, main.main-grid .block-lgx {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-xl, .centerframe-grid .block-xl, .grid-base .block-xl, main.main-grid .block-xl {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-xlx, .centerframe-grid .block-xlx, .grid-base .block-xlx, main.main-grid .block-xlx {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-2xl, .centerframe-grid .block-2xl, .grid-base .block-2xl, main.main-grid .block-2xl {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-2xlx, .centerframe-grid .block-2xlx, .grid-base .block-2xlx, main.main-grid .block-2xlx {
    grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
  }

  .section-grid .block-full, .centerframe-grid .block-full, .grid-base .block-full, main.main-grid .block-full {
    grid-column: 1 / -1;
  }

  .section-flex .block-xs, .centerframe-flex .block-xs, .flex-base .block-xs, main.main-flex .block-xs {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(16.666666% - var(--spacing-gutter-md));
  }

  .section-flex .block-sm, .centerframe-flex .block-sm, .flex-base .block-sm, main.main-flex .block-sm {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(33.333333% - var(--spacing-gutter-md));
  }

  .section-flex .block-smx, .centerframe-flex .block-smx, .flex-base .block-smx, main.main-flex .block-smx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(50% - var(--spacing-gutter-md));
  }

  .section-flex .block-md, .centerframe-flex .block-md, .flex-base .block-md, main.main-flex .block-md {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-mdx, .centerframe-flex .block-mdx, .flex-base .block-mdx, main.main-flex .block-mdx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-lg, .centerframe-flex .block-lg, .flex-base .block-lg, main.main-flex .block-lg {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-lgx, .centerframe-flex .block-lgx, .flex-base .block-lgx, main.main-flex .block-lgx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-xl, .centerframe-flex .block-xl, .flex-base .block-xl, main.main-flex .block-xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-xlx, .centerframe-flex .block-xlx, .flex-base .block-xlx, main.main-flex .block-xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-2xl, .centerframe-flex .block-2xl, .flex-base .block-2xl, main.main-flex .block-2xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-2xlx, .centerframe-flex .block-2xlx, .flex-base .block-2xlx, main.main-flex .block-2xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .section-flex .block-full, .centerframe-flex .block-full, .flex-base .block-full, main.main-flex .block-full {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .rounded-card {
    border-radius: var(--rounded-article-md);
  }

  .rounded-t-card {
    border-top-left-radius: var(--rounded-article-md);
    border-top-right-radius: var(--rounded-article-md);
  }

  .rounded-b-card {
    border-bottom-right-radius: var(--rounded-article-md);
    border-bottom-left-radius: var(--rounded-article-md);
  }

  .rounded-l-card {
    border-top-left-radius: var(--rounded-article-md);
    border-bottom-left-radius: var(--rounded-article-md);
  }

  .rounded-r-card {
    border-top-right-radius: var(--rounded-article-md);
    border-bottom-right-radius: var(--rounded-article-md);
  }

  .card {
    border-radius: var(--rounded-article-md);
    padding: var(--pad-article-md);
  }

  .card-base {
    border-radius: var(--rounded-article-md);
  }

  .block-base > :not([hidden]) ~ :not([hidden]), .block-xs > :not([hidden]) ~ :not([hidden]), .block-sm > :not([hidden]) ~ :not([hidden]), .block-smx > :not([hidden]) ~ :not([hidden]), .block-md > :not([hidden]) ~ :not([hidden]), .block-mdx > :not([hidden]) ~ :not([hidden]), .block-lg > :not([hidden]) ~ :not([hidden]), .block-lgx > :not([hidden]) ~ :not([hidden]), .block-xl > :not([hidden]) ~ :not([hidden]), .block-xlx > :not([hidden]) ~ :not([hidden]), .block-2xl > :not([hidden]) ~ :not([hidden]), .block-2xlx > :not([hidden]) ~ :not([hidden]), .block-full > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
  }

  .block-base.card > :not([hidden]) ~ :not([hidden]), .block-xs.card > :not([hidden]) ~ :not([hidden]), .block-sm.card > :not([hidden]) ~ :not([hidden]), .block-smx.card > :not([hidden]) ~ :not([hidden]), .block-md.card > :not([hidden]) ~ :not([hidden]), .block-mdx.card > :not([hidden]) ~ :not([hidden]), .block-lg.card > :not([hidden]) ~ :not([hidden]), .block-lgx.card > :not([hidden]) ~ :not([hidden]), .block-xl.card > :not([hidden]) ~ :not([hidden]), .block-xlx.card > :not([hidden]) ~ :not([hidden]), .block-2xl.card > :not([hidden]) ~ :not([hidden]), .block-2xlx.card > :not([hidden]) ~ :not([hidden]), .block-full.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .stack-y > :not([hidden]) ~ :not([hidden]), .block-base.stack-y > :not([hidden]) ~ :not([hidden]), .block-xs.stack-y > :not([hidden]) ~ :not([hidden]), .block-sm.stack-y > :not([hidden]) ~ :not([hidden]), .block-smx.stack-y > :not([hidden]) ~ :not([hidden]), .block-md.stack-y > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-y > :not([hidden]) ~ :not([hidden]), .block-lg.stack-y > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-y > :not([hidden]) ~ :not([hidden]), .block-xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .stack-x > :not([hidden]) ~ :not([hidden]), .block-base.stack-x > :not([hidden]) ~ :not([hidden]), .block-xs.stack-x > :not([hidden]) ~ :not([hidden]), .block-sm.stack-x > :not([hidden]) ~ :not([hidden]), .block-smx.stack-x > :not([hidden]) ~ :not([hidden]), .block-md.stack-x > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-x > :not([hidden]) ~ :not([hidden]), .block-lg.stack-x > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-x > :not([hidden]) ~ :not([hidden]), .block-xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
  }

  .datarow, .formrow, .controlrow {
    gap: var(--gap-stack-md);
  }

  .card .datarow, .card-base .datarow,
		.card .formrow, .card-base .formrow {
    gap: var(--spacing-card-md);
  }

  .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--gap-stack-md);
         column-gap: var(--gap-stack-md);
  }

  .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--gap-stack-md);
         column-gap: var(--gap-stack-md);
    row-gap: var(--gap-stack-md);
  }

  .stack-col, .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-md);
  }

  .stack-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-form-md);
  }

  .card .stack-row, .card-base .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--spacing-card-md);
         column-gap: var(--spacing-card-md);
  }

  .card .stack-row-wrap, .card-base .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--spacing-card-md);
         column-gap: var(--spacing-card-md);
    row-gap: var(--gap-stack-md);
  }

  .card .stack-col, .card-base .stack-col, .card .stack, .card-base .stack {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-md);
  }

  .pl-half-gutter {
    padding-left: calc(var(--spacing-gutter-md) / 2);
  }

  .pr-half-gutter {
    padding-right: calc(var(--spacing-gutter-md) / 2);
  }

  .ml-half-gutter {
    margin-left: calc(var(--spacing-gutter-md) / 2);
  }

  .mr-half-gutter {
    margin-right: calc(var(--spacing-gutter-md) / 2);
  }

  .max-w-half-breakpoint-less-gutter {
    max-width: calc((var(--screen-md) / 2) - var(--spacing-gutter-md));
  }

  .max-w-half-breakpoint {
    max-width: calc(var(--screen-md) / 2);
  }

  .max-w-breakpoint {
    max-width: 768px;
  }

  .pr-col {
    padding-right: var(--layout-col-width-md);
  }

  .pl-col {
    padding-left: var(--layout-col-width-md);
  }

  .p-header-safeview {
    padding-top: max(var(--pad-header-md), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    padding-bottom: var(--pad-header-md);
  }

  .p-section-safeview {
    padding-top: max(var(--pad-section-md), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .pt-section-safeview {
    padding-top: max(var(--pad-section-md), env(safe-area-inset-top));
  }

  .pb-section-safeview {
    padding-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .pl-section-safeview {
    padding-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
  }

  .pr-section-safeview {
    padding-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
  }

  .px-section-safeview {
    padding-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
  }

  .py-section-safeview {
    padding-top: max(var(--pad-section-md), env(safe-area-inset-top));
    padding-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .p-footer-safeview {
    padding-top: var(--pad-section-md);
    padding-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .m-header-safeview {
    margin-top: max(var(--pad-header-md), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    margin-bottom: var(--pad-header-md);
  }

  .m-section-safeview {
    margin-top: max(var(--pad-section-md), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .ml-section-safeview {
    margin-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
  }

  .mr-section-safeview {
    margin-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
  }

  .mt-section-safeview {
    margin-top: max(var(--pad-section-md), env(safe-area-inset-top));
  }

  .mb-section-safeview {
    margin-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .mx-section-safeview {
    margin-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
  }

  .my-section-safeview {
    margin-top: max(var(--pad-section-md), env(safe-area-inset-top));
    margin-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .m-footer-safeview {
    margin-top: var(--pad-section-md);
    margin-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
  }

  .p-header {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
    padding-top: var(--pad-header-md);
    padding-bottom: var(--pad-header-md);
  }

  .p-footer {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
    padding-top: var(--pad-section-md);
    padding-bottom: var(--pad-section-md);
  }

  .px-header {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
  }

  .py-header {
    padding-top: var(--pad-header-md);
    padding-bottom: var(--pad-header-md);
  }

  .p-shoulder {
    padding: var(--spacing-shoulder-md);
  }

  .px-shoulder {
    padding-left: var(--spacing-shoulder-md);
    padding-right: var(--spacing-shoulder-md);
  }

  .pl-shoulder {
    padding-left: var(--spacing-shoulder-md);
  }

  .pr-shoulder {
    padding-right: var(--spacing-shoulder-md);
  }

  .p-section {
    padding: var(--pad-section-md);
  }

  .px-section {
    padding-left: var(--pad-section-md);
    padding-right: var(--pad-section-md);
  }

  .py-section {
    padding-top: var(--pad-section-md);
    padding-bottom: var(--pad-section-md);
  }

  .pt-section {
    padding-top: var(--pad-section-md);
  }

  .pb-section {
    padding-bottom: var(--pad-section-md);
  }

  .pl-section {
    padding-left: var(--pad-section-md);
  }

  .pr-section {
    padding-right: var(--pad-section-md);
  }

  .p-article {
    padding: var(--pad-article-md);
  }

  .px-article {
    padding-left: var(--pad-article-md);
    padding-right: var(--pad-article-md);
  }

  .py-article {
    padding-top: var(--pad-article-md);
    padding-bottom: var(--pad-article-md);
  }

  .p-block {
    padding: var(--spacing-block-md);
  }

  .px-block {
    padding-left: var(--spacing-block-md);
    padding-right: var(--spacing-block-md);
  }

  .py-block {
    padding-top: var(--spacing-block-md);
    padding-bottom: var(--spacing-block-md);
  }

  .p-card {
    padding: var(--spacing-card-md);
  }

  .px-card {
    padding-left: var(--spacing-card-md);
    padding-right: var(--spacing-card-md);
  }

  .py-card {
    padding-top: var(--spacing-card-md);
    padding-bottom: var(--spacing-card-md);
  }

  .p-element {
    padding: var(--pad-element-md);
  }

  .px-element {
    padding-left: var(--pad-element-md);
    padding-right: var(--pad-element-md);
  }

  .py-element {
    padding-top: var(--pad-element-md);
    padding-bottom: var(--pad-element-md);
  }

  .pl-element {
    padding-left: var(--pad-element-md);
  }

  .pr-element {
    padding-right: var(--pad-element-md);
  }

  .pt-element {
    padding-top: var(--pad-element-md);
  }

  .pb-element {
    padding-bottom: var(--pad-element-md);
  }

  .p-sub {
    padding: var(--spacing-sub-md);
  }

  .pt-sub {
    padding-top: var(--spacing-sub-md);
  }

  .pb-sub {
    padding-bottom: var(--spacing-sub-md);
  }

  .pl-sub {
    padding-left: var(--spacing-sub-md);
  }

  .pr-sub {
    padding-right: var(--spacing-sub-md);
  }

  .px-sub {
    padding-left: var(--spacing-sub-md);
    padding-right: var(--spacing-sub-md);
  }

  .py-sub {
    padding-top: var(--spacing-sub-md);
    padding-bottom: var(--spacing-sub-md);
  }

  .p-base {
    padding: var(--pad-base-md);
  }

  .px-base {
    padding-left: var(--pad-base-md);
    padding-right: var(--pad-base-md);
  }

  .py-base {
    padding-top: var(--pad-base-md);
    padding-bottom: var(--pad-base-md);
  }

  .h-1row {
    height: var(--layout-row-height-md);
  }

  .h-2row {
    height: calc(2 * var(--layout-row-height-md) + var(--spacing-gutter-md));
  }

  .h-3row {
    height: calc(3 * var(--layout-row-height-md) + 2 * var(--spacing-gutter-md));
  }

  .h-4row {
    height: calc(4 * var(--layout-row-height-md) + 3 * var(--spacing-gutter-md));
  }

  .h-5row {
    height: calc(5 * var(--layout-row-height-md) + 4 * var(--spacing-gutter-md));
  }

  .h-6row {
    height: calc(6 * var(--layout-row-height-md) + 5 * var(--spacing-gutter-md));
  }

  .h-7row {
    height: calc(7 * var(--layout-row-height-md) + 6 * var(--spacing-gutter-md));
  }

  .h-8row {
    height: calc(8 * var(--layout-row-height-md) + 7 * var(--spacing-gutter-md));
  }

  .max-h-element {
    max-height: var(--element-max-h-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  .text-d1 {
    font-size: var(--text-d1a-size) !important;
    line-height: var(--text-d1a-lh) !important;
  }

  .text-d2 {
    font-size: var(--text-d2a-size) !important;
    line-height: var(--text-d2a-lh) !important;
  }

  .text-d3 {
    font-size: var(--text-d3a-size) !important;
    line-height: var(--text-d3a-lh) !important;
  }

  .text-i1 {
    font-size: var(--text-i1a-size) !important;
    line-height: var(--text-i1a-lh) !important;
  }

  h1 {
    font-size: var(--text-h1a-size);
    line-height: var(--text-h1a-lh);
  }

  header nav a.nav, header nav a:link.nav, header nav a:visited {
    font-size: var(--text-nava-size);
    line-height: var(--text-nava-lh);
  }

  footer nav a.nav, footer nav a:link.nav, footer nav a:visited {
    font-size: var(--text-nava-size);
    line-height: var(--text-p2-lh);
  }
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION MD (768px+) Screens 										*/

/* --------------------------------------------------------------------	*/

/* --------------------------------------------------------------------	*/

/* SECTION LG (960px+) Screens											*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  header {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
    padding-top: var(--pad-header-lg);
    padding-bottom: var(--pad-header-lg);
  }

  .header-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .header-grid nav {
    grid-template-columns: repeat(var(--layout-cols-lg), minmax(0, 1fr));
    -moz-column-gap: var(--spacing-gutter-lg);
         column-gap: var(--spacing-gutter-lg);
  }

  .header-flex nav {
    -moz-column-gap: var(--spacing-gutter-lg);
         column-gap: var(--spacing-gutter-lg);
  }

  footer {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
    padding-top: var(--pad-section-lg);
    padding-bottom: var(--pad-section-lg);
  }

  .footer-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .footer-grid {
    grid-template-columns: repeat(var(--layout-cols-lg), minmax(0, 1fr));
    gap: var(--spacing-gutter-lg);
  }

  .footer-flex nav {
    gap: var(--spacing-gutter-lg);
  }

  section {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
    padding-top: var(--pad-section-lg);
    padding-bottom: var(--pad-section-lg);
  }

  .section-grid, .centerframe-grid, .grid-base, main.main-grid {
    grid-template-columns: repeat(var(--layout-cols-lg), minmax(0, 1fr));
    gap: var(--spacing-gutter-lg);
  }

  .grid-cols {
    grid-template-columns: repeat(var(--layout-cols-lg), minmax(0, 1fr));
  }

  .section-flex, .centerframe-flex, .flex-base, main.main-flex {
    gap: var(--spacing-gutter-lg);
  }

  .mt-gutter {
    margin-top: var(--spacing-gutter-lg);
  }

  .mb-gutter {
    margin-bottom: var(--spacing-gutter-lg);
  }

  .ml-gutter {
    margin-left: var(--spacing-gutter-lg);
  }

  .mr-gutter {
    margin-right: var(--spacing-gutter-lg);
  }

  .pt-gutter {
    padding-top: var(--spacing-gutter-lg);
  }

  .pb-gutter {
    padding-bottom: var(--spacing-gutter-lg);
  }

  .pl-gutter {
    padding-left: var(--spacing-gutter-lg);
  }

  .pr-gutter {
    padding-right: var(--spacing-gutter-lg);
  }

  .mt-article {
    margin-top: var(--pad-article-lg);
  }

  .mb-article {
    margin-bottom: var(--pad-article-lg);
  }

  .ml-article {
    margin-left: var(--pad-article-lg);
  }

  .mr-article {
    margin-right: var(--pad-article-lg);
  }

  .gap-form {
    gap: var(--gap-form-lg);
  }

  .gap-gutter {
    gap: var(--spacing-gutter-lg);
  }

  .gap-gutterx {
    gap: calc(var(--spacing-gutter-lg) + var(--layout-unit));
  }

  .gap-x-gutterx {
    -moz-column-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit));
  }

  .gap-y-gutterx {
    row-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit));
  }

  .gap-gutterxx {
    gap: calc(var(--spacing-gutter-lg) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-x-gutterxx {
    -moz-column-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-y-gutterxx {
    row-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-section {
    gap: var(--gap-section-lg);
  }

  .gap-article {
    gap: var(--gap-article-lg);
  }

  .gap-block {
    gap: var(--spacing-block-lg);
  }

  .gap-card {
    gap: var(--spacing-card-lg);
  }

  .gap-sub {
    gap: var(--spacing-sub-lg);
  }

  .gap-stack {
    gap: var(--gap-stack-lg);
  }

  .gap-y-stack {
    row-gap: var(--gap-stack-lg);
  }

  .gap-x-stack {
    -moz-column-gap: var(--gap-stack-lg);
         column-gap: var(--gap-stack-lg);
  }

  .space-y-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .space-x-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
  }

  .section-grid.gap-2gutter, .centerframe-grid.gap-2gutter, .grid-base.gap-2gutter, .section-flex.gap-2gutter, .centerframe-flex.gap-2gutter, .flex-base.gap-2gutter, main.main-flex.gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-lg));
  }

  .gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-lg));
  }

  .gap-x-gutter {
    -moz-column-gap: var(--spacing-gutter-lg);
         column-gap: var(--spacing-gutter-lg);
  }

  .gap-y-gutter {
    row-gap: var(--spacing-gutter-lg);
  }

  .gap-x-2gutter {
    -moz-column-gap: calc(2 * var(--spacing-gutter-lg));
         column-gap: calc(2 * var(--spacing-gutter-lg));
  }

  .gap-y-2gutter {
    row-gap: calc(2 * var(--spacing-gutter-lg));
  }

  .section-grid .block-xs, .centerframe-grid .block-xs, .grid-base .block-xs, main.main-grid .block-xs {
    grid-column: span var(--layout-cols-lg-min) / span var(--layout-cols-lg-min);
  }

  .section-grid .block-sm, .centerframe-grid .block-sm, .grid-base .block-sm, main.main-grid .block-sm {
    grid-column: span var(--layout-cols-lg-sixth) / span var(--layout-cols-lg-sixth);
  }

  .section-grid .block-smx, .centerframe-grid .block-smx, .grid-base .block-smx, main.main-grid .block-smx {
    grid-column: span var(--layout-cols-lg-quarter) / span var(--layout-cols-lg-quarter);
  }

  .section-grid .block-md, .centerframe-grid .block-md, .grid-base .block-md, main.main-grid .block-md {
    grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
  }

  .section-grid .block-mdx, .centerframe-grid .block-mdx, .grid-base .block-mdx, main.main-grid .block-mdx {
    grid-column: span var(--layout-cols-lg-fivetwelfth) / span var(--layout-cols-lg-fivetwelfth);
  }

  .section-grid .block-lg, .centerframe-grid .block-lg, .grid-base .block-lg, main.main-grid .block-lg {
    grid-column: span var(--layout-cols-lg-half) / span var(--layout-cols-lg-half);
  }

  .section-grid .block-lgx, .centerframe-grid .block-lgx, .grid-base .block-lgx, main.main-grid .block-lgx {
    grid-column: span var(--layout-cols-lg-seventwelfth) / span var(--layout-cols-lg-seventwelfth);
  }

  .section-grid .block-xl, .centerframe-grid .block-xl, .grid-base .block-xl, main.main-grid .block-xl {
    grid-column: span var(--layout-cols-lg-twothird) / span var(--layout-cols-lg-twothird);
  }

  .section-grid .block-xlx, .centerframe-grid .block-xlx, .grid-base .block-xlx, main.main-grid .block-xlx {
    grid-column: span var(--layout-cols-lg-threefourth) / span var(--layout-cols-lg-threefourth);
  }

  .section-grid .block-2xl, .centerframe-grid .block-2xl, .grid-base .block-2xl, main.main-grid .block-2xl {
    grid-column: span var(--layout-cols-lg-fivesixth) / span var(--layout-cols-lg-fivesixth);
  }

  .section-grid .block-2xlx, .centerframe-grid .block-2xlx, .grid-base .block-2xlx, main.main-grid .block-2xlx {
    grid-column: span var(--layout-cols-lg-eleventwelfth) / span var(--layout-cols-lg-eleventwelfth);
  }

  .section-grid .block-full, .centerframe-grid .block-full, .grid-base .block-full, main.main-grid .block-full {
    grid-column: 1 / -1;
  }

  .section-flex .block-xs, .centerframe-flex .block-xs, .flex-base .block-xs, main.main-flex .block-xs {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(8.333333% - var(--spacing-gutter-lg));
  }

  .section-flex .block-sm, .centerframe-flex .block-sm, .flex-base .block-sm, main.main-flex .block-sm {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(16.666666% - var(--spacing-gutter-lg));
  }

  .section-flex .block-smx, .centerframe-flex .block-smx, .flex-base .block-smx, main.main-flex .block-smx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(25% - var(--spacing-gutter-lg));
  }

  .section-flex .block-md, .centerframe-flex .block-md, .flex-base .block-md, main.main-flex .block-md {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
  }

  .section-flex .block-mdx, .centerframe-flex .block-mdx, .flex-base .block-mdx, main.main-flex .block-mdx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(41.666666% - var(--spacing-gutter-lg));
  }

  .section-flex .block-lg, .centerframe-flex .block-lg, .flex-base .block-lg, main.main-flex .block-lg {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(50% - var(--spacing-gutter-lg));
  }

  .section-flex .block-lgx, .centerframe-flex .block-lgx, .flex-base .block-lgx, main.main-flex .block-lgx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(58.333333% - var(--spacing-gutter-lg));
  }

  .section-flex .block-xl, .centerframe-flex .block-xl, .flex-base .block-xl, main.main-flex .block-xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(66.666666% - var(--spacing-gutter-lg));
  }

  .section-flex .block-xlx, .centerframe-flex .block-xlx, .flex-base .block-xlx, main.main-flex .block-xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(75% - var(--spacing-gutter-lg));
  }

  .section-flex .block-2xl, .centerframe-flex .block-2xl, .flex-base .block-2xl, main.main-flex .block-2xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(83.333333% - var(--spacing-gutter-lg));
  }

  .section-flex .block-2xlx, .centerframe-flex .block-2xlx, .flex-base .block-2xlx, main.main-flex .block-2xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(91.666666% - var(--spacing-gutter-lg));
  }

  .section-flex .block-full, .centerframe-flex .block-full, .flex-base .block-full, main.main-flex .block-full {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .rounded-card {
    border-radius: var(--rounded-article-lg);
  }

  .rounded-t-card {
    border-top-left-radius: var(--rounded-article-lg);
    border-top-right-radius: var(--rounded-article-lg);
  }

  .rounded-b-card {
    border-bottom-right-radius: var(--rounded-article-lg);
    border-bottom-left-radius: var(--rounded-article-lg);
  }

  .rounded-l-card {
    border-top-left-radius: var(--rounded-article-lg);
    border-bottom-left-radius: var(--rounded-article-lg);
  }

  .rounded-r-card {
    border-top-right-radius: var(--rounded-article-lg);
    border-bottom-right-radius: var(--rounded-article-lg);
  }

  .card {
    border-radius: var(--rounded-article-lg);
    padding: var(--pad-article-lg);
  }

  .card-base {
    border-radius: var(--rounded-article-lg);
  }

  .block-base > :not([hidden]) ~ :not([hidden]), .block-xs > :not([hidden]) ~ :not([hidden]), .block-sm > :not([hidden]) ~ :not([hidden]), .block-smx > :not([hidden]) ~ :not([hidden]), .block-md > :not([hidden]) ~ :not([hidden]), .block-mdx > :not([hidden]) ~ :not([hidden]), .block-lg > :not([hidden]) ~ :not([hidden]), .block-lgx > :not([hidden]) ~ :not([hidden]), .block-xl > :not([hidden]) ~ :not([hidden]), .block-xlx > :not([hidden]) ~ :not([hidden]), .block-2xl > :not([hidden]) ~ :not([hidden]), .block-2xlx > :not([hidden]) ~ :not([hidden]), .block-full > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
  }

  .block-base.card > :not([hidden]) ~ :not([hidden]), .block-xs.card > :not([hidden]) ~ :not([hidden]), .block-sm.card > :not([hidden]) ~ :not([hidden]), .block-smx.card > :not([hidden]) ~ :not([hidden]), .block-md.card > :not([hidden]) ~ :not([hidden]), .block-mdx.card > :not([hidden]) ~ :not([hidden]), .block-lg.card > :not([hidden]) ~ :not([hidden]), .block-lgx.card > :not([hidden]) ~ :not([hidden]), .block-xl.card > :not([hidden]) ~ :not([hidden]), .block-xlx.card > :not([hidden]) ~ :not([hidden]), .block-2xl.card > :not([hidden]) ~ :not([hidden]), .block-2xlx.card > :not([hidden]) ~ :not([hidden]), .block-full.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .stack-y > :not([hidden]) ~ :not([hidden]), .block-base.stack-y > :not([hidden]) ~ :not([hidden]), .block-xs.stack-y > :not([hidden]) ~ :not([hidden]), .block-sm.stack-y > :not([hidden]) ~ :not([hidden]), .block-smx.stack-y > :not([hidden]) ~ :not([hidden]), .block-md.stack-y > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-y > :not([hidden]) ~ :not([hidden]), .block-lg.stack-y > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-y > :not([hidden]) ~ :not([hidden]), .block-xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .stack-x > :not([hidden]) ~ :not([hidden]), .block-base.stack-x > :not([hidden]) ~ :not([hidden]), .block-xs.stack-x > :not([hidden]) ~ :not([hidden]), .block-sm.stack-x > :not([hidden]) ~ :not([hidden]), .block-smx.stack-x > :not([hidden]) ~ :not([hidden]), .block-md.stack-x > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-x > :not([hidden]) ~ :not([hidden]), .block-lg.stack-x > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-x > :not([hidden]) ~ :not([hidden]), .block-xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
  }

  .datarow, .formrow, .controlrow {
    gap: var(--gap-stack-lg);
  }

  .card .datarow, .card-base .datarow,
		.card .formrow, .card-base .formrow {
    gap: var(--spacing-card-lg);
  }

  .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--gap-stack-lg);
         column-gap: var(--gap-stack-lg);
  }

  .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--gap-stack-lg);
         column-gap: var(--gap-stack-lg);
    row-gap: var(--gap-stack-lg);
  }

  .stack-col, .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-lg);
  }

  .stack-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-form-lg);
  }

  .card .stack-row, .card-base .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--spacing-card-lg);
         column-gap: var(--spacing-card-lg);
  }

  .card .stack-row-wrap, .card-base .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--spacing-card-lg);
         column-gap: var(--spacing-card-lg);
    row-gap: var(--gap-stack-lg);
  }

  .card .stack-col, .card-base .stack-col, .card .stack, .card-base .stack {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-lg);
  }

  .pl-half-gutter {
    padding-left: calc(var(--spacing-gutter-lg) / 2);
  }

  .pr-half-gutter {
    padding-right: calc(var(--spacing-gutter-lg) / 2);
  }

  .ml-half-gutter {
    margin-left: calc(var(--spacing-gutter-lg) / 2);
  }

  .mr-half-gutter {
    margin-right: calc(var(--spacing-gutter-lg) / 2);
  }

  .max-w-half-breakpoint-less-gutter {
    max-width: calc((var(--screen-lg) / 2) - var(--spacing-gutter-lg));
  }

  .max-w-half-breakpoint {
    max-width: calc(var(--screen-lg) / 2);
  }

  .max-w-breakpoint {
    max-width: 960px;
  }

  .pr-col {
    padding-right: var(--layout-col-width-lg);
  }

  .pl-col {
    padding-left: var(--layout-col-width-lg);
  }

  .p-header-safeview {
    padding-top: max(var(--pad-header-lg), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    padding-bottom: var(--pad-header-lg);
  }

  .p-section-safeview {
    padding-top: max(var(--pad-section-lg), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .pt-section-safeview {
    padding-top: max(var(--pad-section-lg), env(safe-area-inset-top));
  }

  .pb-section-safeview {
    padding-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .pl-section-safeview {
    padding-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
  }

  .pr-section-safeview {
    padding-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
  }

  .px-section-safeview {
    padding-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
  }

  .py-section-safeview {
    padding-top: max(var(--pad-section-lg), env(safe-area-inset-top));
    padding-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .p-footer-safeview {
    padding-top: var(--pad-section-lg);
    padding-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .m-header-safeview {
    margin-top: max(var(--pad-header-lg), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    margin-bottom: var(--pad-header-lg);
  }

  .m-section-safeview {
    margin-top: max(var(--pad-section-lg), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .ml-section-safeview {
    margin-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
  }

  .mr-section-safeview {
    margin-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
  }

  .mt-section-safeview {
    margin-top: max(var(--pad-section-lg), env(safe-area-inset-top));
  }

  .mb-section-safeview {
    margin-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .mx-section-safeview {
    margin-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
  }

  .my-section-safeview {
    margin-top: max(var(--pad-section-lg), env(safe-area-inset-top));
    margin-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .m-footer-safeview {
    margin-top: var(--pad-section-lg);
    margin-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
  }

  .p-header {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
    padding-top: var(--pad-header-lg);
    padding-bottom: var(--pad-header-lg);
  }

  .p-footer {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
    padding-top: var(--pad-section-lg);
    padding-bottom: var(--pad-section-lg);
  }

  .px-header {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
  }

  .py-header {
    padding-top: var(--pad-header-lg);
    padding-bottom: var(--pad-header-lg);
  }

  .p-shoulder {
    padding: var(--spacing-shoulder-lg);
  }

  .px-shoulder {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
  }

  .pl-shoulder {
    padding-left: var(--spacing-shoulder-lg);
  }

  .pr-shoulder {
    padding-right: var(--spacing-shoulder-lg);
  }

  .p-section {
    padding: var(--pad-section-lg);
  }

  .px-section {
    padding-left: var(--pad-section-lg);
    padding-right: var(--pad-section-lg);
  }

  .py-section {
    padding-top: var(--pad-section-lg);
    padding-bottom: var(--pad-section-lg);
  }

  .pt-section {
    padding-top: var(--pad-section-lg);
  }

  .pb-section {
    padding-bottom: var(--pad-section-lg);
  }

  .pl-section {
    padding-left: var(--pad-section-lg);
  }

  .pr-section {
    padding-right: var(--pad-section-lg);
  }

  .p-article {
    padding: var(--pad-article-lg);
  }

  .px-article {
    padding-left: var(--pad-article-lg);
    padding-right: var(--pad-article-lg);
  }

  .py-article {
    padding-top: var(--pad-article-lg);
    padding-bottom: var(--pad-article-lg);
  }

  .p-block {
    padding: var(--spacing-block-lg);
  }

  .px-block {
    padding-left: var(--spacing-block-lg);
    padding-right: var(--spacing-block-lg);
  }

  .py-block {
    padding-top: var(--spacing-block-lg);
    padding-bottom: var(--spacing-block-lg);
  }

  .p-card {
    padding: var(--spacing-card-lg);
  }

  .px-card {
    padding-left: var(--spacing-card-lg);
    padding-right: var(--spacing-card-lg);
  }

  .py-card {
    padding-top: var(--spacing-card-lg);
    padding-bottom: var(--spacing-card-lg);
  }

  .p-element {
    padding: var(--pad-element-lg);
  }

  .px-element {
    padding-left: var(--pad-element-lg);
    padding-right: var(--pad-element-lg);
  }

  .py-element {
    padding-top: var(--pad-element-lg);
    padding-bottom: var(--pad-element-lg);
  }

  .pl-element {
    padding-left: var(--pad-element-lg);
  }

  .pr-element {
    padding-right: var(--pad-element-lg);
  }

  .pt-element {
    padding-top: var(--pad-element-lg);
  }

  .pb-element {
    padding-bottom: var(--pad-element-lg);
  }

  .p-sub {
    padding: var(--spacing-sub-lg);
  }

  .pt-sub {
    padding-top: var(--spacing-sub-lg);
  }

  .pb-sub {
    padding-bottom: var(--spacing-sub-lg);
  }

  .pl-sub {
    padding-left: var(--spacing-sub-lg);
  }

  .pr-sub {
    padding-right: var(--spacing-sub-lg);
  }

  .px-sub {
    padding-left: var(--spacing-sub-lg);
    padding-right: var(--spacing-sub-lg);
  }

  .py-sub {
    padding-top: var(--spacing-sub-lg);
    padding-bottom: var(--spacing-sub-lg);
  }

  .p-base {
    padding: var(--pad-base-lg);
  }

  .px-base {
    padding-left: var(--pad-base-lg);
    padding-right: var(--pad-base-lg);
  }

  .py-base {
    padding-top: var(--pad-base-lg);
    padding-bottom: var(--pad-base-lg);
  }

  .h-1row {
    height: var(--layout-row-height-lg);
  }

  .h-2row {
    height: calc(2 * var(--layout-row-height-lg) + var(--spacing-gutter-lg));
  }

  .h-3row {
    height: calc(3 * var(--layout-row-height-lg) + 2 * var(--spacing-gutter-lg));
  }

  .h-4row {
    height: calc(4 * var(--layout-row-height-lg) + 3 * var(--spacing-gutter-lg));
  }

  .h-5row {
    height: calc(5 * var(--layout-row-height-lg) + 4 * var(--spacing-gutter-lg));
  }

  .h-6row {
    height: calc(6 * var(--layout-row-height-lg) + 5 * var(--spacing-gutter-lg));
  }

  .h-7row {
    height: calc(7 * var(--layout-row-height-lg) + 6 * var(--spacing-gutter-lg));
  }

  .h-8row {
    height: calc(8 * var(--layout-row-height-lg) + 7 * var(--spacing-gutter-lg));
  }

  .max-h-element {
    max-height: var(--element-max-h-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  .text-d1 {
    font-size: var(--text-d1-size) !important;
    line-height: var(--text-d1-lh) !important;
  }

  .text-d2 {
    font-size: var(--text-d2-size) !important;
    line-height: var(--text-d2-lh) !important;
  }

  .text-d3 {
    font-size: var(--text-d3-size) !important;
    line-height: var(--text-d3-lh) !important;
  }

  .text-i1 {
    font-size: var(--text-i1-size) !important;
    line-height: var(--text-i1-lh) !important;
  }

  h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-lh);
  }

  header nav a.nav, header nav a:link.nav, header nav a:visited {
    font-size: var(--text-nava-size);
    line-height: var(--text-nava-lh);
  }

  footer nav a.nav, footer nav a:link.nav, footer nav a:visited {
    font-size: var(--text-nav-size);
    line-height: var(--text-p1-lh);
  }
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION LG (960px+) Screens											*/

/* --------------------------------------------------------------------	*/

/* --------------------------------------------------------------------	*/

/* SECTION XL (1440px+) Screens											*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  header {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
    padding-top: var(--pad-header-xl);
    padding-bottom: var(--pad-header-xl);
  }

  .header-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .header-grid nav {
    grid-template-columns: repeat(var(--layout-cols-xl), minmax(0, 1fr));
    -moz-column-gap: var(--spacing-gutter-xl);
         column-gap: var(--spacing-gutter-xl);
  }

  .header-flex nav {
    -moz-column-gap: var(--spacing-gutter-xl);
         column-gap: var(--spacing-gutter-xl);
  }

  footer {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
    padding-top: var(--pad-section-xl);
    padding-bottom: var(--pad-section-xl);
  }

  .footer-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .footer-grid {
    grid-template-columns: repeat(var(--layout-cols-xl), minmax(0, 1fr));
    gap: var(--spacing-gutter-xl);
  }

  .footer-flex nav {
    gap: var(--spacing-gutter-xl);
  }

  section {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
    padding-top: var(--pad-section-xl);
    padding-bottom: var(--pad-section-xl);
  }

  .section-grid, .centerframe-grid, .grid-base, main.main-grid {
    grid-template-columns: repeat(var(--layout-cols-xl), minmax(0, 1fr));
    gap: var(--spacing-gutter-xl);
  }

  .grid-cols {
    grid-template-columns: repeat(var(--layout-cols-xl), minmax(0, 1fr));
  }

  .section-flex, .centerframe-flex, .flex-base, main.main-flex {
    gap: var(--spacing-gutter-xl);
  }

  .mt-gutter {
    margin-top: var(--spacing-gutter-xl);
  }

  .mb-gutter {
    margin-bottom: var(--spacing-gutter-xl);
  }

  .ml-gutter {
    margin-left: var(--spacing-gutter-xl);
  }

  .mr-gutter {
    margin-right: var(--spacing-gutter-xl);
  }

  .pt-gutter {
    padding-top: var(--spacing-gutter-xl);
  }

  .pb-gutter {
    padding-bottom: var(--spacing-gutter-xl);
  }

  .pl-gutter {
    padding-left: var(--spacing-gutter-xl);
  }

  .pr-gutter {
    padding-right: var(--spacing-gutter-xl);
  }

  .mt-article {
    margin-top: var(--pad-article-xl);
  }

  .mb-article {
    margin-bottom: var(--pad-article-xl);
  }

  .ml-article {
    margin-left: var(--pad-article-xl);
  }

  .mr-article {
    margin-right: var(--pad-article-xl);
  }

  .gap-form {
    gap: var(--gap-form-xl);
  }

  .gap-gutter {
    gap: var(--spacing-gutter-xl);
  }

  .gap-gutterx {
    gap: calc(var(--spacing-gutter-xl) + var(--layout-unit));
  }

  .gap-x-gutterx {
    -moz-column-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit));
  }

  .gap-y-gutterx {
    row-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit));
  }

  .gap-gutterxx {
    gap: calc(var(--spacing-gutter-xl) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-x-gutterxx {
    -moz-column-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-y-gutterxx {
    row-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-section {
    gap: var(--gap-section-xl);
  }

  .gap-article {
    gap: var(--gap-article-xl);
  }

  .gap-block {
    gap: var(--spacing-block-xl);
  }

  .gap-card {
    gap: var(--spacing-card-xl);
  }

  .gap-sub {
    gap: var(--spacing-sub-xl);
  }

  .gap-stack {
    gap: var(--gap-stack-xl);
  }

  .gap-y-stack {
    row-gap: var(--gap-stack-xl);
  }

  .gap-x-stack {
    -moz-column-gap: var(--gap-stack-xl);
         column-gap: var(--gap-stack-xl);
  }

  .space-y-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .space-x-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  .section-grid.gap-2gutter, .centerframe-grid.gap-2gutter, .grid-base.gap-2gutter, .section-flex.gap-2gutter, .centerframe-flex.gap-2gutter, .flex-base.gap-2gutter, main.main-flex.gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-xl));
  }

  .gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-xl));
  }

  .gap-x-gutter {
    -moz-column-gap: var(--spacing-gutter-xl);
         column-gap: var(--spacing-gutter-xl);
  }

  .gap-y-gutter {
    row-gap: var(--spacing-gutter-xl);
  }

  .gap-x-2gutter {
    -moz-column-gap: calc(2 * var(--spacing-gutter-xl));
         column-gap: calc(2 * var(--spacing-gutter-xl));
  }

  .gap-y-2gutter {
    row-gap: calc(2 * var(--spacing-gutter-xl));
  }

  .section-grid .block-xs, .centerframe-grid .block-xs, .grid-base .block-xs, main.main-grid .block-xs {
    grid-column: span var(--layout-cols-xl-min) / span var(--layout-cols-xl-min);
  }

  .section-grid .block-sm, .centerframe-grid .block-sm, .grid-base .block-sm, main.main-grid .block-sm {
    grid-column: span var(--layout-cols-xl-sixth) / span var(--layout-cols-xl-sixth);
  }

  .section-grid .block-smx, .centerframe-grid .block-smx, .grid-base .block-smx, main.main-grid .block-smx {
    grid-column: span var(--layout-cols-xl-quarter) / span var(--layout-cols-xl-quarter);
  }

  .section-grid .block-md, .centerframe-grid .block-md, .grid-base .block-md, main.main-grid .block-md {
    grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
  }

  .section-grid .block-mdx, .centerframe-grid .block-mdx, .grid-base .block-mdx, main.main-grid .block-mdx {
    grid-column: span var(--layout-cols-xl-fivetwelfth) / span var(--layout-cols-xl-fivetwelfth);
  }

  .section-grid .block-lg, .centerframe-grid .block-lg, .grid-base .block-lg, main.main-grid .block-lg {
    grid-column: span var(--layout-cols-xl-half) / span var(--layout-cols-xl-half);
  }

  .section-grid .block-lgx, .centerframe-grid .block-lgx, .grid-base .block-lgx, main.main-grid .block-lgx {
    grid-column: span var(--layout-cols-xl-seventwelfth) / span var(--layout-cols-xl-seventwelfth);
  }

  .section-grid .block-xl, .centerframe-grid .block-xl, .grid-base .block-xl, main.main-grid .block-xl {
    grid-column: span var(--layout-cols-xl-twothird) / span var(--layout-cols-xl-twothird);
  }

  .section-grid .block-xlx, .centerframe-grid .block-xlx, .grid-base .block-xlx, main.main-grid .block-xlx {
    grid-column: span var(--layout-cols-xl-threefourth) / span var(--layout-cols-xl-threefourth);
  }

  .section-grid .block-2xl, .centerframe-grid .block-2xl, .grid-base .block-2xl, main.main-grid .block-2xl {
    grid-column: span var(--layout-cols-xl-fivesixth) / span var(--layout-cols-xl-fivesixth);
  }

  .section-grid .block-2xlx, .centerframe-grid .block-2xlx, .grid-base .block-2xlx, main.main-grid .block-2xlx {
    grid-column: span var(--layout-cols-xl-eleventwelfth) / span var(--layout-cols-xl-eleventwelfth);
  }

  .section-grid .block-full, .centerframe-grid .block-full, .grid-base .block-full, main.main-grid .block-full {
    grid-column: 1 / -1;
  }

  .section-flex .block-xs, .centerframe-flex .block-xs, .flex-base .block-xs, main.main-flex .block-xs {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(8.333333% - var(--spacing-gutter-xl));
  }

  .section-flex .block-sm, .centerframe-flex .block-sm, .flex-base .block-sm, main.main-flex .block-sm {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(16.666666% - var(--spacing-gutter-xl));
  }

  .section-flex .block-smx, .centerframe-flex .block-smx, .flex-base .block-smx, main.main-flex .block-smx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(25% - var(--spacing-gutter-xl));
  }

  .section-flex .block-md, .centerframe-flex .block-md, .flex-base .block-md, main.main-flex .block-md {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
  }

  .section-flex .block-mdx, .centerframe-flex .block-mdx, .flex-base .block-mdx, main.main-flex .block-mdx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(41.666666% - var(--spacing-gutter-xl));
  }

  .section-flex .block-lg, .centerframe-flex .block-lg, .flex-base .block-lg, main.main-flex .block-lg {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(50% - var(--spacing-gutter-xl));
  }

  .section-flex .block-lgx, .centerframe-flex .block-lgx, .flex-base .block-lgx, main.main-flex .block-lgx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(58.333333% - var(--spacing-gutter-xl));
  }

  .section-flex .block-xl, .centerframe-flex .block-xl, .flex-base .block-xl, main.main-flex .block-xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(66.666666% - var(--spacing-gutter-xl));
  }

  .section-flex .block-xlx, .centerframe-flex .block-xlx, .flex-base .block-xlx, main.main-flex .block-xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(75% - var(--spacing-gutter-xl));
  }

  .section-flex .block-2xl, .centerframe-flex .block-2xl, .flex-base .block-2xl, main.main-flex .block-2xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(83.333333% - var(--spacing-gutter-xl));
  }

  .section-flex .block-2xlx, .centerframe-flex .block-2xlx, .flex-base .block-2xlx, main.main-flex .block-2xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(91.666666% - var(--spacing-gutter-xl));
  }

  .section-flex .block-full, .centerframe-flex .block-full, .flex-base .block-full, main.main-flex .block-full {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .rounded-card {
    border-radius: var(--rounded-article-xl);
  }

  .rounded-t-card {
    border-top-left-radius: var(--rounded-article-xl);
    border-top-right-radius: var(--rounded-article-xl);
  }

  .rounded-b-card {
    border-bottom-right-radius: var(--rounded-article-xl);
    border-bottom-left-radius: var(--rounded-article-xl);
  }

  .rounded-l-card {
    border-top-left-radius: var(--rounded-article-xl);
    border-bottom-left-radius: var(--rounded-article-xl);
  }

  .rounded-r-card {
    border-top-right-radius: var(--rounded-article-xl);
    border-bottom-right-radius: var(--rounded-article-xl);
  }

  .card {
    border-radius: var(--rounded-article-xl);
    padding: var(--pad-article-xl);
  }

  .card-base {
    border-radius: var(--rounded-article-xl);
  }

  .block-base > :not([hidden]) ~ :not([hidden]), .block-xs > :not([hidden]) ~ :not([hidden]), .block-sm > :not([hidden]) ~ :not([hidden]), .block-smx > :not([hidden]) ~ :not([hidden]), .block-md > :not([hidden]) ~ :not([hidden]), .block-mdx > :not([hidden]) ~ :not([hidden]), .block-lg > :not([hidden]) ~ :not([hidden]), .block-lgx > :not([hidden]) ~ :not([hidden]), .block-xl > :not([hidden]) ~ :not([hidden]), .block-xlx > :not([hidden]) ~ :not([hidden]), .block-2xl > :not([hidden]) ~ :not([hidden]), .block-2xlx > :not([hidden]) ~ :not([hidden]), .block-full > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
  }

  .block-base.card > :not([hidden]) ~ :not([hidden]), .block-xs.card > :not([hidden]) ~ :not([hidden]), .block-sm.card > :not([hidden]) ~ :not([hidden]), .block-smx.card > :not([hidden]) ~ :not([hidden]), .block-md.card > :not([hidden]) ~ :not([hidden]), .block-mdx.card > :not([hidden]) ~ :not([hidden]), .block-lg.card > :not([hidden]) ~ :not([hidden]), .block-lgx.card > :not([hidden]) ~ :not([hidden]), .block-xl.card > :not([hidden]) ~ :not([hidden]), .block-xlx.card > :not([hidden]) ~ :not([hidden]), .block-2xl.card > :not([hidden]) ~ :not([hidden]), .block-2xlx.card > :not([hidden]) ~ :not([hidden]), .block-full.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .stack-y > :not([hidden]) ~ :not([hidden]), .block-base.stack-y > :not([hidden]) ~ :not([hidden]), .block-xs.stack-y > :not([hidden]) ~ :not([hidden]), .block-sm.stack-y > :not([hidden]) ~ :not([hidden]), .block-smx.stack-y > :not([hidden]) ~ :not([hidden]), .block-md.stack-y > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-y > :not([hidden]) ~ :not([hidden]), .block-lg.stack-y > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-y > :not([hidden]) ~ :not([hidden]), .block-xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .stack-x > :not([hidden]) ~ :not([hidden]), .block-base.stack-x > :not([hidden]) ~ :not([hidden]), .block-xs.stack-x > :not([hidden]) ~ :not([hidden]), .block-sm.stack-x > :not([hidden]) ~ :not([hidden]), .block-smx.stack-x > :not([hidden]) ~ :not([hidden]), .block-md.stack-x > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-x > :not([hidden]) ~ :not([hidden]), .block-lg.stack-x > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-x > :not([hidden]) ~ :not([hidden]), .block-xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  .datarow, .formrow, .controlrow {
    gap: var(--gap-stack-xl);
  }

  .card .datarow, .card-base .datarow,
		.card .formrow, .card-base .formrow {
    gap: var(--spacing-card-xl);
  }

  .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--gap-stack-xl);
         column-gap: var(--gap-stack-xl);
  }

  .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--gap-stack-xl);
         column-gap: var(--gap-stack-xl);
    row-gap: var(--gap-stack-xl);
  }

  .stack-col, .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-xl);
  }

  .stack-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-form-xl);
  }

  .card .stack-row, .card-base .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--spacing-card-xl);
         column-gap: var(--spacing-card-xl);
  }

  .card .stack-row-wrap, .card-base .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--spacing-card-xl);
         column-gap: var(--spacing-card-xl);
    row-gap: var(--gap-stack-xl);
  }

  .card .stack-col, .card-base .stack-col, .card .stack, .card-base .stack {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-xl);
  }

  .pl-half-gutter {
    padding-left: calc(var(--spacing-gutter-xl) / 2);
  }

  .pr-half-gutter {
    padding-right: calc(var(--spacing-gutter-xl) / 2);
  }

  .ml-half-gutter {
    margin-left: calc(var(--spacing-gutter-xl) / 2);
  }

  .mr-half-gutter {
    margin-right: calc(var(--spacing-gutter-xl) / 2);
  }

  .max-w-half-breakpoint-less-gutter {
    max-width: calc((var(--screen-xl) / 2) - var(--spacing-gutter-xl));
  }

  .max-w-half-breakpoint {
    max-width: calc(var(--screen-xl) / 2);
  }

  .max-w-breakpoint {
    max-width: 1440px;
  }

  .pr-col {
    padding-right: var(--layout-col-width-xl);
  }

  .pl-col {
    padding-left: var(--layout-col-width-xl);
  }

  .p-header-safeview {
    padding-top: max(var(--pad-header-xl), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    padding-bottom: var(--pad-header-xl);
  }

  .p-section-safeview {
    padding-top: max(var(--pad-section-xl), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .pt-section-safeview {
    padding-top: max(var(--pad-section-xl), env(safe-area-inset-top));
  }

  .pb-section-safeview {
    padding-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .pl-section-safeview {
    padding-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
  }

  .pr-section-safeview {
    padding-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
  }

  .px-section-safeview {
    padding-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
  }

  .py-section-safeview {
    padding-top: max(var(--pad-section-xl), env(safe-area-inset-top));
    padding-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .p-footer-safeview {
    padding-top: var(--pad-section-xl);
    padding-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .m-header-safeview {
    margin-top: max(var(--pad-header-xl), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    margin-bottom: var(--pad-header-xl);
  }

  .m-section-safeview {
    margin-top: max(var(--pad-section-xl), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .ml-section-safeview {
    margin-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
  }

  .mr-section-safeview {
    margin-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
  }

  .mt-section-safeview {
    margin-top: max(var(--pad-section-xl), env(safe-area-inset-top));
  }

  .mb-section-safeview {
    margin-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .mx-section-safeview {
    margin-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
  }

  .my-section-safeview {
    margin-top: max(var(--pad-section-xl), env(safe-area-inset-top));
    margin-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .m-footer-safeview {
    margin-top: var(--pad-section-xl);
    margin-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
  }

  .p-header {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
    padding-top: var(--pad-header-xl);
    padding-bottom: var(--pad-header-xl);
  }

  .p-footer {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
    padding-top: var(--pad-section-xl);
    padding-bottom: var(--pad-section-xl);
  }

  .px-header {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
  }

  .py-header {
    padding-top: var(--pad-header-xl);
    padding-bottom: var(--pad-header-xl);
  }

  .p-shoulder {
    padding: var(--spacing-shoulder-xl);
  }

  .px-shoulder {
    padding-left: var(--spacing-shoulder-xl);
    padding-right: var(--spacing-shoulder-xl);
  }

  .pl-shoulder {
    padding-left: var(--spacing-shoulder-xl);
  }

  .pr-shoulder {
    padding-right: var(--spacing-shoulder-xl);
  }

  .p-section {
    padding: var(--pad-section-xl);
  }

  .px-section {
    padding-left: var(--pad-section-xl);
    padding-right: var(--pad-section-xl);
  }

  .py-section {
    padding-top: var(--pad-section-xl);
    padding-bottom: var(--pad-section-xl);
  }

  .pt-section {
    padding-top: var(--pad-section-xl);
  }

  .pb-section {
    padding-bottom: var(--pad-section-xl);
  }

  .pl-section {
    padding-left: var(--pad-section-xl);
  }

  .pr-section {
    padding-right: var(--pad-section-xl);
  }

  .p-article {
    padding: var(--pad-article-xl);
  }

  .px-article {
    padding-left: var(--pad-article-xl);
    padding-right: var(--pad-article-xl);
  }

  .py-article {
    padding-top: var(--pad-article-xl);
    padding-bottom: var(--pad-article-xl);
  }

  .p-block {
    padding: var(--spacing-block-xl);
  }

  .px-block {
    padding-left: var(--spacing-block-xl);
    padding-right: var(--spacing-block-xl);
  }

  .py-block {
    padding-top: var(--spacing-block-xl);
    padding-bottom: var(--spacing-block-xl);
  }

  .p-card {
    padding: var(--spacing-card-xl);
  }

  .px-card {
    padding-left: var(--spacing-card-xl);
    padding-right: var(--spacing-card-xl);
  }

  .py-card {
    padding-top: var(--spacing-card-xl);
    padding-bottom: var(--spacing-card-xl);
  }

  .p-element {
    padding: var(--pad-element-xl);
  }

  .px-element {
    padding-left: var(--pad-element-xl);
    padding-right: var(--pad-element-xl);
  }

  .py-element {
    padding-top: var(--pad-element-xl);
    padding-bottom: var(--pad-element-xl);
  }

  .pl-element {
    padding-left: var(--pad-element-xl);
  }

  .pr-element {
    padding-right: var(--pad-element-xl);
  }

  .pt-element {
    padding-top: var(--pad-element-xl);
  }

  .pb-element {
    padding-bottom: var(--pad-element-xl);
  }

  .p-sub {
    padding: var(--spacing-sub-xl);
  }

  .pt-sub {
    padding-top: var(--spacing-sub-xl);
  }

  .pb-sub {
    padding-bottom: var(--spacing-sub-xl);
  }

  .pl-sub {
    padding-left: var(--spacing-sub-xl);
  }

  .pr-sub {
    padding-right: var(--spacing-sub-xl);
  }

  .px-sub {
    padding-left: var(--spacing-sub-xl);
    padding-right: var(--spacing-sub-xl);
  }

  .py-sub {
    padding-top: var(--spacing-sub-xl);
    padding-bottom: var(--spacing-sub-xl);
  }

  .p-base {
    padding: var(--pad-base-xl);
  }

  .px-base {
    padding-left: var(--pad-base-xl);
    padding-right: var(--pad-base-xl);
  }

  .py-base {
    padding-top: var(--pad-base-xl);
    padding-bottom: var(--pad-base-xl);
  }

  .h-1row {
    height: var(--layout-row-height-xl);
  }

  .h-2row {
    height: calc(2 * var(--layout-row-height-xl) + var(--spacing-gutter-xl));
  }

  .h-3row {
    height: calc(3 * var(--layout-row-height-xl) + 2 * var(--spacing-gutter-xl));
  }

  .h-4row {
    height: calc(4 * var(--layout-row-height-xl) + 3 * var(--spacing-gutter-xl));
  }

  .h-5row {
    height: calc(5 * var(--layout-row-height-xl) + 4 * var(--spacing-gutter-xl));
  }

  .h-6row {
    height: calc(6 * var(--layout-row-height-xl) + 5 * var(--spacing-gutter-xl));
  }

  .h-7row {
    height: calc(7 * var(--layout-row-height-xl) + 6 * var(--spacing-gutter-xl));
  }

  .h-8row {
    height: calc(8 * var(--layout-row-height-xl) + 7 * var(--spacing-gutter-xl));
  }

  .max-h-element {
    max-height: var(--element-max-h-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  .text-d1 {
    font-size: var(--text-d1-size) !important;
    line-height: var(--text-d1-lh) !important;
  }

  .text-d2 {
    font-size: var(--text-d2-size) !important;
    line-height: var(--text-d2-lh) !important;
  }

  .text-d3 {
    font-size: var(--text-d3-size) !important;
    line-height: var(--text-d3-lh) !important;
  }

  .text-i1 {
    font-size: var(--text-i1-size) !important;
    line-height: var(--text-i1-lh) !important;
  }

  h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-lh);
  }

  header nav a.nav, header nav a:link.nav, header nav a:visited {
    font-size: var(--text-nav-size);
    line-height: var(--text-nav-lh);
  }

  footer nav a.nav, footer nav a:link.nav, footer nav a:visited {
    font-size: var(--text-nav-size);
    line-height: var(--text-p1-lh);
  }
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION XL (1440px+) Screens										*/

/* --------------------------------------------------------------------	*/

/* --------------------------------------------------------------------	*/

/* SECTION 2XL (1600px+) Screens										*/

/* DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* --------------------------------------------------------------------	*/

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  header {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
    padding-top: var(--pad-header-2xl);
    padding-bottom: var(--pad-header-2xl);
  }

  .header-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .header-grid nav {
    grid-template-columns: repeat(var(--layout-cols-2xl), minmax(0, 1fr));
    -moz-column-gap: var(--spacing-gutter-2xl);
         column-gap: var(--spacing-gutter-2xl);
  }

  .header-flex nav {
    -moz-column-gap: var(--spacing-gutter-2xl);
         column-gap: var(--spacing-gutter-2xl);
  }

  footer {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
    padding-top: var(--pad-section-2xl);
    padding-bottom: var(--pad-section-2xl);
  }

  .footer-base {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .footer-grid {
    grid-template-columns: repeat(var(--layout-cols-2xl), minmax(0, 1fr));
    gap: var(--spacing-gutter-2xl);
  }

  .footer-flex nav {
    gap: var(--spacing-gutter-2xl);
  }

  section {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
    padding-top: var(--pad-section-2xl);
    padding-bottom: var(--pad-section-2xl);
  }

  .section-grid, .centerframe-grid, .grid-base, main.main-grid {
    grid-template-columns: repeat(var(--layout-cols-2xl), minmax(0, 1fr));
    gap: var(--spacing-gutter-2xl);
  }

  .grid-cols {
    grid-template-columns: repeat(var(--layout-cols-2xl), minmax(0, 1fr));
  }

  .section-flex, .centerframe-flex, .flex-base, main.main-flex {
    gap: var(--spacing-gutter-2xl);
  }

  .mt-gutter {
    margin-top: var(--spacing-gutter-2xl);
  }

  .mb-gutter {
    margin-bottom: var(--spacing-gutter-2xl);
  }

  .ml-gutter {
    margin-left: var(--spacing-gutter-2xl);
  }

  .mr-gutter {
    margin-right: var(--spacing-gutter-2xl);
  }

  .pt-gutter {
    padding-top: var(--spacing-gutter-2xl);
  }

  .pb-gutter {
    padding-bottom: var(--spacing-gutter-2xl);
  }

  .pl-gutter {
    padding-left: var(--spacing-gutter-2xl);
  }

  .pr-gutter {
    padding-right: var(--spacing-gutter-2xl);
  }

  .mt-article {
    margin-top: var(--pad-article-2xl);
  }

  .mb-article {
    margin-bottom: var(--pad-article-2xl);
  }

  .ml-article {
    margin-left: var(--pad-article-2xl);
  }

  .mr-article {
    margin-right: var(--pad-article-2xl);
  }

  .gap-form {
    gap: var(--gap-form-2xl);
  }

  .gap-gutter {
    gap: var(--spacing-gutter-2xl);
  }

  .gap-gutterx {
    gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit));
  }

  .gap-x-gutterx {
    -moz-column-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit));
  }

  .gap-y-gutterx {
    row-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit));
  }

  .gap-gutterxx {
    gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-x-gutterxx {
    -moz-column-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit) + var(--layout-unit));
         column-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-y-gutterxx {
    row-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit) + var(--layout-unit));
  }

  .gap-section {
    gap: var(--gap-section-2xl);
  }

  .gap-article {
    gap: var(--gap-article-2xl);
  }

  .gap-block {
    gap: var(--spacing-block-2xl);
  }

  .gap-card {
    gap: var(--spacing-card-2xl);
  }

  .gap-sub {
    gap: var(--spacing-sub-2xl);
  }

  .gap-stack {
    gap: var(--gap-stack-2xl);
  }

  .gap-y-stack {
    row-gap: var(--gap-stack-2xl);
  }

  .gap-x-stack {
    -moz-column-gap: var(--gap-stack-2xl);
         column-gap: var(--gap-stack-2xl);
  }

  .space-y-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .space-x-card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  .section-grid.gap-2gutter, .centerframe-grid.gap-2gutter, .grid-base.gap-2gutter, .section-flex.gap-2gutter, .centerframe-flex.gap-2gutter, .flex-base.gap-2gutter, main.main-flex.gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-2xl));
  }

  .gap-2gutter {
    gap: calc(2 * var(--spacing-gutter-2xl));
  }

  .gap-x-gutter {
    -moz-column-gap: var(--spacing-gutter-2xl);
         column-gap: var(--spacing-gutter-2xl);
  }

  .gap-y-gutter {
    row-gap: var(--spacing-gutter-2xl);
  }

  .gap-x-2gutter {
    -moz-column-gap: calc(2 * var(--spacing-gutter-2xl));
         column-gap: calc(2 * var(--spacing-gutter-2xl));
  }

  .gap-y-2gutter {
    row-gap: calc(2 * var(--spacing-gutter-2xl));
  }

  .section-grid .block-xs, .centerframe-grid .block-xs, .grid-base .block-xs, main.main-grid .block-xs {
    grid-column: span var(--layout-cols-2xl-min) / span var(--layout-cols-2xl-min);
  }

  .section-grid .block-sm, .centerframe-grid .block-sm, .grid-base .block-sm, main.main-grid .block-sm {
    grid-column: span var(--layout-cols-2xl-sixth) / span var(--layout-cols-2xl-sixth);
  }

  .section-grid .block-smx, .centerframe-grid .block-smx, .grid-base .block-smx, main.main-grid .block-smx {
    grid-column: span var(--layout-cols-2xl-quarter) / span var(--layout-cols-2xl-quarter);
  }

  .section-grid .block-md, .centerframe-grid .block-md, .grid-base .block-md, main.main-grid .block-md {
    grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
  }

  .section-grid .block-mdx, .centerframe-grid .block-mdx, .grid-base .block-mdx, main.main-grid .block-mdx {
    grid-column: span var(--layout-cols-2xl-fivetwelfth) / span var(--layout-cols-2xl-fivetwelfth);
  }

  .section-grid .block-lg, .centerframe-grid .block-lg, .grid-base .block-lg, main.main-grid .block-lg {
    grid-column: span var(--layout-cols-2xl-half) / span var(--layout-cols-2xl-half);
  }

  .section-grid .block-lgx, .centerframe-grid .block-lgx, .grid-base .block-lgx, main.main-grid .block-lgx {
    grid-column: span var(--layout-cols-2xl-seventwelfth) / span var(--layout-cols-2xl-seventwelfth);
  }

  .section-grid .block-xl, .centerframe-grid .block-xl, .grid-base .block-xl, main.main-grid .block-xl {
    grid-column: span var(--layout-cols-2xl-twothird) / span var(--layout-cols-2xl-twothird);
  }

  .section-grid .block-xlx, .centerframe-grid .block-xlx, .grid-base .block-xlx, main.main-grid .block-xlx {
    grid-column: span var(--layout-cols-2xl-threefourth) / span var(--layout-cols-2xl-threefourth);
  }

  .section-grid .block-2xl, .centerframe-grid .block-2xl, .grid-base .block-2xl, main.main-grid .block-2xl {
    grid-column: span var(--layout-cols-2xl-fivesixth) / span var(--layout-cols-2xl-fivesixth);
  }

  .section-grid .block-2xlx, .centerframe-grid .block-2xlx, .grid-base .block-2xlx, main.main-grid .block-2xlx {
    grid-column: span var(--layout-cols-2xl-eleventwelfth) / span var(--layout-cols-2xl-eleventwelfth);
  }

  .section-grid .block-full, .centerframe-grid .block-full, .grid-base .block-full, main.main-grid .block-full {
    grid-column: 1 / -1;
  }

  .section-flex .block-xs, .centerframe-flex .block-xs, .flex-base .block-xs, main.main-flex .block-xs {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(8.333333% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-sm, .centerframe-flex .block-sm, .flex-base .block-sm, main.main-flex .block-sm {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(16.666666% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-smx, .centerframe-flex .block-smx, .flex-base .block-smx, main.main-flex .block-smx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(25% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-md, .centerframe-flex .block-md, .flex-base .block-md, main.main-flex .block-md {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-mdx, .centerframe-flex .block-mdx, .flex-base .block-mdx, main.main-flex .block-mdx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(41.666666% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-lg, .centerframe-flex .block-lg, .flex-base .block-lg, main.main-flex .block-lg {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(50% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-lgx, .centerframe-flex .block-lgx, .flex-base .block-lgx, main.main-flex .block-lgx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(58.333333% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-xl, .centerframe-flex .block-xl, .flex-base .block-xl, main.main-flex .block-xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(66.666666% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-xlx, .centerframe-flex .block-xlx, .flex-base .block-xlx, main.main-flex .block-xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(75% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-2xl, .centerframe-flex .block-2xl, .flex-base .block-2xl, main.main-flex .block-2xl {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(83.333333% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-2xlx, .centerframe-flex .block-2xlx, .flex-base .block-2xlx, main.main-flex .block-2xlx {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(91.666666% - var(--spacing-gutter-2xl));
  }

  .section-flex .block-full, .centerframe-flex .block-full, .flex-base .block-full, main.main-flex .block-full {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .rounded-card {
    border-radius: var(--rounded-article-2xl);
  }

  .rounded-t-card {
    border-top-left-radius: var(--rounded-article-2xl);
    border-top-right-radius: var(--rounded-article-2xl);
  }

  .rounded-b-card {
    border-bottom-right-radius: var(--rounded-article-2xl);
    border-bottom-left-radius: var(--rounded-article-2xl);
  }

  .rounded-l-card {
    border-top-left-radius: var(--rounded-article-2xl);
    border-bottom-left-radius: var(--rounded-article-2xl);
  }

  .rounded-r-card {
    border-top-right-radius: var(--rounded-article-2xl);
    border-bottom-right-radius: var(--rounded-article-2xl);
  }

  .card {
    border-radius: var(--rounded-article-2xl);
    padding: var(--pad-article-2xl);
  }

  .card-base {
    border-radius: var(--rounded-article-2xl);
  }

  .block-base > :not([hidden]) ~ :not([hidden]), .block-xs > :not([hidden]) ~ :not([hidden]), .block-sm > :not([hidden]) ~ :not([hidden]), .block-smx > :not([hidden]) ~ :not([hidden]), .block-md > :not([hidden]) ~ :not([hidden]), .block-mdx > :not([hidden]) ~ :not([hidden]), .block-lg > :not([hidden]) ~ :not([hidden]), .block-lgx > :not([hidden]) ~ :not([hidden]), .block-xl > :not([hidden]) ~ :not([hidden]), .block-xlx > :not([hidden]) ~ :not([hidden]), .block-2xl > :not([hidden]) ~ :not([hidden]), .block-2xlx > :not([hidden]) ~ :not([hidden]), .block-full > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
  }

  .block-base.card > :not([hidden]) ~ :not([hidden]), .block-xs.card > :not([hidden]) ~ :not([hidden]), .block-sm.card > :not([hidden]) ~ :not([hidden]), .block-smx.card > :not([hidden]) ~ :not([hidden]), .block-md.card > :not([hidden]) ~ :not([hidden]), .block-mdx.card > :not([hidden]) ~ :not([hidden]), .block-lg.card > :not([hidden]) ~ :not([hidden]), .block-lgx.card > :not([hidden]) ~ :not([hidden]), .block-xl.card > :not([hidden]) ~ :not([hidden]), .block-xlx.card > :not([hidden]) ~ :not([hidden]), .block-2xl.card > :not([hidden]) ~ :not([hidden]), .block-2xlx.card > :not([hidden]) ~ :not([hidden]), .block-full.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .stack-y > :not([hidden]) ~ :not([hidden]), .block-base.stack-y > :not([hidden]) ~ :not([hidden]), .block-xs.stack-y > :not([hidden]) ~ :not([hidden]), .block-sm.stack-y > :not([hidden]) ~ :not([hidden]), .block-smx.stack-y > :not([hidden]) ~ :not([hidden]), .block-md.stack-y > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-y > :not([hidden]) ~ :not([hidden]), .block-lg.stack-y > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-y > :not([hidden]) ~ :not([hidden]), .block-xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-y > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-y > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .stack-x > :not([hidden]) ~ :not([hidden]), .block-base.stack-x > :not([hidden]) ~ :not([hidden]), .block-xs.stack-x > :not([hidden]) ~ :not([hidden]), .block-sm.stack-x > :not([hidden]) ~ :not([hidden]), .block-smx.stack-x > :not([hidden]) ~ :not([hidden]), .block-md.stack-x > :not([hidden]) ~ :not([hidden]), .block-mdx.stack-x > :not([hidden]) ~ :not([hidden]), .block-lg.stack-x > :not([hidden]) ~ :not([hidden]), .block-lgx.stack-x > :not([hidden]) ~ :not([hidden]), .block-xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xl.stack-x > :not([hidden]) ~ :not([hidden]), .block-2xlx.stack-x > :not([hidden]) ~ :not([hidden]), .block-full.stack > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  .datarow, .formrow, .controlrow {
    gap: var(--gap-stack-2xl);
  }

  .card .datarow, .card-base .datarow,
		.card .formrow, .card-base .formrow {
    gap: var(--spacing-card-2xl);
  }

  .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--gap-stack-2xl);
         column-gap: var(--gap-stack-2xl);
  }

  .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--gap-stack-2xl);
         column-gap: var(--gap-stack-2xl);
    row-gap: var(--gap-stack-2xl);
  }

  .stack-col, .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-2xl);
  }

  .stack-form-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-form-2xl);
  }

  .card .stack-row, .card-base .stack-row {
    display: flex;
    flex-direction: row;
    -moz-column-gap: var(--spacing-card-2xl);
         column-gap: var(--spacing-card-2xl);
  }

  .card .stack-row-wrap, .card-base .stack-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -moz-column-gap: var(--spacing-card-2xl);
         column-gap: var(--spacing-card-2xl);
    row-gap: var(--gap-stack-2xl);
  }

  .card .stack-col, .card-base .stack-col, .card .stack, .card-base .stack {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-2xl);
  }

  .pl-half-gutter {
    padding-left: calc(var(--spacing-gutter-2xl) / 2);
  }

  .pr-half-gutter {
    padding-right: calc(var(--spacing-gutter-2xl) / 2);
  }

  .ml-half-gutter {
    margin-left: calc(var(--spacing-gutter-2xl) / 2);
  }

  .mr-half-gutter {
    margin-right: calc(var(--spacing-gutter-2xl) / 2);
  }

  .max-w-half-breakpoint-less-gutter {
    max-width: calc((var(--screen-2xl) / 2) - var(--spacing-gutter-2xl));
  }

  .max-w-half-breakpoint {
    max-width: calc(var(--screen-2xl) / 2);
  }

  .max-w-breakpoint {
    max-width: 1600px;
  }

  .pr-col {
    padding-right: var(--layout-col-width-2xl);
  }

  .pl-col {
    padding-left: var(--layout-col-width-2xl);
  }

  .p-header-safeview {
    padding-top: max(var(--pad-header-2xl), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    padding-bottom: var(--pad-header-2xl);
  }

  .p-section-safeview {
    padding-top: max(var(--pad-section-2xl), env(safe-area-inset-top));
    padding-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .pt-section-safeview {
    padding-top: max(var(--pad-section-2xl), env(safe-area-inset-top));
  }

  .pb-section-safeview {
    padding-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .pl-section-safeview {
    padding-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
  }

  .pr-section-safeview {
    padding-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
  }

  .px-section-safeview {
    padding-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
  }

  .py-section-safeview {
    padding-top: max(var(--pad-section-2xl), env(safe-area-inset-top));
    padding-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .p-footer-safeview {
    padding-top: var(--pad-section-2xl);
    padding-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    padding-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .m-header-safeview {
    margin-top: max(var(--pad-header-2xl), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    margin-bottom: var(--pad-header-2xl);
  }

  .m-section-safeview {
    margin-top: max(var(--pad-section-2xl), env(safe-area-inset-top));
    margin-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .ml-section-safeview {
    margin-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
  }

  .mr-section-safeview {
    margin-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
  }

  .mt-section-safeview {
    margin-top: max(var(--pad-section-2xl), env(safe-area-inset-top));
  }

  .mb-section-safeview {
    margin-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .mx-section-safeview {
    margin-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
  }

  .my-section-safeview {
    margin-top: max(var(--pad-section-2xl), env(safe-area-inset-top));
    margin-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .m-footer-safeview {
    margin-top: var(--pad-section-2xl);
    margin-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
    margin-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    margin-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
  }

  .p-header {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
    padding-top: var(--pad-header-2xl);
    padding-bottom: var(--pad-header-2xl);
  }

  .p-footer {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
    padding-top: var(--pad-section-2xl);
    padding-bottom: var(--pad-section-2xl);
  }

  .px-header {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
  }

  .py-header {
    padding-top: var(--pad-header-2xl);
    padding-bottom: var(--pad-header-2xl);
  }

  .p-shoulder {
    padding: var(--spacing-shoulder-2xl);
  }

  .px-shoulder {
    padding-left: var(--spacing-shoulder-2xl);
    padding-right: var(--spacing-shoulder-2xl);
  }

  .pl-shoulder {
    padding-left: var(--spacing-shoulder-2xl);
  }

  .pr-shoulder {
    padding-right: var(--spacing-shoulder-2xl);
  }

  .p-section {
    padding: var(--pad-section-2xl);
  }

  .px-section {
    padding-left: var(--pad-section-2xl);
    padding-right: var(--pad-section-2xl);
  }

  .py-section {
    padding-top: var(--pad-section-2xl);
    padding-bottom: var(--pad-section-2xl);
  }

  .pt-section {
    padding-top: var(--pad-section-2xl);
  }

  .pb-section {
    padding-bottom: var(--pad-section-2xl);
  }

  .pl-section {
    padding-left: var(--pad-section-2xl);
  }

  .pr-section {
    padding-right: var(--pad-section-2xl);
  }

  .p-article {
    padding: var(--pad-article-2xl);
  }

  .px-article {
    padding-left: var(--pad-article-2xl);
    padding-right: var(--pad-article-2xl);
  }

  .py-article {
    padding-top: var(--pad-article-2xl);
    padding-bottom: var(--pad-article-2xl);
  }

  .p-block {
    padding: var(--spacing-block-2xl);
  }

  .px-block {
    padding-left: var(--spacing-block-2xl);
    padding-right: var(--spacing-block-2xl);
  }

  .py-block {
    padding-top: var(--spacing-block-2xl);
    padding-bottom: var(--spacing-block-2xl);
  }

  .p-card {
    padding: var(--spacing-card-2xl);
  }

  .px-card {
    padding-left: var(--spacing-card-2xl);
    padding-right: var(--spacing-card-2xl);
  }

  .py-card {
    padding-top: var(--spacing-card-2xl);
    padding-bottom: var(--spacing-card-2xl);
  }

  .p-element {
    padding: var(--pad-element-2xl);
  }

  .px-element {
    padding-left: var(--pad-element-2xl);
    padding-right: var(--pad-element-2xl);
  }

  .py-element {
    padding-top: var(--pad-element-2xl);
    padding-bottom: var(--pad-element-2xl);
  }

  .pl-element {
    padding-left: var(--pad-element-2xl);
  }

  .pr-element {
    padding-right: var(--pad-element-2xl);
  }

  .pt-element {
    padding-top: var(--pad-element-2xl);
  }

  .pb-element {
    padding-bottom: var(--pad-element-2xl);
  }

  .p-sub {
    padding: var(--spacing-sub-2xl);
  }

  .pt-sub {
    padding-top: var(--spacing-sub-2xl);
  }

  .pb-sub {
    padding-bottom: var(--spacing-sub-2xl);
  }

  .pl-sub {
    padding-left: var(--spacing-sub-2xl);
  }

  .pr-sub {
    padding-right: var(--spacing-sub-2xl);
  }

  .px-sub {
    padding-left: var(--spacing-sub-2xl);
    padding-right: var(--spacing-sub-2xl);
  }

  .py-sub {
    padding-top: var(--spacing-sub-2xl);
    padding-bottom: var(--spacing-sub-2xl);
  }

  .p-base {
    padding: var(--pad-base-2xl);
  }

  .px-base {
    padding-left: var(--pad-base-2xl);
    padding-right: var(--pad-base-2xl);
  }

  .py-base {
    padding-top: var(--pad-base-2xl);
    padding-bottom: var(--pad-base-2xl);
  }

  .h-1row {
    height: var(--layout-row-height-2xl);
  }

  .h-2row {
    height: calc(2 * var(--layout-row-height-2xl) + var(--spacing-gutter-2xl));
  }

  .h-3row {
    height: calc(3 * var(--layout-row-height-2xl) + 2 * var(--spacing-gutter-2xl));
  }

  .h-4row {
    height: calc(4 * var(--layout-row-height-2xl) + 3 * var(--spacing-gutter-2xl));
  }

  .h-5row {
    height: calc(5 * var(--layout-row-height-2xl) + 4 * var(--spacing-gutter-2xl));
  }

  .h-6row {
    height: calc(6 * var(--layout-row-height-2xl) + 5 * var(--spacing-gutter-2xl));
  }

  .h-7row {
    height: calc(7 * var(--layout-row-height-2xl) + 6 * var(--spacing-gutter-2xl));
  }

  .h-8row {
    height: calc(8 * var(--layout-row-height-2xl) + 7 * var(--spacing-gutter-2xl));
  }

  .max-h-element {
    max-height: var(--element-max-h-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  .text-d1 {
    font-size: var(--text-d1-size) !important;
    line-height: var(--text-d1-lh) !important;
  }

  .text-d2 {
    font-size: var(--text-d2-size) !important;
    line-height: var(--text-d2-lh) !important;
  }

  .text-d3 {
    font-size: var(--text-d3-size) !important;
    line-height: var(--text-d3-lh) !important;
  }

  .text-i1 {
    font-size: var(--text-i1-size) !important;
    line-height: var(--text-i1-lh) !important;
  }

  h1 {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-lh);
  }

  header nav a.nav, header nav a:link.nav, header nav a:visited {
    font-size: var(--text-nav-size);
    line-height: var(--text-nav-lh);
  }

  footer nav a.nav, footer nav a:link.nav, footer nav a:visited {
    font-size: var(--text-nav-size);
    line-height: var(--text-p1-lh);
  }
}

/* --------------------------------------------------------------------	*/

/* /DESIGNFRAME ADAPTIVE - Do not edit section 							*/

/* !SECTION 2XL (1600px+) Screens										*/

/* --------------------------------------------------------------------	*/

/* -------------------------------- */

/* Do not edit	*/

/* ---------------------------------*/

/* -------------------------------------------------------------------- */

/* SECTION Base Styles													*/

/* -------------------------------------------------------------------- */

/* These are your stylings without a theme active and sets inheritance.	*/

/* -------------------------------------------------------------------- */

/* These are your Base Styles which override the HTML Fallback Styles, define DF (Non-Theme) Base Styles, and are the base inherited styles for all themes. Any differences in .theme and .theme-* styles will override when the that theme is active. All inline style in HTML or more specific Custom Classes at the end of this file will also override any differences. Generally, you should use this for sizing, weights, effects, and animation styles which you want apply consitently across all themes, plus default any properties. */

/* ---------------------------- */

/* ANCHOR  Icons Usage			*/

/* ---------------------------- */

/* Preferred set up uses Font Awesome. Use text utility to manage text-based icon sizing by using classes such as text-i1. Options are: i1, i2, 13, i4, i5, i6, in. */

/* ---------------------------- */

/* ANCHOR  Effects Config		*/

/* ---------------------------- */

/* These are defined sets of effects that are applied to most interacte elements by default, and can be optionally added to any element inline and using @apply. */

.config-focus-set {
  /* TODO Convert to Variables Basis */
}

.config-focus-set:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.config-focus-set {
  /* Set this to focus-set to apply the focus defaults or change/add your chosen properties by applying Tailwind "focus:CLASS" format classes for all theme and non-theme states. */
}

.config-transition-set {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

/* ---------------------------- */

/* ANCHOR  Key Text Config		*/

/* ---------------------------- */

/* Note that these apply to H1 to H6 elements. The logical variant (invert, etc) will be applied by the corresponding theme-* parent. */

.config-text-key {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
}

.config-text-key-invert {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
}

.config-text-key-alt {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key-alt or gradient-text-key-alt to apply your chosen key alt color type (solid vs gradient). */
}

.config-text-key-alt-invert {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt-invert) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt-invert) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt-invert) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key-alt-invert or gradient-text-key-alt-invert to apply your chosen key alt invert color type (solid vs gradient). */
}

/* ---------------------------- */

/* ANCHOR  Base Links Config	*/

/* ---------------------------- */

/* Note that these apply to H1 to H6 link elements and P A link elements("A" elements in a "P" element). The logical variants (invert, etc) will be applied by the corresponding theme-* parent. */

/* CXNOTE All link configs are CX Specific. */

.config-hlink-base {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

.config-hlink-hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add hover plus any additional default global styles. */
}

.config-hlink-active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

.config-plink-base {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
  text-decoration-line: none;
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

.config-plink-hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add hover plus any additional default global styles. */
}

.config-plink-active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: var(--color-key-gradient-active-opacity);
  /* Set this to text-key or gradient-text-key (solid vs gradient), and add any additional default global styles. */
}

/* ---------------------------- */

/* ANCHOR  Specific Links		*/

/* ---------------------------- */

/* Note that these apply to specific link elements and inherit the Base Links Config above but override any conflicting properties. The logical variants (invert, etc) will be applied by the corresponding theme-* parent. */

& header {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-weight: 700;
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-style: normal;
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    opacity: 1;
  }
  nav p a:active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:active {
    opacity: var(--color-key-gradient-active-opacity);
  }
}

& footer {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-style: normal;
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    opacity: 1;
  }
  nav p a:active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:active {
    opacity: var(--color-key-gradient-active-opacity);
  }
}

/* ---------------------------- */

/* ANCHOR Text & Backgrounds	*/

/* ---------------------------- */

/* These are the Base default backgrounds and text color for BODY and MAIN. Use of a specific .theme and .theme-* will override bg-* colors and text-* colors. MAIN layers over BODY, and HEADER, SECTION, and FOOTER also layer above both BODY and MAIN. These override the @base layer plain HTML Fallbacks and become a new fallback/default. */

body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

header {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

main {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

footer {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

& footer {
  h1, h2, h3, h4, h5, h6 {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
}

::-moz-placeholder {
  font-style: italic;
}

::placeholder {
  font-style: italic;
}

/* ---------------------------- */

/* ANCHOR Mobile Menu			*/

/* ---------------------------- */

@media (min-width: 960px) {
  #header-nav-menu {
    display: none;
  }
}

#header-nav-menu {
  /* NOTE: Must include *:hidden for screen breakpoint (sm,md,lg,xl,2xl) to specify when mobile menu should display. */
}

#header-nav-menu	nav a {
  /* Optionally include px-*, w-*, and text-center/text-* to override @base default structure. */
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light)),
					inset 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
}

#header-nav-menu	nav a p {
  /* Optionally include px-*, w-*, and text-center/text-* to override @base default structure. */
  font-weight: 700;
  text-decoration-line: none;
}

/* ---------------------------- */

/* ANCHOR  Interactions			*/

/* ---------------------------- */

/* These effects are applied to all targeted elements by default. */

:focus-visible {
  /* Optional override of @base default :focus-visible */
  outline-color: rgb(var(--color-key) / 1);
}

.chip, .chip.gradient, .chip-gradient {
  opacity: 1;
}

.chip:hover, .chip.gradient:hover, .chip-gradient:hover {
  opacity: var(--color-key-gradient-active-opacity);
}

/* ---------------------------- */

/* ANCHOR  Other Elements		*/

/* ---------------------------- */

/* These effects are applied to all targeted elements by default. */

.card, .card-base {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  /* Applies defined --shadow-light to all cards */
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any base custom applications here which will be inherited across all themes. */

/* CXNOTE All Custom Applications are CX Specific. */

#cx-space-home-welcome-image a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

/* -------------------------------------------------------------------- */

/* !SECTION SECTION Base Styles											*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme & Theme Transparent									*/

/* -------------------------------------------------------------------- */

/* Most of the colors styles here are inherited from the DF Visuals, Base, and Global colors. Only edit/add overrides or new styles if needed. */

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* Use these optional classes to add matching theme styles to BODY and MAIN elements directly, but not implement theming to child elements (which should be implemented by adding the theme class to HEADER, SECTION, and FOOTER elements. Note that HEADER, SECTION, and FOOTER theming will visually layer on top of BODY and MAIN elements. */

/* CXNOTE gradient-bg or space-specified color/gradient replaces default bg-background for full page background setting. */

.main-theme {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-background-start) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-background-start) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-background-end) / 1) var(--tw-gradient-to-position);
  background: linear-gradient(to var(--color-background-direction), rgba(var(--color-background-start-rgb), 1), rgba(var(--color-background-end-rgb), 1)) ;
}

.body-theme, .main-theme, .body-theme-transparent, .main-theme-transparent {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

/* To directly style your header and footer element, you can apply a specific background and/or other styles here which will apply only to the header and footer elements (and child elements, if applicable) when the theme class is present. Alternatively, you can always use inline styles/classes. */

header.theme {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-header-background) / var(--tw-bg-opacity));
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-header-primary) / var(--tw-text-opacity));
  /* If applying a solid color background here while also using a gradient background for the theme, both will be active and layered. If so, bg-none must be added here to clear the gradient so that the solid color background visible. */
}

& header.theme {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-weight: var(--font-header-nav-weight);
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-header-nav-link) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    opacity: 1;
  }
  nav p a:active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:active {
    opacity: var(--color-key-gradient-active-opacity);
  }
}

footer.theme {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-footer-background) / var(--tw-bg-opacity));
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-footer-primary) / var(--tw-text-opacity));
  /* If applying a solid color background here while also using a gradient background for the theme, both will be active and layered. If so, bg-none must be added here to clear the gradient so that the solid color background visible. */
}

& footer.theme {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-weight: var(--font-footer-nav-weight);
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-footer-nav-link) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    opacity: 1;
  }
  nav p a:active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:active {
    opacity: var(--color-key-gradient-active-opacity);
  }
}

/* ---------------------------------------- */

/* ANCHOR Theme Applications (Base Theme)	*/

/* ---------------------------------------- */

/* These styles apply to theme parent elements and nested child elements. Avoid nesting theme classes under another theme class to prevent specificity issues. */

/* Note: The following colors are inherited from the Base "All Themes" Styles - Global:	.theme h1 to h6, .theme-transparent h1 to h6, header.theme h1 to h6, footer.theme h1 to h6. If you apply a solid color to these elements while using a gradient test base style, you may need to also apply bg-none to clear the gradient background and/or add bg-clip-* to fix clipping. */

/* CXNOTE gradient-bg or space-specified color/gradient replaces default bg-background for FAM page background setting. */

.theme {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-background-start) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-background-start) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-background-end) / 1) var(--tw-gradient-to-position);
  background: linear-gradient(to var(--color-background-direction), rgba(var(--color-background-start-rgb), 1), rgba(var(--color-background-end-rgb), 1)) ;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.theme-transparent {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

& .theme, & .theme-transparent {
  .card, .card-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any theme-specific custom applications here. */

/* CXNOTE All Custom Applications are CX Specific. */

& .theme, & .theme-transparent {
  .cx-stack-title h2 span, 
				.cx-stack-title-filters h2 span,
				.cx-stack-title-icons h2 span {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .cx-product-membership hgroup p, 
				.cx-product-item hgroup p, 
				.cx-featured-link a hgroup h4, .cx-featured-link hgroup p, 
				.cx-directory-member a hgroup h4, .cx-directory-member hgroup p,
				.cx-featured-access a hgroup h4, .cx-featured-access hgroup p, 
				.cx-featured-support a hgroup h4, .cx-featured-support hgroup p, .cx-featured-support hgroup p i {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme & Theme Transparent									*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Invert & Theme Invert Transparent						*/

/* -------------------------------------------------------------------- */

/* Only edit/add overrides or new styles if needed. DF Component color variants are predefined in DF Variants. */

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* Use these optional classes to add matching theme styles to BODY and MAIN elements directly, but not implement theming to child elements (which should be implemented by adding the theme class to HEADER, SECTION, and FOOTER elements. Note that HEADER, SECTION, and FOOTER theming will visually layer on top of BODY and MAIN elements. */

/* To directly style your header and footer element, you can apply a specific background and/or other styles here which will apply only to the header and footer elements (and child elements, if applicable) when the theme class is present. Alternatively, you can always use inline styles/classes. */

header.theme-invert, footer.theme-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
}

& header.theme-invert, footer.theme-invert {
  h1, h2, h3, h4, h5, h6 {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
}

/* -------------------------------- */

/* ANCHOR Theme Invert Applications	*/

/* -------------------------------- */

/* These styles apply to theme parent elements and nested child elements. Avoid nesting theme classes under another theme class to prevent specificity issues. */

/* Note: If you apply a solid color override to gradient elements, you may need to also apply bg-none to clear the gradient background and/or add bg-clip-* to fix clipping. */

.theme-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.theme-invert-transparent {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

& .theme-invert, & .theme-invert-transparent {
  h1, h2, h3, h4, h5, h6 {
    /* Do not edit */
  }
  h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  h1, h2, h3, h4, h5, h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  h1, h2, h3, h4, h5, h6 {
    color: transparent;
  }
  h1, h2, h3, h4, h5, h6 {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  h1, h2, h3, h4, h5, h6 {
    /* NOTE Enter config-text-key to keep the same key colors as .theme OR config-text-key-invert for your key-invert colors (which may be a equivalent to a solid color-background or an opposite color to color-key, depending on your set Variables). */
  }
  p a, p a:link, p a:visited {
    /* Do not edit */
  }
  p a, p a:link, p a:visited {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  p a, p a:link, p a:visited {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  p a, p a:link, p a:visited {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  p a, p a:link, p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  p a, p a:link, p a:visited {
    color: transparent;
  }
  p a, p a:link, p a:visited {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  p a, p a:link, p a:visited {
    /* NOTE Enter config-text-key to keep the same key colors as .theme OR config-text-key-invert for your key-invert colors (which may be a equivalent to a solid color-background or an opposite color to color-key, depending on your set Variables). */
  }
  .card, .card-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
  .card p, .card-base p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any theme-specific custom applications here. */

/* CXNOTE All Custom Applications are CX Specific. */

& .theme-invert, & .theme-invert-transparent {
  .stack-row h2 span {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  .cx-product-membership hgroup p, .cx-product-item hgroup p, .cx-featured-link a hgroup h4, .cx-featured-link hgroup p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Invert & Theme Invert Transparent						*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Key & Theme Key Gradient								*/

/* -------------------------------------------------------------------- */

/* Only edit/add overrides or new styles if needed. DF Component color variants are predefined in DF Variants. */

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* Use these optional classes to add matching theme styles to BODY and MAIN elements directly, but not implement theming to child elements (which should be implemented by adding the theme class to HEADER, SECTION, and FOOTER elements. Note that HEADER, SECTION, and FOOTER theming will visually layer on top of BODY and MAIN elements. */

/* To directly style your header and footer element, you can apply a specific background and/or other styles here which will apply only to the header and footer elements (and child elements, if applicable) when the theme class is present. Alternatively, you can always use inline styles/classes. */

header.theme-key, footer.theme-key {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
}

header.theme-key-gradient, footer.theme-key-gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

& header.theme-key, & footer.theme-key,
		& header.theme-key-gradient, & footer.theme-key-gradient {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
}

/* -------------------------------- */

/* ANCHOR Theme Key Applications	*/

/* -------------------------------- */

/* These styles apply to theme parent elements and nested child elements. Avoid nesting theme classes under another theme class to prevent specificity issues. */

/* Note: If you apply a solid color override to gradient elements, you may need to also apply bg-none to clear the gradient background and/or add bg-clip-* to fix clipping. */

.theme-key {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.theme-key-gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

& .theme-key, & .theme-key-gradient {
  h1, h2, h3, h4, h5, h6 {
    /* Do not edit */
  }
  h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  h1, h2, h3, h4, h5, h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  h1, h2, h3, h4, h5, h6 {
    color: transparent;
  }
  h1, h2, h3, h4, h5, h6 {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
  h1, h2, h3, h4, h5, h6 {
    /* NOTE Enter config-text-key-invert for your key-invert colors (which may be a equivalent to a solid color-background or an opposite color to color-key, depending on your set Variables) or text-invert or another text-* color which contrasts to your key color. */
  }
  p a, p a:link, p a:visited {
    /* Do not edit */
  }
  p a, p a:link, p a:visited {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  p a, p a:link, p a:visited {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  p a, p a:link, p a:visited {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  p a, p a:link, p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  p a, p a:link, p a:visited {
    color: transparent;
  }
  p a, p a:link, p a:visited {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
  p a, p a:link, p a:visited {
    /* NOTE Enter config-text-key-invert for your key-invert colors (which may be a equivalent to a solid color-background or an opposite color to color-key, depending on your set Variables) or text-invert or another text-* color which contrasts to your key color. */
  }
  .card, .card-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    /* Do not edit */
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    color: transparent;
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    /* NOTE Gradient key heading inside white cards. */
  }
  .card p, .card-base p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    /* Do not edit */
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    color: transparent;
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    /* NOTE Gradient key link inside white cards. */
  }
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any theme-specific custom applications here. */

& .theme-key, & .theme-key-gradient {
  .stack-row h2 span {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Key & Theme Key Gradient								*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Alt & Theme Alt Transparent							*/

/* -------------------------------------------------------------------- */

/* Only edit/add overrides or new styles if needed. DF Component color variants are predefined in DF Variants. */

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* Use these optional classes to add matching theme styles to BODY and MAIN elements directly, but not implement theming to child elements (which should be implemented by adding the theme class to HEADER, SECTION, and FOOTER elements. Note that HEADER, SECTION, and FOOTER theming will visually layer on top of BODY and MAIN elements. */

/* CXNOTE gradient-bg-alt or space-specified color/gradient replaces default bg-background-alt for full page background setting. */

/* To directly style your header and footer element, you can apply a specific background and/or other styles here which will apply only to the header and footer elements (and child elements, if applicable) when the theme class is present. Alternatively, you can always use inline styles/classes. */

header.theme-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-header-background-alt) / var(--tw-bg-opacity));
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-header-primary-alt) / var(--tw-text-opacity));
  /* If applying a solid color background here while also using a gradient background for the theme, both will be active and layered. If so, bg-none must be added here to clear the gradient so that the solid color background visible. */
}

& header.theme-alt {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-weight: var(--font-header-nav-weight-alt);
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-header-nav-link-alt) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    opacity: 1;
  }
  nav p a:active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary-alt) / var(--tw-text-opacity));
  }
  nav p a:active {
    opacity: var(--color-key-gradient-active-opacity);
  }
}

footer.theme-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-footer-background-alt) / var(--tw-bg-opacity));
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-footer-primary-alt) / var(--tw-text-opacity));
  /* If applying a solid color background here while also using a gradient background for the theme, both will be active and layered. If so, bg-none must be added here to clear the gradient so that the solid color background visible. */
}

& footer.theme-alt {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    font-weight: var(--font-footer-nav-weight-alt);
  }
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-footer-nav-link-alt) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    opacity: 1;
  }
  nav p a:active {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary-alt) / var(--tw-text-opacity));
  }
  nav p a:active {
    opacity: var(--color-key-gradient-active-opacity);
  }
}

/* -------------------------------- */

/* ANCHOR Theme Alt Applications	*/

/* -------------------------------- */

/* These styles apply to theme parent elements and nested child elements. Avoid nesting theme classes under another theme class to prevent specificity issues. */

/* Note: If you apply a solid color override to gradient elements, you may need to also apply bg-none to clear the gradient background and/or add bg-clip-* to fix clipping. */

/* CXNOTE gradient-bg-alt or space-specified color/gradient replaces default bg-background-alt for FAM page background setting. */

.theme-alt {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-background-start-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-background-start-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-background-end-alt) / 1) var(--tw-gradient-to-position);
  background: linear-gradient(to var(--color-background-alt-direction), rgba(var(--color-background-start-alt-rgb), 1), rgba(var(--color-background-end-alt-rgb), 1)) ;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-alt) / var(--tw-text-opacity));
}

.theme-alt-transparent {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-alt) / var(--tw-text-opacity));
}

& .theme-alt, & .theme-alt-transparent {
  h1, h2, h3, h4, h5, h6 {
    /* Do not edit */
  }
  h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  h1, h2, h3, h4, h5, h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  h1, h2, h3, h4, h5, h6 {
    color: transparent;
  }
  h1, h2, h3, h4, h5, h6 {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  h1, h2, h3, h4, h5, h6 {
    /* NOTE Resolves to alt gradient key via variable cascade. */
  }
  p a, p a:link, p a:visited {
    /* Do not edit */
  }
  p a, p a:link, p a:visited {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  p a, p a:link, p a:visited {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  p a, p a:link, p a:visited {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  p a, p a:link, p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  p a, p a:link, p a:visited {
    color: transparent;
  }
  p a, p a:link, p a:visited {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  p a, p a:link, p a:visited {
    /* NOTE Resolves to alt gradient key via variable cascade. */
  }
  .card, .card-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
  .card, .card-base {
    /* NOTE Resolves to alt-background via variable cascade. */
  }
  .card p, .card-base p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .card p, .card-base p {
    /* NOTE Resolves to alt-primary via variable cascade. */
  }
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any theme-specific custom applications here. */

/* CXNOTE All Custom Applications are CX Specific. */

& .theme-alt, & .theme-alt-transparent {
  .stack-row h2 span {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .stack-row h2 span {
    /* NOTE Resolves to alt-primary via variable cascade. */
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Alt & Theme Alt Transparent							*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Alt Invert & Theme Alt Invert Transparent				*/

/* -------------------------------------------------------------------- */

/* Only edit/add overrides or new styles if needed. DF Component color variants are predefined in DF Variants. */

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* Use these optional classes to add matching theme styles to BODY and MAIN elements directly, but not implement theming to child elements (which should be implemented by adding the theme class to HEADER, SECTION, and FOOTER elements. Note that HEADER, SECTION, and FOOTER theming will visually layer on top of BODY and MAIN elements. */

/* To directly style your header and footer element, you can apply a specific background and/or other styles here which will apply only to the header and footer elements (and child elements, if applicable) when the theme class is present. Alternatively, you can always use inline styles/classes. */

header.theme-alt-invert, footer.theme-alt-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-alt) / var(--tw-bg-opacity));
}

& header.theme-alt-invert, & footer.theme-alt-invert {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-secondary-alt) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
}

/* ------------------------------------ */

/* ANCHOR Theme Alt Invert Applications	*/

/* ------------------------------------ */

/* These styles apply to theme parent elements and nested child elements. Avoid nesting theme classes under another theme class to prevent specificity issues. */

/* Note: If you apply a solid color override to gradient elements, you may need to also apply bg-none to clear the gradient background and/or add bg-clip-* to fix clipping. */

.theme-alt-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-alt) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert-alt) / var(--tw-text-opacity));
}

.theme-alt-invert-transparent {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert-alt) / var(--tw-text-opacity));
}

& .theme-alt-invert, & .theme-alt-invert-transparent {
  h1, h2, h3, h4, h5, h6 {
    /* Do not edit */
  }
  h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  h1, h2, h3, h4, h5, h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  h1, h2, h3, h4, h5, h6 {
    color: transparent;
  }
  h1, h2, h3, h4, h5, h6 {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
  h1, h2, h3, h4, h5, h6 {
    /* NOTE Resolves to alt-key-invert via variable cascade. */
  }
  p a, p a:link, p a:visited {
    /* Do not edit */
  }
  p a, p a:link, p a:visited {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  p a, p a:link, p a:visited {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  p a, p a:link, p a:visited {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  p a, p a:link, p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  p a, p a:link, p a:visited {
    color: transparent;
  }
  p a, p a:link, p a:visited {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
  p a, p a:link, p a:visited {
    /* NOTE Resolves to alt-key-invert via variable cascade. */
  }
  .card, .card-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
  .card, .card-base {
    /* NOTE Resolves to alt-background via variable cascade. */
  }
  .card p, .card-base p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .card p, .card-base p {
    /* NOTE Resolves to alt-primary via variable cascade. */
  }
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any theme-specific custom applications here. */

/* CXNOTE All Custom Applications are CX Specific. */

& .theme-alt-invert, & .theme-alt-invert-transparent {
  .stack-row h2 span {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  .stack-row h2 span {
    /* NOTE Resolves to alt-invert via variable cascade. */
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Alt Invert & Theme Alt Invert Transparent				*/

/* -------------------------------------------------------------------- */

/* -------------------------------------------------------------------- */

/* SECTION Theme Key Alt & Theme Key Alt Gradient						*/

/* -------------------------------------------------------------------- */

/* Only edit/add overrides or new styles if needed. DF Component color variants are predefined in DF Variants. */

/* ---------------------------- */

/* ANCHOR Containers			*/

/* ---------------------------- */

/* Use these optional classes to add matching theme styles to BODY and MAIN elements directly, but not implement theming to child elements (which should be implemented by adding the theme class to HEADER, SECTION, and FOOTER elements. Note that HEADER, SECTION, and FOOTER theming will visually layer on top of BODY and MAIN elements. */

/* To directly style your header and footer element, you can apply a specific background and/or other styles here which will apply only to the header and footer elements (and child elements, if applicable) when the theme class is present. Alternatively, you can always use inline styles/classes. */

header.theme-key-alt, footer.theme-key-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-alt) / var(--tw-bg-opacity));
}

header.theme-key-alt-gradient, footer.theme-key-alt-gradient {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
}

& header.theme-key-alt, & footer.theme-key-alt,
		& header.theme-key-alt-gradient, & footer.theme-key-alt-gradient {
  nav p a, nav p a:link, nav p a:visited, nav p a:focus {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
  nav p a:hover {
    /* Do not edit */
  }
  nav p a:hover {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  nav p a:hover {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  nav p a:hover {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  nav p a:hover {
    -webkit-background-clip: text;
            background-clip: text;
  }
  nav p a:hover {
    color: transparent;
  }
  nav p a:hover {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
}

/* ------------------------------------ */

/* ANCHOR Theme Key Alt Applications	*/

/* ------------------------------------ */

/* These styles apply to theme parent elements and nested child elements. Avoid nesting theme classes under another theme class to prevent specificity issues. */

/* Note: If you apply a solid color override to gradient elements, you may need to also apply bg-none to clear the gradient background and/or add bg-clip-* to fix clipping. */

.theme-key-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-alt) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert-alt) / var(--tw-text-opacity));
}

.theme-key-alt-gradient {
  /* Do not edit */
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key-alt) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key-alt) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end-alt) / 1) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert-alt) / var(--tw-text-opacity));
}

& .theme-key-alt, & .theme-key-alt-gradient {
  h1, h2, h3, h4, h5, h6 {
    /* Do not edit */
  }
  h1, h2, h3, h4, h5, h6 {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  h1, h2, h3, h4, h5, h6 {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  h1, h2, h3, h4, h5, h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  h1, h2, h3, h4, h5, h6 {
    color: transparent;
  }
  h1, h2, h3, h4, h5, h6 {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
  h1, h2, h3, h4, h5, h6 {
    /* NOTE Resolves to alt-key-invert via variable cascade. Enter config-text-key-invert for your key-invert colors or text-invert or another text-* color which contrasts to your key color. */
  }
  p a, p a:link, p a:visited {
    /* Do not edit */
  }
  p a, p a:link, p a:visited {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops));
  }
  p a, p a:link, p a:visited {
    --tw-gradient-from: rgb(var(--color-key-invert) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key-invert) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  p a, p a:link, p a:visited {
    --tw-gradient-to: rgb(var(--color-key-invert-end) / 1) var(--tw-gradient-to-position);
  }
  p a, p a:link, p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  p a, p a:link, p a:visited {
    color: transparent;
  }
  p a, p a:link, p a:visited {
    /* Set this to text-key-invert or gradient-text-key-invert to apply your chosen key invert color type (solid vs gradient). */
  }
  p a, p a:link, p a:visited {
    /* NOTE Resolves to alt-key-invert via variable cascade. */
  }
  .card, .card-base {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }
  .card, .card-base {
    /* NOTE Resolves to alt-background via variable cascade. */
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    /* Do not edit */
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    -webkit-background-clip: text;
            background-clip: text;
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    color: transparent;
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  .card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
			.card-base h1, .card-base h2, .card-base h3, .card-base h4, .card-base h5, .card-base h6 {
    /* NOTE Resolves to alt gradient key via variable cascade. */
  }
  .card p, .card-base p {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .card p, .card-base p {
    /* NOTE Resolves to alt-primary via variable cascade. */
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    /* Do not edit */
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    -webkit-background-clip: text;
            background-clip: text;
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    color: transparent;
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  }
  .card p a, .card p a:link, .card p a:visited,
			.card-base p a, .card-base p a:link, .card-base p a:visited {
    /* NOTE Resolves to alt gradient key via variable cascade. */
  }
}

/* ---------------------------- */

/* ANCHOR Custom Applications	*/

/* ---------------------------- */

/* You can optionally add any theme-specific custom applications here. */

/* CXNOTE All Custom Applications are CX Specific. */

& .theme-key-alt, & .theme-key-alt-gradient {
  .stack-row h2 span {
    --tw-text-opacity: 1;
    color: rgb(var(--color-primary) / var(--tw-text-opacity));
  }
  .stack-row h2 span {
    /* NOTE Resolves to alt-primary via variable cascade. */
  }
}

/* -------------------------------------------------------------------- */

/* !SECTION Theme Key Alt & Theme Key Alt Gradient						*/

/* -------------------------------------------------------------------- */

/* -------------------------------- */

/* Injects Tailwind component classes and any plugin component classes 							*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.top-0 {
  top: 0px;
}

.top-2gutter-base {
  top: calc(2 * var(--spacing-gutter-base));
}

.top-\[calc\(var\(--element-nav-max\)\+var\(--spacing-shoulder-lg\)\)\] {
  top: calc(var(--element-nav-max) + var(--spacing-shoulder-lg));
}

.z-10 {
  z-index: 10;
}

.z-top {
  z-index: 888;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.col-base-smx {
  grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-auto {
  margin: auto;
}

.m-section-lg {
  margin: var(--pad-section-lg);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-article-base {
  margin-bottom: var(--pad-article-base);
}

.mb-article-xl {
  margin-bottom: var(--pad-article-xl);
}

.mb-element-base {
  margin-bottom: var(--pad-element-base);
}

.mb-sub-base {
  margin-bottom: var(--spacing-sub-base);
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-auto {
  margin-left: auto;
}

.ml-sub-base {
  margin-left: var(--spacing-sub-base);
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-article-base {
  margin-top: var(--pad-article-base);
}

.mt-auto {
  margin-top: auto;
}

.mt-heading {
  margin-top: var(--gap-hgroup-heading);
}

.mt-section-base {
  margin-top: var(--pad-section-base);
}

.mt-sub-base {
  margin-top: var(--spacing-sub-base);
}

.box-border {
  box-sizing: border-box;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.flow-root {
  display: flow-root;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-preview {
  aspect-ratio: 432 / 280;
}

.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-36 {
  height: 9rem;
}

.h-\[16px\] {
  height: 16px;
}

.h-\[200px\] {
  height: 200px;
}

.h-\[300px\] {
  height: 300px;
}

.h-\[32px\] {
  height: 32px;
}

.h-dvh {
  height: 100dvh;
}

.h-element-base {
  height: var(--element-base-size);
}

.h-element-compact {
  height: var(--element-compact-size);
}

.h-element-min {
  height: var(--element-min-size);
}

.h-element-nav-min {
  height: var(--element-nav-min-height);
}

.h-full {
  height: 100%;
}

.max-h-\[35vh\] {
  max-height: 35vh;
}

.max-h-\[var\(--element-nav-max-height\)\] {
  max-height: var(--element-nav-max-height);
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[160px\] {
  min-height: 160px;
}

.min-h-\[16px\] {
  min-height: 16px;
}

.min-h-\[48px\] {
  min-height: 48px;
}

.min-h-\[64px\] {
  min-height: 64px;
}

.min-h-\[96px\] {
  min-height: 96px;
}

.min-h-element-compact {
  min-height: var(--element-compact-size);
}

.w-36 {
  width: 9rem;
}

.w-5 {
  width: 1.25rem;
}

.w-8 {
  width: 2rem;
}

.w-\[128px\] {
  width: 128px;
}

.w-\[160px\] {
  width: 160px;
}

.w-\[192px\] {
  width: 192px;
}

.w-\[240px\] {
  width: 240px;
}

.w-\[256px\] {
  width: 256px;
}

.w-\[32px\] {
  width: 32px;
}

.w-\[64px\] {
  width: 64px;
}

.w-\[96px\] {
  width: 96px;
}

.w-auto {
  width: auto;
}

.w-dvw {
  width: 100dvw;
}

.w-element-base {
  width: var(--element-base-size);
}

.w-element-min {
  width: var(--element-min-size);
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[100px\] {
  min-width: 100px;
}

.min-w-\[108px\] {
  min-width: 108px;
}

.min-w-\[160px\] {
  min-width: 160px;
}

.min-w-\[180px\] {
  min-width: 180px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[640px\] {
  min-width: 640px;
}

.min-w-elementc-lg {
  min-width: var(--element-c-lg);
}

.min-w-elementc-md {
  min-width: var(--element-c-md);
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-\[1600px\] {
  max-width: 1600px;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[540px\] {
  max-width: 540px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[860px\] {
  max-width: 860px;
}

.max-w-elementc-xl {
  max-width: var(--element-c-xl);
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-screen-lg {
  max-width: 960px;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-\[2\] {
  flex: 2;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.basis-1\/2 {
  flex-basis: 50%;
}

.basis-1\/5 {
  flex-basis: 20%;
}

.basis-1\/7 {
  flex-basis: 14.2857143%;
}

.basis-2\/7 {
  flex-basis: 28.5714286%;
}

.basis-3\/7 {
  flex-basis: 42.8571429%;
}

.basis-4\/5 {
  flex-basis: 80%;
}

.basis-4\/7 {
  flex-basis: 57.1428571%;
}

.basis-5\/7 {
  flex-basis: 71.4285714%;
}

.basis-base-sm {
  flex-basis: calc(50% - var(--spacing-gutter-base));
}

.basis-full {
  flex-basis: 100%;
}

.basis-lg-lg {
  flex-basis: calc(50% - var(--spacing-gutter-lg));
}

.basis-lg-smx {
  flex-basis: calc(25% - var(--spacing-gutter-lg));
}

.border-collapse {
  border-collapse: collapse;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes fade {
  0%, 100% {
    opacity: 0.95;
  }

  50% {
    opacity: 0.7;
  }
}

.animate-fade {
  animation: fade 5s cubic-bezier(0.2, 0, 0.6, 1) infinite;
}

@keyframes glow {
  0%, 100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.7;
  }
}

.animate-glow {
  animation: glow 5s cubic-bezier(0.1, 0.1, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin 5s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-base {
  grid-template-columns: repeat(var(--layout-cols-base), minmax(0, 1fr));
}

.grid-cols-lg {
  grid-template-columns: repeat(var(--layout-cols-lg), minmax(0, 1fr));
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-content-center {
  place-content: center;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: flex-end;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-items-center {
  justify-items: center;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-\[16px\] {
  gap: 16px;
}

.gap-article-base {
  gap: var(--gap-article-base);
}

.gap-card-base {
  gap: var(--spacing-card-base);
}

.gap-element-base {
  gap: var(--gap-element-base);
}

.gap-element-lg {
  gap: var(--gap-element-lg);
}

.gap-form-base {
  gap: var(--gap-form-base);
}

.gap-form-lg {
  gap: var(--gap-form-lg);
}

.gap-gutter-base {
  gap: var(--spacing-gutter-base);
}

.gap-gutter-lg {
  gap: var(--spacing-gutter-lg);
}

.gap-gutter-sm {
  gap: var(--spacing-gutter-sm);
}

.gap-section-base {
  gap: var(--gap-section-base);
}

.gap-stack-base {
  gap: var(--gap-stack-base);
}

.gap-stack-min {
  gap: var(--spacing-sub-base);
}

.gap-sub-base {
  gap: var(--spacing-sub-base);
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-base-unit {
  -moz-column-gap: var(--layout-unit);
       column-gap: var(--layout-unit);
}

.gap-x-gutter-base {
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

.gap-x-sub-base {
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

.gap-y-0 {
  row-gap: 0px;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-base-unit {
  row-gap: var(--layout-unit);
}

.gap-y-sub-base {
  row-gap: var(--spacing-sub-base);
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-base-unit > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--layout-unit) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--layout-unit) * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-key > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-divide-opacity));
}

.divide-tertiary > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-tertiary) / var(--tw-divide-opacity));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-base {
  border-radius: var(--rounded-base);
}

.rounded-corner {
  border-radius: var(--rounded-corner);
}

.rounded-field {
  border-radius: var(--rounded-field);
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-background {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-background) / var(--tw-border-opacity));
}

.border-key {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.border-key\/20 {
  border-color: rgb(var(--color-key) / 0.2);
}

.border-secondary-shader-light {
  border-color: rgb(var(--color-secondary) / var(--shader-light));
}

.border-tertiary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-tertiary) / var(--tw-border-opacity));
}

.border-opacity-25 {
  --tw-border-opacity: 0.25;
}

.\!bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5) !important;
}

.bg-\[\#fafafc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 252 / var(--tw-bg-opacity));
}

.bg-alert-error {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-error) / var(--tw-bg-opacity));
}

.bg-alert-notify {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-notify) / var(--tw-bg-opacity));
}

.bg-alert-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-success) / var(--tw-bg-opacity));
}

.bg-alert-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-alert-warning) / var(--tw-bg-opacity));
}

.bg-background {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

.bg-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
}

.bg-invert\/5 {
  background-color: rgb(var(--color-invert) / 0.05);
}

.bg-invert\/95 {
  background-color: rgb(var(--color-invert) / 0.95);
}

.bg-key {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
}

.bg-key-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-alt) / var(--tw-bg-opacity));
}

.bg-key-alt-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-alt-invert) / var(--tw-bg-opacity));
}

.bg-key-gradient-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
}

.bg-key-invert {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-invert) / var(--tw-bg-opacity));
}

.bg-key-shader {
  background-color: rgb(var(--color-key) / var(--shader-base));
}

.bg-key-shader-heavy {
  background-color: rgb(var(--color-key) / var(--shader-heavy));
}

.bg-key-shader-light {
  background-color: rgb(var(--color-key) / var(--shader-light));
}

.bg-key\/20 {
  background-color: rgb(var(--color-key) / 0.2);
}

.bg-key\/5 {
  background-color: rgb(var(--color-key) / 0.05);
}

.bg-key\/95 {
  background-color: rgb(var(--color-key) / 0.95);
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
}

.bg-primary-shader {
  background-color: rgb(var(--color-primary) / var(--shader-base));
}

.bg-primary-shader-heavy {
  background-color: rgb(var(--color-primary) / var(--shader-heavy));
}

.bg-primary-shader-light {
  background-color: rgb(var(--color-primary) / var(--shader-light));
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-secondary) / var(--tw-bg-opacity));
}

.bg-secondary-shader-light {
  background-color: rgb(var(--color-secondary) / var(--shader-light));
}

.bg-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-tertiary) / var(--tw-bg-opacity));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-opacity-0 {
  --tw-bg-opacity: 0;
}

.bg-opacity-gradient-invert {
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-primary-shader {
  --tw-gradient-from: rgb(var(--color-primary) / var(--shader-base)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-shader-light {
  --tw-gradient-to: rgb(var(--color-primary) / var(--shader-light)) var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-clip-border {
  background-clip: border-box;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.p-0 {
  padding: 0px;
}

.p-4 {
  padding: 1rem;
}

.p-article-base {
  padding: var(--pad-article-base);
}

.p-article-md {
  padding: var(--pad-article-md);
}

.p-card-base {
  padding: var(--spacing-card-base);
}

.p-card-sm {
  padding: var(--spacing-card-sm);
}

.p-element-base {
  padding: var(--pad-element-base);
}

.p-section-base {
  padding: var(--pad-section-base);
}

.p-section-lg {
  padding: var(--pad-section-lg);
}

.p-sub-base {
  padding: var(--spacing-sub-base);
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-card-base {
  padding-left: var(--spacing-card-base);
  padding-right: var(--spacing-card-base);
}

.px-shoulder-base {
  padding-left: var(--spacing-shoulder-base);
  padding-right: var(--spacing-shoulder-base);
}

.px-shoulder-lg {
  padding-left: var(--spacing-shoulder-lg);
  padding-right: var(--spacing-shoulder-lg);
}

.px-sub-base {
  padding-left: var(--spacing-sub-base);
  padding-right: var(--spacing-sub-base);
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-card-base {
  padding-top: var(--spacing-card-base);
  padding-bottom: var(--spacing-card-base);
}

.py-gutter-2xl {
  padding-top: var(--spacing-gutter-2xl);
  padding-bottom: var(--spacing-gutter-2xl);
}

.py-section-base {
  padding-top: var(--pad-section-base);
  padding-bottom: var(--pad-section-base);
}

.py-sub-base {
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
}

.\!pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-section-xl {
  padding-bottom: var(--pad-section-xl);
}

.pl-article-base {
  padding-left: var(--pad-article-base);
}

.pl-card-base {
  padding-left: var(--spacing-card-base);
}

.pl-element-base {
  padding-left: var(--pad-element-base);
}

.pl-element-xl {
  padding-left: var(--pad-element-xl);
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-card-base {
  padding-right: var(--spacing-card-base);
}

.pr-element-base {
  padding-right: var(--pad-element-base);
}

.pt-0 {
  padding-top: 0px;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-block-base {
  padding-top: var(--spacing-block-base);
}

.pt-card-base {
  padding-top: var(--spacing-card-base);
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-body {
  font-family: var(--font-body), var(--font-body-alt1), var(--font-body-alt2);
}

.font-display {
  font-family: var(--font-display), var(--font-display-alt1), var(--font-display-alt2);
}

.font-heading {
  font-family: var(--font-heading), var(--font-heading-alt1), var(--font-heading-alt2);
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-chip {
  font-size: var(--text-chip-size);
  line-height: var(--text-chip-lh);
}

.text-d1 {
  font-size: var(--text-d1-size);
  line-height: var(--text-d1-lh);
}

.text-d2 {
  font-size: var(--text-d2-size);
  line-height: var(--text-d2-lh);
}

.text-d3 {
  font-size: var(--text-d3-size);
  line-height: var(--text-d3-lh);
}

.text-h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
}

.text-h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.text-h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
}

.text-h4 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
}

.text-h5 {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
}

.text-h6 {
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
}

.text-heb {
  font-size: var(--text-heb-size);
  line-height: var(--text-heb-lh);
}

.text-i1 {
  font-size: var(--text-i1-size);
  line-height: var(--text-i1-lh);
}

.text-i2 {
  font-size: var(--text-i2-size);
  line-height: var(--text-i2-lh);
}

.text-i3 {
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
}

.text-i4 {
  font-size: var(--text-i4-size);
  line-height: var(--text-i4-lh);
}

.text-i5 {
  font-size: var(--text-i5-size);
  line-height: var(--text-i5-lh);
}

.text-i6 {
  font-size: var(--text-i6-size);
  line-height: var(--text-i6-lh);
}

.text-p1 {
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

.text-p2 {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.text-p3 {
  font-size: var(--text-p3-size);
  line-height: var(--text-p3-lh);
}

.text-p4 {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.text-p5 {
  font-size: var(--text-p5-size);
  line-height: var(--text-p5-lh);
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-element {
  line-height: var(--element-base-size);
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-alert-error {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-error) / var(--tw-text-opacity));
}

.text-alert-notify {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-notify) / var(--tw-text-opacity));
}

.text-alert-success {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-success) / var(--tw-text-opacity));
}

.text-alert-warning {
  --tw-text-opacity: 1;
  color: rgb(var(--color-alert-warning) / var(--tw-text-opacity));
}

.text-header-nav-link {
  --tw-text-opacity: 1;
  color: rgb(var(--color-header-nav-link) / var(--tw-text-opacity));
}

.text-invert {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.text-key {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.text-key-end {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key-end) / var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.text-tertiary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.no-underline {
  text-decoration-line: none;
}

.opacity-100 {
  opacity: 1;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-85 {
  opacity: 0.85;
}

.opacity-gradient-active {
  opacity: var(--color-key-gradient-active-opacity);
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-base {
  --tw-shadow: var(--shadow-base);
  --tw-shadow-colored: var(--shadow-base);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-heavy {
  --tw-shadow: var(--shadow-heavy);
  --tw-shadow-colored: var(--shadow-heavy);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-light {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-invert {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
}

.ring-key {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-base {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Do not edit	*/

/* -------------------------------- */

/* NOTE: Add any overrides here which target Designframe/Tailwind Classes and Utilities. */

/* -------------------------------- */

/* Do not edit	*/

/* -------------------------------- */

.df-docs-sidebar-nav {
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 960px) {
  .df-docs-sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

.df-docs-sidebar-nav a.button.air > span {
  justify-content: flex-start;
  padding-left: var(--spacing-sub-base);
  padding-right: var(--spacing-sub-base);
}

/* Default: secondary text */

.df-docs-sidebar-nav a.button.gradient.air p,
	.df-docs-sidebar-nav a.button.gradient.air i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

/* Hover: gradient text */

.df-docs-sidebar-nav a.button.gradient.air:hover p,
	.df-docs-sidebar-nav a.button.gradient.air:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Active: gradient text only, no fill, no shadow */

.df-docs-sidebar-nav a.button.gradient.air.active {
  background-color: transparent;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.df-docs-sidebar-nav a.button.gradient.air.active::before {
  opacity: 0;
}

.df-docs-sidebar-nav a.button.gradient.air.active > span {
  background-color: transparent;
}

.df-docs-sidebar-nav a.button.gradient.air.active p,
	.df-docs-sidebar-nav a.button.gradient.air.active i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Subnav: section links under the active page */

.df-docs-sidebar-nav-sub {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-sub-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
  padding-left: 40px;
}

.df-docs-sidebar-nav-sub a {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

/* ---------------------------- */

/* ANCHOR Code Formatting 		*/

/* ---------------------------- */

.df-block-code pre code {
  display: block;
  white-space: pre-wrap;
}

.df-block-code pre {
  position: relative;
  margin-bottom: 32px;
}

.df-block-code pre.language-markup {
  margin: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.df-block-code pre button {
  position: absolute;
  bottom: -32px;
  left: 0;
  min-width: 6rem;
}

.form-input-checkbox.df-block-code pre button .checkbox {
  border-radius: var(--rounded-min);
}

.form-input-checkbox.df-block-code pre button .checkbox input {
  border-radius: calc(var(--rounded-min) - var(--border-button));
}

.df-block-code pre button {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.df-block-code pre button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.df-block-code-copy-stack {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.df-block-code-copy-stack > button {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  border-top: 0px;
  width: 100%;
  padding-top: 0px;
  border-top-color: transparent;
}

/* ---------------------------- */

/* ANCHOR Component Examples	*/

/* ---------------------------- */

/*
		Docs-site patterns for showing component examples with toggleable source code.
		All examples wrap in .df-example (vertical stack with code toggle + copy buttons).

		Two visual container types:

		1. df-example-diagram — Structural wireframe diagrams
		   Shows how page landmarks relate (header/main/footer, sidebar splits).
		   NOT running real DF components — labeled boxes representing structure.
		   Uses child classes: -header, -footer, -main, -section.
		   Container has p-0 + overflow-hidden for an edge-to-edge mini page feel.

		2. df-example-section — Live component demos (dogfooding)
		   The real DF container (section-grid, section-flex, etc.) IS the demo.
		   Just adds a key border to visually frame the live container.
		   Children use .df-demo to make blocks visible with labels.
		   Shows actual grid columns, real gaps, real wrapping behavior.

		Also available:
		- df-example-preview — Generic padded container for non-grid demos
		  (stacks, buttons, forms, data rows, etc.)
		- df-demo / df-demo-alt / df-demo-outline — Block label styles
		  for making children visible inside any container type.
	*/

.df-example {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: var(--spacing-sub-base);
}

.df-example-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--rounded-corner);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-tertiary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.df-example-diagram {
  align-items: stretch;
  border-radius: var(--rounded-corner);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-tertiary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  padding: 0px;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.df-example-diagram-header {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  background-color: rgb(var(--color-key) / var(--shader-light));
  padding: var(--spacing-sub-base);
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.df-example-diagram-footer {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  background-color: rgb(var(--color-key) / var(--shader-light));
  padding: var(--spacing-sub-base);
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.df-example-diagram-main {
  position: relative;
  gap: 0px;
}

.df-example-diagram-main::before {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: center;
  font-size: var(--text-p5-size);
  line-height: var(--text-p5-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity));
  content: "main";
}

.df-example-diagram-section {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  padding: var(--spacing-sub-base);
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.df-example-code {
  overflow: hidden;
  border-radius: var(--rounded-corner);
}

.df-example-code pre {
  margin: 0px;
}

.df-example-code pre code {
  display: block;
  white-space: pre-wrap;
  border-radius: var(--rounded-corner);
  padding: var(--spacing-card-base);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  line-height: var(--text-p2-lh);
}

.df-example-code.hide {
  display: none;
}

.df-example-controls {
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

.df-example-section {
  position: relative;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

.df-example-section::before {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: center;
  font-size: var(--text-p5-size);
  line-height: var(--text-p5-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-tertiary) / var(--tw-text-opacity));
  content: attr(data-label);
}

/* Demo blocks for component examples */

.df-demo {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
  padding: var(--spacing-sub-base);
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

/* §13.7 carve-out: demo-alt border (0.3) and demo-outline border (0.4) are mid-range alphas with no matching shader token (light 0.15, base 0.60); visually calibrated to demo-box contrast. Only 2 instances, below 3+ escalation threshold. */

.df-demo-alt {
  border-radius: var(--rounded-base);
  padding: var(--spacing-sub-base);
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  background: rgba(var(--color-key), var(--shader-light));
  border: 1px solid rgba(var(--color-key), 0.3);
  color: rgb(var(--color-key));
}

/* -------------------------------- */

/* Injects Tailwind utility classes and any plugin utility classes								*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION Required Tailwind Directives - DO NOT EDIT											*/

/* -------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------ */

/* CXJS CX JS VARIABLES BEGIN	- SEE JS REPLACMENT FOR VALUE IN CXJS COMMENTS									*/

/* ------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------ */

/* -------------------------------------------------------------------------------------------- */

/* SECTION CONFIG Fonts																			*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER base begin				*/

/* Do not edit 					*/

/* !LAYER base end 					*/

/* -------------------------------------------- */

/* !SECTION CONFIG Fonts						*/

/* -------------------------------------------- */

/* ---------------------------- */

/* LAYER :root begin			*/

:root {
  /* Do not edit			*/
  /* ---------------------------- */
  /* -------------------------------------------- */
  /* SECTION CONFIG Quick Setup Variables			*/
  /* -------------------------------------------- */
  /* SECTION - QS IMPORT START    */
  /* ---------------------------- */
  /* ANCHOR Font Assignments		*/
  /* ---------------------------- */
  /* ASSIGNMENTS */
  /* Assign your Heading, Body, and Display Fonts from Font Setup to their appropriate uses. */
  /* CXJS Theme Base Variables - Fonts */
  --font-heading: headingFontFamily;
  /* Default font-family for Heading. */
  /* CXJS Do not change this variable. Always keep "headingFontFamily" */
  --font-heading-alt1: sans-serif;
  /* First fallback for Heading. */
  /* CXJS Use "serif" or "sans-serif" based on Heading Font SRC */
  --font-heading-alt2: system-ui;
  /* Second fallback for Heading. */
  /* CXJS Do not change this variable. Always keep "system-ui" */
  --font-body: bodyFontFamily;
  /* Default font-family Body. */
  /* CXJS Do not change this variable. Always keep "bodyFontFamily" */
  --font-body-alt1: sans-serif;
  /* First fallback for Body. */
  /* CXJS Use "serif" or "sans-serif" based on Body Font SRC */
  --font-body-alt2: system-ui;
  /* Second fallback for Body. */
  /* CXJS Do not change this variable. Always keep "system-ui" */
  --font-display: displayFontFamily;
  /* Default font-family for Display. Same value as --font-heading is standard usage. */
  /* CXJS Do not change this variable. Always keep "displayFontFamily" */
  --font-display-alt1: sans-serif;
  /* First fallback for Display. Same value as --font-heading is standard usage. */
  /* CXJS Use "serif" or "sans-serif" based on Display Font SRC */
  --font-display-alt2: system-ui;
  /* Second fallback for Display. Same value as --font-heading is standard usage. */
  /* CXJS Do not change this variable. Always keep "system-ui" */
  /* -------------------------------------------------------------------------------------------- */
  /* ANCHOR Quick Setup Variables																	*/
  /* -------------------------------------------------------------------------------------------- */
  /* --qs variables are used in the Quick Setup to define theme colors and font usage.			*/
  /* These variables can also be overriden on page level via inline styles on the HTML element.	*/
  /* -------------------------------------------------------------------------------------------- */
  /* CXJS Theme Base Variables - Colors */
  --qs-color-key: 251 3 185;
  /* CXJS {color_key} */
  --qs-color-key-rgb: 251, 3, 185;
  /* CXJS {color_key_rgb} */
  --qs-color-key-end: 56 131 255;
  /* CXJS {color_key_end} */
  --qs-color-key-end-rgb: 56, 131, 255;
  /* CXJS {color_key_end_rgb} */
  --qs-color-primary: 12 12 12;
  /* CXJS {color_primary} */
  --qs-color-secondary: 136 136 136;
  /* CXJS {color_secondary} */
  --qs-color-tertiary: 204 204 204;
  /* CXJS {color_tertiary} */
  --qs-color-invert: 255 255 255;
  /* CXJS {color_invert} */
  --qs-color-disabled: 204 204 204;
  /* CXJS {color_disabled} */
  --qs-color-background: 255 255 255;
  /* CXJS {color_background} */
  --qs-color-background-start: 255 230 248;
  /* CXJS {color_background_start} */
  --qs-color-background-start-rgb: 255, 230, 248;
  /* CXJS {color_background_start_rgb} */
  --qs-color-background-end: 235 243 255;
  /* CXJS {color_background_end} */
  --qs-color-background-end-rgb: 235, 243, 255;
  /* CXJS {color_background_end_rgb} */
  --qs-color-background-direction: right top;
  /* CXJS {color_background_direction}  */
  /* CXJS Theme Alt Variables - Colors */
  --qs-color-key-alt: 250 0 2;
  /* CXJS {color_key} */
  --qs-color-key-alt-rgb: 250, 0, 2;
  /* CXJS {color_key_rgb} */
  --qs-color-key-end-alt: 250 160 2;
  /* CXJS {color_key_end} */
  --qs-color-key-end-alt-rgb: 250, 160, 2;
  /* CXJS {color_key_end_rgb} */
  --qs-color-primary-alt: 12 12 12;
  /* CXJS {color_primary_alt} */
  --qs-color-secondary-alt: 136 136 136;
  /* CXJS {color_secondary_alt} */
  --qs-color-tertiary-alt: 204 204 204;
  /* CXJS {color_tertiary_alt} */
  --qs-color-invert-alt: 255 255 255;
  /* CXJS {color_invert_alt} */
  --qs-color-disabled-alt: 204 204 204;
  /* CXJS {color_disabled_alt} */
  --qs-color-background-alt: 255 255 255;
  /* CXJS {color_background_alt} */
  --qs-color-background-start-alt: 255 159 28;
  /* CXJS {color_background_start_alt} */
  --qs-color-background-start-alt-rgb: 255, 159, 28;
  /* CXJS {color_background_start_alt_rgb} */
  --qs-color-background-end-alt: 255 209 102;
  /* CXJS {color_background_end_alt} */
  --qs-color-background-end-alt-rgb: 255, 209, 102;
  /* CXJS {color_background_end_alt_rgb} */
  --qs-color-background-alt-direction: right top;
  /* CXJS {color_background_alt_direction} */
  /* CXJS Theme Header Variables - Colors */
  --qs-color-header-background: 255 255 255;
  /* CXJS {color_header_background} */
  --qs-color-header-primary: 12 12 12;
  /* CXJS {color_header_primary} */
  --qs-color-header-nav-link: 136 136 136;
  /* CXJS {color_header_nav_link} */
  --qs-font-header-nav-weight: 700;
  /* CXJS {font_header_nav_weight} */
  /* CXJS Theme Footer Variables - Colors */
  --qs-color-footer-background: 255 255 255;
  /* CXJS {color_footer_background} */
  --qs-color-footer-primary: 12 12 12;
  /* CXJS {color_footer_primary} */
  --qs-color-footer-nav-link: 136 136 136;
  /* CXJS {color_footer_nav_link} */
  --qs-font-footer-nav-weight: 700;
  /* CXJS {font_footer_nav_weight} */
  /* CXJS Theme Base Variables - Rounding */
  --qs-rounded-base: 8px;
  /* Base element rounding — avatars, inputs, .squared modifier */
  --qs-rounded-min: 4px;
  /* Smallest rounding — chips, subtle elements */
  --qs-rounded-corner: 8px;
  /* Standard container rounding — cards, buttons, dropdowns */
  --qs-rounded-field: 20px;
  /* Form input rounding — text fields, selects, textareas */
  /* !SECTION - QS IMPORT END     */
  /* -------------------------------------------- */
  /* !SECTION CONFIG Quick Setup Variables		*/
  /* -------------------------------------------- */
  /* -------------------------------------------- */
  /* SECTION CONFIG Custom Variables				*/
  /* -------------------------------------------- */
  /* -------------------------------------------------------------------------------------------- */
  /* ANCHOR Commonspace Specific Variables														*/
  /* -------------------------------------------------------------------------------------------- */
  /* CXJS Main Theme Image/Video Variables */
  --cx-theme-bg-image: url('../src/pages/samples/images/nghtmre-bg-image.png');
  /* CXJS Default is "none" {theme_background_image} */
  --cx-theme-bg-image-position: bottom;
  /* CXJS Default is center {theme_background_image_position} */
  --cx-theme-bg-video-position: center;
  /* CXJS Default is center {theme_background_video_position} */
  /* CXJS Theme Alt Image/Video Variables */
  --cx-theme-alt-bg-image: none;
  /* CXJS Default is "none" {theme_alt_background_image} */
  --cx-theme-alt-bg-image-position: center;
  /* CXJS Default is center {theme_alt_background_image_position} */
  --cx-theme-alt-bg-video-position: center;
  /* CXJS Default is center {theme_alt_background_video_position} */
  /* CXJS Space Home Hero Image/Video Variables */
  --cx-space-banner-hero-bg-image: url('../src/pages/samples/images/fam-home-header.jpg');
  /* CXJS  {space_hero_background_image} */
  --cx-space-banner-hero-bg-image-position: center;
  /* CXJS Default is center {space_hero_background_image_position} */
  --cx-space-banner-hero-bg-video-position: center;
  /* CXJS Default is center {space_hero_background_video_position} */
  --cx-space-banner-hero-fg-content-justify: center;
  /* CXJS Default is center */
  --cx-space-banner-hero-fg-content-align: center;
  /* CXJS Default is center */
  /* CXJS Space Section Banner URLs */
  --cx-space-banner-updates-image: url('../src/pages/samples/images/fam-updates-header.jpg');
  /* CXJS {space_banner_updates} */
  --cx-space-banner-benefits-image: url('../src/pages/samples/images/fam-benefits-header.jpg');
  /* CXJS {space_banner_benefits} */
  --cx-space-banner-members-image: url('../src/pages/samples/images/fam-members-header.jpg');
  /* CXJS {space_banner_members} */
  --cx-space-banner-access-image: url('../src/pages/samples/images/fam-access-header.jpg');
  /* CXJS {space_banner_access} */
  --cx-space-banner-channels-image: url('../src/pages/samples/images/fam-channels-header.jpg');
  /* CXJS {space_banner_channels} */
  --cx-space-banner-info-image: url('../src/pages/samples/images/fam-info-header.jpg');
  /* CXJS {space_banner_information} */
  /* -------------------------------------------- */
  /* !SECTION CONFIG Custom Variables				*/
  /* -------------------------------------------- */
  /* ---------------------------- */
}

/* Do not edit				*/

/* !LAYER :root end	 			*/

/* ---------------------------- */

/* NOTE CSS STATIC BELOW THIS LINE */

/* ------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------ */

/* CXJS CX JS VARIABLES END - ALL CODE BELOW IS STATIC (NO JS VARIABLES BELOW)									*/

/* ------------------------------------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------------------------------------ */

/* -------------------------------------------- */

/* SECTION CONFIG Extended Variables			*/

/* -------------------------------------------- */

/* LAYER :root begin			*/

:root {
  /* Do not edit			*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION Screens				*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Screen Breakpoints	*/
  /* ---------------------------- */
  /* NOTE If you edit these values from the Preferred Value, you must also edit the @media breakpoints (search for "@media") in this file AND the values in lines 9 to 15 in df-preset.js due to CSS not supporting variables in media queries. See tailwind-setup.txt for more information. */
  --screen-sm: 640px;
  /* Preferred Value and Tailwind Default is 640px */
  --screen-md: 768px;
  /* Preferred Value and Tailwind Default is 768px */
  --screen-lg: 960px;
  /* Preferred Value is 960px. Use 1024px to set to Tailwind Default. */
  --screen-xl: 1440px;
  /* Preferred Value is 1440px. Use 1280px to set to Tailwind Default */
  --screen-2xl: 1600px;
  /* Preferred Value is 1600px. Use 1536px to set to Tailwind Default */
  /* ---------------------------- */
  /* !SECTION Screens				*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION Layout				*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Units & Grid			*/
  /* ---------------------------- */
  /* Settings here configure the base unit and the overall grid for each screen. */
  /* LAYOUT - BASE UNIT */
  /* Specify the grid point base unit size (px/rem) for your layout. */
  --layout-unit: 4px;
  /* Must be an even number between 2px and 16px. Preferred value is 4px or 0.25rem.  */
  /* LAYOUT - GRID SYSTEM	*/
  /* Specify the column count for each screen. */
  --layout-cols-base: 6;
  /* Mobile-first default count which applies below the screen-sm breakpoint. Preferred value is 6 */
  --layout-cols-sm: 6;
  /* Preferred value is 6 */
  --layout-cols-md: 6;
  /* Preferred value is 6 */
  --layout-cols-lg: 12;
  /* Preferred value is 12 */
  --layout-cols-xl: 12;
  /* Preferred value is 12 */
  --layout-cols-2xl: 12;
  /* Preferred value is 12 */
  /* ---------------------------- */
  /* ANCHOR Adaptive Behavior		*/
  /* ---------------------------- */
  /* This defines the default adaptive behavior. Keeping the default Preferred Values is strongly recommended. */
  /* MINIMUM GRID COLUMNS */
  /* This is the minimum column count for which a controlling parent element can be for each screen. */
  --layout-cols-base-min: 2;
  /* Preferred value is 2 OR one-third of layout-cols rounded to an integer > 1.  */
  --layout-cols-sm-min: 1;
  /* Preferred value is 1 OR one-fourth of layout-cols-sm rounded to an integer ≥ 1.  */
  --layout-cols-md-min: 1;
  /* Preferred value is 1 OR one-fourth of layout-cols-md rounded to an integer ≥ 1.  */
  --layout-cols-lg-min: 1;
  /* Preferred value is 1 OR one-eighth of layout-cols-lg rounded to an integer ≥ 1.  */
  --layout-cols-xl-min: 1;
  /* Preferred value is 1 OR one-eighth of layout-cols-xl rounded to an integer ≥ 1.  */
  --layout-cols-2xl-min: 1;
  /* Preferred value is 1 OR one-eighth of layout-cols-2xl rounded to an integer ≥ 1.  */
  /* ADAPTIVE GRID COLUMNS */
  /* The following are column counts relative to your layout-cols above. Generally there are only 2 sets based on your chosen column counts per breakpoint, however if an unusual variation is used, it can be adapted here. Round up to next integer when dividing. */
  --layout-cols-base-third: 2;
  --layout-cols-base-half: 3;
  --layout-cols-base-twothird: 4;
  --layout-cols-sm-third: 2;
  --layout-cols-sm-half: 3;
  --layout-cols-sm-twothird: 4;
  --layout-cols-md-third: 2;
  --layout-cols-md-half: 3;
  --layout-cols-md-twothird: 4;
  --layout-cols-lg-sixth: 2;
  --layout-cols-lg-quarter: 3;
  --layout-cols-lg-third: 4;
  --layout-cols-lg-fivetwelfth: 5;
  --layout-cols-lg-half: 6;
  --layout-cols-lg-seventwelfth: 7;
  --layout-cols-lg-twothird: 8;
  --layout-cols-lg-threefourth: 9;
  --layout-cols-lg-fivesixth: 10;
  --layout-cols-lg-eleventwelfth: 11;
  --layout-cols-xl-sixth: 2;
  --layout-cols-xl-quarter: 3;
  --layout-cols-xl-third: 4;
  --layout-cols-xl-fivetwelfth: 5;
  --layout-cols-xl-half: 6;
  --layout-cols-xl-seventwelfth: 7;
  --layout-cols-xl-twothird: 8;
  --layout-cols-xl-threefourth: 9;
  --layout-cols-xl-fivesixth: 10;
  --layout-cols-xl-eleventwelfth: 11;
  --layout-cols-2xl-sixth: 2;
  --layout-cols-2xl-quarter: 3;
  --layout-cols-2xl-third: 4;
  --layout-cols-2xl-fivetwelfth: 5;
  --layout-cols-2xl-half: 6;
  --layout-cols-2xl-seventwelfth: 7;
  --layout-cols-2xl-twothird: 8;
  --layout-cols-2xl-threefourth: 9;
  --layout-cols-2xl-fivesixth: 10;
  --layout-cols-2xl-eleventwelfth: 11;
  /* FLEX BLOCK MINIMUM */
  /* For container blocks with a Flex Parent only. */
  --layout-basis-min: 33.333333%;
  /* This is the minimum width on mobile which a controlling parent element can be. Preferred value is 33.333333%. */
  /* ---------------------------- */
  /* ANCHOR Gutters				*/
  /* ---------------------------- */
  /* Specify your standard gutter spacing for each screen. */
  --spacing-gutter-base: 24px;
  --spacing-gutter-sm: 24px;
  --spacing-gutter-md: 24px;
  --spacing-gutter-lg: 24px;
  --spacing-gutter-xl: 32px;
  --spacing-gutter-2xl: 32px;
  /* ---------------------------- */
  /* ANCHOR Rows & Columns		*/
  /* ---------------------------- */
  /* Settings here define specific measurements in px or rem. Keeping the default Preferred Values or Designframe-calculated values is strongly recommended. */
  /* COLUMNS */
  /* Specify the calculated col width for each screen. This sets some min-widths and is available using any width utility like w-col, min-w-col-sm, etc. */
  --layout-col-width-base: 32px;
  /* This is the base mobile-first default size which applies below the screen-sm breakpoint  */
  --layout-col-width-sm: 76px;
  --layout-col-width-md: 96px;
  --layout-col-width-lg: 52px;
  --layout-col-width-xl: 84px;
  --layout-col-width-2xl: 96px;
  /* ROWS */
  /* Specify the calculated row height for each screen. This sets some min-heights and is available using any height utility like auto-rows-sm, h-row, min-h-row-sm, etc. */
  --layout-row-height-base: 48px;
  /* This is the base mobile-first default size which applies below the screen-sm breakpoint  */
  --layout-row-height-sm: 72px;
  --layout-row-height-md: 48px;
  --layout-row-height-lg: 72px;
  --layout-row-height-xl: 72px;
  --layout-row-height-2xl: 72px;
  /* ---------------------------- */
  /* ANCHOR Shoulders & Offsets	*/
  /* ---------------------------- */
  /* STACKING */
  /* Specify your offsets when stacking with overlap. */
  --offset-layout-unit: 4px;
  --offset-element-min: 6px;
  --offset-element-base: 12px;
  --offset-element-sm: 16px;
  --offset-element-md: 24px;
  --offset-element-lg: 60px;
  --offset-element-xl: 96px;
  --offset-element-2xl: 128px;
  --offset-element-3xl: 168px;
  --offset-element-4xl: 200px;
  --offset-li-base: 24px;
  /* SHOULDERS */
  /* Specify your standard shoulder space for each screen */
  --spacing-shoulder-base: 24px;
  --spacing-shoulder-sm: 32px;
  --spacing-shoulder-md: 36px;
  --spacing-shoulder-lg: 36px;
  --spacing-shoulder-xl: 40px;
  --spacing-shoulder-2xl: 48px;
  /* HEADER */
  /* Add your header height offset spacing here */
  /* CXNOTE CX SPECIFIC Header Offset Measurements */
  --offset-header-base: 48px;
  --offset-header-sm: 64px;
  --offset-header-md: 64px;
  --offset-header-lg: 64px;
  --offset-header-xl: 64px;
  --offset-header-2xl: 72px;
  /* FOOTER */
  /* Add your footer height offset spacing here */
  --offset-footer-base: 56px;
  --offset-footer-sm: 56px;
  --offset-footer-md: 72px;
  --offset-footer-lg: 72px;
  --offset-footer-xl: 72px;
  --offset-footer-2xl: 72px;
  /* SPECIAL OFFSETS */
  /* Add special or custom offset spacing here. */
  --offset-section-nav: 104px;
  /* ---------------------------- */
  /* !SECTION Layout				*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION Spacing & Sizing		*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Padding				*/
  /* ---------------------------- */
  /* Default and adaptive settings here define specific measurements in px or rem. Keeping the default Preferred Values or Designframe-calculated values is strongly recommended. */
  /* HEADER */
  /* Specify your standard section padding for each screen. Preferred value matches half gutter spacing. */
  --pad-header-base: 12px;
  --pad-header-sm: 12px;
  --pad-header-md: 12px;
  --pad-header-lg: 12px;
  --pad-header-xl: 16px;
  --pad-header-2xl: 16px;
  /* SECTIONS	*/
  /* Specify your standard section padding for each screen. Preferred value matches 2 times gutter spacing. */
  --pad-section-base: 48px;
  --pad-section-sm: 48px;
  --pad-section-md: 48px;
  --pad-section-lg: 48px;
  --pad-section-xl: 64px;
  --pad-section-2xl: 64px;
  /* ARTICLES	*/
  /* Specify your standard article (card) padding for each screen. Preferred value matches text-p3-size to 1.5x text-p3-size OR 0.5 to 0.667 times gutter spacing rounded. */
  --pad-article-base: 16px;
  --pad-article-sm: 16px;
  --pad-article-md: 16px;
  --pad-article-lg: 16px;
  --pad-article-xl: 24px;
  --pad-article-2xl: 24px;
  /* ELEMENTS	*/
  /* Specify your standard element padding for each screen. Preferred value matches text-p3-size to 1.5x text-p3-size OR 0.5 to 0.667 times gutter spacing rounded. */
  --pad-element-base: 16px;
  --pad-element-sm: 16px;
  --pad-element-md: 16px;
  --pad-element-lg: 16px;
  --pad-element-xl: 24px;
  --pad-element-2xl: 24px;
  /* BASE	*/
  /* Specify your base padding for each screen. Preferred value matches your layout-unit. */
  --pad-base-base: var(--layout-unit);
  --pad-base-sm: var(--layout-unit);
  --pad-base-md: var(--layout-unit);
  --pad-base-lg: var(--layout-unit);
  --pad-base-xl: var(--layout-unit);
  --pad-base-2xl: var(--layout-unit);
  /* CHIPS */
  /* Specify your padding for Chips (visual tags/pills). */
  --pad-x-chip: calc(2 * var(--layout-unit));
  /* Height is derived from text-chip-lh */
  /* ---------------------------- */
  /* ANCHOR Gaps					*/
  /* ---------------------------- */
  /* Default & adaptive settings here define specific measurements in px or rem. Keeping the default Preferred Values or Designframe-calculated values is strongly recommended. */
  /* SECTIONS	*/
  /* Specify your standard section child (items within a section) gap spacing for each screen. Preferred value matches gutter spacing. */
  --gap-section-base: var(--spacing-gutter-base);
  --gap-section-sm: var(--spacing-gutter-sm);
  --gap-section-md: var(--spacing-gutter-md);
  --gap-section-lg: var(--spacing-gutter-lg);
  --gap-section-xl: var(--spacing-gutter-xl);
  --gap-section-2xl: var(--spacing-gutter-2xl);
  /* BLOCK */
  /* Specify your standard block child item spacing for each screen. Preferred value matches your spacing-gutter. */
  --spacing-block-base: var(--spacing-gutter-base);
  --spacing-block-sm: var(--spacing-gutter-sm);
  --spacing-block-md: var(--spacing-gutter-md);
  --spacing-block-lg: var(--spacing-gutter-lg);
  --spacing-block-xl: var(--spacing-gutter-xl);
  --spacing-block-2xl: var(--spacing-gutter-2xl);
  /* CARD */
  /* Specify your standard card child item spacing for each screen */
  /* Preferred value matches your pad-article */
  --spacing-card-base: var(--pad-article-base);
  --spacing-card-sm: var(--pad-article-sm);
  --spacing-card-md: var(--pad-article-md);
  --spacing-card-lg: var(--pad-article-lg);
  --spacing-card-xl: var(--pad-article-xl);
  --spacing-card-2xl: var(--pad-article-2xl);
  /* ARTICLES	*/
  /* Specify your standard article child gap spacing for each screen. Preferred value matches pad-article. */
  --gap-article-base: var(--pad-article-base);
  --gap-article-sm: var(--pad-article-sm);
  --gap-article-md: var(--pad-article-md);
  --gap-article-lg: var(--pad-article-lg);
  --gap-article-xl: var(--pad-article-xl);
  --gap-article-2xl: var(--pad-article-2xl);
  /* STACKS */
  /* Specify your standard stack (grouped elements) gap spacing for each screen. Preferred value matches pad-element. */
  --gap-stack-base: var(--pad-element-base);
  --gap-stack-sm: var(--pad-element-sm);
  --gap-stack-md: var(--pad-element-md);
  --gap-stack-lg: var(--pad-element-lg);
  --gap-stack-xl: var(--pad-element-xl);
  --gap-stack-2xl: var(--pad-element-2xl);
  /* FORMS */
  /* Specify your standard stack (grouped elements) gap spacing for each screen. Preferred value matches gap-element. */
  --gap-form-base: 12px;
  --gap-form-sm: 12px;
  --gap-form-md: 12px;
  --gap-form-lg: 12px;
  --gap-form-xl: 16px;
  --gap-form-2xl: 16px;
  /* HGROUP */
  /* Specify your standard HGROUP gap spacing (spacing between H and P elements in an HGROUP element) here. */
  --gap-hgroup-display: 16px;
  /* Preferred value matches text-p3-size */
  --gap-hgroup-heading: 8px;
  /* Preferred value matches 0.5 of text-p3-size rounded */
  --gap-hgroup-title: 4px;
  /* Preferred value matches 0.25 of text-p3-size rounded */
  /* ELEMENTS	*/
  /* Specify your standard element child (items within an element) gap spacing for each screen. Preferred value matches half pad-element. */
  --gap-element-base: 12px;
  --gap-element-sm: 12px;
  --gap-element-md: 12px;
  --gap-element-lg: 12px;
  --gap-element-xl: 16px;
  --gap-element-2xl: 16px;
  /* SUB-ELEMENT */
  /* Specify your standard sub spacing for each screen. This is also applied to adaptive stacks. Preferred value matches half of pad-element. */
  --spacing-sub-base: 8px;
  --spacing-sub-sm: 8px;
  --spacing-sub-md: 8px;
  --spacing-sub-lg: 8px;
  --spacing-sub-xl: 12px;
  --spacing-sub-2xl: 12px;
  /* ---------------------------- */
  /* ANCHOR Sizing				*/
  /* ---------------------------- */
  /* ELEMENT */
  /* Specify your standard element sizing. */
  --element-base-unit: 40px;
  /* Preferred value matches 2.5 times text-base-size */
  --element-hairline-size: 1px;
  /* Hairline border/divider thickness (§13.8) */
  --element-min-size: 24px;
  /* Preferred value matches text-base-lh */
  --element-sub-size: 16px;
  /* Preferred value matches text-base-size */
  --element-compact-size: 32px;
  /* Compact interactive height — smaller than base, taller than min (§13.8) */
  --element-base-size: 40px;
  /* Preferred value matches --element-base-size */
  /* C Scale  */
  --element-c-sm: 52px;
  /* Preferred value matches --element-base-size */
  --element-c-md: 84px;
  /* Preferred value matches --element-base-size */
  --element-c-lg: 200px;
  /* Preferred value matches --element-base-size */
  --element-c-xl: 316px;
  /* Preferred value matches --element-base-size */
  --element-c-2xl: 432px;
  /* Preferred value matches --element-base-size */
  --element-c-3xl: 548px;
  /* Preferred value matches --element-base-size */
  --element-c-4xl: 664px;
  /* Preferred value matches --element-base-size */
  /* R Scale */
  --element-r-sm: 48px;
  /* Preferred value matches --element-base-size */
  --element-r-md: 72px;
  /* Preferred value matches --element-base-size */
  --element-r-lg: 176px;
  /* Preferred value matches --element-base-size */
  --element-r-xl: 280px;
  /* Preferred value matches --element-base-size */
  --element-r-2xl: 384px;
  /* Preferred value matches --element-base-size */
  --element-r-3xl: 488px;
  /* Preferred value matches --element-base-size */
  --element-r-4xl: 592px;
  /* Preferred value matches --element-base-size */
  --element-max-h-base: 408px;
  /* Preferred value matches screen 6row. */
  --element-max-h-sm: 360px;
  /* Preferred value matches screen 4row. */
  --element-max-h-md: 552px;
  /* Preferred value matches screen 8row. */
  --element-max-h-lg: 552px;
  /* Preferred value matches screen 6row. */
  --element-max-h-xl: 592px;
  /* Preferred value matches screen 6row. */
  --element-max-h-2xl: 592px;
  /* Preferred value matches screen 6row. */
  /* SPECIAL ELEMENTS */
  /* Specify special instance element sizing here. */
  --element-nav-min-height: 24px;
  /* Preferred value matches 1.5 of text-base-size */
  --element-nav-max-height: var(--text-nav-lh);
  /* Preferred value matches --text-nav-lh */
  /* ---------------------------- */
  /* !SECTION Spacing & Sizing	*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION Rounding & Borders	*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Radius				*/
  /* ---------------------------- */
  /* Default & adaptive settings here define specific measurements in px or rem. Keeping the default Preferred Values or Designframe-calculated values is strongly recommended. */
  /* GENERAL */
  /* Set via --qs-rounded-* in CONFIG Quick Setup Variables. Override here only for advanced usage. */
  --rounded-min: var(--qs-rounded-min);
  --rounded-corner: var(--qs-rounded-corner);
  /* ARTICLES	*/
  /* Specify your standard article (card) rounding for each screen. Preferred value matches pad-article-*. Set all to 0px for no block rounding. */
  --rounded-article-base: var(--pad-article-base);
  --rounded-article-sm: var(--pad-article-sm);
  --rounded-article-md: var(--pad-article-md);
  --rounded-article-lg: var(--pad-article-lg);
  --rounded-article-xl: var(--pad-article-xl);
  --rounded-article-2xl: var(--pad-article-2xl);
  /* SPECIAL ELEMENTS */
  /* Specify your various element rounding, if any. If none, set to 0px. */
  --rounded-field: var(--qs-rounded-field);
  --rounded-input: 9999px;
  --rounded-chip: var(--qs-rounded-min);
  /* BASE UNIT */
  /* Set via --qs-rounded-base in CONFIG Quick Setup Variables. Override here only for advanced usage. */
  --rounded-base: var(--qs-rounded-base);
  /* ---------------------------- */
  /* ANCHOR Borders				*/
  /* ---------------------------- */
  /* For base border & elements, 1px is recommended. */
  /* BASE	*/
  /* Base Border isn't currently auto-applied. */
  --border-base: 1px;
  /* Utility Only. Not currently active in any classes */
  /* ELEMENTS	*/
  /* Set specific element default borders. */
  --border-button: 1px;
  --border-form: 1px;
  /* ---------------------------- */
  /* !SECTION Rounding & Borders	*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION Type Sizing			*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Sizing				*/
  /* ---------------------------- */
  /* BASE SIZING */
  /* Specify base type size and line height for text. Base should be used as P3, and is equivalent to 1rem. Rem or px can be used for sizing, depending on your implementation and preferences. */
  --text-base-size: 16px;
  /* Must be an even number that is a multiple of Base Unit. Preferred value is 16px / default 1rem. */
  --text-base-lh: 24px;
  /* Must be 1 or more full Base Units larger than text-base-size. Preferred value is 1.5 of text-base-size. */
  /* DISPLAY SIZING */
  /* Default type size and line height for Display text. */
  --text-d1-size: 96px;
  /* Preferred value matches 6 times text-base-size */
  --text-d1-lh: 1;
  /* Preferred value is 1 */
  --text-d2-size: 72px;
  /* Preferred value matches 4.5 times text-base-size */
  --text-d2-lh: 1;
  /* Preferred value is 1 */
  --text-d3-size: 60px;
  /* Preferred value matches 3.75 times text-base-size */
  --text-d3-lh: 1;
  /* Preferred value is 1 */
  /* HEADING SIZING */
  /* Default type size and line height for Heading text. */
  --text-h1-size: 48px;
  /* Preferred value matches 3 of text-base-size */
  --text-h1-lh: 1;
  /* Preferred value is 1 */
  --text-h2-size: 32px;
  /* Preferred value matches 2 of text-base-size */
  --text-h2-lh: 40px;
  /* Preferred value matches 2.5 times text-base-size */
  --text-h3-size: 24px;
  /* Preferred value matches 1.5 of text-base-size */
  --text-h3-lh: 32px;
  /* Preferred value matches 2 of text-base-size */
  --text-h4-size: 20px;
  /* Preferred value matches 1.25 of text-base-size */
  --text-h4-lh: 28px;
  /* Preferred value matches 1.75 of text-base-size */
  --text-h5-size: 18px;
  /* Preferred value matches 1.125 of text-base-size */
  --text-h5-lh: 28px;
  /* Preferred value matches 1.75 of text-base-size */
  --text-h6-size: 16px;
  /* Preferred value matches text-base-size */
  --text-h6-lh: 24px;
  /* Preferred value matches 1.5 of text-base-size */
  --text-heb-size: 14px;
  /* Preferred value matches 0.875 of text-base-size */
  --text-heb-lh: 20px;
  /* Preferred value matches 1.25 of text-base-size */
  /* BODY SIZING */
  /* Default type size and line height for Body text. */
  --text-p1-size: 20px;
  /* Preferred value matches 1.25 of text-base-size */
  --text-p1-lh: 28px;
  /* Preferred value matches 1.75 of text-base-size */
  --text-p2-size: 18px;
  /* Preferred value matches 1.125 of text-base-size */
  --text-p2-lh: 28px;
  /* Preferred value matches 1.75 of text-base-size */
  --text-p3-size: 16px;
  /* Preferred value matches text-base-size */
  --text-p3-lh: 24px;
  /* Preferred value matches 1.5 of text-base-size */
  --text-p4-size: 14px;
  /* Preferred value matches 0.875 of text-base-size */
  --text-p4-lh: 20px;
  /* Preferred value matches 1.25 of text-base-size */
  --text-p5-size: 12px;
  /* Preferred value matches 0.75 of text-base-size */
  --text-p5-lh: 16px;
  /* Preferred value matches text-base-size */
  /* ICON SIZING */
  /* Default type size and line height for text-based Icons. */
  --text-i1-size: 72px;
  /* Preferred value matches text-d2-size */
  --text-i1-lh: 1;
  /* Preferred value is 1 */
  --text-i2-size: 48px;
  /* Preferred value matches text-d2-size */
  --text-i2-lh: 1;
  /* Preferred value is 1 */
  --text-i3-size: 32px;
  /* Preferred value matches 2 of text-base-size */
  --text-i3-lh: 1;
  /* Preferred value is 1 */
  --text-i4-size: 24px;
  /* Preferred value matches 1.5 of text-base-size */
  --text-i4-lh: 1;
  /* Preferred value is 1 */
  --text-i5-size: 16px;
  /* Preferred value matches text-base-size */
  --text-i5-lh: 1;
  /* Preferred value is 1 */
  --text-i6-size: 12px;
  /* Preferred value matches 0.75 of text-base-size */
  --text-i6-lh: 1;
  /* Preferred value is 1 */
  /* ELEMENT SIZING */
  /* Specify default type size and line height for general elements text applications. */
  --text-nav-size: 20px;
  /* Preferred value matches text-p1-size */
  --text-nav-lh: 40px;
  /* Preferred value matches 2.5 times text-base-size */
  --text-button-size: 18px;
  /* Preferred value matches text-p2-size */
  --text-button-lh: var(--text-nav-lh);
  /* Preferred value matches text-nav-lh */
  --text-chip-size: 12px;
  /* Preferred value matches text-p5-size */
  --text-chip-lh: 24px;
  /* Preferred value matches 2 times text-chip-size */
  /* ADAPTIVE SIZING */
  /* Specify default type size adaptive behavior for smaller (base, sm, md) screens. */
  --text-d1a-size: var(--text-d2-size);
  /* Preferred value matches text-d2-size */
  --text-d1a-lh: var(--text-d2-lh);
  /* Preferred value matches text-d2-lh */
  --text-d2a-size: var(--text-d3-size);
  /* Preferred value matches text-d3-size */
  --text-d2a-lh: var(--text-d3-lh);
  /* Preferred value matches text-d3-lh */
  --text-d3a-size: var(--text-h1-size);
  /* Preferred value matches text-h1-size */
  --text-d3a-lh: var(--text-h1-lh);
  /* Preferred value matches text-h1-lh */
  --text-h1a-size: var(--text-h2-lh);
  /* Preferred value matches text-h2-lh */
  --text-h1a-lh: 1;
  /* Preferred value is 1 */
  --text-i1a-size: var(--text-d3-size);
  /* Preferred value matches text-d3-size */
  --text-i1a-lh: var(--text-d3-lh);
  /* Preferred value matches text-d3-lh */
  --text-nava-size: var(--text-p2-size);
  /* Preferred value matches text-p2-size */
  --text-nava-lh: var(--text-nav-lh);
  /* Preferred value matches text-nav-lh */
  /* ---------------------------- */
  /* !SECTION Typography			*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION Effects				*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Shadows				*/
  /* ---------------------------- */
  /* Utility extensions. Shadows should be entered as RGB values with alpha. */
  --shadow-light: 0px 0px 4px 0px rgba(0, 0, 0, var(--shadow-alpha-light));
  --shadow-base: 0px 2px 4px 0px rgba(0, 0, 0, var(--shadow-alpha-base));
  --shadow-heavy: 0px 4px 8px 2px rgba(0, 0, 0, var(--shadow-alpha-heavy));
  --drop-shadow-light: 0px 0px 4px rgba(0, 0, 0, var(--shadow-alpha-light));
  --drop-shadow-base: 0px 2px 4px rgba(0, 0, 0, var(--shadow-alpha-base));
  --drop-shadow-heavy: 0px 4px 8px rgba(0, 0, 0, var(--shadow-alpha-heavy));
  /* Shadow alpha sub-tokens — for compositional shadows (inset/side/directional) that can't reuse --shadow-* full tokens. Mirror --shadow-* alphas. See df-rules.md §13.7. */
  --shadow-alpha-light: 0.125;
  --shadow-alpha-base: 0.25;
  --shadow-alpha-heavy: 0.25;
  /* ---------------------------- */
  /* ANCHOR Blur					*/
  /* ---------------------------- */
  /* Utility extensions. */
  --blur-light: 24px;
  --blur-base: 48px;
  --blur-heavy: 64px;
  --blur-max: 128px;
  /* ---------------------------- */
  /* ANCHOR Shader Alpha Values	*/
  /* ---------------------------- */
  /* Shaders can be applied as an extension for any Designframe Color such as key, primary, etc. Use by appending -shader, -shader-light, and -shader-heavy to those colors, for example bg-key-shader. */
  --shader-light: 0.15;
  --shader-base: 0.60;
  --shader-heavy: 0.85;
  /* ---------------------------- */
  /* !SECTION Effects				*/
  /* ---------------------------- */
  /* ------------------------------------	*/
  /* SECTION Interactions & Animation		*/
  /* ------------------------------------ */
  /* ---------------------------- */
  /* ANCHOR Transitions			*/
  /* ---------------------------- */
  /* GLOBAL TRANSITIONS */
  /* This sets the configurable transition-set utility which is applied to all default transitions. */
  --transition-property-base: all;
  --transition-timing-base: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration-base: 300ms;
  /* Set this as your base transition timing. 250ms to 300ms is recommended */
  /* ---------------------------- */
  /* ANCHOR Animations			*/
  /* ---------------------------- */
  /* GLOWS */
  /* Under development. */
  /* ------------------------------------	*/
  /* !SECTION Interactions & Animation	*/
  /* ------------------------------------ */
  /* -------------------------------------------- */
  /* SECTION COLORS & THEMING VALUES				*/
  /* -------------------------------------------------------------------------------------------- */
  /* Theming Colors																				*/
  /* -------------------------------------------------------------------------------------------- */
  /* Theme Colors are used as defaults and for all Designframe Themes. Colors should be entered	*/
  /* as RGB values with no alpha for Tailwind Opacity Modifiers to work. Designframe Color Themes	*/
  /* are independent of Tailwind's Dark Mode support. The use of the word "theme" here applies to */
  /* color palettes, not the Tailwind theme configuration. 										*/
  /* -------------------------------------------------------------------------------------------- */
  /* Theme Sets																					*/
  /* -------------------------------------------------------------------------------------------- */
  /* THEME is your main color set and is used to determine the logical INVERT variations.			*/
  /* THEME TRANSPARENT is same as THEME but with transparent background defaults for layering.	*/
  /* THEME INVERT is should be defined as the invert/dark mode equivalent of THEME.				*/
  /* THEME INVERT TRANSPARENT is same as THEME INVERT but with transparent background defaults.	*/
  /* -------------------------------------------------------------------------------------------- */
  /* THEME KEY is THEME-based but with Key Color(s) as backgrounds with colors adjusted.			*/
  /* THEME KEY GRADIENT is THEME KEY-based but with Key Gradient as backgrounds.				*/
  /* -------------------------------------------------------------------------------------------- */
  /* THEME ALT is an optional alternative color palette. 											*/
  /* THEME ALT TRANSPARENT is same as THEME ALT but with transparent background defaults.			*/
  /* THEME ALT INVERT is should be defined as the invert/dark mode equivalent of THEME ALT.		*/
  /* THEME ALT INVERT TRANSPARENT is same as THEME ALT INVERT but with transparent backgrounds.	*/
  /* -------------------------------------------------------------------------------------------- */
  /* THEME KEY ALT is THEME ALT-based but with Key Alt as backgrounds with colors adjusted.		*/
  /* THEME KEY ALT GRADIENT is THEME KEY ALT-based but with Key Alt Gradient as backgrounds.		*/
  /* -------------------------------------------------------------------------------------------- */
  /* ---------------------------- */
  /* SECTION THEME				*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Key Colors			*/
  /* ---------------------------- */
  /* This sets the THEME standout color(s). Key is intended to be your brand's key/main color which is not black or white, and can be set as a color pair if you'd like to use a gradient as your key color. */
  --color-key: var(--qs-color-key);
  /* If key color is intended to be a gradient, then enter starting color here. */
  --color-key-rgb: var(--qs-color-key-rgb);
  /* Same as color-key but in comma-separated rgba format, excluding a. */
  --color-key-end: var(--qs-color-key-end);
  /* If key color is intended to be a gradient, then enter end color here. If not, then enter same as color-key. */
  --color-key-end-rgb: var(--qs-color-key-end-rgb);
  /* Same as color-key-end but in comma-separated rgba format, excluding a. */
  /* ---------------------------- */
  /* ANCHOR Standard Colors		*/
  /* ---------------------------- */
  /* This sets the THEME standard colors.	*/
  --color-primary: var(--qs-color-primary);
  /* Primary is intended to be black or the darkest monotone color used for standard text and similar applications. */
  --color-secondary: var(--qs-color-secondary);
  /* Secondary is meant to be a mid-to-dark gray or similar monotone color for help text and other secondary importance applications. */
  --color-tertiary: var(--qs-color-tertiary);
  /* Tertiary is intended as a mid-to-light (but still legible) gray or similar monotone color for least important text and color applications. */
  --color-background: var(--qs-color-background);
  /* Background is meant to be a while or the lightest monotone color used for backgrounds to contrast with the Primary and Key Colors. */
  --color-background-start: var(--qs-color-background-start);
  /* OPTIONAL - Enter Gradient Background Start Color. Enter same value as color-key if there is no gradient option for background. */
  --color-background-start-rgb: var(--qs-color-background-start-rgb);
  /* OPTIONAL - Same as color-background-start but in comma-separated rgba format, excluding a. */
  --color-background-end: var(--qs-color-background-end);
  /* OPTIONAL - Enter Gradient Background End Color. Enter same value as color-background-start if there is no gradient option for background. */
  --color-background-end-rgb: var(--qs-color-background-end-rgb);
  /* OPTIONAL - Same as color-background-end but in comma-separated rgba format, excluding a. */
  --color-background-direction: var(--qs-color-background-direction);
  /* NEEDED IF using color-background-start and -end to define direction of gradient. Use CSS format such as top, right top, right bottom, etc. */
  --color-disabled: var(--qs-color-disabled);
  /* Disabled is intended as a mid-to-light (but still legible) gray or similar monotone color for disabled element, text, and color applications. */
  /* ---------------------------- */
  /* ANCHOR Invert Colors			*/
  /* ---------------------------- */
  /* This sets the THEME INVERT and THEME KEY color palette variations, in combination with the colors above. Additionally, color-invert is used by DEFAULT and THEME elements. */
  --color-invert: var(--qs-color-invert);
  /* Usually matches color-background and is the opposite/invert of color-primary. */
  --color-key-invert: 255 255 255;
  /* Usually matches color-background, unless the actual opposite/invert of color-key is desired. */
  --color-key-invert-end: 255 255 255;
  /* Usually matches color-background, unless the actual opposite/invert of color-key-end is desired. */
  --color-key-gradient-invert: 255 255 255;
  /* This color is used to create a pseudo-transparancy for hover states on gradient elements such as buttons. Preferred value is the same as --color-background */
  --color-key-gradient-invert-opacity: 0.9;
  /* This is the opacity for the color used to create a pseudo-transparancy for hover states on general gradient elements such as buttons. Preferred value is 1 if your body/sections have a solid color background, or 0.9 for gradient backgrounds.  */
  --color-key-gradient-active-opacity: 0.75;
  /* This is the opacity for the color used to create a pseudo-transparancy for active/hover states on gradient elements such as buttons. Preferred value is 1 if your body/sections have a solid color background, or 0.75 for gradient backgrounds.  */
  /* TODO Area for default hover theme behavior */
  /* ---------------------------- */
  /* !SECTION THEME (Default)		*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION THEME ALT			*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Key Alt Colors		*/
  /* ---------------------------- */
  /* This sets the THEME ALT standout color(s). THEME ALT is intended to be an optional alternative theme for special/specific usage. */
  --color-key-alt: var(--qs-color-key-alt);
  /* OPTIONAL - Enter Alternate Color or Alternate Start Color. Enter same value as color-key if there is no alternate. */
  --color-key-alt-rgb: var(--qs-color-key-alt-rgb);
  /* Same as color-key-alt but in comma-separated rgba format, excluding a. */
  --color-key-end-alt: var(--qs-color-key-end-alt);
  /* OPTIONAL - Enter Alternate End Color if using Alternate Start Color. Enter same value as color-key-end if there is no alternate. */
  --color-key-end-alt-rgb: var(--qs-color-key-end-alt-rgb);
  /* Same as color-key-end-alt but in comma-separated rgba format, excluding a. */
  /* ---------------------------- */
  /* ANCHOR Standard Alt Colors	*/
  /* ---------------------------- */
  /* This sets the THEME ALT standard color(s). Enter the same values as THEME if you do not want to use THEME ALT. */
  --color-primary-alt: var(--qs-color-primary-alt);
  /* OPTIONAL - Enter same value as primary if there is no alternate. */
  --color-secondary-alt: var(--qs-color-secondary-alt);
  /* OPTIONAL - Enter same value as secondary if there is no alternate. */
  --color-tertiary-alt: var(--qs-color-tertiary-alt);
  /* OPTIONAL - Enter same value as tertiary if there is no alternate. */
  --color-background-alt: var(--qs-color-background-alt);
  /* OPTIONAL - Enter same value as background-default if there is no alternate. */
  --color-background-start-alt: var(--qs-color-background-start-alt);
  /* OPTIONAL - Enter Gradient Background Start Color. Enter same value as color-key if there is no gradient option for background. */
  --color-background-start-alt-rgb: var(--qs-color-background-start-alt-rgb);
  /* OPTIONAL - Same as color-background-start but in comma-separated rgba format, excluding a. */
  --color-background-end-alt: var(--qs-color-background-end-alt);
  /* OPTIONAL - Enter Gradient Background End Color. Enter same value as color-background-start if there is no gradient option for background. */
  --color-background-end-alt-rgb: var(--qs-color-background-end-alt-rgb);
  /* OPTIONAL - Same as color-background-end but in comma-separated rgba format, excluding a. */
  --color-background-alt-direction: var(--qs-color-background-alt-direction);
  /* NEEDED IF using color-background-alt-start and -alt-end to define direction of gradient. */
  --color-disabled-alt: var(--qs-color-disabled-alt);
  /* Disabled is intended as a mid-to-light (but still legible) gray or similar monotone color for disabled element, text, and color applications. */
  /* TODO Add in BG Gradient start/end */
  /* ---------------------------- */
  /* ANCHOR Invert Alt Colors		*/
  /* ---------------------------- */
  /* This sets the THEME ALT INVERT color palette variation, in combination with the ALT colors above. Additionally, color-invert-alt is used by THEME ALT elements. Enter the same values as THEME if you do not want to use THEME ALT. */
  --color-invert-alt: var(--qs-color-invert-alt);
  /* OPTIONAL - Enter same value as primary if there is no alternate. */
  --color-key-alt-invert: 250 0 2;
  /* OPTIONAL - Enter Key Invert Color if using Key Theme. Enter same value as color-key if there is not using Key Theme. */
  --color-key-end-alt-invert: 250 160 2;
  /* OPTIONAL - Enter Key Invert End Color if using Key Invert Start Color. Enter same value as color-key-end if there is not using Key Theme. */
  --color-key-alt-gradient-invert: 255 255 255;
  /* OPTIONAL - This color is used to create a pseudo-transparancy for hover states on gradient elements such as buttons. Preferred value is the same as --color-background-alt */
  --color-key-alt-gradient-invert-opacity: 0.9;
  /* OPTIONAL - This is the opacity for the color used to create a pseudo-transparancy for hover states on gradient elements such as buttons. Preferred value is 1 if your body/sections have a solid color background, or 0.9 for gradient backgrounds.  */
  --color-key-alt-gradient-active-opacity: 0.75;
  /* This is the opacity for the color used to create a pseudo-transparancy for active/hover states on gradient elements such as buttons. Preferred value is 1 if your body/sections have a solid color background, or 0.8 for gradient backgrounds.  */
  /* ---------------------------- */
  /* !SECTION THEME ALT			*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* SECTION ALL THEMES COLORS	*/
  /* ---------------------------- */
  /* ---------------------------- */
  /* ANCHOR Alert Colors			*/
  /* ---------------------------- */
  /* These are default alert colors used across all themes. */
  --color-alert-notify: 96 165 250;
  /* Blue color preferred 0 181 255 */
  --color-alert-notify-heading: 29 79 216;
  --color-alert-notify-text: 37 99 235;
  --color-alert-notify-background: 219 234 254;
  --color-alert-warning: 250 204 21;
  /* Yellow color preferred 255 242 0 */
  --color-alert-warning-heading: 161 98 7;
  --color-alert-warning-text: 202 138 4;
  --color-alert-warning-background: 254 249 195;
  --color-alert-error: 248 113 113;
  /* Red color preferred 255 1 48 */
  --color-alert-error-heading: 185 28 28;
  --color-alert-error-text: 220 38 38;
  --color-alert-error-background: 254 226 226;
  --color-alert-success: 74 222 128;
  /* Green color preferred 1 255 48 */
  --color-alert-success-heading: 21 128 61;
  --color-alert-success-text: 22 163 74;
  --color-alert-success-background: 220 252 231;
  /* ---------------------------- */
  /* ANCHOR HEADER COLORS			*/
  /* ---------------------------- */
  /* These set optional Header Colors and Weight which can be applied as an override to any/all themes. */
  --color-header-background: var(--qs-color-header-background);
  --color-header-primary:  var(--qs-color-header-primary);
  --color-header-nav-link:  var(--qs-color-header-nav-link);
  --font-header-nav-weight: var(--qs-font-header-nav-weight);
  --color-header-background-alt: var(--qs-color-header-background);
  --color-header-primary-alt:  var(--qs-color-header-primary);
  --color-header-nav-link-alt:  var(--qs-color-header-nav-link);
  --font-header-nav-weight-alt: var(--qs-font-header-nav-weight);
  /* ---------------------------- */
  /* ANCHOR FOOTER COLORS			*/
  /* ---------------------------- */
  /* These set optional Footer Colors and Weight which can be applied as an override to any/all themes. */
  --color-footer-background: var(--qs-color-footer-background);
  --color-footer-primary:  var(--qs-color-footer-primary);
  --color-footer-nav-link:  var(--qs-color-footer-nav-link);
  --font-footer-nav-weight: var(--qs-font-footer-nav-weight);
  --color-footer-background-alt: var(--qs-color-footer-background);
  --color-footer-primary-alt:  var(--qs-color-footer-primary);
  --color-footer-nav-link-alt:  var(--qs-color-footer-nav-link);
  --font-footer-nav-weight-alt: var(--qs-font-footer-nav-weight);
  /* ---------------------------- */
  /* !SECTION ALL THEMES COLORS	*/
  /* ---------------------------- */
  /* -------------------------------------------- */
  /* !SECTION COLORS & THEMING VALUES				*/
  /* -------------------------------------------- */
  /* ---------------------------- */
}

/* Do not edit				*/

/* !LAYER :root end	 			*/

/* -------------------------------------------- */

/* !SECTION Extended Variables\					*/

/* -------------------------------------------- */

/* TODO Re-factor rounding utility, integrate animations, use variable to toggle default shadows. */

/* -------------------------------------------------------------------------------------------- */

/* SECTION HTML Element Applications															*/

/* -------------------------------------------------------------------------------------------- */

/* NOTE These default applications provide secondary fallbacks for plain HTML elements and are	*/

/* overridden in the "CONFIG Theming" section of this file. This section should not be edited.	*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER base begin				*/

/* Do not edit 					*/

/* !LAYER base end 					*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION HTML Element Applications				 											*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Core Layout Utilities																*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Core Layout Utilities					 										*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Core Visual Utilities																*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Core Visual Utilities															*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Components Structure 			 													*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Components Structure 			 												*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Components Radius & Transitions													*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION  DF Components Radius & Transitions													*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Components Visuals (Base Color Applications)										*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Components Visuals (Base Color Applications)										*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Theming Variants																	*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Theming Variants																	*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Adaptives (Screen Media Queries)													*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit 					*/

/* !LAYER components end 			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Adaptives (Screen Media Queries)													*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION CONFIG Theming																		*/

/* -------------------------------------------------------------------------------------------- */

/* NOTE All targets here will inherit auto/adaptive structure from Designframe Core and			*/

/* Adaptives. All styles here are primarily for visual theming and any style can be overridden  */

/* by using inline CSS and Designframe/Tailwind classes in the HTML directly.					*/

/* -------------------------------------------------------------------------------------------- */

/* Designframe layers cascade in the following order (lowest to highest specificity:			*/

/* 	1. CONFIG Fonts, Linked Assets, and Variables is where your specific values are defined.	*/

/* 	2. HTML Element Applications apply Variables to create fallback styles.						*/

/* 	3. DF Core Layout Utilities set up Designframe base Layout utilities/classes.				*/

/* 	4. DF Core Visual Utilities set up Designframe color and visual utilities/classes.			*/

/* 	5. DF Components Structure set up colorless components, integrating Variables.				*/

/* 	5. DF Components Radius & Transitions apply component behaviors, integrating Variables.		*/

/* 	6. DF Components Visuals apply base colors to components, integrating Variables.			*/

/* 	8. DF Theming Variants set up .theme & .theme-* variants, integrating Variables.			*/

/* 	9. DF Adaptives apply layout and other adaptive behaviors across all screen sizes			*/

/* 10. CONFIG Theming is where your specific Global and Theme style modifiers are configured.	*/

/* 11. CONFIG Overrides (Optional) is for multi-instance overrides that would not be inline.	*/

/* 12. CONFIG Custom CSS Classes is for any additional custom styles that would not be inline.	*/

/* -------------------------------------------------------------------------------------------- */

/* Note: DF Documentation Classes are styles for the DF Docs and can be optionally removed.		*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* Theme Sets																					*/

/* -------------------------------------------------------------------------------------------- */

/* BASE (All Themes) is a default which overrides the HTML Fallbacks and sets inherited styles. */

/* -------------------------------------------------------------------------------------------- */

/* THEME is your main color set and is used to determine the logical INVERT variations.			*/

/* THEME TRANSPARENT is same as THEME but with transparent background defaults for layering.	*/

/* THEME INVERT is should be defined as the invert/dark mode equivalent of THEME.				*/

/* THEME INVERT TRANSPARENT is same as THEME INVERT but with transparent background defaults.	*/

/* -------------------------------------------------------------------------------------------- */

/* THEME KEY is THEME-based but with Key Color(s) as backgrounds with colors adjusted.			*/

/* THEME KEY GRADIENT is THEME KEY-based but with Key Gradient as backgrounds.				*/

/* -------------------------------------------------------------------------------------------- */

/* THEME ALT is an optional alternative color palette. 											*/

/* THEME ALT TRANSPARENT is same as THEME ALT but with transparent background defaults.			*/

/* THEME ALT INVERT is should be defined as the invert/dark mode equivalent of THEME ALT.		*/

/* THEME ALT INVERT TRANSPARENT is same as THEME ALT INVERT but with transparent backgrounds.	*/

/* -------------------------------------------------------------------------------------------- */

/* THEME KEY ALT is THEME ALT-based but with Key Alt as backgrounds with colors adjusted.		*/

/* THEME KEY ALT GRADIENT is THEME KEY ALT-based but with Key Alt Gradient as backgrounds.		*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* How To Use Themes																			*/

/* -------------------------------------------------------------------------------------------- */

/* NOTE Apply theme and theme-* classes only to HEADER, FOOTER, and SECTION Elements, and only	*/

/* to DIV Elements with section-*, centerframe-*, grid-*, and flex-* classes. Avoid nesting a 	*/

/* theme class in another theme class to prevent conflicts and ensure proper cascading.			*/

/* -------------------------------------------------------------------------------------------- */

/* NOTE For specificity and semantic reasons, normal text links should be wrapped in a			*/

/* paragraph element, e.g. "<p><a href="#">text link</a></p>". This is specifically needed to 	*/

/* support reliable gradient applications. However, if a workaround is needed, use inline 		*/

/* Tailwind classes. If there are any issues, try adding bg-none and/or bg-clip-* to clear any 	*/

/* potential gradient conflicts. 																*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER components begin 			*/

/* Do not edit					*/

/* !LAYER components end			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION CONFIG Theming																		*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION CONFIG Overrides (Optional) 															*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER utilities begin 			*/

/* Do not edit 					*/

/* !LAYER utilities end 			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION CONFIG Overrides (Optional)															*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION DF Documentation Classes 															*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER utilities begin 			*/

/* Do not edit 					*/

/* !LAYER utilities end 			*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION DF Documentation Classes															*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------- */

/* SECTION CONFIG Custom CSS Classes 															*/

/* -------------------------------------------------------------------------------------------- */

/* LAYER global begin 			*/

/* ---------------------------- */

/* NOTE IMPORTANT CUSTOM CSS RULES */

/* Any Tailwind or Designframe Utility can be implemented under a Custom Class using @apply, and you can always add Custom CSS here, and use inline classes directly. However, there are certain rules to follow: */

/* Keep Adaptive & Layout Control Parent Classes Inline */

/* Designframe Adaptive Classes use CSS Specificity to target and select child classes and elements. This means classes like .centerframe-grid .block-*, and most top-level classes that have 2+ levels of nested targets or dependencies have to be inline to your HTML for the accurate targeting of the nested/child. Depending on your implementation, Tailwind's content/purge processing may not reliably maintain the targeting in deep nesting situations, primarily when using @apply to roll up nesting-dependent classes. This applies to any custom CSS, not just Designframe, as inline class styling is core to Tailwind's approach. */

/* Do Not Custom Classes with @apply/nested Adaptive Layout Classes */

/* Tailwind's Content/Purge processer will exponentially multiply the size of the output.css file when Designframe Adaptive Layout Classes are nested under a Custom Class. Low-level Adaptive Classes are nestable such as .text-* however, check output sizes before deploying. */

/* TL;DR */

/* Keep all structure and layout classes inline, and use Custom Classes here for repeating visual styling and sub-element styling if needed. Specifcally all Designframe grid, flex, block, card, stack, gap, and gradient object (buttons and input) styles should be inline. */

/* -------------------------------------------------------------------------------------------- */

/* Need help? Visit designframe.io for more information.										*/

/* -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------	*/

/* SECTION Custom Classes 												*/

/* -------------------------------------------------------------------------------------------- */

/* CX Custom ID Taxonomy																		*/

/*	#cx-space-*				= Space-Unique Unique Container/Component							*/

/*	#cx-space-header-*		= Space-Unique Header Unique Component								*/

/*	#cx-space-PAGENAME-*	= Space-Unique Page-Specific Unique Main Component					*/

/*	#cx-space-footer-*		= Space-Unique Footer Unique Component								*/

/*	#cx-platform-*			= Platform-Unique Unique Container/Component						*/

/*	#cx-platform-header-*	= Platform-Unique Header Unique Component							*/

/*	#cx-platform-PAGENAME-*	= Platform-Unique Page-Specific Unique Main Component				*/

/*	#cx-platform-footer-*	= Platform-Unique Footer Unique Component							*/

/*	#cx-*-*-*-*				= Unique Sub-Component or Item of -PARENT (if any)					*/

/* -------------------------------------------------------------------------------------------- */

/* CX Custom Class Taxonomy																		*/

/*	.cx-*					= Non-Unique Element or Format										*/

/*	.cx-*-*					= Non-Unique Nested Element or Group or Variant						*/

/*	.cx-*-*-*				= Non-Unique Nested Element or Group or Variant						*/

/*	.cx-*-*-*-*				= Non-Unique Group or Variant										*/

/* -------------------------------------------------------------------------------------------- */

/* Prioritize Designframe and Tailwind Classes first, then add custom mix-ins & roll-ups here.	*/

/* -------------------------------------------------------------------------------------------- */

/* CXNOTE All Color class applications are now in CONFIG Theming.								*/

/* -------------------------------------------------------------------------------------------- */

/* -------------------------------------------- */

/* SECTION Header								*/

/* -------------------------------------------- */

/* LOGO BLOCK LAYOUT & EFFECTS */

#cx-platform-header-logo, #cx-space-header-logo {
  flex-basis: 80%;
  justify-content: center;
}

@media (min-width: 640px) {
  #cx-platform-header-logo, #cx-space-header-logo {
    justify-content: flex-start;
  }
}

@media (min-width: 960px) {
  #cx-platform-header-logo, #cx-space-header-logo {
    flex-basis: 28.5714286%;
  }
}

#cx-platform-header-logo a, #cx-space-header-logo a {
  cursor: pointer;
  position: relative;
  display: inline-block;
  z-index: 0;
  overflow: visible;
}

#cx-platform-header-logo a::before, #cx-space-header-logo a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(var(--color-key)), rgb(var(--color-key-end)), rgb(var(--color-key)));
  /* Gradient background */
  filter: blur(16px);
  z-index: 0;
  opacity: 0;
}

#cx-platform-header-logo a > *, #cx-space-header-logo a > * {
  position: relative;
  z-index: 2;
  /* Ensure glow is behind content */
}

@keyframes glow-cycle {
  0%, 100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.7;
  }
}

#cx-platform-header-logo a:hover::before, #cx-space-header-logo a:hover::before {
  animation: glow-cycle 8s cubic-bezier(0.1, 0.1, 0.6, 1) infinite;
}

#cx-platform-header-logo a, #cx-space-header-logo a {
  cursor: pointer;
  position: relative;
  display: inline-block;
  z-index: 0;
  overflow: visible;
}

#cx-platform-header-logo a::after, #cx-space-header-logo a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(var(--color-key-end)), rgb(var(--color-key)), rgb(var(--color-key-end)));
  /* Gradient background */
  filter: blur(16px);
  z-index: 0;
  opacity: 0;
}

#cx-platform-header-logo a > *, #cx-space-header-logo a > * {
  position: relative;
  z-index: 2;
  /* Ensure it is behind the content */
}

@keyframes glow-cycle-reverse {
  0%, 100% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.1;
  }
}

#cx-platform-header-logo a:hover::after, #cx-space-header-logo a:hover::after {
  animation: glow-cycle-reverse 8s cubic-bezier(0.1, 0.1, 0.6, 1) infinite;
}

/* NOTE Default is "hover:opacity-90" class only for Spaces, which is currently always enabled automatically. This will be changed to a new option set via Space Admin in the future. for CX pages it is "gradient-glow-key-cycle-pair gradient-glow-key-cycle-pair-reverse" */

#cx-platform-header-logo img, #cx-space-header-logo img,
#cx-platform-footer-logo img, #cx-space-footer-logo img {
  height: var(--element-nav-min-height);
}

@media (min-width: 960px) {
  #cx-platform-header-logo img, #cx-space-header-logo img,
#cx-platform-footer-logo img, #cx-space-footer-logo img {
    height: var(--element-nav-max-height);
  }
}

/* CENTER NAV LAYOUT */

#cx-platform-header-nav, #cx-space-header-nav {
  flex-basis: 71.4285714%;
  align-items: center;
  justify-content: center;
}

/* CTA BUTTON LAYOUT */

#cx-platform-header-user-nav, 
#cx-space-header-user-nav {
  display: none;
}

@media (min-width: 640px) {
  #cx-platform-header-user-nav, 
#cx-space-header-user-nav {
    display: flex;
  }
}

#cx-platform-header-user-nav, 
#cx-space-header-user-nav {
  flex-basis: 28.5714286%;
  align-items: center;
  justify-content: flex-end;
}

#cx-platform-header-user-nav .button-primary-gradient,
#cx-platform-header-user-nav .button-secondary-gradient,
#cx-space-header-user-nav .button-primary-gradient, 
#cx-space-header-user-nav .button-secondary-gradient {
  min-width: 100px;
  flex: 1 1 0%;
}

#cx-platform-header-user-nav .button-primary-gradient p, 
#cx-platform-header-user-nav .button-secondary-gradient p,
#cx-space-header-user-nav .button-primary-gradient p, 
#cx-space-header-user-nav .button-secondary-gradient p {
  white-space: nowrap;
}

#header-nav-menu.cx-nav-menu {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  height: 100dvh;
  width: 100%;
}

.cx-stack-user-nav-public {
  display: none;
  width: 100%;
  flex-direction: row;
  gap: var(--spacing-gutter-base);
}

@media (min-width: 960px) {
  .cx-stack-user-nav-public {
    display: flex;
  }
}

.cx-stack-user-nav-public-menu-toggle {
  display: none;
  flex-basis: 20%;
  align-items: center;
  justify-content: flex-end;
}

@media (min-width: 640px) {
  .cx-stack-user-nav-public-menu-toggle {
    display: flex;
  }
}

@media (min-width: 960px) {
  .cx-stack-user-nav-public-menu-toggle {
    display: none;
  }
}

.cx-stack-user-nav-member {
  display: flex;
  flex-direction: row;
  gap: var(--gap-stack-base);
}

@media (min-width: 1440px) {
  .cx-stack-user-nav-member {
    gap: var(--gap-stack-xl);
  }
}

nav .cx-stack-user-nav-member a {
  transition-property: none;
}

nav .cx-stack-user-nav-member a:hover {
  transition-property: none;
}

.cx-stack-user-nav-member #header-user-nav-menu-toggle {
  display: none;
}

@media (min-width: 640px) {
  .cx-stack-user-nav-member #header-user-nav-menu-toggle {
    display: flex;
  }
}

@media (min-width: 960px) {
  .cx-stack-user-nav-member #header-user-nav-menu-toggle {
    display: none;
  }
}

/* .cx-stack-user-nav-member #header-user-nav-menu-toggle.active {
	@apply bg-gradient-to-r from-key to-key-end;
}
.cx-stack-user-nav-member #header-user-nav-menu-toggle.active span {
	@apply bg-opacity-gradient-invert;
} */

.cx-stack-user-nav-member #header-user-nav-menu-toggle.active i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cx-stack-user-nav-member a i, .cx-footer-brand .cx-stack-link-icons a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-user-nav-member a:hover i,  .cx-footer-brand .cx-stack-link-icons a:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

#cx-profile-banner-info .cx-stack-link-icons a span p i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

#cx-profile-banner-info .cx-stack-link-icons a:hover span p i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.cx-stack-user-nav-member a.avatar-gradient, 
#cx-platform-footer-mobile-nav a.avatar-gradient,
#cx-space-footer-mobile-nav a.avatar-gradient, 
.cx-stack-user-nav-member a.avatar-gradient:active, 
#cx-platform-footer-mobile-nav a.avatar-gradient:active, 
#cx-space-footer-mobile-nav a.avatar-gradient:active, 
.cx-stack-user-nav-member a.avatar-gradient:visited, 
#cx-platform-footer-mobile-nav a.avatar-gradient:visited,
#cx-space-footer-mobile-nav a.avatar-gradient:visited {
  background-image: none;
  background-clip: border-box;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: none;
}

.cx-stack-user-nav-member a.avatar-gradient:hover, 
#cx-platform-footer-mobile-nav a.avatar-gradient:hover,
#cx-space-footer-mobile-nav a.avatar-gradient:hover {
  transition-property: none;
}

@media (min-width: 640px) {
  .cx-stack-user-nav-member a.avatar-gradient:hover, 
#cx-platform-footer-mobile-nav a.avatar-gradient:hover,
#cx-space-footer-mobile-nav a.avatar-gradient:hover {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    background-clip: border-box;
    --tw-shadow: var(--shadow-light);
    --tw-shadow-colored: var(--shadow-light);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.cx-stack-user-nav-member a:hover.avatar-gradient, 
#cx-platform-footer-mobile-nav a:hover.avatar-gradient, 
#cx-space-footer-mobile-nav a:hover.avatar-gradient,
.cx-stack-user-nav-member a.avatar-gradient.active, 
#cx-platform-footer-mobile-nav a.avatar-gradient.active, 
#cx-space-footer-mobile-nav a.avatar-gradient.active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  background-clip: border-box;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: none;
}

.cx-stack-user-nav-member a.avatar-gradient img, 
#cx-platform-footer-mobile-nav a.avatar-gradient img,
#cx-space-footer-mobile-nav a.avatar-gradient img {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cx-stack-user-nav-member a.avatar-gradient:hover img,
#cx-platform-footer-mobile-nav a.avatar-gradient img, 
#cx-space-footer-mobile-nav a.avatar-gradient img {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 640px) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  }
}

@media (prefers-reduced-motion: reduce) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    transition-property: none;
  }
}

@media (min-width: 640px) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    position: fixed;
    right: 0px;
    top: var(--offset-header-sm);
    margin-top: var(--layout-unit);
    transform-origin: top right;
    --tw-translate-y: -10px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: var(--rounded-corner);
    padding: var(--border-button);
    --tw-shadow: var(--shadow-light);
    --tw-shadow-colored: var(--shadow-light);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-duration: var(--transition-duration-base);
  }
}

@media (min-width: 768px) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    top: var(--offset-header-md);
  }
}

@media (min-width: 960px) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    top: var(--offset-header-lg);
  }
}

@media (min-width: 1440px) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    top: var(--offset-header-base);
    margin-top: var(--spacing-sub-base);
    --tw-translate-y: var(--offset-element-min);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1600px) {
  #cx-platform-user-menu,
#cx-space-user-menu {
    top: var(--offset-header-2xl);
    --tw-translate-y: calc(var(--offset-element-sm) * -1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (prefers-reduced-motion: reduce) {
  #cx-platform-user-menu.hide,
#cx-space-user-menu.hide {
    transition-property: none;
  }
}

@media (min-width: 640px) {
  #cx-platform-user-menu.hide,
#cx-space-user-menu.hide {
    --tw-translate-x: -1.25rem;
    --tw-translate-y: -1.25rem;
    --tw-skew-y: -32deg;
    --tw-scale-x: 0;
    --tw-scale-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0.05;
    --tw-blur: blur(var(--blur-light));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    transition-duration: var(--transition-duration-base);
  }
}

#cx-platform-user-menu nav,
#cx-space-user-menu nav {
  display: flex;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

@media (min-width: 640px) {
  #cx-platform-user-menu nav,
#cx-space-user-menu nav {
    border-radius: calc(var(--rounded-corner) - var(--border-button));
  }
}

.df-dash-spacer {
  grid-column: span 12 / span 12;
  display: none;
  height: var(--element-base-size);
}

@media (min-width: 960px) {
  .df-dash-spacer {
    display: grid;
  }
}

.df-dash:not(:has(.df-pagination)) .centerframe-grid {
  margin-bottom: 0px;
}

@media (min-width: 640px) {
  .df-dash:not(:has(.df-pagination)) .centerframe-grid {
    margin-bottom: var(--element-base-unit);
  }
}

.df-dash:not(:has(.df-pagination)) .df-dash-content {
  margin-bottom: var(--spacing-gutter-base);
}

@media (min-width: 1440px) {
  .df-dash:not(:has(.df-pagination)) .df-dash-content {
    margin-bottom: var(--spacing-gutter-xl);
  }
}

.df-breadcrumbs nav {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

@media (min-width: 640px) {
  .df-breadcrumbs nav {
    display: flex;
  }
}

.df-breadcrumbs nav p a {
  font-weight: 700;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.df-breadcrumbs nav p a:hover, .df-breadcrumbs nav p a.active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.df-breadcrumbs nav p i {
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-lh);
}

.df-breadcrumbs nav p::after {
  content: "\f054";
  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: var(--spacing-gutter-base);
}

.df-breadcrumbs nav p:last-child::after {
  content: '';
  display: none;
}

.df-sidebar-nav {
  grid-column: 1 / -1;
  display: none;
}

@media (min-width: 640px) {
  .df-sidebar-nav {
    display: grid;
  }
}

@media (min-width: 960px) {
  .df-sidebar-nav {
    grid-column: span 2 / span 2;
  }
}

.df-dash-content {
  grid-column: 1 / -1;
  display: grid;
}

@media (min-width: 960px) {
  .df-dash-content {
    grid-column: span 10 / span 10;
  }
}

.df-sidebar-nav nav {
  position: sticky;
  top: calc(2 * var(--spacing-gutter-base));
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 960px) {
  .df-sidebar-nav nav {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

.df-sidebar-nav nav a {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: var(--spacing-sub-base);
  padding-right: var(--spacing-sub-base);
}

@media (min-width: 640px) {
  @media not all and (min-width: 1440px) {
    .df-sidebar-nav nav a {
      font-size: var(--text-p3-size);
    }
  }
}

@media (min-width: 960px) {
  .df-sidebar-nav nav a {
    width: 100%;
  }
}

.df-sidebar-nav nav a div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

@media (min-width: 1440px) {
  .df-sidebar-nav nav a div {
    -moz-column-gap: var(--gap-element-sm);
         column-gap: var(--gap-element-sm);
  }
}

.df-sidebar-nav nav a div span {
  display: flex;
  width: var(--element-min-size);
  align-items: center;
  justify-content: center;
}

.df-sidebar-nav nav a, .df-sidebar-nav nav a i {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  transition-property: none;
}

.df-sidebar-nav nav a:hover, .df-sidebar-nav nav a:hover i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.df-mobile-menu {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  padding-top: var(--pad-header-base);
  padding-bottom: var(--pad-header-base);
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .df-mobile-menu {
    padding-top: var(--pad-header-sm);
    padding-bottom: var(--pad-header-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .df-mobile-menu {
    padding-top: var(--pad-header-md);
    padding-bottom: var(--pad-header-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .df-mobile-menu {
    padding-top: var(--pad-header-lg);
    padding-bottom: var(--pad-header-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .df-mobile-menu {
    padding-top: var(--pad-header-xl);
    padding-bottom: var(--pad-header-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .df-mobile-menu {
    padding-top: var(--pad-header-2xl);
    padding-bottom: var(--pad-header-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.df-mobile-menu {
  height: 100dvh;
  width: 100%;
}

.df-mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#cx-platform-user-menu nav a div span,
#cx-space-user-menu nav a div span {
  display: flex;
  width: var(--element-min-size);
  align-items: center;
  justify-content: center;
}

#cx-platform-user-menu nav a div,
#cx-space-user-menu nav a div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

@media (min-width: 640px) {
  #cx-platform-user-menu nav a div,
#cx-space-user-menu nav a div {
    -moz-column-gap: var(--gap-element-sm);
         column-gap: var(--gap-element-sm);
  }
}

#cx-platform-user-menu nav a i,
#cx-space-user-menu nav a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

#cx-platform-user-menu nav a:hover i,
#cx-space-user-menu nav a:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

#cx-platform-user-menu nav a,
#cx-space-user-menu nav a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-left: var(--pad-element-base);
  padding-right: var(--pad-element-base);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  transition-property: none;
}

#cx-platform-user-menu nav a:hover,
#cx-space-user-menu nav a:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(var(--color-background) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  #cx-platform-user-menu nav a,
#cx-space-user-menu nav a {
    justify-content: flex-start;
  }

  #cx-platform-user-menu nav > a:first-child:hover,
#cx-space-user-menu nav > a:first-child:hover {
    box-shadow: inset 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  }

  #cx-platform-user-menu nav > a:first-child,
#cx-space-user-menu nav > a:first-child {
    border-top-left-radius: calc(var(--rounded-corner) - var(--border-button));
    border-top-right-radius: calc(var(--rounded-corner) - var(--border-button));
  }

  #cx-platform-user-menu nav a:not(:first-child):not(:last-child):hover,
#cx-space-user-menu nav a:not(:first-child):not(:last-child):hover {
    box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light)),
					inset 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  }

  #cx-platform-user-menu nav > a:last-child:hover,
#cx-space-user-menu nav > a:last-child:hover {
    box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  }

  #cx-platform-user-menu nav > a:last-child,
#cx-space-user-menu nav > a:last-child {
    border-bottom-right-radius: calc(var(--rounded-corner) - var(--border-button));
    border-bottom-left-radius: calc(var(--rounded-corner) - var(--border-button));
  }
}

#cx-space-header.split {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 888;
  height: calc(5 * var(--layout-row-height-base) + 4 * var(--spacing-gutter-base));
  width: 100%;
  background-color: transparent;
}

@media (min-width: 640px) {
  #cx-space-header.split {
    height: calc(5 * var(--layout-row-height-sm) + 4 * var(--spacing-gutter-sm));
  }
}

@media (min-width: 768px) {
  #cx-space-header.split {
    height: calc(5 * var(--layout-row-height-md) + 4 * var(--spacing-gutter-md));
  }
}

@media (min-width: 960px) {
  #cx-space-header.split {
    height: calc(5 * var(--layout-row-height-lg) + 4 * var(--spacing-gutter-lg));
  }
}

@media (min-width: 1440px) {
  #cx-space-header.split {
    height: calc(5 * var(--layout-row-height-xl) + 4 * var(--spacing-gutter-xl));
  }
}

@media (min-width: 1600px) {
  #cx-space-header.split {
    height: calc(5 * var(--layout-row-height-2xl) + 4 * var(--spacing-gutter-2xl));
  }
}

#cx-space-header.split #header-nav-menu-open, #cx-space-header.split .cx-stack-user-nav-member a span p i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@media (min-width: 960px) {
  #cx-space-header.split #cx-space-header-nav {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: var(--offset-header-lg);
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-header-background) / var(--tw-bg-opacity));
  }
}

@media (min-width: 1440px) {
  #cx-space-header.split #cx-space-header-nav {
    height: var(--offset-header-xl);
  }
}

@media (min-width: 1600px) {
  #cx-space-header.split #cx-space-header-nav {
    height: var(--offset-header-2xl);
  }
}

/* -------------------------------------------- */

/* !SECTION Header	 							*/

/* -------------------------------------------- */

/* -------------------------------------------- */

/* SECTION Footer		 						*/

/* -------------------------------------------- */

/* BRAND BLOCK & LOGO LAYOUT & EFFECTS */

.cx-footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .cx-footer-brand {
    grid-column: span 5 / span 5;
  }
}

@media (min-width: 1440px) {
  .cx-footer-brand {
    grid-column: span 4 / span 4;
  }
}

#cx-platform-footer-logo, 
#cx-space-footer-logo {
  justify-content: center;
}

@media (min-width: 960px) {
  #cx-platform-footer-logo, 
#cx-space-footer-logo {
    justify-content: flex-start;
  }
}

#cx-platform-footer-logo a, 
#cx-space-footer-logo a {
  cursor: pointer;
  position: relative;
  display: inline-block;
  z-index: 0;
  overflow: visible;
}

#cx-platform-footer-logo a::before, 
#cx-space-footer-logo a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgb(var(--color-key)), rgb(var(--color-key-end)));
  /* Gradient background */
  filter: blur(16px);
  z-index: 0;
  opacity: 0;
}

#cx-platform-footer-logo a > *, 
#cx-space-footer-logo a > * {
  position: relative;
  z-index: 2;
  /* Ensure glow is behind content */
}

@keyframes glow {
  0%, 100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.7;
  }
}

#cx-platform-footer-logo a:hover::before, 
#cx-space-footer-logo a:hover::before {
  animation: glow 5s cubic-bezier(0.1, 0.1, 0.6, 1) infinite;
}

/* NOTE Default is "hover:opacity-90" class only for Spaces, which is currently always enabled automatically. This will be changed to a new option set via Space Admin in the future. for CX pages it is "gradient-glow-key" */

/* LOCALIZATION BUTTON STACK LAYOUT & ADAPTIVE */

.cx-footer-localization {
  justify-content: center;
}

@media (min-width: 960px) {
  .cx-footer-localization {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

.cx-footer-localization button {
  max-width: 400px;
  white-space: nowrap;
}

/* COLUMN FILLER/SPACER */

.cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-block-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-block-base) * var(--tw-space-y-reverse));
}

.cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
}

.cx-footer-spacer.card-base > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
}

.cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(var(--spacing-card-base) * var(--tw-space-x-reverse));
  margin-left: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-x-reverse)));
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-footer-spacer > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
  }

  .cx-footer-spacer.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-footer-spacer {
  display: none;
}

@media (min-width: 960px) {
  .cx-footer-spacer {
    grid-column: span 1 / span 1;
    display: grid;
  }
}

@media (min-width: 1440px) {
  .cx-footer-spacer {
    grid-column: span 2 / span 2;
  }
}

/* FOOTER LINKS COLUMNS STACK LAYOUT & ADAPTIVE */

#cx-platform-footer-nav-1, #cx-platform-footer-nav-2, #cx-platform-footer-nav-3, #cx-space-footer-nav-1, #cx-space-footer-nav-2, #cx-space-footer-nav-3 {
  grid-column: span 2 / span 2;
}

#cx-space-footer-nav-2 {
  display: none;
}

#cx-space-footer-nav-2:has(.cx-footer-nav-stack-links p) {
  display: block;
}

.cx-footer-nav-stack h3 {
  text-align: center;
  line-height: var(--element-base-size);
}

@media (min-width: 960px) {
  .cx-footer-nav-stack h3.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-footer-nav-stack h3.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-footer-nav-stack h3 {
    text-align: left;
  }
}

.cx-footer-nav-stack-links {
  display: flex;
  flex-direction: column;
  gap: var(--layout-unit);
  text-align: center;
}

@media (min-width: 960px) {
  .cx-footer-nav-stack-links.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-footer-nav-stack-links.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-footer-nav-stack-links {
    text-align: left;
  }
}

/* FOOTER COPYRIGHT BLOCK TEXT & ADAPTIVE */

.cx-footer-copyright p {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

@media (min-width: 960px) {
  .cx-footer-copyright p.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-footer-copyright p.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-footer-copyright p {
    text-align: left;
  }
}

/* -------------------------------------------- */

/* !SECTION Footer 								*/

/* -------------------------------------------- */

/* -------------------------------------------- */

/* SECTION CX Custom Mobile Menu 				*/

/* -------------------------------------------- */

#cx-platform-header .header-flex > nav, #cx-space-header .header-flex > nav {
  justify-content: center;
}

@media (min-width: 640px) {
  #cx-platform-header .header-flex > nav, #cx-space-header .header-flex > nav {
    justify-content: space-between;
  }
}

.df-main {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
}

#cx-platform-footer, #cx-space-footer {
  width: 100%;
}

@media (min-width: 640px) {
  #cx-platform-footer, #cx-space-footer {
    box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  }
}

#cx-platform-footer-mobile-menu-links nav,
#cx-space-footer-mobile-menu-links nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: var(--layout-unit);
  -moz-column-gap: var(--gap-stack-2xl);
       column-gap: var(--gap-stack-2xl);
}

#cx-platform-footer-mobile-menu-links nav p, 
#cx-space-footer-mobile-menu-links nav p {
  display: flex;
  width: 100%;
  justify-content: center;
}

#cx-platform-footer-mobile-menu-links nav a,
#cx-space-footer-mobile-menu-links nav a {
  font-size: var(--text-p1-size);
  line-height: var(--text-h3-lh);
}

#cx-platform-footer-mobile-auth nav,
#cx-platform-footer-mobile-auth nav,
#cx-space-footer-mobile-auth nav,
#cx-space-footer-mobile-auth nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-stack-base);
}

#cx-platform-footer-mobile-auth nav a,
#cx-space-footer-mobile-auth nav a {
  width: 100%;
}

main.df-main {
  padding-bottom: var(--offset-footer-base);
}

@media (min-width: 640px) {
  main.df-main {
    padding-bottom: 0px;
  }
}

footer.cx-footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (min-width: 640px) {
  footer.cx-footer {
    position: relative;
  }
}

#cx-platform-footer-mobile-nav,
#cx-space-footer-mobile-nav {
  box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  position: relative;
  z-index: 888;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
}

#cx-platform-footer-mobile-nav nav,
#cx-space-footer-mobile-nav nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--gap-stack-base);
  padding-top: var(--spacing-sub-base);
  padding-bottom: var(--spacing-sub-base);
}

#cx-platform-footer-mobile-nav nav a,
#cx-space-footer-mobile-nav nav a {
  width: var(--element-base-size);
  text-align: center;
  transition-property: none;
}

#cx-platform-footer-mobile-nav nav a:hover,
#cx-space-footer-mobile-nav nav a:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

#cx-platform-footer-mobile-nav nav a.toggle-menu-gradient:hover, 
#cx-space-footer-mobile-nav nav a.toggle-menu-gradient:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  #cx-platform-footer-mobile-nav nav a.toggle-menu-gradient:hover, 
#cx-space-footer-mobile-nav nav a.toggle-menu-gradient:hover {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    color: transparent;
    -webkit-background-clip: text;
            background-clip: text;
  }
}

#cx-platform-footer-mobile-nav nav a i,
#cx-space-footer-mobile-nav a i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

#cx-platform-footer-mobile-nav nav a:hover i,
#cx-space-footer-mobile-nav a:hover i,
#cx-platform-footer-mobile-nav nav a i.active,
#cx-platform-footer-mobile-nav nav a:hover i.active,
#cx-space-footer-mobile-nav nav a i.active,
#cx-space-footer-mobile-nav nav a:hover i.active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

#footer-frame {
  transition-duration: calc(2 * var(--transition-duration-base));
}

@media (prefers-reduced-motion: reduce) {
  #footer-frame {
    transition-property: none;
  }
}

@media (min-width: 640px) {
  #footer-frame {
    position: relative;
    transition-duration: 0s;
  }
}

@media (max-width: 639px) {
  footer#cx-platform-footer, 
	footer#cx-space-footer {
    background-color: transparent;
  }

  #footer-frame {
    box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
    position: fixed;
    bottom: var(--offset-footer-base);
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
  }

  @media (prefers-reduced-motion: reduce) {
    #footer-frame {
      transition-property: none;
    }
  }

  #footer-frame.hide {
    transition-property: var(--transition-property-base);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: var(--transition-duration-base);
    transition-timing-function: var(--transition-timing-base);
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  @media (prefers-reduced-motion: reduce) {
    #footer-frame.hide {
      transition-property: none;
    }
  }

  .cx-stack-link-icons {
    padding-top: var(--spacing-sub-base);
  }

  #cx-platform-user-menu,
	#cx-space-user-menu {
    box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
    position: fixed;
    bottom: var(--offset-footer-base);
    margin-right: 0px;
    width: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-background) / var(--tw-bg-opacity));
    padding-top: var(--spacing-gutter-lg);
    padding-bottom: var(--spacing-gutter-lg);
    transition-duration: calc(2 * var(--transition-duration-base));
  }

  @media (prefers-reduced-motion: reduce) {
    #cx-platform-user-menu,
	#cx-space-user-menu {
      transition-property: none;
    }
  }

  #cx-platform-user-menu.hide,
	#cx-space-user-menu.hide {
    transition-property: var(--transition-property-base);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: var(--transition-duration-base);
    transition-timing-function: var(--transition-timing-base);
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  @media (prefers-reduced-motion: reduce) {
    #cx-platform-user-menu.hide,
	#cx-space-user-menu.hide {
      transition-property: none;
    }
  }

  #cx-platform-user-menu nav,
	#cx-space-user-menu nav {
    gap: var(--layout-unit);
  }

  #cx-platform-user-menu nav a div,
	#cx-space-user-menu nav a div {
    width: 138px;
  }

  #cx-platform-user-menu nav a:hover,
	#cx-space-user-menu nav a:hover {
    box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light)),
					inset 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  }

  .cx-dash-card.cx-banner-card.cx-bg-swap {
    background-image: none !important;
  }

  .cx-dash-card.cx-banner-card.cx-bg-swap .cx-banner-card-shader {
    background-color: transparent;
    --tw-backdrop-blur: blur(0);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
            backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}

/* -------------------------------------------- */

/* !SECTION CX Custom Mobile Menu 				*/

/* -------------------------------------------- */

/* -------------------------------------------- */

/* SECTION Pages / Tab Panes					*/

/* -------------------------------------------- */

#cx-space-home-c1.theme-transparent {
  padding-bottom: 0px;
}

/* -------------------------------------------- */

/* !SECTION Pages / Tab Panes					*/

/* -------------------------------------------- */

/* -------------------------------------------- */

/* SECTION Components 							*/

/* -------------------------------------------- */

/* ---------------------------- */

/* ANCHOR Welcome				*/

/* ---------------------------- */

#cx-space-home-welcome-image {
  aspect-ratio: 432 / 280;
  align-content: center;
  background-size: cover;
  background-position: center;
  text-align: center;
  vertical-align: middle;
}

@media (min-width: 1440px) {
  #cx-space-home-welcome-image {
    aspect-ratio: 16 / 9;
  }
}

#cx-space-home-welcome-image.card {
  background-color: transparent;
}

#cx-space-home-welcome-image a {
  margin: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  height: var(--element-base-size);
  width: var(--element-base-size);
  place-content: center;
  vertical-align: middle;
}

#cx-space-home-welcome-image a i {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
  opacity: 0.5;
}

@media (min-width: 1440px) {
  #cx-space-home-welcome-image a i {
    font-size: var(--text-i1a-size);
    line-height: var(--text-i1a-lh);
  }

  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    #cx-space-home-welcome-image a i {
      font-size: var(--text-i1a-size);
      line-height: var(--text-i1a-lh);
    }
  }

  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    #cx-space-home-welcome-image a i {
      font-size: var(--text-i1a-size);
      line-height: var(--text-i1a-lh);
    }
  }

  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    #cx-space-home-welcome-image a i {
      font-size: var(--text-i1-size);
      line-height: var(--text-i1-lh);
    }
  }

  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    #cx-space-home-welcome-image a i {
      font-size: var(--text-i1-size);
      line-height: var(--text-i1-lh);
    }
  }

  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    #cx-space-home-welcome-image a i {
      font-size: var(--text-i1-size);
      line-height: var(--text-i1-lh);
    }
  }
}

#cx-space-home-welcome-image a i:hover {
  opacity: 1;
}

@media (min-width: 1440px) {
  #cx-space-home-welcome-image a i {
    font-size: var(--text-i1-size);
    line-height: var(--text-i1-lh);
  }
}

#cx-space-home-welcome-image.card:has(video#cx-space-home-welcome-video),
#cx-space-home-welcome-image.card:has(div.youtubeVideoPreview) {
  background-color: transparent;
  background-image: none;
  padding: 0px;
}

#cx-space-home-welcome-video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

#cx-space-home-welcome-intro {
  align-content: center;
}

#cx-space-home-welcome-intro hgroup > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-heading) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-heading) * var(--tw-space-y-reverse));
}

#cx-space-home-welcome-intro hgroup {
  text-align: center;
}

@media (min-width: 960px) {
  #cx-space-home-welcome-intro hgroup.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  #cx-space-home-welcome-intro hgroup.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  #cx-space-home-welcome-intro hgroup {
    text-align: left;
  }
}

#cx-space-home-welcome-intro hgroup h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 1440px) {
  #cx-space-home-welcome-intro hgroup h2 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-lh);
  }
}

#cx-space-home-welcome-intro hgroup p {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

@media (min-width: 1440px) {
  #cx-space-home-welcome-intro hgroup p {
    font-size: var(--text-p1-size);
    line-height: var(--text-p1-lh);
  }
}

/* -------------------------------------------- */

/* !SECTION Components 							*/

/* -------------------------------------------- */

/* -------------------------------------------- */

/* SECTION Card Instances						*/

/* -------------------------------------------- */

/* ---------------------------- */

/* ANCHOR Product Card			*/

/* ---------------------------- */

.cx-product-membership, .cx-product-item {
  height: calc(5 * var(--layout-row-height-base) + 4 * var(--spacing-gutter-base));
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-product-membership, .cx-product-item {
    height: calc(5 * var(--layout-row-height-sm) + 4 * var(--spacing-gutter-sm));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-product-membership, .cx-product-item {
    height: calc(5 * var(--layout-row-height-md) + 4 * var(--spacing-gutter-md));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-product-membership, .cx-product-item {
    height: calc(5 * var(--layout-row-height-lg) + 4 * var(--spacing-gutter-lg));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-product-membership, .cx-product-item {
    height: calc(5 * var(--layout-row-height-xl) + 4 * var(--spacing-gutter-xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-product-membership, .cx-product-item {
    height: calc(5 * var(--layout-row-height-2xl) + 4 * var(--spacing-gutter-2xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-product-membership, .cx-product-item {
  background-size: cover;
  background-position: center;
  padding: 0px;
}

.cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
  height: calc(3 * var(--layout-row-height-base) + 2 * var(--spacing-gutter-base));
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
    height: calc(3 * var(--layout-row-height-sm) + 2 * var(--spacing-gutter-sm));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
    height: calc(3 * var(--layout-row-height-md) + 2 * var(--spacing-gutter-md));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
    height: calc(3 * var(--layout-row-height-lg) + 2 * var(--spacing-gutter-lg));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
    height: calc(3 * var(--layout-row-height-xl) + 2 * var(--spacing-gutter-xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
    height: calc(3 * var(--layout-row-height-2xl) + 2 * var(--spacing-gutter-2xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-dash-card-product.cx-product-membership, 
.cx-dash-card-product.cx-product-item {
  flex-shrink: 0;
}

.cx-dash-card-product.cx-product-membership:hover, 
.cx-dash-card-product.cx-product-item:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cx-dash-card-product.cx-product-membership i, 
.cx-dash-card-product.cx-product-item i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-product-membership .shader, .cx-product-item .shader {
  height: 100%;
  width: 100%;
  align-content: flex-end;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-primary) / var(--shader-base)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-primary) / var(--shader-light)) var(--tw-gradient-to-position);
  padding: var(--spacing-card-base);
  text-align: center;
}

@media (min-width: 640px) {
  .cx-product-membership .shader, .cx-product-item .shader {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
    --tw-gradient-to-position: 65%;
  }
}

@media (min-width: 768px) {
  .cx-product-membership .shader, .cx-product-item .shader {
    --tw-gradient-to-position: 90%;
  }
}

@media (min-width: 960px) {
  .cx-product-membership .shader, .cx-product-item .shader {
    --tw-gradient-to-position: 80%;
  }
}

@media (min-width: 1440px) {
  .cx-product-membership .shader, .cx-product-item .shader {
    --tw-gradient-to-position: 65%;
  }
}

.cx-product-membership hgroup > :not([hidden]) ~ :not([hidden]), .cx-product-item hgroup > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-heading) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-heading) * var(--tw-space-y-reverse));
}

.cx-product-membership hgroup h4, .cx-product-item hgroup h4 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-product-membership hgroup p, .cx-product-item hgroup p {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-product-membership a, .cx-product-item a {
  width: 100%;
}

.cx-stack-cards-controls-select .cx-dash-card-product {
  border-width: 1px;
  border-color: transparent;
}

.cx-stack-cards-controls-select .cx-dash-card-product:hover,  
.cx-stack-cards-controls-select .cx-dash-card-product.active {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

/* ---------------------------- */

/* ANCHOR Excerpt Card			*/

/* ---------------------------- */

.cx-excerpt, .cx-excerpt-update, .cx-excerpt-benefit {
  display: flex;
  flex-direction: column;
}

.cx-excerpt a img, .cx-excerpt-update a img, .cx-excerpt-benefit a img {
  aspect-ratio: 432 / 280;
}

.cx-excerpt a img > :not([hidden]) ~ :not([hidden]), .cx-excerpt-update a img > :not([hidden]) ~ :not([hidden]), .cx-excerpt-benefit a img > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
}

.cx-excerpt a img, .cx-excerpt-update a img, .cx-excerpt-benefit a img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  padding: 0px;
}

.cx-excerpt a img:hover, .cx-excerpt-update a img:hover, .cx-excerpt-benefit a img:hover {
  opacity: 0.9;
}

.cx-excerpt hgroup > :not([hidden]) ~ :not([hidden]), .cx-excerpt-update hgroup > :not([hidden]) ~ :not([hidden]), .cx-excerpt-benefit hgroup > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-title) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-title) * var(--tw-space-y-reverse));
}

.cx-excerpt hgroup p, .cx-excerpt-update hgroup p, .cx-excerpt-benefit hgroup p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.cx-benefits-post-access {
  width: 100%;
}

.cx-benefits-post-access .button-primary-gradient {
  width: 100%;
}

/* ---------------------------- */

/* ANCHOR Updates Article		*/

/* ---------------------------- */

.cx-stack-noaccess hgroup p {
  font-weight: 700;
}

@media (min-width: 960px) {
  .cx-stack-updates-tools, .cx-stack-benefits-tools {
    min-height: 80px;
  }
}

.cx-updates-article-cover-media a:hover img, .cx-benefits-article-cover-media a:hover img {
  opacity: 0.9;
}

.cx-updates-article-cover-media a img, .cx-benefits-article-cover-media a img {
  aspect-ratio: 1.1618 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.cx-stack-updates-aside .cx-stack-categories h3, .cx-stack-benefits-aside .cx-stack-categories h3 {
  display: none;
}

@media (min-width: 960px) {
  .cx-stack-updates-aside .cx-stack-categories h3, .cx-stack-benefits-aside .cx-stack-categories h3 {
    display: block;
  }
}

/* ---------------------------- */

/* ANCHOR Post Card				*/

/* ---------------------------- */

.cx-post a img {
  aspect-ratio: 1.1618 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.cx-post a img:hover {
  opacity: 0.9;
}

.cx-post.block-full.card-base > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.cx-stack-post-activity > p {
  width: 100%;
  align-content: center;
  text-align: center;
}

@media (min-width: 640px) {
  .cx-stack-post-activity > p {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-stack-post-activity > div {
  width: 100%;
  align-items: center;
}

@media (min-width: 640px) {
  .cx-stack-post-activity > div {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-stack-post-activity > div > p {
  text-align: center;
}

.cx-stack-post-comment-form .avatar-gradient {
  display: none;
}

@media (min-width: 640px) {
  .cx-stack-post-comment-form .avatar-gradient {
    display: block;
  }
}

.cx-post .form-input-combo input:focus, .cx-post .form-input-combo input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.cx-stack-comment-body {
  width: 100%;
}

.cx-directory-avatar:has(i),
.cx-post-avatar:has(i) {
  position: relative;
}

.cx-directory-avatar i,
.cx-post-avatar i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i4-size);
  line-height: var(--text-i4-lh);
  height: var(--text-i4-size);
  width: var(--text-i4-size);
}

.cx-directory-avatar,
.cx-post-avatar {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
}

.cx-directory-avatar img,
.cx-post-avatar img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

 a.cx-directory-avatar:hover img, a
.cx-post-avatar:hover img {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  /* CXNOTE CX Specific */
}

.cx-directory-avatar,
.cx-post-avatar {
  height: var(--element-c-sm);
  width: var(--element-c-sm);
  border-radius: 9999px;
}

.cx-directory-avatar img,
.cx-post-avatar img {
  border-radius: 9999px;
}

.cx-directory-avatar,
.cx-post-avatar {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 640px) {
  .cx-directory-avatar:has(i),
.cx-post-avatar:has(i) {
    position: relative;
  }

  .cx-directory-avatar i,
.cx-post-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: calc(var(--layout-unit) * -1);
    font-size: var(--text-i3-size);
    line-height: var(--text-i3-lh);
    height: var(--text-i3-size);
    width: var(--text-i3-size);
  }

  .cx-directory-avatar,
.cx-post-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-directory-avatar img,
.cx-post-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-directory-avatar:hover img, a
.cx-post-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-directory-avatar,
.cx-post-avatar {
    height: var(--element-c-md);
    width: var(--element-c-md);
    border-radius: 9999px;
  }

  .cx-directory-avatar img,
.cx-post-avatar img {
    border-radius: 9999px;
  }

  .cx-directory-avatar,
.cx-post-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }

  .cx-post hgroup h4 {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-lh);
  }
}

.cx-post-intro {
  font-style: italic;
}

.cx-stack-post-header > hgroup {
  display: flex;
  place-content: center;
}

.cx-stack-post-header > .stack-row > hgroup {
  align-content: center;
}

.cx-stack-tags {
  gap: var(--gap-stack-base);
}

@media (min-width: 960px) {
  .cx-post.cx-pinned .cx-post-avatar:has(i) {
    position: relative;
  }

  .cx-post.cx-pinned .cx-post-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: calc(var(--layout-unit) * -1);
    font-size: var(--text-i4-size);
    line-height: var(--text-i4-lh);
    height: var(--text-i4-size);
    width: var(--text-i4-size);
  }

  .cx-post.cx-pinned .cx-post-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-post.cx-pinned .cx-post-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-post.cx-pinned .cx-post-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-post.cx-pinned .cx-post-avatar {
    height: var(--element-c-sm);
    width: var(--element-c-sm);
    border-radius: 9999px;
  }

  .cx-post.cx-pinned .cx-post-avatar img {
    border-radius: 9999px;
  }

  .cx-post.cx-pinned .cx-post-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }
}

@media (min-width: 1440px) {
  .cx-post.cx-pinned .cx-post-avatar:has(i) {
    position: relative;
  }

  .cx-post.cx-pinned .cx-post-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: calc(var(--layout-unit) * -1);
    font-size: var(--text-i3-size);
    line-height: var(--text-i3-lh);
    height: var(--text-i3-size);
    width: var(--text-i3-size);
  }

  .cx-post.cx-pinned .cx-post-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-post.cx-pinned .cx-post-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-post.cx-pinned .cx-post-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-post.cx-pinned .cx-post-avatar {
    height: var(--element-c-md);
    width: var(--element-c-md);
    border-radius: 9999px;
  }

  .cx-post.cx-pinned .cx-post-avatar img {
    border-radius: 9999px;
  }

  .cx-post.cx-pinned .cx-post-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }
}

@media (min-width: 960px) {
  @media not all and (min-width: 1440px) {
    .cx-post.cx-pinned hgroup h4 {
      font-size: var(--text-h4-size);
      line-height: var(--text-h4-lh);
    }

    .cx-post.cx-pinned hgroup p {
      font-size: var(--text-p4-size);
      line-height: var(--text-p4-lh);
    }
  }
}

.cx-stack-post-actions a, .cx-stack-comment-actions a {
  align-content: center;
}

.cx-comment-avatar:has(i) {
  position: relative;
}

.cx-comment-avatar i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) / -2);
  font-size: var(--text-i6-size);
  line-height: var(--text-i6-lh);
  height: var(--text-i6-size);
  width: var(--text-i6-size);
}

.cx-comment-avatar {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
}

.cx-comment-avatar img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

 a.cx-comment-avatar:hover img {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  /* CXNOTE CX Specific */
}

.cx-comment-avatar {
  height: var(--element-min-size);
  width: var(--element-min-size);
  border-radius: 9999px;
}

.cx-comment-avatar img {
  border-radius: 9999px;
}

.cx-comment-avatar {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
}

@media (min-width: 640px) {
  .cx-comment-avatar:has(i) {
    position: relative;
  }

  .cx-comment-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: calc(var(--layout-unit) * -1);
    font-size: var(--text-i5-size);
    line-height: var(--text-i5-lh);
    height: var(--text-i5-size);
    width: var(--text-i5-size);
  }

  .cx-comment-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-comment-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-comment-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-comment-avatar {
    height: var(--element-base-size);
    width: var(--element-base-size);
    border-radius: 9999px;
  }

  .cx-comment-avatar img {
    border-radius: 9999px;
  }

  .cx-comment-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }
}

.cx-stack-comment-header > div {
  align-items: center;
}

.cx-stack-comment-header > a.button-icon-base-gradient {
  align-content: center;
}

.cx-product-preview-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  -moz-column-gap: var(--gap-element-base);
       column-gap: var(--gap-element-base);
}

@media (min-width: 640px) {
  .cx-product-preview-row h5 {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
  }
}

.cx-product-preview-row p {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .cx-product-preview-row p {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

#cx-product-renewal-pricing > .datarow > p > span {
  padding-left: var(--layout-unit);
  font-size: var(--text-p3-size);
  font-weight: 400;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

#cx-product-benefits > .datarow > p > span {
  padding-left: var(--layout-unit);
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-comment-body {
  margin-top: var(--layout-unit);
  margin-bottom: var(--layout-unit);
}

.cx-comment-thread {
  width: 100%;
}

.cx-stack-comment-header .cx-stack-comment-published p {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .cx-stack-comment-header .cx-stack-comment-published p {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.cx-stack-comment-header {
  width: 100%;
}

/* ---------------------------- */

/* ANCHOR Link Card				*/

/* ---------------------------- */

.cx-featured-link {
  height: calc(3 * var(--layout-row-height-base) + 2 * var(--spacing-gutter-base));
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-featured-link {
    height: calc(3 * var(--layout-row-height-sm) + 2 * var(--spacing-gutter-sm));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-featured-link {
    height: calc(3 * var(--layout-row-height-md) + 2 * var(--spacing-gutter-md));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-link {
    height: calc(3 * var(--layout-row-height-lg) + 2 * var(--spacing-gutter-lg));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-link {
    height: calc(3 * var(--layout-row-height-xl) + 2 * var(--spacing-gutter-xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-link {
    height: calc(3 * var(--layout-row-height-2xl) + 2 * var(--spacing-gutter-2xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-featured-link {
  align-content: center;
  background-size: cover;
  background-position: center;
  padding: 0px;
  text-align: center;
}

.cx-featured-link:hover {
  opacity: 0.9;
}

.cx-featured-link a {
  display: inline-block;
  height: 100%;
  width: 100%;
  place-content: center;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-primary) / var(--shader-base)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-primary) / var(--shader-light)) var(--tw-gradient-to-position);
  text-align: center;
}

@media (min-width: 640px) {
  .cx-featured-link a {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
  }
}

.cx-featured-link a hgroup > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-title) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-title) * var(--tw-space-y-reverse));
}

.cx-featured-link a hgroup p {
  font-style: italic;
}

/* ---------------------------- */

/* ANCHOR Member & Access Card	*/

/* ---------------------------- */

.cx-directory-member {
  align-content: center;
  background-size: cover;
  background-position: center;
  padding: 0px;
  text-align: center;
}

.cx-directory-member:hover {
  opacity: 0.9;
}

.cx-featured-access {
  height: calc(3 * var(--layout-row-height-base) + 2 * var(--spacing-gutter-base));
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-featured-access {
    height: calc(3 * var(--layout-row-height-sm) + 2 * var(--spacing-gutter-sm));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-featured-access {
    height: calc(3 * var(--layout-row-height-md) + 2 * var(--spacing-gutter-md));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-access {
    height: calc(3 * var(--layout-row-height-lg) + 2 * var(--spacing-gutter-lg));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-access {
    height: calc(3 * var(--layout-row-height-xl) + 2 * var(--spacing-gutter-xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-access {
    height: calc(3 * var(--layout-row-height-2xl) + 2 * var(--spacing-gutter-2xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-featured-access {
  align-content: center;
  background-size: cover;
  background-position: center;
  padding: 0px;
  text-align: center;
}

.cx-featured-access:hover {
  opacity: 0.9;
}

.cx-directory-member a {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-primary) / var(--shader-base)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.cx-featured-access a {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-primary) / var(--shader-base)) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.cx-directory-member a hgroup > :not([hidden]) ~ :not([hidden]),
.cx-featured-access a hgroup > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-title) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-title) * var(--tw-space-y-reverse));
}

.cx-featured-access a hgroup p i {
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-directory-member p.cx-directory-info {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  font-style: italic;
}

@media (min-width: 640px) {
  .cx-directory-member p.cx-directory-info {
    min-height: 60px;
  }
}

.cx-directory-member p.cx-directory-question-data {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.cx-directory-member p.cx-directory-question-data > span {
  margin-right: var(--spacing-sub-base);
  font-weight: 700;
}

/* ---------------------------- */

/* ANCHOR Support Link Card			*/

/* ---------------------------- */

.cx-featured-support {
  height: calc(2 * var(--layout-row-height-base) + var(--spacing-gutter-base));
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-featured-support {
    height: calc(2 * var(--layout-row-height-sm) + var(--spacing-gutter-sm));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-featured-support {
    height: calc(2 * var(--layout-row-height-md) + var(--spacing-gutter-md));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-support {
    height: calc(2 * var(--layout-row-height-lg) + var(--spacing-gutter-lg));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-support {
    height: calc(2 * var(--layout-row-height-xl) + var(--spacing-gutter-xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-featured-support {
    height: calc(2 * var(--layout-row-height-2xl) + var(--spacing-gutter-2xl));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-featured-support {
  align-content: center;
  background-size: cover;
  background-position: center;
  padding: 0px;
  text-align: center;
}

.cx-featured-support:hover {
  opacity: 0.9;
}

.cx-featured-support a {
  /* Do not edit */
  background: linear-gradient(
			to top right, 
			rgba(var(--color-key-rgb), var(--shader-heavy)), 
			rgba(var(--color-key-end-rgb), var(--shader-heavy))
			);
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cx-featured-support a hgroup > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--gap-hgroup-title) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--gap-hgroup-title) * var(--tw-space-y-reverse));
}

.cx-featured-support a hgroup p i {
  font-size: var(--text-i3-size);
  line-height: var(--text-i3-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

/* -------------------------------------------- */

/* !SECTION Instances							*/

/* -------------------------------------------- */

/* -------------------------------------------- */

/* SECTION Utilities 							*/

/* -------------------------------------------- */

/* ---------------------------- */

/* ANCHOR STACKS				*/

/* ---------------------------- */

.cx-stack-title {
  align-items: baseline;
  justify-content: center;
}

@media (min-width: 640px) {
  .cx-stack-title {
    justify-content: space-between;
  }
}

.cx-stack-title h2 {
  text-align: center;
}

@media (min-width: 640px) {
  .cx-stack-title h2.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-stack-title h2.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-stack-title h2 {
    text-align: left;
  }
}

.cx-stack-title > p {
  display: none;
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

@media (min-width: 640px) {
  .cx-stack-title > p {
    display: inline;
  }
}

.cx-stack-channel-header-info > div {
  align-items: center;
}

.cx-stack-channel-header-info h2 {
  text-align: center;
}

.cx-stack-channel-header-info p {
  font-style: italic;
}

.cx-stack-access {
  align-items: center;
  justify-content: space-between;
}

.cx-stack-access div {
  align-items: center;
}

.cx-stack-access p {
  min-height: var(--element-min-size);
  width: 100%;
  align-content: center;
  text-align: center;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-stack-access-split {
  align-items: center;
  justify-content: center;
}

@media (min-width: 1440px) {
  .cx-stack-access-split {
    justify-content: space-between;
  }
}

.cx-stack-access-split div {
  align-items: center;
}

.cx-stack-access-split p {
  min-height: var(--element-min-size);
  align-content: center;
  text-align: center;
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-stack-access-split > p {
  display: none;
}

@media (min-width: 1440px) {
  .cx-stack-access-split > p {
    display: block;
  }
}

.cx-stack-activity {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-stack-sm);
}

.cx-stack-title-filters {
  align-items: baseline;
  justify-content: center;
}

@media (min-width: 640px) {
  .cx-stack-title-filters {
    justify-content: space-between;
  }
}

.cx-stack-title-filters > h2 {
  text-align: center;
}

@media (min-width: 640px) {
  .cx-stack-title-filters > h2.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-stack-title-filters > h2.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-stack-title-filters > h2 {
    text-align: left;
  }
}

.cx-stack-title-filters > div {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-title-filters > div {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-stack-title-icons {
  align-items: baseline;
  justify-content: center;
}

@media (min-width: 640px) {
  .cx-stack-title-icons {
    justify-content: space-between;
  }
}

.cx-stack-title-icons > h2 {
  text-align: center;
}

@media (min-width: 640px) {
  .cx-stack-title-icons > h2.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-stack-title-icons > h2.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-stack-title-icons > h2 {
    text-align: left;
  }
}

.cx-stack-title-icons > div {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-title-icons > div {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-stack-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cx-stack-filters.split {
  justify-content: space-between;
}

.cx-stack-filters {
  justify-content: center;
  gap: var(--spacing-gutter-base);
}

#cx-profile-create-main .cx-stack-form-buttons-set {
  flex-wrap: wrap;
}

@media (min-width: 1440px) {
  #cx-profile-create-main .cx-stack-form-buttons-set {
    flex-wrap: nowrap;
  }
}

.cx-stack-heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-hgroup-heading);
}

.cx-stack-heading .stack-row {
  flex-wrap: wrap;
  align-items: baseline;
}

@media (min-width: 640px) {
  .cx-stack-heading .stack-row {
    flex-wrap: nowrap;
  }
}

.cx-stack-heading h3 {
  display: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-stack-heading h3 {
    display: block;
  }
}

.cx-stack-form-guided, .cx-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gutter-base);
}

.cx-stack-form-guided .cx-panel button.icon-dropdown-gradient-alt p, .cx-footer-localization button.icon-dropdown-gradient-alt p {
  font-size: var(--text-p3-size);
}

.cx-stack-form-guided .formrow.title > a {
  order: 1;
  margin-bottom: var(--spacing-gutter-base);
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow.title > a {
    order: 2;
    margin-bottom: 0px;
  }
}

.cx-stack-form-guided .formrow.title > div {
  order: 2;
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow.title > div {
    order: 2;
  }
}

.cx-stack-form-guided .formrow {
  flex-wrap: wrap;
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
  row-gap: var(--layout-unit);
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow {
    flex-wrap: nowrap;
  }
}

.cx-stack-form-guided .formrow.title {
  align-items: center;
}

.cx-stack-form-guided .formrow.title > div:first-child {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

@media (min-width: 640px) {
  .cx-stack-form-guided .formrow.title > div:first-child {
    flex-direction: row;
    align-items: baseline;
  }
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow.title > div:first-child {
    align-items: center;
  }
}

.cx-stack-form-guided .formrow > :last-child {
  width: 100%;
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow > :last-child {
    width: 40%;
  }
}

.cx-stack-form-guided .formrow.subtitle {
  margin-top: var(--pad-element-base);
}

.cx-stack-form-guided .formrow.subtitle > :last-child p {
  text-align: right;
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow.subtitle > :last-child p.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-stack-form-guided .formrow.subtitle > :last-child p.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-stack-form-guided .formrow.subtitle > :last-child p {
    text-align: left;
  }
}

.cx-stack-form-guided .formrow > div:last-child {
  display: flex;
  min-height: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  align-items: flex-start;
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow > div:last-child {
    align-items: center;
  }
}

.cx-stack-form-guided .formrow > div.cx-formrow-textarea-helper {
  height: 100%;
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow > div.cx-formrow-textarea-helper {
    min-height: var(--element-c-md);
  }
}

.cx-stack-form-guided .formrow > .cx-formrow-helper-split {
  margin-bottom: var(--layout-unit);
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--gap-stack-base);
       column-gap: var(--gap-stack-base);
  row-gap: var(--spacing-sub-base);
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow > .cx-formrow-helper-split {
    margin-bottom: 0px;
    flex-direction: column;
  }
}

.cx-stack-form-guided .formrow > .cx-formrow-helper-start {
  align-self: flex-start;
}

.cx-stack-form-guided .formrow > .cx-formrow-helper-end {
  align-self: flex-end;
}

.cx-stack-form-guided .formrow.media {
  margin-top: var(--pad-element-base);
}

.cx-form-card-stack {
  width: 100%;
}

@media (min-width: 768px) {
  .cx-stack-form-guided .cx-stack-plans {
    flex-direction: row;
  }
}

.cx-panel-title {
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

.cx-panel-title h3 {
  line-height: var(--element-base-size);
}

.cx-panel-heading {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-hgroup-heading);
}

.cx-panel-content {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-card-base);
}

.cx-panel-content label span {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-panel-toggle {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cx-panel-toggle.active {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* .cx-panel-content.hide {
	@apply hidden;
} */

.cx-panel-content {
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transform-origin: top left;
}

.cx-panel-content.hide {
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transform: scale(0) translateY(-10%) ;
  opacity: 0;
  transform-origin: top left ;
  visibility: collapse;
  position: absolute;
}

.cx-panel, .cx-stack-form-guided, #cx-platform-create-pro-theming-c1, #cx-platform-create-pro-theming-c1 > div, #cx-platform-create-pro-theming-c1 > div > div {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
}

.cx-panel-content > * {
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.cx-panel-content.hide > * {
  transition-duration: 1000ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transform: scale(0) rotate(180deg);
  opacity: 0;
  filter: blur(16px);
}

.cx-plan-card, .cx-feature-card {
  width: 100%;
  background-color: transparent;
  padding: var(--border-button);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.cx-stack-plan-card, .cx-stack-feature-card {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  row-gap: var(--gap-article-base);
  padding: var(--pad-article-2xl);
  text-align: center;
}

.cx-stack-feature-card > a {
  width: 100%;
}

.cx-plan-card.gradient, .cx-feature-card.gradient {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: transparent;
}

.cx-plan-card.gradient .cx-stack-plan-card,
.cx-feature-card.gradient .cx-stack-feature-card {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.cx-plan-card .cx-stack-plan-card > hgroup > p,
.cx-plan-card .cx-plan-pricing-details p {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.cx-plan-card .cx-stack-plan-card > hgroup > p > span,
.cx-plan-card .cx-plan-pricing-details p span {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  font-weight: 400;
  font-style: italic;
}

.cx-plan-card .cx-stack-plan-card h5, .cx-plan-card .cx-stack-plan-card h6 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.cx-plan-card .cx-plan-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cx-plan-card .cx-plan-intro > i,
.cx-feature-card .cx-feature-title > i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
}

.cx-plan-card .cx-plan-pricing h3 span {
  font-size: var(--text-h6-size);
}

.cx-plan-card .cx-plan-rates, 
.cx-plan-card .cx-plan-features {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-element-base);
}

.cx-plan-card .cx-plan-rates p,
.cx-plan-card .cx-plan-pricing-details {
  font-weight: 700;
}

.cx-plan-card .cx-plan-features {
  width: -moz-fit-content;
  width: fit-content;
}

.button-dropdown-gradient-alt.secondary.cx-plan-card .cx-plan-features ul span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.cx-plan-card .cx-plan-features ul > span > p {
  text-align: left;
  width: 100%;
}

.cx-plan-card .cx-plan-features ul {
  text-align: left;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.cx-form-card-stack .form-stack-radio-options {
  flex-direction: column;
}

@media (min-width: 768px) {
  .cx-form-card-stack .form-stack-radio-options {
    flex-direction: row;
  }
}

.cx-form-card-stack label {
  width: 100%;
}

.cx-form-card-stack .cx-form-card-stack-title {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
  font-weight: 700;
}

.cx-form-card-stack label span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cx-form-card-stack label p {
  text-align: center;
}

.cx-form-card-stack label > div i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
}

.cx-stack-form-inputs.cx-stack-datarows {
  flex-direction: column;
  row-gap: var(--gap-form-base);
}

.cx-stack-form-inputs .datarow > p:first-child {
  width: 33.333333%;
  font-weight: 700;
}

.cx-stack-form-inputs .datarow > p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.cx-stack-form-inputs .datarow.cx-data-item-text-long > p {
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
  align-items: flex-start;
}

.cx-stack-form-inputs.cx-stack-form-input-quarters {
  width: 100%;
  flex-wrap: wrap;
  row-gap: var(--gap-article-base);
}

@media (min-width: 960px) {
  .cx-stack-form-inputs.cx-stack-form-input-quarters {
    flex-wrap: nowrap;
  }
}

.cx-stack-form-inputs.cx-stack-form-input-quarters div {
  width: 100%;
}

.button-dropdown-gradient-alt.secondary.cx-stack-form-inputs.stack-col span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.cx-stack-form-inputs.stack-col > span > p {
  text-align: left;
  width: 100%;
}

.cx-stack-form-inputs.stack-col {
  justify-content: space-between;
  text-align: left;
}

.cx-form-color-picker, .cx-form-fieldset-card-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  -moz-column-gap: 0px;
       column-gap: 0px;
}

.cx-form-color-picker div.form-input.air, .cx-form-fieldset-card-row fieldset {
  width: 100%;
}

.cx-form-radio-set-block.air {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.cx-form-radio-set-block.air .cx-label {
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-form-radio-set-block.air .cx-label {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.cx-form-fieldset-card-row .form-radio-set.card-block .form-radio-option {
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (min-width: 640px) {
  .cx-form-radio-set-block .form-stack-radio-options label span p {
    font-size: var(--text-p3-size);
  }
}

#cx-theming-headerfooter-content .cx-form-radio-set-block .form-stack-radio-options label {
  padding-left: var(--spacing-sub-base);
  padding-right: var(--spacing-sub-base);
}

@media (min-width: 640px) {
  #cx-theming-headerfooter-content .cx-form-radio-set-block .form-stack-radio-options label {
    padding-left: var(--pad-element-base);
    padding-right: var(--pad-element-base);
  }
}

.cx-form-radio-set-stack, .cx-form-radio-set-stack label {
  width: 100%;
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack label > div {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  padding: 0px;
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option {
  display: flex;
  cursor: pointer;
  flex-direction: column;
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option > div > span {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option > img {
  border-top-left-radius: calc(var(--rounded-corner) - var(--border-button));
  border-top-right-radius: calc(var(--rounded-corner) - var(--border-button));
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  padding-bottom: var(--border-button);
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option > div > span > p {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-left: var(--spacing-card-base);
  padding-right: var(--spacing-card-base);
  padding-top: var(--layout-unit);
  padding-bottom: var(--layout-unit);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  font-style: normal;
}

@media (min-width: 640px) {
  #cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option > div > span > p {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option:hover > div > span > p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-option input:checked > p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

#cx-theming-headerfooter-content .cx-form-radio-set-stack .form-radio-set.card-stack.secondary label:has(input[type="radio"]:checked) :first-child p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-color-picker-block {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  z-index: 10;
  height: var(--layout-col-width-base);
  width: var(--element-base-size);
  border-top-right-radius: var(--rounded-corner);
  border-bottom-right-radius: var(--rounded-corner);
}

.cx-color-picker-block:hover {
  padding: var(--border-button);
}

.cx-color-picker-swatch {
  display: flex;
  height: 100%;
  width: 100%;
  border-top-right-radius: calc(var(--rounded-corner) - var(--border-button));
  border-bottom-right-radius: calc(var(--rounded-corner) - var(--border-button));
}

.cx-form-card-stack.form-radio-set.card-stack.gradient.secondary .form-stack-radio-options label > div {
  justify-content: flex-start;
  row-gap: var(--gap-element-base);
  padding: var(--spacing-gutter-base);
}

.cx-dash-card .formrow.title {
  flex-wrap: wrap;
  row-gap: var(--gap-hgroup-heading);
}

@media (min-width: 640px) {
  .cx-dash-card .formrow.title {
    flex-wrap: nowrap;
  }
}

.cx-dash-card .formrow.title :first-child {
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 640px) {
  .cx-dash-card .formrow.title :first-child {
    white-space: nowrap;
  }
}

.button-dropdown-gradient-alt.secondary.modal-block .formrow.title p span > i:first-child,.button-dropdown-gradient-alt.secondary
.cx-dash-card .formrow.title p span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.modal-block .formrow.title p > span > p,.button-dropdown-gradient-alt.secondary
.cx-dash-card .formrow.title p > span > p {
  text-align: left;
  width: 100%;
}

.modal-block .formrow.title p,
.cx-dash-card .formrow.title p {
  text-align: left;
}

@media (min-width: 640px) {
  .modal-block .formrow.title p,
.cx-dash-card .formrow.title p {
    text-align: right;
  }
}

.cx-dash-card .button-secondary-gradient span,
.cx-dash-card button.secondary-gradient span {
  --tw-bg-opacity: 1;
}

.cx-dash-card .button.gradient.secondary > span,
.cx-dash-card .cx-profile-edit .icon-dropdown-gradient-alt.secondary > span {
  --tw-bg-opacity: 1;
}

.cx-dash-card .button.gradient.secondary:hover > span,
.cx-dash-card .button.gradient.secondary.active > span,
.cx-dash-card .cx-profile-edit .icon-dropdown-gradient-alt.secondary:hover > span {
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.cx-dash-card .button.gradient.secondary:hover > span p, 
.cx-dash-card .button.gradient.secondary:hover > span i,
.cx-dash-card .button.gradient.secondary.active > span p, 
.cx-dash-card .button.gradient.secondary.active > span i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.screen-modal .card .form-input.air input,
.screen-modal .card .form-textarea.air textarea,
.cx-dash-card .form-input.air input,
.cx-dash-card .form-textarea.air textarea {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--color-key) / var(--tw-border-opacity));
}

.screen-modal .card .form-input.gradient > span,
.screen-modal .card .form-input-file.gradient > span,
.cx-dash-card .form-input.gradient > span,
.cx-dash-card .form-input-file.gradient > span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
}

.screen-modal .card .form-input.gradient label,
.screen-modal .card .form-input-file.gradient label,
.cx-dash-card .form-input.gradient label,
.cx-dash-card .form-input-file.gradient label {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.screen-modal .card .form-input.gradient input:hover,
.screen-modal .card .form-input-file.gradient input:hover,
.cx-dash-card .form-input.gradient input:hover,
.cx-dash-card .form-input-file.gradient input:hover {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
}

.cx-dash-card.card-base {
  display: flex;
  flex-direction: row;
  padding: 0px;
}

.cx-dash-card.card-base > div {
  display: flex;
  width: 100%;
}

.cx-dash-card.card-base .cx-stack-profile-preview {
  width: 100%;
  align-items: center;
  justify-content: center;
}

.cx-dash-card.card-base .cx-stack-form-buttons-set {
  flex-direction: column;
}

.cx-dash-card.card-base .cx-profile-preview {
  position: relative;
  display: none;
}

@media (min-width: 768px) {
  .cx-dash-card.card-base .cx-profile-preview {
    display: flex;
  }
}

.cx-dash-card.card-base .cx-profile-preview > video {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: inherit;
}

.cx-dash-card.card-base .cx-stack-profile-preview .form-input-media > video {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.cx-stack-avatar-data .avatar {
  margin-right: var(--pad-element-base);
}

.cx-stack-avatar-data hgroup > :first-child {
  margin-bottom: var(--layout-unit);
}

.cx-dash-card .cx-stack-avatar-data hgroup > p:last-child {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
}

.cx-stack-avatar-data.inactive hgroup > h4 {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-avatar-data.inactive img {
  --tw-saturate: saturate(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cx-stack-avatar-data.inactive > hgroup > p:last-child {
  background-image: none;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity)) !important;
}

.cx-stack-avatar-data.inactive .avatar {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-secondary) / var(--tw-bg-opacity));
  background-image: none;
}

.formrow.split > div.form-input,
.formrow.split > div.form-input-file {
  width: 100%;
}

.cx-datarow-leaderboard .data-count {
  margin-left: var(--spacing-sub-base);
}

.cx-dash-card .stack-avatar + .data-count {
  margin-left: var(--pad-element-base);
  font-style: italic;
}

.cx-stack-controlrows > .formrow,
.cx-dash-card .formrow {
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow,
.cx-dash-card .formrow {
    flex-wrap: nowrap;
  }
}

.cx-stack-controlrows > .alert.callout {
  margin-top: 0px;
}

.cx-stack-controlrows > .formrow > p:first-child {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: flex;
  width: 100%;
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow > p:first-child {
    width: 20%;
  }
}

.cx-dash-card .cx-banner-card-avatar {
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
}

@media (min-width: 640px) {
  .cx-dash-card .cx-banner-card-avatar {
    width: 20%;
  }
}

.cx-dash-card:has(.cx-dash-card-header-banner) > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.cx-dash-card:has(.cx-dash-card-header-banner) {
  padding: 0px;
}

.cx-dash-card-space,
.cx-dash-card-collection {
  height: -moz-fit-content;
  height: fit-content;
}

.cx-dash-card-space .datarow.p-card,
.cx-dash-card-collection .datarow.p-card {
  flex-direction: column;
  row-gap: var(--gap-stack-base);
}

@media (min-width: 768px) {
  .cx-dash-card-space .datarow.p-card,
.cx-dash-card-collection .datarow.p-card {
    flex-direction: row;
  }
}

.cx-dash-card-space .datarow.p-card > :first-child {
  width: 100%;
}

@media (min-width: 768px) {
  .cx-dash-card-space .datarow.p-card > :first-child {
    width: 33.333333%;
  }
}

.cx-dash-card-space .datarow.p-card > div:nth-child(2) {
  width: 100%;
}

@media (min-width: 768px) {
  .cx-dash-card-space .datarow.p-card > div:nth-child(2) {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-dash-card-space .datarow.p-card > :last-child {
  width: 100%;
}

@media (min-width: 768px) {
  .cx-dash-card-space .datarow.p-card > :last-child {
    width: 30%;
  }
}

.cx-dash-card-space .cx-stack-activity {
  flex-direction: row;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .cx-dash-card-space .cx-stack-activity {
    flex-direction: column;
  }
}

.cx-dash-card-space.cx-card-mini .cx-stack-activity {
  flex-direction: row;
  flex-wrap: nowrap;
}

@media (min-width: 768px) {
  .cx-dash-card-space.cx-card-mini .cx-stack-activity {
    flex-direction: row;
  }
}

.cx-dash-card-space.cx-card-mini .cx-stack-activity > a,
.cx-dash-card-space.cx-card-mini .cx-stack-activity > a i {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-dash-card-space .cx-stack-activity a {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  width: 50%;
}

@media (min-width: 768px) {
  .cx-dash-card-space .cx-stack-activity a {
    width: 100%;
  }
}

.cx-dash-card-space .cx-stack-product-data hgroup > p:last-child {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-dash-card-collection .datarow.p-card > :first-child {
  width: 118px;
}

.cx-dash-card-collection .datarow.p-card > div:nth-child(2) {
  width: -moz-fit-content;
  width: fit-content;
}

.cx-dash-card-collection .datarow.p-card > :last-child {
  width: 100%;
}

@media (min-width: 768px) {
  .cx-dash-card-collection .datarow.p-card > :last-child {
    width: 30%;
  }
}

.cx-banner-card-avatar > img {
  display: flex;
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 640px) {
  .cx-banner-card-avatar > img {
    --tw-shadow: var(--shadow-base);
    --tw-shadow-colored: var(--shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.cx-banner-card-avatar > img {
  border-radius: inherit;
}

.cx-dash-card .formrow > .cx-banner-card-info {
  display: flex;
  flex: 1 1 0%;
}

.cx-dash-card .formrow > .cx-banner-card-info h3 {
  background-image: none;
  line-height: var(--text-h2-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

@media (min-width: 1440px) {
  .cx-dash-card .formrow > .cx-banner-card-info h3 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-lh);
  }
}

.cx-dash-card .formrow > .cx-banner-card-info h4 {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-dash-card .formrow > .cx-banner-card-info h4 {
    font-size: var(--text-h5-size);
    line-height: var(--text-h5-lh);
  }
}

@media (min-width: 1440px) {
  .cx-dash-card .formrow > .cx-banner-card-info h4 {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-lh);
  }
}

.cx-dash-card .formrow > .cx-banner-card-info p {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-dash-card .formrow > .cx-banner-card-info p {
    font-size: var(--text-p4-size);
    line-height: var(--text-p4-lh);
  }
}

@media (min-width: 1440px) {
  .cx-dash-card .formrow > .cx-banner-card-info p {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.cx-dash-card .formrow > .cx-banner-card-controls {
  display: flex;
  width: 100%;
}

@media (min-width: 640px) {
  .cx-dash-card .formrow > .cx-banner-card-controls {
    width: 40%;
  }
}

@media (min-width: 1440px) {
  .cx-dash-card .formrow > .cx-banner-card-controls {
    width: 30%;
  }
}

.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack-base);
}

.card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-card-base);
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-sm);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-sm);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-sm);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-md);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-md);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-md);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-lg);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-lg);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-lg);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-xl);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-xl);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-xl);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-2xl);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-2xl);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    gap: var(--gap-stack-2xl);
  }

  .card .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls, .card-base .cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-card-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
  display: flex;
  width: 100%;
}

.button-dropdown-gradient-alt.secondary.cx-stack-form-inputs.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.cx-stack-form-inputs.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls > span > p {
  text-align: left;
  width: 100%;
}

.cx-stack-form-inputs.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls {
  justify-content: space-between;
  text-align: left;
}

#cx-product-activate-main form.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls > div {
  padding-top: var(--pad-element-base);
}

.cx-dash-card.cx-banner-card .cx-banner-card-info-stats {
  display: flex;
  flex-direction: column;
}

.cx-dash-card.cx-banner-card .cx-banner-card-info-stats-status, 
.cx-dash-card.cx-banner-card .cx-banner-card-info-stats-ranked {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info .cx-banner-card-info-stats-status p:first-child {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info .cx-banner-card-info-stats-status p:first-child {
    background-image: none;
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info .cx-banner-card-info-stats-status p:last-child {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info .cx-banner-card-info-stats-status p:last-child {
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info h3 {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  line-height: var(--text-h3-lh);
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info h3 {
    background-image: none;
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

@media (min-width: 1440px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info h3 {
    line-height: var(--text-h2-lh);
  }
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info h4 {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info h4 {
    background-image: none;
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-info p {
    background-image: none;
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

.cx-dash-card.cx-card-mini .formrow > .cx-banner-card-controls .button.secondary {
  width: 100%;
}

.cx-dash-card .formrow > .cx-banner-card-controls .button.secondary {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  transition-property: none;
}

.cx-dash-card .formrow > .cx-banner-card-controls .button.secondary:hover {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

.cx-dash-card .formrow > .cx-banner-card-controls .button.secondary:hover p, 
.cx-dash-card .formrow > .cx-banner-card-controls .button.secondary:hover i {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient {
  transition-property: none;
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient:hover {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-invert) / var(--tw-ring-opacity));
  }

  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient::before {
    background-image: none;
  }
}

.modal-block.card .button.secondary.gradient span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
}

.modal-block.card .button.secondary.gradient:hover span {
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

.modal-block.card .button.secondary.gradient:hover span p, 
.modal-block.card .button.secondary.gradient:hover span i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient span {
    background-color: transparent;
  }

  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient span p,
.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient span i {
    background-image: none;
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient:hover span p,
.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient:hover span i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient:hover span p,
.cx-dash-card.cx-banner-card.cx-bg-swap .formrow > .cx-banner-card-controls .button.secondary.gradient:hover span i {
    background-image: none;
    --tw-text-opacity: 1;
    color: rgb(var(--color-invert) / var(--tw-text-opacity));
  }
}

.cx-dash-card.cx-product-card {
  flex-direction: column;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-product-card {
    flex-direction: row;
  }
}

.cx-dash-card.cx-product-card .cx-product-card-info {
  order: 2;
  width: 100%;
  justify-content: center;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-product-card .cx-product-card-info {
    order: 1;
  }
}

.cx-dash-card.cx-product-card .cx-product-card-info > hgroup > h4 {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-dash-card.cx-product-card .cx-product-card-display {
  order: 1;
  width: 100%;
}

@media (min-width: 640px) {
  .cx-dash-card.cx-product-card .cx-product-card-display {
    order: 2;
  }
}

.cx-dash-card.cx-product-card .cx-product-card-display .cx-product-card-shader {
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-primary) / var(--shader-light));
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.cx-dash-card .cx-product-card-media {
  aspect-ratio: 1 / 1;
  width: 100%;
}

.cx-dash-card .cx-product-card-media > img {
  display: flex;
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 640px) {
  .cx-dash-card .cx-product-card-media > img {
    --tw-shadow: var(--shadow-base);
    --tw-shadow-colored: var(--shadow-base);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.cx-dash-card .cx-product-card-media > img {
  border-radius: inherit;
}

.cx-dash-card.cx-product-card .cx-product-card-info .cx-product-card-description > p:first-child {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

@media (min-width: 1440px) {
  .cx-dash-card.cx-product-card .cx-product-card-info .cx-product-card-description > p:first-child {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
  }
}

.cx-dash-card.cx-product-card .cx-product-card-info .cx-product-card-authored {
  display: flex;
  flex-direction: column;
  row-gap: var(--layout-unit);
}

.cx-dash-card.cx-product-card .cx-product-card-info .cx-product-card-authored > p a {
  font-style: normal;
}

.cx-dash-card.cx-product-card .cx-product-card-info .cx-product-card-authored > p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-product-card-controls {
  flex-wrap: wrap;
  row-gap: var(--gap-stack-base);
}

@media (min-width: 640px) {
  .cx-product-card-controls {
    flex-wrap: nowrap;
  }
}

div.cx-stack-control-cards {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.cx-stack-controlrows > .formrow > .data-item:first-child {
  flex: 1 1 0%;
}

.button-dropdown-gradient-alt.secondary.cx-stack-controlrows > .formrow.split > div:last-child p span > i:first-child,.button-dropdown-gradient-alt.secondary
.cx-stack-controlrows > .formrow > p:nth-child(2) span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.cx-stack-controlrows > .formrow.split > div:last-child p > span > p,.button-dropdown-gradient-alt.secondary
.cx-stack-controlrows > .formrow > p:nth-child(2) > span > p {
  text-align: left;
  width: 100%;
}

.cx-stack-controlrows > .formrow.split > div:last-child p,
.cx-stack-controlrows > .formrow > p:nth-child(2) {
  flex: 1 1 0%;
  text-align: left;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-controlrows > .formrow.split > :first-child {
  display: flex;
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow.split > :first-child {
    width: 50%;
  }
}

.cx-stack-controlrows > .formrow.split > :last-child {
  display: flex;
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow.split > :last-child {
    width: 50%;
  }
}

.cx-stack-controlrows > .formrow > :last-child {
  display: flex;
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow > :last-child {
    width: 40%;
  }
}

@media (min-width: 1440px) {
  .cx-stack-controlrows > .formrow > :last-child {
    width: 30%;
  }
}

.cx-dash-card > .cx-stack-controlrows > .formrow > .data-item > .stack-avatar.md > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(calc(var(--offset-element-md) * -1) * var(--tw-space-x-reverse));
  margin-left: calc(calc(var(--offset-element-md) * -1) * calc(1 - var(--tw-space-x-reverse)));
}

@media (min-width: 640px) {
  .cx-dash-card > .cx-stack-controlrows > .formrow > .data-item > .stack-avatar.md > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(calc(var(--offset-element-md) * -1) * var(--tw-space-x-reverse));
    margin-left: calc(calc(var(--offset-element-md) * -1) * calc(1 - var(--tw-space-x-reverse)));
  }
}

.cx-dash-card > .cx-stack-controlrows > .formrow > .data-item > .stack-avatar.md > .avatar.md {
  height: var(--element-c-sm);
  width: var(--element-c-sm);
}

@media (min-width: 640px) {
  .cx-dash-card > .cx-stack-controlrows > .formrow > .data-item > .stack-avatar.md > .avatar.md {
    height: var(--element-c-md);
    width: var(--element-c-md);
  }
}

.data-item > .stack-avatar + .block-element {
  font-style: italic;
}

.cx-stack-form-guided .formrow > div:last-child p {
  width: 100%;
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow > div:last-child p.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-stack-form-guided .formrow > div:last-child p.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-stack-form-guided .formrow > div:last-child p {
    text-align: left;
  }
}

.cx-stack-form-guided .formrow.media > div:last-child {
  align-self: center;
}

.cx-stack-form-guided .formrow div.cx-formrow-helper-none {
  display: none;
}

@media (min-width: 960px) {
  .cx-stack-form-guided .formrow div.cx-formrow-helper-none {
    display: flex;
  }
}

.cx-stack-form-buttons p {
  padding-bottom: var(--layout-unit);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.cx-stack-form-buttons-set {
  display: flex;
  width: 100%;
  flex-direction: row;
  row-gap: var(--gap-form-2xl);
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

#cx-product-activate-main form.stack-col > div {
  padding-top: var(--pad-element-base);
}

#cx-product-activate-main > .cx-stack-title-preview > h4 > span {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

#cx-product-activate-main a.button-primary-gradient,
#cx-product-activate-main button.primary-gradient,
#cx-product-activate-main a.button-secondary-gradient,
#cx-product-activate-main button.secondary-gradient {
  width: 100%;
}

.cx-checkout-review-product hgroup.title > p > span {
  font-weight: 700;
}

.cx-checkout-review-product .form-radio-option > span:first-child {
  width: 45%;
}

@media (min-width: 640px) {
  .cx-checkout-review-product .form-radio-option > span:first-child {
    width: 33.333333%;
  }
}

.cx-checkout-review-product .form-radio-option > span:last-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.cx-checkout-review-product .form-radio-option > span p i {
  margin-left: var(--layout-unit);
}

.cx-checkout-review-product .form-stack-radio-options label span:first-child p {
  font-size: var(--text-p3-size);
}

.cx-profile-preview {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), calc(1 - var(--color-key-gradient-invert-opacity))), rgba(var(--color-key-end-rgb), calc(1 - var(--color-key-gradient-invert-opacity))));
  /* Gradient background Opacity Variant */
}

.cx-profile-preview.card {
  padding: 0px;
}

.cx-stack-profile-preview {
  place-items: center;
  padding: var(--pad-article-2xl);
}

.cx-stack-profile-preview.shader {
  background-color: rgb(var(--color-primary) / var(--shader-light));
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

#cx-product-activate-main p a i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
}

.cx-profile-preview, .cx-profile-preview h1 {
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.cx-profile-preview .active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cx-stack-title-preview {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap-element-base);
}

@media (min-width: 960px) {
  .cx-stack-channel-tools {
    min-height: var(--layout-row-height-sm);
  }
}

.cx-stack-form-media {
  width: 100%;
  text-align: center;
}

.cx-stack-form-inputs {
  display: flex;
  width: 100%;
}

.cx-stack-form-inputs.stack-row > div {
  width: 100%;
}

.cx-stack-form-media-item .cx-label {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-top: var(--pad-element-base);
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

@media (min-width: 640px) {
  .cx-stack-form-media-item .cx-label {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.cx-stack-form-media-item .cx-helper {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .cx-stack-form-media-item .cx-helper {
    font-size: var(--text-p3-size);
    line-height: var(--text-p3-lh);
  }
}

.cx-helper {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-form-media-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  place-items: center;
}

.cx-stack-subtitle-published {
  justify-content: space-between;
}

.cx-stack-form-link-icons {
  display: flex;
  flex-direction: column;
}

.cx-stack-form-link-icons > p {
  padding-bottom: var(--layout-unit);
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.cx-stack-form-link-icons a.button-icon-round-gradient-alt p, .cx-stack-form-link-icons button.icon-round-gradient-alt p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-form-link-icons a.button-icon-round-gradient-alt:hover p, .cx-stack-form-link-icons button.icon-round-gradient-alt:hover p, .cx-stack-form-link-icons a.button-icon-round-gradient-alt:active p, .cx-stack-form-link-icons button.icon-round-gradient-alt:active p, .cx-stack-form-link-icons a.button-icon-round-gradient-alt.active p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

div.cx-stack-categories {
  gap: var(--gap-stack-base);
}

div.cx-stack-categories > h3 {
  margin-top: var(--spacing-sub-base);
}

@media (min-width: 960px) {
  div.cx-stack-categories > h3 {
    margin-top: 0px;
  }
}

div.cx-stack-pinned > h3 {
  margin-top: var(--spacing-sub-base);
}

@media (min-width: 960px) {
  div.cx-stack-pinned > h3 {
    margin-top: 0px;
  }
}

div.cx-stack-category-links {
  width: 100%;
  justify-content: center;
  gap: var(--spacing-sub-base);
}

@media (min-width: 960px) {
  div.cx-stack-category-links {
    justify-content: normal;
  }
}

div.cx-stack-category-links a > span {
  gap: var(--gap-element-base);
}

div.cx-stack-category-links p.cx-count {
  font-style: italic;
}

div.cx-stack-tags {
  justify-content: center;
}

@media (min-width: 960px) {
  div.cx-stack-tags {
    justify-content: normal;
  }
}

div.cx-stack-trending > h3 {
  display: none;
}

@media (min-width: 960px) {
  div.cx-stack-trending > h3 {
    display: block;
  }
}

.cx-stack-categories a.button-secondary-gradient.squared {
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 960px) {
  .cx-stack-categories a.button-secondary-gradient.squared {
    width: 100%;
  }
}

.cx-stack-categories a.button-secondary-gradient.squared p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
  transition-property: none;
}

.cx-stack-categories a.button-secondary-gradient.squared:hover p, .cx-stack-categories a.button-secondary-gradient.squared:active p {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition-property: none;
}

.cx-stack-categories a.button-secondary-gradient.squared {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), 0), rgba(var(--color-key-end-rgb), 0)) ;
  /* Gradient background Opacity Variant */
  transition-property: none;
}

.cx-stack-categories a.button-secondary-gradient.squared:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.cx-stack-categories a.button-secondary-gradient.squared:active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
}

.cx-stack-categories a.button-secondary-gradient.squared span {
  background-color: transparent;
  transition-property: none;
}

.cx-stack-categories a.button-secondary-gradient.squared:hover span, .cx-stack-categories a.button-secondary-gradient.squared:active span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
  transition-property: none;
}

/* STACK GAPS/FILLERS/SPACERS */

.cx-stack-excerpts {
  row-gap: calc(var(--spacing-gutter-base) + var(--layout-unit) + var(--layout-unit));
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-stack-excerpts {
    row-gap: calc(var(--spacing-gutter-sm) + var(--layout-unit) + var(--layout-unit));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  .cx-stack-excerpts {
    -moz-column-gap: var(--spacing-gutter-sm);
         column-gap: var(--spacing-gutter-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-stack-excerpts {
    row-gap: calc(var(--spacing-gutter-md) + var(--layout-unit) + var(--layout-unit));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  .cx-stack-excerpts {
    -moz-column-gap: var(--spacing-gutter-md);
         column-gap: var(--spacing-gutter-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-stack-excerpts {
    row-gap: calc(var(--spacing-gutter-lg) + var(--layout-unit) + var(--layout-unit));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-stack-excerpts {
    -moz-column-gap: var(--spacing-gutter-lg);
         column-gap: var(--spacing-gutter-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-stack-excerpts {
    row-gap: calc(var(--spacing-gutter-xl) + var(--layout-unit) + var(--layout-unit));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-stack-excerpts {
    -moz-column-gap: var(--spacing-gutter-xl);
         column-gap: var(--spacing-gutter-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-stack-excerpts {
    row-gap: calc(var(--spacing-gutter-2xl) + var(--layout-unit) + var(--layout-unit));
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */

  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  .cx-stack-excerpts {
    -moz-column-gap: var(--spacing-gutter-2xl);
         column-gap: var(--spacing-gutter-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

.cx-stack-excerpts {
  grid-column: 1 / -1;
}

.cx-stack-fill {
  flex-grow: 1;
  align-content: flex-end;
}

.cx-stack-fill a.button-secondary-gradient {
  width: 100%;
}

.stack-avatar :nth-child(1), .stack-avatar.min :nth-child(1), .stack-avatar-min :nth-child(1) {
  z-index: 240;
}

.stack-avatar :nth-child(2), .stack-avatar.min :nth-child(2), .stack-avatar-min :nth-child(2) {
  z-index: 230;
}

.stack-avatar :nth-child(3), .stack-avatar.min :nth-child(3), .stack-avatar-min :nth-child(3) {
  z-index: 220;
}

.stack-avatar :nth-child(4), .stack-avatar.min :nth-child(4), .stack-avatar-min :nth-child(4) {
  z-index: 210;
}

.stack-avatar :nth-child(5), .stack-avatar.min :nth-child(5), .stack-avatar-min :nth-child(5) {
  z-index: 200;
}

.stack-avatar :nth-child(6), .stack-avatar.min :nth-child(6), .stack-avatar-min :nth-child(6) {
  z-index: 190;
}

.stack-avatar :nth-child(7), .stack-avatar.min :nth-child(7), .stack-avatar-min :nth-child(7) {
  z-index: 180;
}

.stack-avatar :nth-child(8), .stack-avatar.min :nth-child(8), .stack-avatar-min :nth-child(8) {
  z-index: 170;
}

.stack-avatar :nth-child(9), .stack-avatar.min :nth-child(9), .stack-avatar-min :nth-child(9) {
  z-index: 160;
}

.stack-avatar :nth-child(10), .stack-avatar.min :nth-child(10), .stack-avatar-min :nth-child(10) {
  z-index: 150;
}

.stack-avatar :nth-child(11), .stack-avatar.min :nth-child(11), .stack-avatar-min :nth-child(11) {
  z-index: 140;
}

.stack-avatar :nth-child(12), .stack-avatar.min :nth-child(12), .stack-avatar-min :nth-child(12) {
  z-index: 130;
}

.stack-avatar :nth-child(13), .stack-avatar.min :nth-child(13), .stack-avatar-min :nth-child(13) {
  z-index: 120;
}

.stack-avatar :nth-child(14), .stack-avatar.min :nth-child(14), .stack-avatar-min :nth-child(14) {
  z-index: 110;
}

.stack-avatar :nth-child(15), .stack-avatar.min :nth-child(15), .stack-avatar-min :nth-child(15) {
  z-index: 100;
}

.stack-avatar :nth-child(16), .stack-avatar.min :nth-child(16), .stack-avatar-min :nth-child(16) {
  z-index: 90;
}

.stack-avatar :nth-child(17), .stack-avatar.min :nth-child(17), .stack-avatar-min :nth-child(17) {
  z-index: 80;
}

.stack-avatar :nth-child(18), .stack-avatar.min :nth-child(18), .stack-avatar-min :nth-child(18) {
  z-index: 70;
}

.stack-avatar :nth-child(19), .stack-avatar.min :nth-child(19), .stack-avatar-min :nth-child(19) {
  z-index: 60;
}

.stack-avatar :nth-child(20), .stack-avatar.min :nth-child(20), .stack-avatar-min :nth-child(20) {
  z-index: 50;
}

.stack-avatar :nth-child(21), .stack-avatar.min :nth-child(21), .stack-avatar-min :nth-child(21) {
  z-index: 40;
}

.stack-avatar :nth-child(22), .stack-avatar.min :nth-child(22), .stack-avatar-min :nth-child(22) {
  z-index: 30;
}

.stack-avatar :nth-child(23), .stack-avatar.min :nth-child(23), .stack-avatar-min :nth-child(23) {
  z-index: 20;
}

.stack-avatar :nth-child(24), .stack-avatar.min :nth-child(24), .stack-avatar-min :nth-child(24) {
  z-index: 10;
}

#cx-profile-nav a {
  flex-basis: calc(50% - var(--spacing-gutter-base));
}

@media (min-width: 960px) {
  #cx-profile-nav a {
    width: 100%;
  }
}

#cx-dash-card-nav-collection .stack-row,
#cx-dash-card-nav-benefits .stack-row,
#cx-dash-card-nav-spaces .stack-row {
  flex-wrap: wrap;
  row-gap: var(--spacing-sub-base);
}

@media (min-width: 768px) {
  #cx-dash-card-nav-collection .stack-row,
#cx-dash-card-nav-benefits .stack-row,
#cx-dash-card-nav-spaces .stack-row {
    flex-wrap: nowrap;
  }
}

#cx-dash-card-nav-collection a,
#cx-dash-card-nav-benefits a,
#cx-dash-card-nav-spaces a {
  flex-basis: 100%;
}

@media (min-width: 640px) {
  #cx-dash-card-nav-collection a,
#cx-dash-card-nav-benefits a,
#cx-dash-card-nav-spaces a {
    flex-basis: calc(33.333333% - var(--spacing-gutter-base));
  }
}

#cx-dash-card-nav-benefits .button.secondary,
#cx-dash-card-nav-spaces .button.secondary {
  background-color: transparent;
  transition-property: none;
}

#cx-dash-card-nav-benefits .button.secondary::before,
#cx-dash-card-nav-spaces .button.secondary::before {
  opacity: 0;
  transition-property: none;
}

#cx-dash-card-nav-benefits .button.secondary:hover::before,
#cx-dash-card-nav-spaces .button.secondary:hover::before {
  opacity: 1;
  transition-property: none;
}

#cx-dash-card-nav-benefits .button.secondary.active span,
#cx-dash-card-nav-spaces .button.secondary.active span {
  background-color: transparent;
  transition-property: none;
}

#cx-dash-card-nav-benefits .button.secondary.active span p,
#cx-dash-card-nav-spaces .button.secondary.active span p {
  background-image: none;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
  transition-property: none;
}

#cx-dash-card-nav-collection .button {
  background-image: none;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

#cx-dash-card-nav-collection .button.active span,
#cx-dash-card-nav-collection .button:hover span {
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.5;
}

#cx-dash-card-nav-collection .button:hover span p {
  background-image: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

#cx-dash-card-nav-collection .button.active span p {
  background-image: none;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

/* TODO REMOVE #cx-profile-nav duplicates below after cx-nav-tabs consolidated */

#cx-profile-nav a, 
.cx-nav-tabs a {
  /* Do not edit */
  background: linear-gradient(to right, rgba(var(--color-key-rgb), 0), rgba(var(--color-key-end-rgb), 0)) ;
  /* Gradient background Opacity Variant */
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: calc(50% - var(--spacing-gutter-base));
  transition-property: none;
}

@media (min-width: 960px) {
  #cx-profile-nav a, 
.cx-nav-tabs a {
    width: 100%;
  }
}

#cx-profile-nav a:hover, #cx-profile-nav a:active, #cx-profile-nav a.active, 
.cx-nav-tabs a:hover, .cx-nav-tabs a:active, .cx-nav-tabs a.active {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  --tw-bg-opacity: 1;
}

#cx-profile-nav a p,
.cx-nav-tabs a p {
  transition-property: none;
}

#cx-profile-nav a:hover p,
.cx-nav-tabs a:hover p {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition-property: none;
}

#cx-profile-nav a:active p, #cx-profile-nav a.active p,
.cx-nav-tabs a:active p, .cx-nav-tabs a.active p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

#cx-profile-nav a span,
.cx-nav-tabs a span {
  background-color: transparent;
  transition-property: none;
}

#cx-profile-nav a:hover span, 
.cx-nav-tabs a:hover span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
}

#cx-profile-nav a:active span, #cx-profile-nav a.active span, 
.cx-nav-tabs a:active span, .cx-nav-tabs a.active span {
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0;
}

.cx-title-icon-attribute {
  align-items: baseline;
}

.cx-title-icon-attribute p i {
  padding-right: var(--spacing-sub-base);
}

.cx-top8-avatar:has(i) {
  position: relative;
}

.cx-top8-avatar i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i4-size);
  line-height: var(--text-i4-lh);
  height: var(--text-i4-size);
  width: var(--text-i4-size);
}

.cx-top8-avatar {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
}

.cx-top8-avatar img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

 a.cx-top8-avatar:hover img {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  /* CXNOTE CX Specific */
}

.cx-top8-avatar {
  height: var(--element-c-sm);
  width: var(--element-c-sm);
  border-radius: 9999px;
}

.cx-top8-avatar img {
  border-radius: 9999px;
}

.cx-top8-avatar {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
  .cx-top8-avatar:has(i) {
    position: relative;
  }

  .cx-top8-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: calc(var(--layout-unit) * -1);
    font-size: var(--text-i3-size);
    line-height: var(--text-i3-lh);
    height: var(--text-i3-size);
    width: var(--text-i3-size);
  }

  .cx-top8-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-top8-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-top8-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-top8-avatar {
    height: var(--element-c-md);
    width: var(--element-c-md);
    border-radius: 9999px;
  }

  .cx-top8-avatar img {
    border-radius: 9999px;
  }

  .cx-top8-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }
}

#cx-top8 h2 {
  text-align: center;
}

@media (min-width: 640px) {
  #cx-top8 h2.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  #cx-top8 h2.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  #cx-top8 h2 {
    text-align: left;
  }
}

.cx-stack-top8 {
  width: 100%;
  justify-content: center;
}

@media (min-width: 640px) {
  .cx-stack-top8 {
    justify-content: normal;
  }
}

.cx-top8-item {
  flex-shrink: 1;
  flex-basis: calc(50% - var(--spacing-gutter-base));
  align-items: center;
}

@media (min-width: 640px) {
  .cx-top8-item {
    flex-grow: 1;
  }
}

.cx-stack-top8-info {
  gap: var(--spacing-sub-base);
}

.cx-stack-top8-stats {
  -moz-column-gap: var(--gap-stack-base);
       column-gap: var(--gap-stack-base);
}

.cx-stack-top8-stats p {
  width: var(--element-c-md);
}

.cx-stack-top8-stats p i {
  padding-right: var(--spacing-sub-base);
}

#cx-mod-profile-spotify-playlist iframe {
  border-radius: var(--rounded-article-base);
}

@media (min-width:640px) {
  /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

  #cx-mod-profile-spotify-playlist iframe {
    border-radius: var(--rounded-article-sm);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:768px) {
  /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

  #cx-mod-profile-spotify-playlist iframe {
    border-radius: var(--rounded-article-md);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:960px) {
  /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  #cx-mod-profile-spotify-playlist iframe {
    border-radius: var(--rounded-article-lg);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1440px) {
  /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  #cx-mod-profile-spotify-playlist iframe {
    border-radius: var(--rounded-article-xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

@media (min-width:1600px) {
  /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

  /* ... */

  #cx-mod-profile-spotify-playlist iframe {
    border-radius: var(--rounded-article-2xl);
  }

  /* ---------------------------- */

  /* ANCHOR Adaptive Text			*/

  /* ---------------------------- */
}

#cx-mod-profile-spotify-playlist iframe {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#cx-profile-c1 {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
}

#cx-profile-banner .centerframe-grid {
  align-items: center;
}

@media (min-width: 960px) {
  @media not all and (min-width: 1440px) {
    #cx-profile-banner-main.block-xl {
      grid-column: span 9 / span 9;
    }

    #cx-profile-banner-actions.block-md {
      grid-column: span 3 / span 3;
    }
  }
}

#cx-profile-banner-main > .stack-row {
  gap: var(--spacing-gutter-base);
}

#cx-profile-banner-avatar {
  align-content: center;
  text-align: center;
}

.cx-profile-avatar:has(i) {
  position: relative;
}

.cx-profile-avatar i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: 0;
  font-size: var(--text-i2-size);
  line-height: var(--text-i2-lh);
  height: var(--text-i2-size);
  width: var(--text-i2-size);
}

.cx-profile-avatar {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
}

.cx-profile-avatar img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

 a.cx-profile-avatar:hover img {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  /* CXNOTE CX Specific */
}

.cx-profile-avatar {
  height: var(--element-c-lg);
  width: var(--element-c-lg);
  border-radius: 9999px;
}

.cx-profile-avatar img {
  border-radius: 9999px;
}

.cx-profile-avatar {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
  --tw-shadow: var(--shadow-base);
  --tw-shadow-colored: var(--shadow-base);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 640px) {
  .cx-profile-avatar:has(i) {
    position: relative;
  }

  .cx-profile-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: 0;
    font-size: var(--text-i1-size);
    line-height: var(--text-i1-lh);
    height: var(--text-i1-size);
    width: var(--text-i1-size);
  }

  .cx-profile-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-profile-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-profile-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-profile-avatar {
    height: var(--element-c-xl);
    width: var(--element-c-xl);
    border-radius: 9999px;
  }

  .cx-profile-avatar img {
    border-radius: 9999px;
  }

  .cx-profile-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }
}

#cx-profile-banner-info {
  width: 100%;
  gap: var(--gap-stack-base);
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

@media (min-width: 960px) {
  #cx-profile-banner-info.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  #cx-profile-banner-info.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  #cx-profile-banner-info {
    text-align: left;
  }
}

#cx-profile-banner-info .cx-stack-link-icons {
  justify-content: center;
  gap: var(--spacing-sub-base);
}

@media (min-width: 960px) {
  #cx-profile-banner-info .cx-stack-link-icons {
    justify-content: flex-start;
  }
}

@media (min-width: 1440px) {
  @media not all and (min-width: 1600px) {
    #cx-profile-banner-info .cx-stack-link-icons {
      gap: var(--gap-element-base);
    }
  }
}

@media (min-width: 1600px) {
  #cx-profile-banner-info .cx-stack-link-icons {
    gap: var(--gap-element-2xl);
  }
}

.cx-centerframe-split {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 640px) {
  .cx-centerframe-split {
    flex-direction: row;
    padding-right: 0px;
  }
}

.cx-centerframe-split-left {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .cx-centerframe-split-left {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
}

.cx-centerframe-split-left > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
}

.cx-centerframe-split-right {
  width: 100%;
}

.cx-centerframe-split-right div img {
  height: calc(3 * var(--layout-row-height-base) + 2 * var(--spacing-gutter-base));
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

@media (min-width: 640px) {
  .cx-centerframe-split-right div img {
    aspect-ratio: 1.1618 / 1;
    height: 100%;
    border-top-left-radius: var(--rounded-article-2xl);
    border-bottom-left-radius: var(--rounded-article-2xl);
  }
}

.cx-centerframe-split-lg {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 960px) {
  .cx-centerframe-split-lg {
    flex-direction: row;
    padding-right: 0px;
  }
}

.cx-centerframe-split-left-lg {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 960px) {
  .cx-centerframe-split-left-lg {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
}

.cx-centerframe-split-left-lg > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
}

.cx-centerframe-split-right-lg {
  width: 100%;
}

.cx-centerframe-split-right-lg div img {
  height: calc(3 * var(--layout-row-height-base) + 2 * var(--spacing-gutter-base));
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

@media (min-width: 960px) {
  .cx-centerframe-split-right-lg div img {
    aspect-ratio: 1.1618 / 1;
    height: 100%;
    border-top-left-radius: var(--rounded-article-2xl);
    border-bottom-left-radius: var(--rounded-article-2xl);
  }
}

#cx-mod-profile-featured-links article {
  flex: 1 1 0%;
}

.cx-stack-create-account .form-input label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: nowrap;
}

.cx-stack-create-account {
  width: 100%;
}

.cx-stack-input-helper {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-sub-base);
}

.cx-stack-input-helper p.cx-helper {
  text-align: center;
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.cx-stack-auth-form {
  width: 100%;
}

.cx-stack-auth-form > hgroup > p {
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

.cx-stack-auth-form > form {
  width: 100%;
}

.cx-stack-auth-form > p {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
  font-style: italic;
}

.cx-stack-contact-form {
  width: 100%;
}

.cx-stack-contact-form .stack-row {
  width: 100%;
  flex-wrap: wrap;
  row-gap: var(--gap-stack-base);
}

@media (min-width: 640px) {
  .cx-stack-contact-form .stack-row {
    flex-wrap: nowrap;
  }
}

.cx-stack-contact-form .stack-row .form-input {
  width: 100%;
}

.cx-stack-contact-form > hgroup > p {
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

.cx-stack-contact-form > form {
  width: 100%;
}

.cx-stack-contact-form > p {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
  font-style: italic;
}

#cx-space-checkout-c1 .cx-centerframe-split-lg {
  align-items: flex-start;
}

@media (min-width: 960px) {
  #cx-space-checkout-c1 .cx-centerframe-split-right-lg {
    position: sticky;
    top: 0px;
  }
}

#cx-platform-create-start-c1 .button-primary-gradient {
  width: 100%;
}

.cx-stack-checkout-form {
  width: 100%;
}

.cx-stack-checkout-form p a i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cx-checkout-terms {
  width: 100%;
}

.cx-checkout-terms fieldset {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-sub-base);
}

.cx-checkout-form-promo {
  width: 100%;
}

.cx-checkout-terms .stack-button-info {
  margin-top: var(--layout-unit);
}

.cx-checkout-terms .stack-button-info > p {
  text-align: center;
}

.cx-checkout-terms .form-input-checkbox > div > p {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.cx-checkout-terms .stack-button-info > p > span {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-right: var(--spacing-sub-base);
}

@media (min-width: 960px) {
  .cx-checkout-product-hero {
    padding-left: calc(var(--spacing-gutter-base) / 2);
  }

  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .cx-checkout-product-hero {
      padding-left: calc(var(--spacing-gutter-sm) / 2);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .cx-checkout-product-hero {
      padding-left: calc(var(--spacing-gutter-md) / 2);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .cx-checkout-product-hero {
      padding-left: calc(var(--spacing-gutter-lg) / 2);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .cx-checkout-product-hero {
      padding-left: calc(var(--spacing-gutter-xl) / 2);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .cx-checkout-product-hero {
      padding-left: calc(var(--spacing-gutter-2xl) / 2);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
}

@media (min-width: 640px) {
  .cx-checkout-product-hero img {
    max-height: var(--element-max-h-base);
  }

  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .cx-checkout-product-hero img {
      max-height: var(--element-max-h-sm);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .cx-checkout-product-hero img {
      max-height: var(--element-max-h-md);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .cx-checkout-product-hero img {
      max-height: var(--element-max-h-lg);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .cx-checkout-product-hero img {
      max-height: var(--element-max-h-xl);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .cx-checkout-product-hero img {
      max-height: var(--element-max-h-2xl);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
}

.cx-checkout-total {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  row-gap: var(--layout-unit);
}

.cx-checkout-total-upfront {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

.cx-checkout-total-upfront h2 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.cx-checkout-total-upfront p {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.cx-checkout-total-renewal p {
  font-style: italic;
}

.cx-profile-username {
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

.cx-stack-checkout-product-info {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: var(--spacing-sub-base);
}

.cx-stack-checkout-product-info > div.stack-row p:first-child {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  width: 45%;
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

@media (min-width: 640px) {
  .cx-stack-checkout-product-info > div.stack-row p:first-child {
    width: 33.333333%;
  }
}

.button-dropdown-gradient-alt.secondary.cx-stack-checkout-product-info > div.stack-row p:last-child span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary.cx-stack-checkout-product-info > div.stack-row p:last-child > span > p {
  text-align: left;
  width: 100%;
}

.cx-stack-checkout-product-info > div.stack-row p:last-child {
  text-align: left;
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
}

.cx-stack-profile-displayname-pronouns {
  align-items: baseline;
  justify-content: center;
}

@media (min-width: 960px) {
  .cx-stack-profile-displayname-pronouns {
    justify-content: flex-start;
  }
}

.cx-stack-profile-displayname-pronouns > h1 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-invert) / var(--tw-text-opacity));
}

.cx-stack-profile-displayname-pronouns > p {
  font-size: var(--text-p2-size);
  line-height: var(--text-p2-lh);
  font-style: italic;
}

.cx-stack-element-preview-form-input div {
  width: 100%;
}

.cx-stack-element-preview {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.cx-element-preview-label {
  display: flex;
  flex-direction: row;
}

.cx-profile-bio {
  font-style: italic;
}

.cx-banner-card {
  background-size: cover;
  background-position: center;
  padding: 0px;
}

.cx-banner-card-shader {
  background-color: rgb(var(--color-primary) / var(--shader-light));
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.cx-banner-card .cx-banner-card-shader > .formrow {
  row-gap: var(--spacing-card-base);
}

.cx-stack-profile-stats {
  justify-content: center;
}

@media (min-width: 960px) {
  .cx-stack-profile-stats {
    justify-content: flex-start;
  }
}

.cx-stack-profile-stats-item > :first-child {
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

.cx-post-form .form-textarea {
  border-radius: var(--rounded-field);
  border-width: 0px;
  padding: var(--spacing-sub-base);
}

.cx-post-form .form-textarea textarea {
  width: 100%;
  border-width: 0px;
  padding: 0px;
}

.cx-post-form .form-textarea label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

div.cx-stack-comment-hearts.stack-row {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  align-items: center;
  -moz-column-gap: var(--spacing-sub-base);
       column-gap: var(--spacing-sub-base);
}

@media (min-width: 1600px) {
  div.cx-stack-comment-hearts.stack-row {
    gap: var(--gap-element-2xl);
  }
}

#cx-space-product-item-c2.theme-transparent {
  box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light)),
					inset 0 -4px 4px -4px rgba(0, 0, 0, var(--shadow-alpha-light));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-invert) / var(--tw-bg-opacity));
}

#cx-space-product-item-c2 .datarow a i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

#cx-space-product-item-c2 .datarow {
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  #cx-space-product-item-c2 .datarow {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  #cx-space-product-item-c2 .datarow.title {
    align-items: baseline;
  }
}

#cx-space-product-item-c2 .datarow.title h3 {
  width: 100%;
}

.button-dropdown-gradient-alt.secondary#cx-space-product-item-c2 .datarow.title p span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary#cx-space-product-item-c2 .datarow.title p > span > p {
  text-align: left;
  width: 100%;
}

#cx-space-product-item-c2 .datarow.title p {
  text-align: left;
  font-style: italic;
}

@media (min-width: 640px) {
  #cx-space-product-item-c2 .datarow.title p {
    text-align: right;
  }
}

#cx-space-product-item-c2 .datarow > :first-child {
  width: 100%;
}

@media (min-width: 640px) {
  #cx-space-product-item-c2 .datarow > :first-child {
    width: 40%;
  }
}

#cx-space-product-item-c2 .datarow > p:first-child {
  font-weight: 700;
}

#cx-space-product-item-c2 .datarow > :last-child {
  width: 100%;
}

#cx-product-benefits, #cx-product-traits,
#cx-product-technicals {
  width: 100%;
}

#cx-product-technicals .datarow.title {
  width: 100%;
  flex-basis: 100%;
}

.button-dropdown-gradient-alt.secondary#cx-product-technicals .datarow.title > p span > i:first-child {
  display: none;
}

.button-dropdown-gradient-alt.secondary#cx-product-technicals .datarow.title > p > span > p {
  text-align: left;
  width: 100%;
}

#cx-product-technicals .datarow.title > p {
  text-align: left;
}

@media (min-width: 640px) {
  #cx-product-technicals .datarow.title > p {
    text-align: right;
  }
}

#cx-product-technicals .datarow {
  flex-basis: 100%;
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  #cx-product-technicals .datarow {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(50% - var(--spacing-gutter-base));
    flex-wrap: nowrap;
  }
}

#cx-product-technicals .datarow :first-child {
  width: 100%;
}

.cx-post-data {
  width: 100%;
}

.cx-post-data .datarow.title {
  width: 100%;
  flex-basis: 100%;
  align-items: center;
}

@media (min-width: 640px) {
  .cx-post-data .datarow.title {
    flex-grow: 1;
  }
}

@media (min-width: 768px) {
  .cx-post-data .datarow.title {
    flex-basis: calc(33.333333% - var(--spacing-gutter-base));
  }
}

.cx-post-data .datarow {
  flex-basis: 100%;
}

@media (min-width: 640px) {
  .cx-post-data .datarow {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: calc(33.333333% - var(--spacing-gutter-base));
  }
}

.cx-stack-controlrows > .formrow.cx-benefit-data > p:nth-child(2) {
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.cx-stack-controlrows > .formrow.cx-benefit-data > p:nth-child(2) > span {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-controlrows > .formrow.cx-benefit-data > .controlrow:last-child {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow.cx-benefit-data > .controlrow:last-child {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-stack-controlrows > .formrow.cx-benefit-data > .controlrow:last-child > a {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-stack-controlrows > .formrow.cx-benefit-data > .controlrow:last-child > a {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-post-data .controlrow {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-post-data .controlrow {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-post-data .controlrow {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-post-data .controlrow {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-post-data .controlrow .button {
  width: 100%;
}

@media (min-width: 640px) {
  .cx-post-data .controlrow .button {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-product-pricing-details p.cx-product-renewal-summary-cost {
  font-style: italic;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.cx-product-pricing-details > div > h4 > i {
  min-width: var(--element-base-size);
  text-align: center;
}

#cx-platform-create-start-c1 aside {
  display: none;
}

@media (min-width: 960px) {
  #cx-platform-create-start-c1 aside {
    display: block;
  }
}

/* ---------------------------- */

/* ANCHOR Product Page			*/

/* ---------------------------- */

#cx-product-cover-media {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#cx-product-cover-media img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

#cx-stack-product-actions a {
  width: 100%;
}

#cx-product-info {
  align-content: center;
}

.cx-product-info-listing {
  font-style: italic;
}

.cx-product-pricing-details > div {
  width: 100%;
}

.cx-product-pricing-details h2 span {
  font-size: var(--text-h6-size);
}

.cx-product-pricing-details h4 {
  line-height: var(--text-h2-lh);
}

.cx-product-pricing-details h4 i {
  padding-right: var(--spacing-sub-base);
}

.cx-product-pricing-details p {
  font-style: italic;
  line-height: var(--text-h2-lh);
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

/* ---------------------------- */

/* ANCHOR DATAROWS				*/

/* ---------------------------- */

.cx-stack-follows {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-stack-base);
}

@media (min-width: 640px) {
  .cx-stack-follows {
    flex-direction: column;
  }
}

.cx-datarow-follow {
  flex-basis: calc(50% - var(--spacing-gutter-base));
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .cx-datarow-follow {
    width: 100%;
    flex-wrap: nowrap;
  }
}

.cx-datarow-follow .igroup h4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.cx-datarow-follow > .datarow {
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .cx-datarow-follow > .datarow {
    flex-wrap: nowrap;
  }
}

.cx-datarow-search-result > .datarow,
.cx-datarow-leaderboard > .datarow {
  flex-wrap: wrap;
}

@media (min-width: 960px) {
  .cx-datarow-search-result > .datarow,
.cx-datarow-leaderboard > .datarow {
    flex-wrap: nowrap;
  }
}

.cx-datarow-search-result > .datarow > .data-item:first-child {
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 960px) {
  .cx-datarow-search-result > .datarow > .data-item:first-child {
    width: 33.333333%;
  }
}

.cx-datarow-search-result > .datarow > .data-item:last-child {
  width: 100%;
  justify-content: flex-start;
}

.cx-datarow-follow > .datarow > div,
.cx-datarow-leaderboard > .datarow > div {
  width: 100%;
  justify-content: center;
}

@media (min-width: 960px) {
  .cx-datarow-follow > .datarow > div,
.cx-datarow-leaderboard > .datarow > div {
    width: 33.333333%;
  }

  .cx-datarow-follow > .datarow > .data-item:first-child,
.cx-datarow-leaderboard > .datarow > .data-item:first-child {
    justify-content: flex-start;
  }

  .cx-datarow-follow > .datarow > .data-item:last-child,
.cx-datarow-leaderboard > .datarow > .data-item:last-child {
    justify-content: flex-end;
  }
}

.cx-datarow-search-result > .datarow > .data-item:last-child .button {
  width: 100%;
}

/* TODO Swap to data-item.* format */

.cx-datarow-search-result div,
.cx-datarow-follow div,
.cx-datarow-leaderboard div {
  align-items: center;
}

.cx-datarow-search-result .igroup,
.cx-datarow-follow .igroup,
.cx-datarow-leaderboard .igroup {
  gap: var(--spacing-sub-base);
}

.cx-mod-profile-community-attributes {
  row-gap: var(--gap-stack-base);
}

@media (min-width: 640px) {
  .cx-mod-profile-community-attributes {
    row-gap: var(--spacing-sub-base);
  }
}

.cx-datarow-stats hgroup h4,
.cx-datarow-stats hgroup p {
  text-align: center;
}

.cx-datarow-stats hgroup p {
  font-size: var(--text-p4-size);
  line-height: var(--text-p4-lh);
}

.cx-datarow-stats > hgroup {
  flex-basis: calc(50% - var(--spacing-gutter-base));
}

.cx-datarow-stats,
.cx-datarow-attribute {
  flex-wrap: wrap;
  row-gap: var(--layout-unit);
}

@media (min-width: 640px) {
  .cx-datarow-stats,
.cx-datarow-attribute {
    flex-wrap: nowrap;
  }
}

.cx-datarow-attribute h5 {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
}

.cx-datarow-attribute .data-item:first-child {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: calc(50% - var(--spacing-gutter-base));
}

.cx-datarow-attribute .data-item:last-child {
  width: 100%;
}

.cx-datarow-search-result .igroup i,
.cx-datarow-leaderboard i.fa-crown, 
.cx-datarow-leaderboard i.fa-caret-up {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cx-datarow-leaderboard i.fa-caret-down {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-post-form form div.form-textarea {
  padding: 0px;
  --tw-ring-color: transparent;
}

.cx-post-form-avatar:has(i) {
  position: relative;
}

.cx-post-form-avatar i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
  display: block;
  position: absolute;
  bottom: calc(var(--border-button) * -1);
  right: calc(var(--layout-unit) * -1);
  font-size: var(--text-i5-size);
  line-height: var(--text-i5-lh);
  height: var(--text-i5-size);
  width: var(--text-i5-size);
}

.cx-post-form-avatar {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
}

.cx-post-form-avatar img {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

 a.cx-post-form-avatar:hover img {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  /* CXNOTE CX Specific */
}

.cx-post-form-avatar {
  height: var(--element-base-size);
  width: var(--element-base-size);
  border-radius: 9999px;
}

.cx-post-form-avatar img {
  border-radius: 9999px;
}

.cx-post-form-avatar {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  padding: var(--border-button);
}

.cx-stack-user-nav-member a.cx-post-form-avatar, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar,
#cx-space-footer-mobile-nav a.cx-post-form-avatar, 
.cx-stack-user-nav-member a.cx-post-form-avatar:active, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:active, 
#cx-space-footer-mobile-nav a.cx-post-form-avatar:active, 
.cx-stack-user-nav-member a.cx-post-form-avatar:visited, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:visited,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:visited {
  background-image: none;
  background-clip: border-box;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: none;
}

.cx-stack-user-nav-member a.cx-post-form-avatar:hover, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:hover,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:hover {
  transition-property: none;
}

@media (min-width: 640px) {
  .cx-stack-user-nav-member a.cx-post-form-avatar:hover, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:hover,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:hover {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    background-clip: border-box;
    --tw-shadow: var(--shadow-light);
    --tw-shadow-colored: var(--shadow-light);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.cx-stack-user-nav-member a.cx-post-form-avatar:hover, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:hover,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:hover {
  transition-property: none;
}

@media (min-width: 640px) {
  .cx-stack-user-nav-member a.cx-post-form-avatar:hover, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:hover,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:hover {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    background-clip: border-box;
    --tw-shadow: var(--shadow-light);
    --tw-shadow-colored: var(--shadow-light);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.cx-stack-user-nav-member a.cx-post-form-avatar:hover, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:hover,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:hover {
  transition-property: none;
}

@media (min-width: 640px) {
  .cx-stack-user-nav-member a.cx-post-form-avatar:hover, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar:hover,
#cx-space-footer-mobile-nav a.cx-post-form-avatar:hover {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    background-clip: border-box;
    --tw-shadow: var(--shadow-light);
    --tw-shadow-colored: var(--shadow-light);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

.cx-stack-user-nav-member a:hover.cx-post-form-avatar, 
#cx-platform-footer-mobile-nav a:hover.cx-post-form-avatar, 
#cx-space-footer-mobile-nav a:hover.cx-post-form-avatar,
.cx-stack-user-nav-member a.cx-post-form-avatar.active, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar.active, 
#cx-space-footer-mobile-nav a.cx-post-form-avatar.active {
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  background-clip: border-box;
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: none;
}

.cx-stack-user-nav-member a.cx-post-form-avatar img, 
#cx-platform-footer-mobile-nav a.cx-post-form-avatar img,
#cx-space-footer-mobile-nav a.cx-post-form-avatar img {
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cx-stack-user-nav-member a.cx-post-form-avatar:hover img,
#cx-platform-footer-mobile-nav a.cx-post-form-avatar img, 
#cx-space-footer-mobile-nav a.cx-post-form-avatar img {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cx-stack-post-comment-form .cx-post-form-avatar {
  display: none;
}

@media (min-width: 640px) {
  .cx-stack-post-comment-form .cx-post-form-avatar {
    display: block;
  }

  .cx-post-form-avatar:has(i) {
    position: relative;
  }

  .cx-post-form-avatar i {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Set this to text-key or gradient-text-key to apply your chosen key color type (solid vs gradient). */
    display: block;
    position: absolute;
    bottom: calc(var(--border-button) * -1);
    right: calc(var(--layout-unit) * -1);
    font-size: var(--text-i3-size);
    line-height: var(--text-i3-lh);
    height: var(--text-i3-size);
    width: var(--text-i3-size);
  }

  .cx-post-form-avatar {
    position: relative;
    display: inline-block;
    aspect-ratio: 1 / 1;
  }

  .cx-post-form-avatar img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

   a.cx-post-form-avatar:hover img {
    --tw-brightness: brightness(1.1);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    /* CXNOTE CX Specific */
  }

  .cx-post-form-avatar {
    height: var(--element-c-md);
    width: var(--element-c-md);
    border-radius: 9999px;
  }

  .cx-post-form-avatar img {
    border-radius: 9999px;
  }

  .cx-post-form-avatar {
    /* Do not edit */
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
    padding: var(--border-button);
  }
}

.cx-hero-content {
  grid-column: 1 / -1;
  display: flex;
}

/* ---------------------------- */

/* ANCHOR Icon Related			*/

/* ---------------------------- */

/* Hollow-fill icons: the ::after paints a disc in --color-background to mask
   the icon's transparent center. The parent <i> must be position:relative so
   the absolutely-positioned ::after stays contained — without it, it escapes
   to the nearest positioned ancestor and renders as a giant background-colored
   circle. */

i.fa-circle-xmark,
i.fa-badge-check {
  position: relative;
}

i.fa-badge-check::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 15%;
  bottom: 15%;
  left: 15%;
  background: rgb(var(--color-background));
  z-index: -1;
  border-radius: 100%;
}

i.fa-circle-xmark::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

i.fa-circle-xmark::after {
  content: '';
  position: absolute;
  top: 15%;
  right: 15%;
  bottom: 15%;
  left: 15%;
  background: rgb(var(--color-background));
  z-index: 0;
  border-radius: 100%;
}

p i.fa-regular {
  line-height: inherit;
}

/* ---------------------------- */

/* ANCHOR Pagination			*/

/* ---------------------------- */

.cx-pagination {
  justify-content: center;
  justify-self: center;
  text-align: center;
}

/* ---------------------------- */

/* ANCHOR Mobile & Adaptive		*/

/* ---------------------------- */

/* Reusable Mobile Modifiers	*/

/* For use across multiple instances and elements. */

/* ICON LINK SET - ADAPTIVE ALIGNMENT */

.cx-stack-link-icons {
  justify-content: center;
}

@media (min-width: 960px) {
  .cx-stack-link-icons {
    justify-content: flex-start;
  }
}

/* VIEW ALL MOBILE LINK */

.cx-mobile-link-viewall {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--text-p1-size);
  line-height: var(--text-p1-lh);
}

@media (min-width: 640px) {
  .cx-mobile-link-viewall {
    display: none;
  }
}

/* FOOTER TEXT - ADAPTIVE ALIGNMENT */

.cx-footer-brand-text {
  text-align: center;
}

@media (min-width: 960px) {
  .cx-footer-brand-text.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .cx-footer-brand-text.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .cx-footer-brand-text {
    text-align: left;
  }
}

@keyframes fade-half {
  0%, 100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

#page-content-loading-overlay div.modal-block {
  animation: fade-half 3s linear infinite;
  padding: var(--pad-article-base);
  text-align: center;
}

#page-content-loading-overlay i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

#page-content-loading-overlay i {
  animation: spin 5s linear infinite;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
}

/* ---------------------------- */

/* ANCHOR Draggables			*/

/* ---------------------------- */

div.cx-stack-form-drag-cards {
  display: flex;
  width: 100%;
  flex-direction: column;
}

div.cx-stack-form-drag-links {
  display: flex;
  width: 100%;
  flex-direction: column;
  row-gap: var(--spacing-card-base);
}

.cx-form-drag-link {
  position: relative;
  border-radius: var(--rounded-corner);
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary) / var(--tw-text-opacity));
  --tw-shadow: var(--shadow-light);
  --tw-shadow-colored: var(--shadow-light);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cx-form-drag-link::before {
  transition-property: var(--transition-property-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: var(--transition-duration-base);
  transition-timing-function: var(--transition-timing-base);
  /* Set this to transition-set to apply the transition settings defined by your Variables or change/add your chosen properties by applying Tailwind classes for all theme and non-theme states. */
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border-radius: var(--rounded-corner);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  content: '';
  z-index: 0;
}

.cx-form-drag-link.active,
.cx-form-drag-link:hover {
  padding: var(--border-button);
}

.cx-form-drag-card {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.cx-form-drag-card .cx-controls-draggable p {
  display: flex;
  height: var(--element-base-size);
  cursor: grab;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-form-drag-card .cx-controls-draggable p:hover {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cx-form-drag-card.active .cx-controls-draggable p {
  cursor: grabbing;
}

.cx-form-drag-card > .cx-stack-controlrows {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .cx-form-drag-card > .cx-stack-controlrows {
    flex-wrap: nowrap;
  }
}

.cx-form-drag-card .cx-form-drag-card-title {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  -moz-column-gap: var(--spacing-gutter-base);
       column-gap: var(--spacing-gutter-base);
}

@media (min-width: 640px) {
  .cx-form-drag-card .cx-form-drag-card-title {
    flex-direction: row;
  }
}

.cx-form-drag-card .cx-benefit-card-title,
.cx-form-drag-card .cx-access-card-title,
.cx-form-drag-card .cx-question-card-title,
.cx-form-drag-card .cx-channel-card-title {
  width: 100%;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .cx-form-drag-card .cx-benefit-card-title,
.cx-form-drag-card .cx-access-card-title,
.cx-form-drag-card .cx-question-card-title,
.cx-form-drag-card .cx-channel-card-title {
    justify-content: flex-start;
  }
}

.cx-form-drag-card .cx-benefit-card-title p,
.cx-form-drag-card .cx-access-card-title p,
.cx-form-drag-card .cx-question-card-title p,
.cx-form-drag-card .cx-channel-card-title p {
  line-height: var(--text-h4-lh);
}

@media (min-width: 640px) {
  .cx-form-drag-card .cx-benefit-card-title p,
.cx-form-drag-card .cx-access-card-title p,
.cx-form-drag-card .cx-question-card-title p,
.cx-form-drag-card .cx-channel-card-title p {
    display: none;
  }
}

@media (min-width: 960px) {
  .cx-form-drag-card .cx-benefit-card-title p,
.cx-form-drag-card .cx-access-card-title p,
.cx-form-drag-card .cx-question-card-title p,
.cx-form-drag-card .cx-channel-card-title p {
    display: block;
  }
}

.cx-stack-data-attributes {
  display: flex;
  width: var(--element-c-3xl);
  flex-direction: row;
}

.cx-stack-data-attributes p {
  text-align: center;
}

.cx-stack-icons-attributes {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: row;
  -moz-column-gap: var(--gap-form-2xl);
       column-gap: var(--gap-form-2xl);
}

.cx-form-drag-card .cx-stack-icons-attributes p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary) / var(--tw-text-opacity));
}

.cx-stack-icons-attributes p {
  width: var(--element-min-size);
  text-align: center;
}

.cx-form-drag-card .cx-access-card-controls,
.cx-form-drag-card .cx-question-card-controls,
.cx-form-drag-card .cx-channel-card-controls {
  width: -moz-fit-content;
  width: fit-content;
  justify-content: flex-end;
}

@media (min-width: 640px) {
  .cx-form-drag-card .cx-access-card-controls,
.cx-form-drag-card .cx-question-card-controls,
.cx-form-drag-card .cx-channel-card-controls {
    width: 100%;
  }
}

.cx-stack-form-drag-link {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-form-sm);
  border-radius: calc(var(--rounded-corner) - var(--border-button));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-key-gradient-invert) / var(--tw-bg-opacity));
  --tw-bg-opacity: var(--color-key-gradient-invert-opacity);
  padding: 17px;
}

@media (min-width: 640px) {
  .cx-stack-form-drag-link {
    flex-wrap: nowrap;
  }
}

.cx-form-drag-link.active .cx-stack-form-drag-link,
.cx-form-drag-link:hover .cx-stack-form-drag-link {
  padding: var(--spacing-card-base);
}

.cx-form-drag-link:hover .cx-stack-form-drag-link {
  cursor: grab;
}

.cx-form-drag-link.active .cx-stack-form-drag-link {
  cursor: grabbing;
}

.cx-form-drag-link .form-input input,
.cx-form-drag-link button.form-input-dropdown span p {
  font-size: var(--text-p3-size);
}

.cx-form-drag-link i {
  /* Do not edit */
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(var(--color-key) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--color-key) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(var(--color-key-end) / 1) var(--tw-gradient-to-position);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.cx-stack-form-drag-link > div,
.cx-stack-form-drag-link > div > .form-input-dropdown {
  width: 100%;
}

.cx-form-drag-card div.cx-controls-draggable,
.cx-form-drag-link div.cx-controls-draggable {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .cx-form-drag-card div.cx-controls-draggable,
.cx-form-drag-link div.cx-controls-draggable {
    width: -moz-fit-content;
    width: fit-content;
  }
}

.cx-controls-draggable-buttons {
  display: flex;
  flex-direction: row;
}

@media (min-width: 640px) {
  .cx-controls-draggable-buttons {
    display: none;
  }
}

.cx-controls-draggable-buttons > button {
  width: calc(var(--element-min-size) + var(--layout-unit) + var(--layout-unit));
  text-align: center;
}

.cx-stack-form-question-edit.hide,
.cx-stack-form-channel-edit.hide {
  display: none;
}

/* --------------------------------------- */

/* CXNOTE ANT FORM OVERRIDES			   */

/* --------------------------------------- */

/* NOTE REQUIRED IF ANT FORM IS USED	   */

/* --------------------------------------- */

.ant-form-item-explain {
  display: none;
}

/* --------------------------------------- */

/* CXNOTE DEMO STATE TOGGLES			   */

/* --------------------------------------- */

/* NOTE NOT FOR PRODUCTION - DEMO USE ONLY */

/* --------------------------------------- */

& BODY.demo-auth-member {
  .cx-stack-user-nav-public, 
	.cx-stack-user-nav-public-menu-toggle,  
	#header-nav-menu > NAV > :nth-last-child(2), 
	#header-nav-menu > NAV > :last-child,
	#cx-platform-footer-mobile-auth,
	#cx-platform-footer-mobile-nav > nav > :nth-child(6),
	#cx-space-footer-mobile-auth,
	#cx-space-footer-mobile-nav > nav > :nth-child(6) {
    display: none !important;
  }
}

& BODY.demo-auth-public {
  .cx-stack-user-nav-member,
	#cx-platform-footer-mobile-nav > nav > :nth-child(2),
	#cx-platform-footer-mobile-nav > nav > :nth-child(3),
	#cx-platform-footer-mobile-nav > nav > :nth-child(4),
	#cx-space-footer-mobile-nav > nav > :nth-child(2),
	#cx-space-footer-mobile-nav > nav > :nth-child(3),
	#cx-space-footer-mobile-nav > nav > :nth-child(4) {
    display: none !important;
  }
}

/* -------------------------------------------- */

/* !SECTION Utilities	 						*/

/* -------------------------------------------- */

/* ------------------------------------------------	*/

/* SECTION Theming Special Variable Applications	*/

/* ------------------------------------------------ */

/* CXJS Theming Backgrounds and Banners Image Variables applied here. */

MAIN.theme-bg-image,
SECTION.theme-bg-image {
  background-size: cover;
  background-position: var(--cx-theme-bg-image-position);
  background-repeat: no-repeat;
  background-image: var(--cx-theme-bg-image);
}

MAIN.theme-alt-bg-image,
SECTION.theme-alt-bg-image {
  background-size: cover;
  background-position: var(--cx-theme-alt-bg-image-position);
  background-repeat: no-repeat;
  background-image: var(--cx-theme-alt-bg-image);
}

#cx-space-banner-hero {
  background-size: cover;
  background-position: var(--cx-space-banner-hero-bg-image-position);
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-hero-bg-image);
}

#cx-space-banner-updates {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-updates-image);
}

#cx-space-banner-benefits {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-benefits-image);
}

#cx-space-banner-members {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-members-image);
}

#cx-space-banner-access {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-access-image);
}

#cx-space-banner-channels {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-channels-image);
}

#cx-space-banner-info {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--cx-space-banner-info-image);
}

#cx-space-banner-hero {
  position: relative;
}

#cx-space-banner-hero .cx-hero-frame {
  height: 100%;
  justify-items: var(--cx-space-banner-hero-fg-content-justify);
  align-items: var(--cx-space-banner-hero-fg-content-align);
  position: relative;
  z-index: 1;
}

#cx-hero-bg-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--cx-space-banner-hero-bg-video-position);
     object-position: var(--cx-space-banner-hero-bg-video-position);
}

.df-main {
  position: relative;
}

.df-main > SECTION {
  position: relative;
}

.df-main > SECTION > #cx-theme-bg-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--cx-theme-bg-video-position);
     object-position: var(--cx-theme-bg-video-position);
}

.df-main > SECTION > #cx-theme-alt-bg-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--cx-theme-alt-bg-video-position);
     object-position: var(--cx-theme-alt-bg-video-position);
}

.df-main > SECTION > .centerframe-grid {
  position: relative;
  z-index: 1;
}

.df-main > SECTION.theme-transparent > #cx-theme-bg-video,
.df-main > SECTION.theme-transparent > #cx-theme-alt-bg-video,
.df-main > SECTION.theme-alt-transparent  > #cx-theme-bg-video,
.df-main > SECTION.theme-alt-transparent  > #cx-theme-alt-bg-video {
  display: none;
}

/* ------------------------------------------------	*/

/* !SECTION Theming Special Variable Applications	*/

/* ------------------------------------------------ */

/* --------------------------------------------------------------------	*/

/* !SECTION Commonspace Custom Classes 									*/

/* --------------------------------------------------------------------	*/

/* -------------------------------- */

/* !LAYER global end 				*/

/* -------------------------------------------------------------------------------------------- */

/* !SECTION CONFIG Custom CSS Classes 															*/

/* -------------------------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .sm\:text-left.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .sm\:text-left.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .sm\:pb-section-safeview {
    padding-bottom: max(var(--pad-section-base), env(safe-area-inset-bottom));
  }

  .sm\:px-section-safeview {
    padding-left: max(var(--spacing-shoulder-base), env(safe-area-inset-left));
    padding-right: max(var(--spacing-shoulder-base), env(safe-area-inset-right));
  }

  .sm\:pt-section {
    padding-top: var(--pad-section-base);
  }

  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .sm\:pb-section-safeview {
      padding-bottom: max(var(--pad-section-sm), env(safe-area-inset-bottom));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .sm\:px-section-safeview {
      padding-left: max(var(--spacing-shoulder-sm), env(safe-area-inset-left));
      padding-right: max(var(--spacing-shoulder-sm), env(safe-area-inset-right));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .sm\:pt-section {
      padding-top: var(--pad-section-sm);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .sm\:pb-section-safeview {
      padding-bottom: max(var(--pad-section-md), env(safe-area-inset-bottom));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .sm\:px-section-safeview {
      padding-left: max(var(--spacing-shoulder-md), env(safe-area-inset-left));
      padding-right: max(var(--spacing-shoulder-md), env(safe-area-inset-right));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .sm\:pt-section {
      padding-top: var(--pad-section-md);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:pb-section-safeview {
      padding-bottom: max(var(--pad-section-lg), env(safe-area-inset-bottom));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:px-section-safeview {
      padding-left: max(var(--spacing-shoulder-lg), env(safe-area-inset-left));
      padding-right: max(var(--spacing-shoulder-lg), env(safe-area-inset-right));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:pt-section {
      padding-top: var(--pad-section-lg);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:pb-section-safeview {
      padding-bottom: max(var(--pad-section-xl), env(safe-area-inset-bottom));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:px-section-safeview {
      padding-left: max(var(--spacing-shoulder-xl), env(safe-area-inset-left));
      padding-right: max(var(--spacing-shoulder-xl), env(safe-area-inset-right));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:pt-section {
      padding-top: var(--pad-section-xl);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:pb-section-safeview {
      padding-bottom: max(var(--pad-section-2xl), env(safe-area-inset-bottom));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:px-section-safeview {
      padding-left: max(var(--spacing-shoulder-2xl), env(safe-area-inset-left));
      padding-right: max(var(--spacing-shoulder-2xl), env(safe-area-inset-right));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .sm\:pt-section {
      padding-top: var(--pad-section-2xl);
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
}

@media (min-width: 960px) {
  .lg\:text-left.button-dropdown-gradient-alt.secondary span > i:first-child {
    display: none;
  }

  .lg\:text-left.button-dropdown-gradient-alt.secondary > span > p {
    text-align: left;
    width: 100%;
  }

  .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
    grid-column: span var(--layout-cols-base) / span var(--layout-cols-base);
  }

  .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 100%;
  }

  .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-block-base) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-block-base) * var(--tw-space-y-reverse));
  }

  .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
  }

  .lg\:block-md.card-base > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-card-base) * var(--tw-space-y-reverse));
  }

  .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(var(--spacing-card-base) * var(--tw-space-x-reverse));
    margin-left: calc(var(--spacing-card-base) * calc(1 - var(--tw-space-x-reverse)));
  }

  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-sm) / span var(--layout-cols-sm);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-sm) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-sm) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-sm) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-md) / span var(--layout-cols-md);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 100%;
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-md) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-md) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-md) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-lg));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-lg) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-lg) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-lg) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-xl-third) / span var(--layout-cols-xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }

  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    .section-grid .lg\:block-md, .centerframe-grid .lg\:block-md, .grid-base .lg\:block-md, main.main-grid .lg\:block-md {
      grid-column: span var(--layout-cols-2xl-third) / span var(--layout-cols-2xl-third);
    }

    .section-flex .lg\:block-md, .centerframe-flex .lg\:block-md, .flex-base .lg\:block-md, main.main-flex .lg\:block-md {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: calc(33.333333% - var(--spacing-gutter-2xl));
    }

    .lg\:block-md > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-block-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-block-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.card > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-y > :not([hidden]) ~ :not([hidden]) {
      --tw-space-y-reverse: 0;
      margin-top: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-y-reverse)));
      margin-bottom: calc(var(--spacing-card-2xl) * var(--tw-space-y-reverse));
    }

    .lg\:block-md.stack-x > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(var(--spacing-card-2xl) * var(--tw-space-x-reverse));
      margin-left: calc(var(--spacing-card-2xl) * calc(1 - var(--tw-space-x-reverse)));
    }

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */
  }
}

@media (min-width: 1440px) {
  .xl\:text-i1 {
    font-size: var(--text-i1a-size) !important;
    line-height: var(--text-i1a-lh) !important;
  }

  @media (min-width:640px) {
    /* NOTE SCREEN SM CONFIG: You must manually set the min-width: here to match your --screen-sm value if you changed it from the preset Designframe Preferred Value. */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    .xl\:text-i1 {
      font-size: var(--text-i1a-size) !important;
      line-height: var(--text-i1a-lh) !important;
    }
  }

  @media (min-width:768px) {
    /* NOTE SCREEN MD CONFIG: You must manually set the min-width: here to match your --screen-md value if you changed it from the preset Designframe Preferred Value. */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    .xl\:text-i1 {
      font-size: var(--text-i1a-size) !important;
      line-height: var(--text-i1a-lh) !important;
    }
  }

  @media (min-width:960px) {
    /* NOTE SCREEN LG CONFIG: You must manually set the min-width: here to match your --screen-lg value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    .xl\:text-i1 {
      font-size: var(--text-i1-size) !important;
      line-height: var(--text-i1-lh) !important;
    }
  }

  @media (min-width:1440px) {
    /* NOTE SCREEN XL CONFIG: You must manually set the min-width: here to match your --screen-xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    .xl\:text-i1 {
      font-size: var(--text-i1-size) !important;
      line-height: var(--text-i1-lh) !important;
    }
  }

  @media (min-width:1600px) {
    /* NOTE SCREEN 2XL CONFIG: You must manually set the min-width: here to match your --screen-2xl value if you changed it from the preset Designframe Preferred Value. */

    /* ... */

    /* ---------------------------- */

    /* ANCHOR Adaptive Text			*/

    /* ---------------------------- */

    .xl\:text-i1 {
      font-size: var(--text-i1-size) !important;
      line-height: var(--text-i1-lh) !important;
    }
  }
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:text-key:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-key) / var(--tw-text-opacity));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-key:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-key) / var(--tw-ring-opacity));
}

@media (min-width: 640px) {
  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-96 {
    height: 24rem;
  }

  .sm\:w-96 {
    width: 24rem;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:justify-items-start {
    justify-items: start;
  }

  .sm\:to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position);
  }

  .sm\:to-65\% {
    --tw-gradient-to-position: 65%;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pr-20 {
    padding-right: 5rem;
  }

  .sm\:text-left {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:text-p2 {
    font-size: var(--text-p2-size);
    line-height: var(--text-p2-lh);
  }
}

@media (min-width: 960px) {
  .lg\:order-none {
    order: 0;
  }

  .lg\:col-lg-md {
    grid-column: span var(--layout-cols-lg-third) / span var(--layout-cols-lg-third);
  }

  .lg\:col-lg-xl {
    grid-column: span var(--layout-cols-lg-twothird) / span var(--layout-cols-lg-twothird);
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-element-nav-max {
    height: var(--element-nav-max-height);
  }

  .lg\:max-h-none {
    max-height: none;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:basis-2\/7 {
    flex-basis: 28.5714286%;
  }

  .lg\:basis-lg-smx {
    flex-basis: calc(25% - var(--spacing-gutter-lg));
  }

  .lg\:grid-cols-lg {
    grid-template-columns: repeat(var(--layout-cols-lg), minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:p-section-xl {
    padding: var(--pad-section-xl);
  }

  .lg\:px-shoulder-lg {
    padding-left: var(--spacing-shoulder-lg);
    padding-right: var(--spacing-shoulder-lg);
  }

  .lg\:\!pt-section-base {
    padding-top: var(--pad-section-base) !important;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:hover\:text-key:hover {
    --tw-text-opacity: 1;
    color: rgb(var(--color-key) / var(--tw-text-opacity));
  }
}

@media (min-width: 1440px) {
  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:aspect-video {
    aspect-ratio: 16 / 9;
  }

  .xl\:w-1\/5 {
    width: 20%;
  }

  .xl\:justify-start {
    justify-content: flex-start;
  }

  .xl\:text-i1 {
    font-size: var(--text-i1-size);
    line-height: var(--text-i1-lh);
  }

  .xl\:text-p1 {
    font-size: var(--text-p1-size);
    line-height: var(--text-p1-lh);
  }
}