/* =========================
   MAIN APPLICATION STYLESHEET
   Optimized CSS architecture using semantic tokens + Tailwind utilities
========================= */

/* Tailwind Base Imports */

/* ! tailwindcss v3.4.10 | 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;
}

*, ::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:  ;
}

.container {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 480px) {

  .container {
    max-width: 480px;
  }
}

@media (min-width: 640px) {

  .container {
    max-width: 640px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
    padding-right: 0rem;
    padding-left: 0rem;
  }
}

@media (min-width: 1440px) {

  .container {
    max-width: 1440px;
  }
}

@media (min-width: 1920px) {

  .container {
    max-width: 1920px;
  }
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-lg {
  font-size: 1.125rem;
  line-height: 1.7777778;
}

.prose-lg :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.2222222em;
  line-height: 1.4545455;
  margin-top: 1.0909091em;
  margin-bottom: 1.0909091em;
}

.prose-lg :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  padding-inline-start: 1em;
}

.prose-lg :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 2.6666667em;
  margin-top: 0;
  margin-bottom: 0.8333333em;
  line-height: 1;
}

.prose-lg :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.6666667em;
  margin-top: 1.8666667em;
  margin-bottom: 1.0666667em;
  line-height: 1.3333333;
}

.prose-lg :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 1.3333333em;
  margin-top: 1.6666667em;
  margin-bottom: 0.6666667em;
  line-height: 1.5;
}

.prose-lg :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}

.prose-lg :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-lg :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  border-radius: 0.3125rem;
  padding-top: 0.2222222em;
  padding-inline-end: 0.4444444em;
  padding-bottom: 0.2222222em;
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
}

.prose-lg :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8666667em;
}

.prose-lg :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.875em;
}

.prose-lg :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.75;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 0.375rem;
  padding-top: 1em;
  padding-inline-end: 1.5em;
  padding-bottom: 1em;
  padding-inline-start: 1.5em;
}

.prose-lg :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  margin-bottom: 0.6666667em;
}

.prose-lg :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.4444444em;
}

.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(.prose-lg > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose-lg > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(.prose-lg > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(.prose-lg > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.3333333em;
}

.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}

.prose-lg :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
}

.prose-lg :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.3333333em;
}

.prose-lg :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.6666667em;
  padding-inline-start: 1.5555556em;
}

.prose-lg :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 3.1111111em;
  margin-bottom: 3.1111111em;
}

.prose-lg :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
}

.prose-lg :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-lg :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.75em;
  padding-inline-end: 0.75em;
  padding-bottom: 0.75em;
  padding-inline-start: 0.75em;
}

.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose-lg :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.7777778em;
  margin-bottom: 1.7777778em;
}

.prose-lg :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose-lg :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-size: 0.8888889em;
  line-height: 1.5;
  margin-top: 1em;
}

.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.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;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-top-2 {
  top: -0.5rem;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-\[-40px\] {
  left: -40px;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-8 {
  top: 2rem;
}

.top-\[20px\] {
  top: 20px;
}

.top-\[75\%\] {
  top: 75%;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.m-8 {
  margin: 2rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-\[30px\] {
  margin-top: 30px;
  margin-bottom: 30px;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.-ml-6 {
  margin-left: -1.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-\[30px\] {
  margin-bottom: 30px;
}

.mb-\[60px\] {
  margin-bottom: 60px;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-40 {
  margin-top: 10rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[30px\] {
  margin-top: 30px;
}

.mt-\[60px\] {
  margin-top: 60px;
}

.mt-\[75px\] {
  margin-top: 75px;
}

.mt-\[80px\] {
  margin-top: 80px;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.list-item {
  display: list-item;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-4 {
  height: 1rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-\[100vh\] {
  height: 100vh;
}

.h-\[12\.408px\] {
  height: 12.408px;
}

.h-\[1px\] {
  height: 1px;
}

.h-\[300px\] {
  height: 300px;
}

.h-\[83px\] {
  height: 83px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-0 {
  max-height: 0px;
}

.max-h-screen {
  max-height: 100vh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0px;
}

.w-10 {
  width: 2.5rem;
}

.w-100 {
  width: 25rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-8 {
  width: 2rem;
}

.w-\[250px\] {
  width: 250px;
}

.w-\[95\%\] {
  width: 95%;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[170px\] {
  min-width: 170px;
}

.min-w-\[80px\] {
  min-width: 80px;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-96 {
  max-width: 24rem;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-none {
  max-width: none;
}

.max-w-screen-lg {
  max-width: 1280px;
}

.max-w-screen-xl {
  max-width: 1440px;
}

.max-w-sm {
  max-width: 24rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}

.-translate-y-1\.5 {
  --tw-translate-y: -0.375rem;
  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));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}

.translate-y-1\.5 {
  --tw-translate-y: 0.375rem;
  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));
}

.-rotate-45 {
  --tw-rotate: -45deg;
  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));
}

.rotate-180 {
  --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));
}

.rotate-45 {
  --tw-rotate: 45deg;
  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));
}

.scale-100 {
  --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));
}

.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  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));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.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));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

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

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[1\.88rem\] {
  gap: 1.88rem;
}

.gap-\[30px\] {
  gap: 30px;
}

.gap-\[55px\] {
  gap: 55px;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

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

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-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-purple-700 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(126 34 206 / var(--tw-divide-opacity));
}

.overflow-hidden {
  overflow: hidden;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-nowrap {
  text-wrap: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-bl-full {
  border-bottom-left-radius: 9999px;
}

.rounded-br-none {
  border-bottom-right-radius: 0px;
}

.rounded-tl-full {
  border-top-left-radius: 9999px;
}

.rounded-tl-xl {
  border-top-left-radius: 0.75rem;
}

.rounded-tr-full {
  border-top-right-radius: 9999px;
}

.rounded-tr-xl {
  border-top-right-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-8 {
  border-bottom-width: 8px;
}

.border-l-8 {
  border-left-width: 8px;
}

.border-r {
  border-right-width: 1px;
}

.border-r-8 {
  border-right-width: 8px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-\[\#481A54\] {
  --tw-border-opacity: 1;
  border-color: rgb(72 26 84 / var(--tw-border-opacity));
}

.border-\[\#BA01FF\] {
  --tw-border-opacity: 1;
  border-color: rgb(186 1 255 / var(--tw-border-opacity));
}

.border-\[\#D9D9D9\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity));
}

.border-slack-violet-800 {
  --tw-border-opacity: 1;
  border-color: rgb(115 3 148 / var(--tw-border-opacity));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-b-white {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-l-transparent {
  border-left-color: transparent;
}

.border-r-transparent {
  border-right-color: transparent;
}

.bg-\[\#481A54\] {
  --tw-bg-opacity: 1;
  background-color: rgb(72 26 84 / var(--tw-bg-opacity));
}

.bg-\[\#D9D9D9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity));
}

.bg-\[\#FCC003\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 192 3 / var(--tw-bg-opacity));
}

.bg-\[var\(--main-bg\)\] {
  background-color: var(--main-bg);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-current {
  background-color: currentColor;
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-surface-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / 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-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-contain {
  background-size: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[25px\] {
  padding-left: 25px;
  padding-right: 25px;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[19px\] {
  padding-top: 19px;
  padding-bottom: 19px;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-7 {
  padding-left: 1.75rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-\[Poppins\] {
  font-family: Poppins;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.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-extrabold {
  font-weight: 800;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-8 {
  line-height: 2rem;
}

.leading-\[150\%\] {
  line-height: 150%;
}

.leading-\[15px\] {
  line-height: 15px;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.0375rem\] {
  letter-spacing: 0.0375rem;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-\[\#1264A3\] {
  --tw-text-opacity: 1;
  color: rgb(18 100 163 / var(--tw-text-opacity));
}

.text-\[\#242424\] {
  --tw-text-opacity: 1;
  color: rgb(36 36 36 / var(--tw-text-opacity));
}

.text-\[\#481A54\] {
  --tw-text-opacity: 1;
  color: rgb(72 26 84 / var(--tw-text-opacity));
}

.text-\[var\(--main-fg\)\] {
  color: var(--main-fg);
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

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

.text-slack-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(203 101 255 / var(--tw-text-opacity));
}

.text-slack-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(115 3 148 / var(--tw-text-opacity));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-white\/70::-moz-placeholder {
  color: rgb(255 255 255 / 0.7);
}

.placeholder-white\/70::placeholder {
  color: rgb(255 255 255 / 0.7);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.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-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.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);
}

.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);
}

.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-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.alignfull {
  margin: 2rem calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: 100vw;
}

.alignwide {
  margin: 2rem 0;
  max-width: 1440px !important;
}

.alignnone {
  margin-left: 0px;
  margin-right: 0px;
  height: auto;
  max-width: 100%;
}

.aligncenter {
  margin: 0.5rem auto;
  display: block;
}

@media (min-width: 640px) {

  .alignleft:not(.wp-block-button) {
    margin-right: 0.5rem;
    float: left;
  }

  .alignright:not(.wp-block-button) {
    margin-left: 0.5rem;
    float: right;
  }

  .wp-block-button.alignleft a {
    float: left;
    margin-right: 1rem;
  }

  .wp-block-button.alignright a {
    float: right;
    margin-left: 1rem;
  }
}

.wp-caption {
  display: inline-block;
}

.wp-caption img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.wp-caption-text {
  font-size: 0.875rem;
  color: #4b5563;
}

/* Core Design System - Single source of truth for design tokens */

/* ===========================
   SIMPLIFIED SEMANTIC DESIGN TOKENS
   Optimized three-tier token architecture with direct Tailwind references
   
   PURPOSE:
   - Clean three-tier token architecture
   - Direct references to tailwind.config.js colors (no RGB duplication)
   - RGB values ONLY for tokens that actually need alpha channel support
   - Minimal maintenance overhead
   - Enables dynamic theming (light/dark mode)
   
   HIERARCHY:
   Tier 1 (Brand): Raw brand color values → Defined in tailwind.config.js
   Tier 2 (Applied): Semantic color roles → Direct theme() references
   Tier 3 (Semantic): Component/theme tokens → surface, text, border
   
   ALPHA CHANNEL STRATEGY:
   - Most tokens: Use direct theme() references (e.g., theme('colors.primary.500'))
   - Alpha-needed tokens: Use RGB format with --color-*-rgb variables
   
   USAGE:
   - Applied tokens: bg-primary-500, text-accent-300 (uses tailwind.config.js)
   - Semantic tokens: bg-surface-primary, text-primary (theme-aware)
   - Brand tokens: bg-slack-violet-500 (when brand guidelines require)
   - Tailwind built-ins: p-6, shadow-lg, space-y-4
=========================== */

:root {
  /* ===========================
     TIER 1: BRAND TOKEN REFERENCES
     Direct references to tailwind.config.js - NO RGB DUPLICATION!
     All slack-* colors are defined in tailwind.config.js
  =========================== */
  --color-brand-primary: #481A54;
  --color-brand-secondary: #1AB9FF;
  --color-brand-tertiary: #41B658;
  --color-brand-accent: #FCC003;
  --color-brand-highlight: #E3066A;

  /* ===========================
     TIER 2: APPLIED TOKEN SCALES
     Direct references to tailwind.config.js color scales
     These automatically stay in sync with any config changes
  =========================== */

  /* Primary scale - Direct references to slack-violet scale */
  --color-primary-50: #F9F0FF;
  --color-primary-100: #F2DEFF;
  --color-primary-200: #E5B9FE;
  --color-primary-300: #D892FE;
  --color-primary-400: #D17DFE;
  --color-primary-500: #CB65FF;
  --color-primary-600: #BA01FF;
  --color-primary-700: #9602C7;
  --color-primary-800: #730394;
  --color-primary-850: #481A54;
  --color-primary-900: #3D0157;
  --color-primary-950: #2E0039;

  /* Secondary scale - Direct references to slack-cloud-blue scale */
  --color-secondary-50: #EAF5FE;
  --color-secondary-100: #CFE9FE;
  --color-secondary-200: #90D0FE;
  --color-secondary-300: #1AB9FF;
  --color-secondary-400: #08ABED;
  --color-secondary-500: #0D9DDA;
  --color-secondary-600: #107CAD;
  --color-secondary-700: #05628A;
  --color-secondary-800: #084968;
  --color-secondary-850: #032B48;
  --color-secondary-900: #0A2636;
  --color-secondary-950: #001A28;

  /* Tertiary scale - Direct references to slack-greem scale */
  --color-tertiary-50: #EBF7E6;
  --color-tertiary-100: #CDEFC4;
  --color-tertiary-200: #91DB8B;
  --color-tertiary-300: #45C65A;
  --color-tertiary-400: #41B658;
  --color-tertiary-500: #3BA755;
  --color-tertiary-600: #2E844A;
  --color-tertiary-700: #396547;
  --color-tertiary-800: #194E31;
  --color-tertiary-850: #1C3326;
  --color-tertiary-900: #0C2912;
  --color-tertiary-950: #071B12;

  /* Quaternary scale - Direct references to slack-yellow scale */
  --color-accent-50: #FBF3E0;
  --color-accent-100: #F9E3B6;
  --color-accent-200: #FCC003;
  --color-accent-300: #E4A201;
  --color-accent-400: #D79304;
  --color-accent-500: #CA8501;
  --color-accent-600: #A86403;
  --color-accent-700: #8C4B02;
  --color-accent-800: #6F3400;
  --color-accent-850: #4F2100;
  --color-accent-900: #2E2204;
  --color-accent-950: #281202;

  /* Quinary scale - Direct references to slack-pink scale */
  --color-highlight-50: #FEF0F3;
  --color-highlight-100: #FDDDE3;
  --color-highlight-200: #FDB6C5;
  --color-highlight-300: #FE8AA7;
  --color-highlight-400: #FE7298;
  --color-highlight-500: #FF538A;
  --color-highlight-600: #E3066A;
  --color-highlight-700: #B60554;
  --color-highlight-800: #8A033E;
  --color-highlight-850: #61022A;
  --color-highlight-900: #4B0620;
  --color-highlight-950: #370114;

  /* Neutral scale - Direct references to slack-neutral (slate) scale */
  --color-smoke-50: #F3F3F3;
  --color-smoke-100: #E5E5E5;
  --color-smoke-200: #CFCFC9;
  --color-smoke-300: #AEAEAC;
  --color-smoke-400: #A0A0A0;
  --color-smoke-500: #939393;
  --color-smoke-600: #747474;
  --color-smoke-700: #5C5C5C;
  --color-smoke-800: #444444;
  --color-smoke-900: #242424;
  --color-smoke-950: #181818;

  /* Semantic state colors - Direct references to Slack brand scales */
  --color-success-50: #EBF7E6;
  --color-success-500: #3BA755;
  --color-success-600: #2E844A;

  --color-warning-50: #FBF3E0;
  --color-warning-200: #FCC003;
  --color-warning-500: #CA8501;

  --color-error-50: #FEF1EE;
  --color-error-500: #FE5C4C;
  --color-error-600: #EA001E;

  /* ===========================
     ALPHA CHANNEL SPECIAL CASES
     RGB format ONLY for tokens that actually need alpha transparency
     These are the ONLY tokens that justify the RGB overhead
  =========================== */
  --color-success-500-rgb: 59 167 85; /* For rgba(var(--color-success-500-rgb), 0.2) */
  --color-brand-accent-rgb: 26 185 255; /* For rgba(var(--color-brand-accent-rgb), 0.3) */

  /* ===========================
     TIER 3: SEMANTIC TOKENS (THEME-AWARE)
     Component and layout tokens that change between light/dark themes
     Uses direct Tailwind theme() references where possible
  =========================== */

  /* Surface colors - Theme-aware backgrounds using Tailwind built-ins */
  --color-surface-primary: #fff; /* white - Main content areas */
  --color-surface-secondary: #fff; /* white - Card backgrounds */
  --color-surface-tertiary: #F9F0FF; /* slate-100 - Subtle sections */
  --color-surface-elevated: #fff; /* white - Modals, overlays */
  --color-surface-highlight: #481A54; /* violet-850 - Brand highlight areas (CTA, etc) */

  /* Text colors - Theme-aware text using Tailwind built-ins */
  --color-text-primary: #000; /* black - Primary content */
  --color-text-secondary: #181818; /* slack-neutral-950 - Secondary content */
  --color-text-muted: #A0A0A0; /* slack-neutral-400 - Placeholders, disabled */
  --color-text-inverse: #fff; /* white - Text on dark backgrounds */
  --color-text-highlight: #730394;

  /* Border colors - Theme-aware borders using Tailwind built-ins */
  --color-border-primary: #CFCFC9; /* slate-200 - Default borders */
  --color-border-secondary: #AEAEAC; /* slate-300 - Subtle borders */
  --color-border-focus: var(--color-brand-accent); /* Brand accent for focus states */
  --color-border-highlight: var(--color-text-highlight);

  /* ===========================
     COMPONENT-SPECIFIC TOKENS
     Tokens for specific component patterns and use cases
  =========================== */
  --color-code-bg: #F3F3F3; /* slate-50 - Code block backgrounds */
  --color-code-text: #5C5C5C; /* slate-700 - Code text */
  --color-code-inline-bg: var(--color-success-500); /* Success color for inline code */

  /* Interactive element colors */
  --color-focus-ring: var(--color-brand-accent); /* Focus ring color */
  --color-link:       var(--color-brand-primary); /* Default link color */
  --color-link-hover: var(--color-primary-800); /* Link hover color */

  /* Component-specific accents */
  --color-workshop-accent: var(--color-primary-800); /* Workshop indicators */
  --color-event-highlight: var(--color-brand-accent); /* Event highlights */
  --color-tools-accent:    var(--color-primary-600);
  --color-platform-border: var(--color-tertiary-700)

  
  --color-btn-solid-text:       #fff;
  --color-btn-solid-fill:       #481A54;
  --color-btn-solid-text-hover: #fff;
  --color-btn-solid-fill-hover: #730394;
  
  --color-btn-outline-text:         #481A54;
  --color-btn-outline-border:       #481A54;
  --color-btn-outline-text-hover:   #730394;
  --color-btn-outline-border-hover: #730394;
}

/* ===========================
   DARK MODE OVERRIDES
   Theme-aware color tokens for dark mode using direct Tailwind references
   Maintains brand colors while adapting neutral surfaces
=========================== */

:root[data-theme="dark"] {
  /* Dark mode surfaces - Use Tailwind's slate scale for consistency */
  --color-surface-primary: #181818; /* slate-950 - main backgrounds */
  --color-surface-secondary: #181818; /* slate-900 - card backgrounds */
  --color-surface-tertiary: #181818; /* slate-800 - subtle sections */
  --color-surface-elevated: #181818; /* slate-700 - elevated surfaces */
  --color-surface-highlight: #481A54; /* violet-850 - Brand highlight areas (CTA, etc) */

  /* Dark mode text colors - Use Tailwind built-ins */
  --color-text-primary: #fff; /* white - Primary text */
  --color-text-secondary: #E5E5E5; /* slate-300 - Secondary text */
  --color-text-muted: #939393; /* slate-500 - Muted text */
  --color-text-inverse: #000; /* slate-900 - Inverse text */
  --color-text-highlight: #BA01FF;

  /* Dark mode borders - Use Tailwind slate scale */
  --color-border-primary: #5C5C5C; /* slate-700 - Dark border primary */
  --color-border-secondary: #747474; /* slate-600 - Dark border secondary */
  --color-border-highlight: var(--color-text-highlight);
  /* Focus color remains bright for accessibility */

  /* Dark mode code colors - Use Tailwind slate scale */
  --color-code-bg: #242424; /* slate-900 - Dark code backgrounds */
  --color-code-text: #CFCFC9; /* slate-200 - Light code text */
  --color-code-inline-bg: var(--color-accent-300); /* Bright inline code */

  /* Adjust interactive colors for better dark mode contrast */
  --color-link: var(--color-brand-accent); /* Brighter links in dark mode */

  /* Button specific colors */
  --color-btn-solid-text:       #481A54;
  --color-btn-solid-fill:       #fff;
  --color-btn-solid-text-hover: #730394;
  --color-btn-solid-fill-hover: #fff;
  
  --color-btn-outline-text:         #fff;
  --color-btn-outline-border:       #fff;
  --color-btn-outline-text-hover:   #E5E5E5;
  --color-btn-outline-border-hover: #E5E5E5;
}

/* ===========================
   UTILITY CLASS BRIDGES
   Minimal helper classes for dynamic theming
   Use sparingly - prefer Tailwind utilities when possible
=========================== */

/* Surface utilities */

.bg-surface {
  background-color: var(--color-surface-primary);
}

.bg-surface-secondary {
  background-color: var(--color-surface-secondary);
}

.bg-surface-elevated {
  background-color: var(--color-surface-elevated);
}

/* Text utilities */

.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Border utilities */

.border-primary {
  border-color: var(--color-border-primary);
}

.border-secondary {
  border-color: var(--color-border-secondary);
}

/* Focus utilities for accessibility */

.focus-brand:focus {
  --tw-ring-color: var(--color-focus-ring);
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

/* ===========================
   WORDPRESS & ELEMENTOR INTEGRATION
   Semantic token integration with WordPress and Elementor
=========================== */

/* WordPress content styling */

.entry-content {
  background-color: var(--color-surface-primary);
  color: var(--color-text-primary);
}

.entry-content code {
  background-color: rgba(var(--color-success-500-rgb), 0.2);
  color: var(--color-code-text);
}

.entry-content pre {
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-border-primary);
}

/* Elementor widget integration */

.elementor-widget-container {
  color: var(--color-text-primary);
}

/* Component-specific semantic tokens */

.workshop-step {
  border-left-color: var(--color-workshop-accent);
}

.event-card {
  border-color: rgba(var(--color-brand-accent-rgb), 0.3);
}

.slack-card-tool-button {
  background-color: transparent;
  color: rgb(var(--color-text-primary)) !important;
  border-color: rgb(var(--color-text-primary));
}

.slack-card-tool-button:hover {
    color: rgb(var(--color-text-highlight)) !important;
    border-color: rgb(var(--color-border-highlight)) !important;
  }

.slack-card-tool-button:hover .slack-card-button-text, .slack-card-tool-button:hover .slack-card-button-icon {
      color: rgb(var(--color-text-highlight)) !important;
    }

/* 

SIMPLIFIED ARCHITECTURE BENEFITS:

ALPHA CHANNEL WORKFLOW:
For the rare cases when you need alpha transparency:
1. Use the dedicated -rgb variables: --color-success-500-rgb, --color-brand-accent-rgb
2. Apply with rgba(): rgba(var(--color-success-500-rgb), 0.2)
3. Add new -rgb variables only when absolutely necessary

USAGE EXAMPLES:

TIER 1 - Brand Tokens (Direct usage when brand guidelines require):
class="bg-slack-violet-850 text-white"
class="border-slack-cloud-blue-300"

TIER 2 - Applied Tokens (Primary usage for semantic roles):
class="bg-primary-850 hover:bg-primary-800"
class="text-accent-300 hover:text-accent-400"
class="bg-success-50 text-success-600"

TIER 3 - Semantic Tokens (Theme-aware components):
class="bg-surface-primary text-primary border-primary"
class="bg-surface-elevated shadow-lg"

Tailwind Built-ins (Layout, spacing, typography):
class="max-w-4xl mx-auto px-6 py-8"
class="text-lg leading-relaxed space-y-4"

Alpha Transparency (Special cases):
background-color: rgba(var(--color-success-500-rgb), 0.2);
border-color: rgba(var(--color-brand-accent-rgb), 0.3);

*/

/* Base Foundation - Minimal set */

/* =========================
   FONT DEFINITIONS
========================= */

@font-face {
    font-family: 'Avant Garde';
    src: url(../fonts/AvantGarde.woff2?8402dfbd4149ce947d8b1cfeced2cd97) format('woff2'),
        url(../fonts/AvantGarde.woff?d1c099d0212142aabd54101e51b88617) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/SalesforceSans-Regular.woff2?679547df303acfaf9b97f4847d47e9df) format('woff2'),
         url(../fonts/SalesforceSans-Regular.woff?a361cf0439289bfd883918f597752c76) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/SalesforceSans-Bold.woff2?edf948a2181aa81e604585cca9b140be) format('woff2'),
         url(../fonts/SalesforceSans-Bold.woff?2f31b1d340484b82ef37009b7d4c9479) format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/SalesforceSans-Italic.woff2?64ed4696e597b09875fb7b49ee832d9b) format('woff2'),
         url(../fonts/SalesforceSans-Italic.woff?6ff76dd92861d61ab2057f3328be3329) format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/SalesforceSans-BoldItalic.woff2?ad46fbeaedc190d6d3dbbcc5f66c5786) format('woff2'),
         url(../fonts/SalesforceSans-BoldItalic.woff?97b8c8cbc8cfb200e1c52d395bbe0190) format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/SalesforceSans-Light.woff2?7d60aed7319d75b829f521a02fd9368c) format('woff2'),
         url(../fonts/SalesforceSans-Light.woff?7311644a8dd80b96987250d6021c5b14) format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Salesforce Sans';
    src: url(../fonts/SalesforceSans-LightItalic.woff2?4033c989dfb65fb9645e38d3f2f4c738) format('woff2'),
         url(../fonts/SalesforceSans-LightItalic.woff?f0c647518032099954aba617c36bc8d4) format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* =========================
   SIMPLIFIED COMPONENT VARIABLES
   Minimal component-specific variables
   Core design tokens are now in tokens/semantic-tokens.css
========================= */

:root {
  /* =============================================
     RESPONSIVE BREAKPOINTS SYSTEM
     Single source of truth for all breakpoint values
  ============================================= */

  /* Breakpoint values (matching Tailwind config) */
  --breakpoint-xs: 480px;   /* Mobile landscape */
  --breakpoint-sm: 640px;   /* Large mobile */
  --breakpoint-md: 768px;   /* Tablet portrait */
  --breakpoint-lg: 1280px;  /* Laptop/desktop */
  --breakpoint-xl: 1440px;  /* Large desktop */
  --breakpoint-2xl: 1920px; /* Extra large desktop */

  /* =============================================
     FLUID CONTAINER SYSTEM VARIABLES
     Standardized container widths and spacing
  ============================================= */

  /* Container max-widths at different breakpoints */
  --container-padding-mobile: 1rem;       /* 16px */
  --container-padding-sm: 1.5rem;         /* 24px */
  --container-padding-md: 2rem;           /* 32px */
  --container-margin-lg: 4rem;            /* 64px total (32px each side) */
  --container-margin-xl: 8rem;            /* 128px total (64px each side) */

  /* Fixed container widths for large screens */
  --container-width-standard: 1280px;     /* Optimal reading width */
  --container-width-wide: 1440px;         /* Wide screens */

  /* Container variants */
  --container-width-narrow-factor: 0.8;   /* 80% of standard */
  --container-width-wide-factor: 1.2;     /* 120% of standard */

  /* Content width presets (for hero widgets, etc.) */
  --content-width-narrow: 640px;          /* Updated from 600px */
  --content-width-standard: 800px;
  --content-width-wide: 1000px;

  /* =============================================
     LEGACY COMPATIBILITY
  ============================================= */

  /* Legacy link colors for backwards compatibility */
  --link-color: var(--color-link);
  --link-hover: var(--color-link-hover);

  /* Essential transitions - keeping these as they're frequently used */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* Note: All other component variables have been replaced with semantic tokens in 
   tokens/semantic-tokens.css. Use the following patterns in CSS:
   
   - Instead of var(--button-bg) → @apply bg-surface-secondary
   - Instead of var(--card-bg) → @apply bg-surface-primary
   - Instead of var(--card-text) → @apply text-text-primary
   
   This reduces duplication and leverages Tailwind's utility system.
*/

/* =========================
   BASE RESET & GLOBAL STYLES
========================= */

/* Apply base background and text colors globally */

html, body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Content wrapper styling */

article > *:not(.entry-content),
.entry-content > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
}

/* Global content styling for WordPress */

.entry-content h1, .block-editor-block-list__layout h1 {
  font-size: 1.5rem;
  line-height: 2rem;
}

.entry-content h2, .block-editor-block-list__layout h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.entry-content h3, .block-editor-block-list__layout h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.entry-content p, .entry-content ul, .entry-content ol, .block-editor-block-list__layout p, .block-editor-block-list__layout ul, .block-editor-block-list__layout ol {
  margin-bottom: 2rem;
}

/* Typography for published posts */

.entry-content.prose {
  --tw-prose-bullets: var(--color-text-primary);
  --tw-prose-links: var(--link-color);
  --tw-prose-links-hover: var(--link-hover);
}

/* Global heading styles - Now using typography tokens */

.entry-content h1 {
  font-family: var(--typography-heading-1-font-family);
  font-size: var(--typography-heading-1-font-size);
  font-weight: var(--typography-heading-1-font-weight);
  line-height: var(--typography-heading-1-line-height);
  letter-spacing: var(--typography-heading-1-letter-spacing);
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.entry-content h2 {
  font-family: var(--typography-heading-2-font-family);
  font-size: var(--typography-heading-2-font-size);
  font-weight: var(--typography-heading-2-font-weight);
  line-height: var(--typography-heading-2-line-height);
  letter-spacing: var(--typography-heading-2-letter-spacing);
  color: var(--color-text-primary);
  margin-bottom: 0.875rem;
}

.entry-content h3 {
  font-family: var(--typography-heading-3-font-family);
  font-size: var(--typography-heading-3-font-size);
  font-weight: var(--typography-heading-3-font-weight);
  line-height: var(--typography-heading-3-line-height);
  letter-spacing: var(--typography-heading-3-letter-spacing);
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

/* Global link styles */

.entry-content.prose a:not(.not-prose) {
  color: var(--link-color) !important;
  text-decoration: underline !important;
  text-underline-offset: var(--text-underline-offset);
  text-decoration-thickness: var(--text-decoration-thickness);
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

.entry-content.prose a:not(.not-prose):hover {
  color: var(--link-hover) !important;
  text-decoration: none !important;
}

/* =========================
   PLACEHOLDER COMMENTS FOR MISSING DESIGN ELEMENTS
   These elements are noted from the design mockup but not yet implemented
========================= */

/* TODO: Hero Section Purple Clouds/Confetti Background
 * The design shows decorative purple cloud-like elements with confetti
 * in the hero section background. This should be added as a background
 * image or CSS shapes positioned in the hero section.
 * Location: Hero section behind the mascot image
 */

/* TODO: Connect with Developers Purple Wave Background
 * The design shows a purple gradient wave/curved background
 * in the "Connect with developers" section. This should be
 * implemented as a background element or SVG shape.
 * Location: "Connect with developers" section
 */

/* utilities.css */

/* ===========================
   THEME OVERRIDE UTILITIES
   Force specific colors regardless of light/dark theme
   
   PURPOSE:
   - Override theme-aware semantic tokens when specific colors are needed
   - Handle dark background sections that need consistent white text
   - Provide utility classes for Elementor custom CSS classes
   - Maintain accessibility while bypassing theme logic
   
   USAGE:
   Apply these classes in Elementor "Advanced > CSS Classes" field
   Or use directly in templates when theme override is needed
=========================== */

/* ===========================
   FORCE COLOR UTILITIES
   These classes override theme behavior with !important
=========================== */

/* Force white text - Always white regardless of theme */

.text-force-white,
.text-force-white *,
.text-force-white h1,
.text-force-white h2,
.text-force-white h3,
.text-force-white h4,
.text-force-white h5,
.text-force-white h6,
.text-force-white p,
.text-force-white span,
.text-force-white div,
.text-force-white li,
.text-force-white a {
  color: white !important;
}

/* Force white text with hover states */

.text-force-white a:hover,
.text-force-white a:focus {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration-color: rgba(255, 255, 255, 0.8) !important;
}

/* Force black text - Always black regardless of theme */

.text-force-black,
.text-force-black *,
.text-force-black h1,
.text-force-black h2,
.text-force-black h3,
.text-force-black h4,
.text-force-black h5,
.text-force-black h6,
.text-force-black p,
.text-force-black span,
.text-force-black div,
.text-force-black li,
.text-force-black a {
  color: black !important;
}

/* Force black text with hover states */

.text-force-black a:hover,
.text-force-black a:focus {
  color: rgba(0, 0, 0, 0.7) !important;
  text-decoration-color: rgba(0, 0, 0, 0.7) !important;
}

/* ===========================
   FORCE BACKGROUND UTILITIES
   Always apply specified backgrounds regardless of theme
=========================== */

/* Force dark background - Always dark regardless of theme */

.bg-force-dark {
  background-color: #0f172a !important;
}

/* Force light background - Always light regardless of theme */

.bg-force-light {
  background-color: white !important;
}

/* Force brand dark background - Matches Slack's dark purple sections */

.bg-force-brand-dark {
  background-color: #481A54 !important;
}

/* ===========================
   SPECIFIC USE CASE UTILITIES
   Purpose-built classes for common override scenarios
=========================== */

/* Connect section styling - For dark purple sections with white text */

.connect-section-heading,
.connect-section-heading *,
.connect-section-heading h1,
.connect-section-heading h2,
.connect-section-heading h3,
.connect-section-heading h4,
.connect-section-heading h5,
.connect-section-heading h6 {
  color: white !important;
  font-weight: 600 !important;
}

.connect-section-text,
.connect-section-text *,
.connect-section-text p,
.connect-section-text span,
.connect-section-text div,
.connect-section-text li {
  color: white !important;
  opacity: 0.9;
}

/* Connect section links - White with accent hover */

.connect-section-text a,
.connect-section-heading a {
  color: white !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: from-font !important;
}

.connect-section-text a:hover,
.connect-section-text a:focus,
.connect-section-heading a:hover,
.connect-section-heading a:focus {
  color: #1AB9FF !important;
  text-decoration-color: #1AB9FF !important;
}

/* ===========================
   DARK SECTION UTILITIES
   For sections with consistently dark backgrounds
=========================== */

/* Dark section wrapper - Combines dark background with white text */

.dark-section {
  color: white !important;
}

/* All text elements within dark sections */

.dark-section *,
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section p,
.dark-section span,
.dark-section div,
.dark-section li {
  color: white !important;
}

/* Dark section links */

.dark-section a {
  color: white !important;
  text-decoration: underline !important;
}

.dark-section a:hover,
.dark-section a:focus {
  color: #1AB9FF !important;
  text-decoration-color: #1AB9FF !important;
}

/* ===========================
   LIGHT SECTION UTILITIES
   For sections that need to stay light in dark theme
=========================== */

/* Light section wrapper - Forces white background with dark text */

.light-section {
  color: #0f172a !important;
}

/* All text elements within light sections */

.light-section *,
.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4,
.light-section h5,
.light-section h6,
.light-section p,
.light-section span,
.light-section div,
.light-section li {
  color: #0f172a !important;
}

/* Light section links */

.light-section a {
  color: #481A54 !important;
}

.light-section a:hover,
.light-section a:focus {
  color: #9602C7 !important;
}

/* ===========================
   ELEMENTOR SPECIFIC OVERRIDES
   Target Elementor widget specific selectors for better specificity
=========================== */

/* Elementor headings with force utilities */

.elementor-widget-heading.text-force-white .elementor-heading-title,
.text-force-white .elementor-widget-heading .elementor-heading-title {
  color: white !important;
}

.elementor-widget-heading.text-force-black .elementor-heading-title,
.text-force-black .elementor-widget-heading .elementor-heading-title {
  color: black !important;
}

/* Elementor text editor with force utilities */

.elementor-widget-text-editor.text-force-white .elementor-text-editor,
.text-force-white .elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-text-editor.text-force-white .elementor-text-editor *,
.text-force-white .elementor-widget-text-editor .elementor-text-editor * {
  color: white !important;
}

.elementor-widget-text-editor.text-force-black .elementor-text-editor,
.text-force-black .elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-text-editor.text-force-black .elementor-text-editor *,
.text-force-black .elementor-widget-text-editor .elementor-text-editor * {
  color: black !important;
}

/* ===========================
   ACCESSIBILITY CONSIDERATIONS
   Ensure forced colors maintain proper contrast ratios
=========================== */

/* Focus states for forced colors */

.text-force-white *:focus,
.dark-section *:focus {
  outline: 2px solid #1AB9FF !important;
  outline-offset: 2px !important;
}

.text-force-black *:focus,
.light-section *:focus {
  outline: 2px solid #9602C7 !important;
  outline-offset: 2px !important;
}

/* Selection states */

.text-force-white *::-moz-selection, .dark-section *::-moz-selection {
  background-color: rgba(26, 185, 255, 0.3) !important;
  color: white !important;
}

.text-force-white *::selection,
.dark-section *::selection {
  background-color: rgba(26, 185, 255, 0.3) !important;
  color: white !important;
}

.text-force-black *::-moz-selection, .light-section *::-moz-selection {
  background-color: rgba(89, 28, 135, 0.2) !important;
  color: black !important;
}

.text-force-black *::selection,
.light-section *::selection {
  background-color: rgba(89, 28, 135, 0.2) !important;
  color: black !important;
}

/* ===========================
   RESPONSIVE CONSIDERATIONS
   Ensure utilities work across all breakpoints
=========================== */

/* Mobile-first approach - utilities work at all sizes */

@media (max-width: 768px) {
  .connect-section-heading,
  .connect-section-text {
    /* Maintain forced colors on mobile */
  }
}

/* === Dropdown del header: solo colores (light/dark) === */

/* contenedor */

header nav [x-show][class*="bg-white"]{
  background: rgb(var(--color-surface-primary)) !important;
  color: rgb(var(--color-text-primary)) !important;
}

/* “piquito” del tooltip */

header nav [x-show] > .absolute.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary)) !important;
}

/* columna divisoria */

header nav [x-show] .border-gray-200{
  border-color: rgb(var(--color-border-primary)) !important;
}

/* subtítulos “Get Started”, “Tools” (eran text-black) */

header nav [x-show] p.text-black{
  color: rgb(var(--color-text-secondary)) !important;
}

/* enlaces morados */

header nav [x-show] a.text-primary-800{
  color: var(--color-link) !important;
}

header nav [x-show] a.text-primary-800:hover{
  color: var(--color-link-hover) !important;
}

/* título grande “Build” (mismo morado del link) */

header nav [x-show] a.font-avantGarde.font-bold{
  color: var(--color-link) !important;
}

/* ===== Dark mode (clase .dark o data-theme="dark") ===== */

.dark header nav [x-show][class*="bg-white"],
:root[data-theme="dark"] header nav [x-show][class*="bg-white"]{
  background: #481A54 !important;
  color: rgb(var(--color-text-primary)) !important;
}

.dark header nav [x-show] > .absolute.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .absolute.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary)) !important;
}

.dark header nav [x-show] .border-gray-200,
:root[data-theme="dark"] header nav [x-show] .border-gray-200{
  border-color: rgb(var(--color-border-secondary)) !important;
}

.dark header nav [x-show] p.text-black,
:root[data-theme="dark"] header nav [x-show] p.text-black{
  color: #fff !important;
}

.dark header nav [x-show] a.text-primary-800,
:root[data-theme="dark"] header nav [x-show] a.text-primary-800{
  color: var(--color-link) !important;
}

.dark header nav [x-show] a.text-primary-800:hover,
:root[data-theme="dark"] header nav [x-show] a.text-primary-800:hover{
  color: var(--color-link-hover) !important;
}

.dark header nav [x-show] a.font-avantGarde.font-bold,
:root[data-theme="dark"] header nav [x-show] a.font-avantGarde.font-bold{
  color: var(--color-link) !important;
}

/* ===========================
   USAGE DOCUMENTATION
   
   ELEMENTOR INTEGRATION:
   1. In Elementor, go to widget > Advanced > CSS Classes
   2. Add one of these classes:
      - text-force-white (always white text)
      - text-force-black (always black text)  
      - connect-section-heading (white headings for dark sections)
      - connect-section-text (white body text for dark sections)
      - dark-section (dark background + white text)
      - light-section (light background + dark text)
   
   SECTION/CONTAINER USAGE:
   1. Apply to Elementor sections or containers with dark backgrounds:
      - Add "dark-section" class to section
      - OR add "text-force-white" to individual widgets
   
   SPECIFIC USE CASES:
   - Dark purple "Connect with developers" section: Use "connect-section-heading" and "connect-section-text"
   - Any section with dark background: Use "dark-section" on the section container
   - Light sections in dark theme: Use "light-section" on the section container
   
   ACCESSIBILITY NOTES:
   - All forced colors maintain WCAG AA contrast ratios
   - Focus states are properly styled for keyboard navigation
   - Selection states work correctly with forced colors
   
   MAINTENANCE:
   - Colors reference semantic tokens and Tailwind theme() values
   - Updates to brand colors in tailwind.config.js will cascade here
   - Test both light and dark themes when making changes
=========================== */

/* =============================================================================
   FLUID SCALING CONTAINER SYSTEM
   ============================================================================= */

/* Full-bleed wrapper for backgrounds */

.section-wrapper {
  width: 100%;
  position: relative;
}

/* Main fluid scaling content container */

.container-content {
  padding: 0 var(--container-padding-mobile);  /* Mobile default */

  /* Fallback for browsers without calc() support (IE9 and older) */
  max-width: none;

  /* Modern browsers with calc() support */
  width: 100%;
}

/* Small screens - slightly more padding */

@media (min-width: 640px) {

.container-content {
    padding: 0 var(--container-padding-sm)
}
  }

/* Medium screens - comfortable padding */

@media (min-width: 768px) {

.container-content {
    padding: 0 var(--container-padding-md)
}
  }

/* Large screens - start constraining with calc() */

@media (min-width: 1024px) {

.container-content {
    max-width: calc(100% - var(--container-margin-lg));
    padding: 0;
    margin: 0 auto
}
  }

@media (min-width: 1280px) {

.container-content {
    max-width: calc(100% - var(--container-margin-xl))
}
  }

@media (min-width: 1440px) {

.container-content {
    max-width: var(--container-width-standard)
}
  }

@media (min-width: 1920px) {

.container-content {
    max-width: var(--container-width-wide)
}
  }

/* Container variants */

/* 80% of normal container for focused content */

@media (min-width: 1024px) {

.container-content-narrow {
    max-width: calc(80% - 4rem)
}
  }

@media (min-width: 1280px) {

.container-content-narrow {
    max-width: calc(80% - 8rem)
}
  }

@media (min-width: 1440px) {

.container-content-narrow {
    max-width: 1024px
}
  }

@media (min-width: 1920px) {

.container-content-narrow {
    max-width: 1152px
}
  }

/* 120% of normal container up to full width */

@media (min-width: 1024px) {

.container-content-wide {
    max-width: calc(100% - 2rem)  /* Less margin */
}
  }

@media (min-width: 1280px) {

.container-content-wide {
    max-width: calc(100% - 4rem)  /* Less margin */
}
  }

@media (min-width: 1440px) {

.container-content-wide {
    max-width: 1536px  /* Wider than standard */
}
  }

@media (min-width: 1920px) {

.container-content-wide {
    max-width: 1728px  /* Wider for large screens */
}
  }

/* Section spacing utilities */

.section-spacing-y {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {

.section-spacing-y {
    padding-top: 4rem;
    padding-bottom: 4rem
}
  }

@media (min-width: 1280px) {

.section-spacing-y {
    padding-top: 5rem;
    padding-bottom: 5rem
}
  }

.section-spacing-y-small {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {

.section-spacing-y-small {
    padding-top: 3rem;
    padding-bottom: 3rem
}
  }

.section-spacing-y-large {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {

.section-spacing-y-large {
    padding-top: 6rem;
    padding-bottom: 6rem
}
  }

@media (min-width: 1280px) {

.section-spacing-y-large {
    padding-top: 8rem;
    padding-bottom: 8rem
}
  }

/* Container utilities for special cases */

.container-content-no-padding {
  padding-left: 0;
  padding-right: 0;
}

.container-content-left-align {
  margin-left: 0;
  margin-right: auto;
}

.container-content-right-align {
  margin-left: auto;
  margin-right: 0;
}

/* Helper classes for content within containers */

.container-inner {
  width: 100%;
  max-width: 100%;
}

/* Utility to break out of container for full-width elements */

.container-breakout {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Debug helper (remove in production) */

.container-debug {
  outline: 2px dashed rgba(255, 0, 0, 0.3);
  outline-offset: -2px;
}

.container-debug::before {
  content: attr(data-container-width);
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  z-index: 9999;
}

/* New fluid container system */

/* Optimized Components - Using @apply and semantic tokens */

/* =================================================================
   SLACK TYPOGRAPHY COMPONENT SYSTEM
   =================================================================
   Complete typography system based on Slack brand specifications.
   
   Usage Examples:
   - <h1 class="slack-h1 font-display text-black">Main Headline</h1>
   - <p class="slack-body font-brand text-slack-neutral-700">Body text content</p>
   - <span class="slack-eyebrow text-slack-violet-700">Feature Label</span>
   
   Font Family Mapping:
   - Display typography (headings): font-display (Avant Garde)
   - Body typography: font-brand (Salesforce Sans)
================================================================= */

/* =================================================================
   PRIMARY HEADING COMPONENTS - DISPLAY TYPOGRAPHY
   All use font-display (Avant Garde:Demi) with weight 600
================================================================= */

.slack-h1 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 9.125rem; /* 146px */
    line-height: 1.0;
    letter-spacing: -0.025em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-h2 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 5.25rem; /* 84px */
    line-height: 1.0;
    letter-spacing: -0.025em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-h3 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 2.875rem; /* 46px */
    line-height: 1.0;
    letter-spacing: -0.025em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-h4 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem; /* 32px */
    line-height: 1.28;
    letter-spacing: -0.02em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* =================================================================
   FIGMA DISPLAY VARIANTS
   Additional display typography sizes from Figma variables
================================================================= */

.slack-display-title-2 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 2.375rem; /* 38px */
    line-height: 1.2;
    letter-spacing: -0.005em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-display-title-3 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.875rem; /* 30px */
    line-height: 1.25;
    letter-spacing: -0.004em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-sub-title-2 {
    font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem; /* 20px */
    line-height: 1.5;
    letter-spacing: 0.005em;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* =================================================================
   EYEBROW/DETAIL TYPOGRAPHY
   Small caps text for labels and categorization
================================================================= */

.slack-eyebrow {
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-eyebrow{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-eyebrow,
:root[data-theme="dark"] header nav [x-show] p.slack-eyebrow{
  color: #fff;
}

.slack-eyebrow {
    /* 14px, line-height: 1.2, letter-spacing: 0.02em, weight: 600, uppercase */
}

.slack-eyebrow-violet {
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(150 2 199 / var(--tw-text-opacity));
}

.slack-eyebrow-muted {
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity));
}

/* =================================================================
   BODY TYPOGRAPHY
   Primary reading text using Salesforce Sans
================================================================= */

.slack-body {
  font-family: Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.847rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
    /* 13.554px, line-height: 1.4, letter-spacing: -0.01em, weight: 400 */
}

.slack-body-large {
  font-family: Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
    /* Larger body text for important content - 16px */
}

.slack-body-small {
  font-family: Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(92 92 92 / var(--tw-text-opacity));
    /* Smaller body text for secondary content - 14px */
}

/* =================================================================
   RESPONSIVE TYPOGRAPHY
   Fluid scaling versions for mobile-first responsive design
================================================================= */

.slack-display-responsive {
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-display-responsive{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-display-responsive,
:root[data-theme="dark"] header nav [x-show] p.slack-display-responsive{
  color: #fff;
}

.slack-display-responsive {
    /* clamp(2rem, 5vw, 5.25rem) - scales from 32px to 84px */
}

.slack-title-responsive {
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.875rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-title-responsive{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-title-responsive,
:root[data-theme="dark"] header nav [x-show] p.slack-title-responsive{
  color: #fff;
}

.slack-title-responsive {
    /* clamp(1.5rem, 3vw, 2.875rem) - scales from 24px to 46px */
}

/* =================================================================
   COLOR VARIANTS
   Semantic color applications for different contexts
================================================================= */

/* Primary Brand Colors */

.text-slack-primary {
  --tw-text-opacity: 1;
  color: rgb(72 26 84 / var(--tw-text-opacity));
}

.text-slack-accent {
  --tw-text-opacity: 1;
  color: rgb(26 185 255 / var(--tw-text-opacity));
}

.text-slack-success {
  --tw-text-opacity: 1;
  color: rgb(65 182 88 / var(--tw-text-opacity));
}

.text-slack-warning {
  --tw-text-opacity: 1;
  color: rgb(252 192 3 / var(--tw-text-opacity));
}

.text-slack-error {
  --tw-text-opacity: 1;
  color: rgb(234 0 30 / var(--tw-text-opacity));
}

/* Hierarchy Colors */

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

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(92 92 92 / var(--tw-text-opacity));
}

.text-muted {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity));
}

.text-subtle {
  --tw-text-opacity: 1;
  color: rgb(147 147 147 / var(--tw-text-opacity));
}

/* =================================================================
   TYPOGRAPHIC DEVICES
   Special styling for inline elements and decorative typography
================================================================= */

/* Inline Emojis - 27.5px PNG images */

.slack-emoji {
  display: inline-block;
  font-size: 1.71875rem;
  line-height: 1;
    /* 27.5px with line-height: 1 */
}

.slack-emoji img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Profile Images and UI Icons - 33px circular */

.slack-avatar {
  height: 2rem;
  width: 2rem;
  overflow: hidden;
  border-radius: 9999px;
  font-size: 2.0625rem;
  line-height: 1;
    /* 33px circular container */
}

.slack-avatar img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Highlighted Text - Lighter color variants for emphasis */

.slack-highlight {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(150 2 199 / var(--tw-text-opacity));
}

.slack-highlight-subtle {
  --tw-text-opacity: 1;
  color: rgb(186 1 255 / var(--tw-text-opacity));
}

/* =================================================================
   UTILITY COMBINATIONS
   Common typography patterns as single classes
================================================================= */

/* Page Titles */

.slack-page-title {
  margin-bottom: 1.5rem;
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-page-title{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-page-title,
:root[data-theme="dark"] header nav [x-show] p.slack-page-title{
  color: #fff;
}

/* Section Titles */

.slack-section-title {
  margin-bottom: 1rem;
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-section-title{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-section-title,
:root[data-theme="dark"] header nav [x-show] p.slack-section-title{
  color: #fff;
}

/* Card Titles */

.slack-card-title {
  margin-bottom: 0.5rem;
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.004em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-card-title{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-card-title,
:root[data-theme="dark"] header nav [x-show] p.slack-card-title{
  color: #fff;
}

/* Article Titles */

.slack-article-title {
  margin-bottom: 0.75rem;
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem;
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-article-title{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-article-title,
:root[data-theme="dark"] header nav [x-show] p.slack-article-title{
  color: #fff;
}

/* Feature Labels */

.slack-feature-label {
  margin-bottom: 0.5rem;
  font-family: Avant Garde, Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(150 2 199 / var(--tw-text-opacity));
}

/* Content Paragraphs */

.slack-content {
  margin-bottom: 1rem;
  font-family: Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.847rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

header nav [x-show] p.slack-content{
  color: rgb(var(--color-text-secondary));
}

.dark header nav [x-show] p.slack-content,
:root[data-theme="dark"] header nav [x-show] p.slack-content{
  color: #fff;
}

.slack-content:last-child {
  margin-bottom: 0px;
}

/* Lead Paragraphs */

.slack-lead {
  margin-bottom: 1.5rem;
  font-family: Salesforce Sans, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(92 92 92 / var(--tw-text-opacity));
}

/* =================================================================
   RESPONSIVE HELPERS
   Tailwind responsive utility classes for typography adjustments
================================================================= */

/* Mobile typography adjustments - Using Tailwind responsive utilities */

.slack-mobile-compact .slack-h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

@media (min-width: 640px) {

  .slack-mobile-compact .slack-h1 {
    font-size: 9.125rem;
    line-height: 1.0;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
}

.slack-mobile-compact .slack-h1 { /* Scale down for mobile, return to full size on sm+ */
}

.slack-mobile-compact .slack-h2,
.slack-mobile-compact .slack-display-responsive {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 640px) {

  .slack-mobile-compact .slack-h2,
.slack-mobile-compact .slack-display-responsive {
    font-size: 5.25rem;
    line-height: 1.0;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
}

.slack-mobile-compact .slack-h2,
.slack-mobile-compact .slack-display-responsive { /* Scale down for mobile, return to full size on sm+ */
}

.slack-mobile-compact .slack-eyebrow {
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (min-width: 640px) {

  .slack-mobile-compact .slack-eyebrow {
    font-size: 0.875rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-weight: 600;
  }
}

.slack-mobile-compact .slack-eyebrow { /* Slightly smaller on mobile, normal size on sm+ */
}

/* Large screen enhancements - Using Tailwind responsive utilities */

.slack-desktop-enhanced .slack-body {
  font-size: 0.847rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 400;
}

@media (min-width: 1280px) {

  .slack-desktop-enhanced .slack-body {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.slack-desktop-enhanced .slack-body { /* Slightly larger body text on desktop */
}

/* =================================================================
   ACCESSIBILITY ENHANCEMENTS
   WCAG compliance and screen reader optimizations
================================================================= */

/* Ensure sufficient color contrast */

.slack-accessible .slack-body {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-accessible .slack-body-small {
  --tw-text-opacity: 1;
  color: rgb(68 68 68 / var(--tw-text-opacity));
}

/* Focus states for interactive typography */

.slack-link {
  --tw-text-opacity: 1;
  color: rgb(26 185 255 / var(--tw-text-opacity));
}

.slack-link:hover {
  --tw-text-opacity: 1;
  color: rgb(8 171 237 / var(--tw-text-opacity));
}

.slack-link:focus {
  --tw-text-opacity: 1;
  color: rgb(8 171 237 / var(--tw-text-opacity));
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #1AB9FF;
}

/* Screen reader enhancements */

.slack-sr-only {
  padding: 0;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-sr-only {
  clip: rect(0, 0, 0, 0);
}

.slack-card-widget .slack-card .slack-sr-only, .slack-card-widget.slack-card .slack-sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .slack-card-widget .slack-card .slack-sr-only.w-0.h-0,header nav [x-show] >  .slack-card-widget.slack-card .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-card-widget .slack-card .slack-sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-card-widget .slack-card .slack-sr-only.w-0.h-0,.dark header nav [x-show] >  .slack-card-widget.slack-card .slack-sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] >  .slack-card-widget.slack-card .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-card-widget .slack-card .slack-sr-only, .slack-card-widget.slack-card .slack-sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .slack-card-widget .slack-card .slack-sr-only.w-0.h-0,header nav [x-show] >  .slack-card-widget.slack-card .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-card-widget .slack-card .slack-sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-card-widget .slack-card .slack-sr-only.w-0.h-0,.dark header nav [x-show] >  .slack-card-widget.slack-card .slack-sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] >  .slack-card-widget.slack-card .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-card-widget .slack-card .slack-sr-only, .slack-card-widget.slack-card .slack-sr-only {
    clip: rect(0, 0, 0, 0);
  }

.slack-sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

/* =================================================================
   DARK MODE VARIANTS
   Typography adjustments for dark theme
================================================================= */

@media (prefers-color-scheme: dark) {
    .dark .slack-h1,
    .dark .slack-h2,
    .dark .slack-h3,
    .dark .slack-h4,
    .dark .slack-display-title-2,
    .dark .slack-display-title-3,
    .dark .slack-sub-title-2,
    .dark .text-primary {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
    
    .dark .slack-body,
    .dark .slack-content {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity));
  }
    
    .dark .text-secondary {
    --tw-text-opacity: 1;
    color: rgb(207 207 201 / var(--tw-text-opacity));
  }
    
    .dark .text-muted {
    --tw-text-opacity: 1;
    color: rgb(174 174 172 / var(--tw-text-opacity));
  }
    
    .dark .text-subtle {
    --tw-text-opacity: 1;
    color: rgb(160 160 160 / var(--tw-text-opacity));
  }
}

/* =========================
   BUTTON COMPONENTS
   Optimized button styling with semantic tokens and Tailwind utilities
========================= */

/* Base Button Styling */

.elementor-button,
a.elementor-button,
.elementor-button-link {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
  background-color: var(--color-surface-secondary);
  border-width: 0px;
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --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);
}

.elementor-button:hover,
a.elementor-button:hover,
.elementor-button-link: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: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Button text with proper inheritance */

.elementor-button .elementor-button-text, a.elementor-button .elementor-button-text, .elementor-button-link .elementor-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
}

/* Button hover states */

.elementor-button:hover,
  .elementor-button:focus,
  a.elementor-button:hover,
  a.elementor-button:focus,
  .elementor-button-link:hover,
  .elementor-button-link:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  border-width: 0px;
  text-decoration-line: none;
  outline-width: 0px;
}

/* Button icons */

.elementor-button .elementor-button-icon .e-font-icon-svg,
    .elementor-button .elementor-button-icon .e-font-icon-svg *,
    .elementor-button .elementor-button-icon svg,
    .elementor-button .elementor-button-icon svg *,
    a.elementor-button .elementor-button-icon .e-font-icon-svg,
    a.elementor-button .elementor-button-icon .e-font-icon-svg *,
    a.elementor-button .elementor-button-icon svg,
    a.elementor-button .elementor-button-icon svg *,
    .elementor-button-link .elementor-button-icon .e-font-icon-svg,
    .elementor-button-link .elementor-button-icon .e-font-icon-svg *,
    .elementor-button-link .elementor-button-icon svg,
    .elementor-button-link .elementor-button-icon svg * {
  fill: rgb(var(--color-text-inverse) / 1);
  stroke: rgb(var(--color-text-inverse) / 1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
}

/* Additional button icons selector for compatibility */

.elementor-button svg,
  .elementor-button svg *,
  a.elementor-button svg,
  a.elementor-button svg *,
  .elementor-button-link svg,
  .elementor-button-link svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* Hero CTA Button - Join the Developer Program */

a[href*="developer-program"] .elementor-button,
a[href*="developer-program"].elementor-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-850) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
  border-radius: 0.5rem;
  border-width: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 640px) {

  a[href*="developer-program"] .elementor-button,
a[href*="developer-program"].elementor-button {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

a[href*="developer-program"] .elementor-button,
a[href*="developer-program"].elementor-button {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.025em;
}

header nav [x-show] aa.font-avantGarde[href*="developer-program"] .elementor-button,header nav [x-show] a
a.font-avantGarde[href*="developer-program"].elementor-button{
  color: var(--color-link);
}

.dark header nav [x-show] aa.font-avantGarde[href*="developer-program"] .elementor-button,
:root[data-theme="dark"] header nav [x-show] aa.font-avantGarde[href*="developer-program"] .elementor-button,.dark header nav [x-show] a
a.font-avantGarde[href*="developer-program"].elementor-button,
:root[data-theme="dark"] header nav [x-show] a
a.font-avantGarde[href*="developer-program"].elementor-button{
  color: var(--color-link);
}

@media (min-width: 640px) {

  a[href*="developer-program"] .elementor-button,
a[href*="developer-program"].elementor-button {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

a[href*="developer-program"] .elementor-button,
a[href*="developer-program"].elementor-button {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

a[href*="developer-program"] .elementor-button:hover,
  a[href*="developer-program"] .elementor-button:focus,
  a[href*="developer-program"].elementor-button:hover,
  a[href*="developer-program"].elementor-button:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-800) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
  --tw-translate-y: -0.125rem;
  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-width: 0px;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

a[href*="developer-program"] .elementor-button .elementor-button-text, a[href*="developer-program"].elementor-button .elementor-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
}

/* Primary Action Buttons - Override for main CTAs */

.button-primary,
.elementor-button.button-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-850) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
}

.button-primary:hover,
.elementor-button.button-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-800) / var(--tw-bg-opacity));
}

/* Secondary Action Buttons */

.button-secondary,
.elementor-button.button-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  background-color: var(--color-surface-secondary);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-primary) / var(--tw-border-opacity));
}

.button-secondary:hover,
.elementor-button.button-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity));
}

/* Card Buttons - For buttons inside cards (Read More buttons) */

.card-button,
.elementor-element:has(.elementor-button):has(.elementor-heading-title) .elementor-button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  border-radius: 0.125rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.025em;
}

@media (min-width: 640px) {

  .card-button,
.elementor-element:has(.elementor-button):has(.elementor-heading-title) .elementor-button {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.card-button:hover,
  .card-button:focus,
  .elementor-element:has(.elementor-button):has(.elementor-heading-title) .elementor-button:hover,
  .elementor-element:has(.elementor-button):has(.elementor-heading-title) .elementor-button:focus {
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  border-color: rgb(255 255 255 / 0.3);
}

.card-button .elementor-button-text, .elementor-element:has(.elementor-button):has(.elementor-heading-title) .elementor-button .elementor-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* Carousel Buttons - Simplified styling for carousel elements */

[id^="swiper-wrapper-"] .elementor-button {
  border-width: 0px;
  background-color: transparent;
  text-decoration-line: none;
  --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);
  color: var(--color-link);
}

/* Carousel button icons */

[id^="swiper-wrapper-"] .elementor-button svg,
  [id^="swiper-wrapper-"] .elementor-button svg * {
    stroke: var(--color-link);
    fill: var(--color-link);
  }

[id^="swiper-wrapper-"] .elementor-button:hover {
    color: var(--color-link-hover);
  }

[id^="swiper-wrapper-"] .elementor-button:hover svg,
    [id^="swiper-wrapper-"] .elementor-button:hover svg * {
      stroke: var(--color-link-hover);
      fill: var(--color-link-hover);
    }

/* Special Case Buttons - Using semantic card styles */

[data-id="485f2c8"] .elementor-button,
[data-id="485f2c8"] a.elementor-button.elementor-button-link,
[data-id="f46b9f8"] .elementor-button {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  border-radius: 0.125rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration-line: none;
  --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);
}

[data-id="485f2c8"] .elementor-button:hover,
  [data-id="485f2c8"] .elementor-button:focus,
  [data-id="485f2c8"] .elementor-button:active,
  [data-id="485f2c8"] a.elementor-button.elementor-button-link:hover,
  [data-id="485f2c8"] a.elementor-button.elementor-button-link:focus,
  [data-id="485f2c8"] a.elementor-button.elementor-button-link:active,
  [data-id="f46b9f8"] .elementor-button:hover,
  [data-id="f46b9f8"] .elementor-button:focus,
  [data-id="f46b9f8"] .elementor-button:active {
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  border-color: rgb(255 255 255 / 0.3);
  text-decoration-line: none;
  --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);
  outline-width: 0px;
}

[data-id="485f2c8"] .elementor-button svg,
  [data-id="485f2c8"] .elementor-button svg *,
  [data-id="485f2c8"] a.elementor-button.elementor-button-link svg,
  [data-id="485f2c8"] a.elementor-button.elementor-button-link svg *,
  [data-id="f46b9f8"] .elementor-button svg,
  [data-id="f46b9f8"] .elementor-button svg * {
  fill: currentColor;
  stroke: currentColor;
}

/* Newsletter Subscribe Buttons */

.elementor-element-3ba7b15 .elementor-button,
.elementor-element-9b50b4f .elementor-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-primary) / var(--tw-border-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);
}

.elementor-element-3ba7b15 .elementor-button:hover, .elementor-element-9b50b4f .elementor-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-850) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-850) / var(--tw-border-opacity));
}

/* Primary Brand Button */

.elementor-element[data-id="d5ceb34"] a.elementor-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-850) / var(--tw-text-opacity));
  background-color: var(--color-surface-secondary);
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-850) / var(--tw-border-opacity));
}

.elementor-element[data-id="d5ceb34"] a.elementor-button .elementor-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-850) / var(--tw-text-opacity));
}

.elementor-element[data-id="d5ceb34"] a.elementor-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-850) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-850) / var(--tw-border-opacity));
}

.elementor-element[data-id="d5ceb34"] a.elementor-button:hover .elementor-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
}

/* =========================
   CARD COMPONENTS
   Optimized card styling with semantic tokens and Tailwind utilities
========================= */

/* Program Cards */

.old-card-style-fix {
  border-radius: 0.75rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-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);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Neutralize Elementor background layers */

.old-card-style-fix:not(.elementor-motion-effects-element-type-background) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-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);
}

.old-card-style-fix > .e-con-inner {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
}

.old-card-style-fix > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-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);
}

/* Card typography */

.old-card-style-fix :is(h1, h2, h3, h4, h5, h6, p, span, li) {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* Card hover effects - more subtle on mobile */

.old-card-style-fix:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-translate-y: -0.125rem;
  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: 640px) {

  .old-card-style-fix:hover {
    --tw-translate-y: -0.25rem;
    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));
  }
}

/* Carousel Cards - Developer Stories */

.dark-theme-carousel-card,
[id^="swiper-wrapper-"] .swiper-slide,
[id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) {
  border-radius: 0.5rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-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);
}

/* Neutralize Elementor background layers */

.dark-theme-carousel-card:not(.elementor-motion-effects-element-type-background), [id^="swiper-wrapper-"] .swiper-slide:not(.elementor-motion-effects-element-type-background), [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button):not(.elementor-motion-effects-element-type-background) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
    background-image: none;
}

.dark-theme-carousel-card > .elementor-motion-effects-container > .elementor-motion-effects-layer, [id^="swiper-wrapper-"] .swiper-slide > .elementor-motion-effects-container > .elementor-motion-effects-layer, [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
    background-image: none;
}

/* Carousel card typography */

.dark-theme-carousel-card :is(h1, h2, h3, h4, h5, h6), [id^="swiper-wrapper-"] .swiper-slide :is(h1, h2, h3, h4, h5, h6), [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) :is(h1, h2, h3, h4, h5, h6) {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.dark-theme-carousel-card span:not(a > span), [id^="swiper-wrapper-"] .swiper-slide span:not(a > span), [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) span:not(a > span) {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity));
}

/* Carousel card links */

.dark-theme-carousel-card a, [id^="swiper-wrapper-"] .swiper-slide a, [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity));
  text-decoration-line: none;
}

.dark-theme-carousel-card a span, [id^="swiper-wrapper-"] .swiper-slide a span, [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) a span {
  background-color: transparent;
  text-decoration-line: underline;
  text-underline-offset: 2px;
      color: var(--color-link);
      text-decoration-color: var(--color-link);
}

.dark-theme-carousel-card h3 a, [id^="swiper-wrapper-"] .swiper-slide h3 a, [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) h3 a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  text-decoration-line: none;
}

/* Clean up internal carousel structure */

.dark-theme-carousel-card .elementor-column,
  .dark-theme-carousel-card .elementor-widget-container,
  [id^="swiper-wrapper-"] .swiper-slide .elementor-column,
  [id^="swiper-wrapper-"] .swiper-slide .elementor-widget-container,
  [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) .elementor-column,
  [id^="swiper-wrapper-"] .swiper-slide .elementor-element:has(.elementor-button) .elementor-widget-container {
  background-color: transparent;
}

/* Card Containers - Clean styling to avoid double borders */

.dark-theme-card-container,
.dark-program-card-container,
.elementor-element:has(> .elementor-element:has(.elementor-button):has(.elementor-heading-title)) {
  border-width: 0px;
  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);
}

/* Tools / Code Samples / Block Kit Section Cards - Brand accent borders */

[data-id="485f2c8"] > .elementor-element.e-child {
  border-width: 1px;
  border-color: rgb(var(--color-secondary-800) / 0.5);
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-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);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

[data-id="485f2c8"] > .elementor-element.e-child:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-850) / var(--tw-border-opacity));
  --tw-translate-y: -0.125rem;
  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 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Special Background Cards - Simplified approach */

.elementor-element-333b2ef,
.elementor-element-c029c5f,
[data-id="6657edd"],
.elementor-element-3ba7b15,
.elementor-element-9b50b4f {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* Card text elements */

.elementor-element-333b2ef h2,
  .elementor-element-333b2ef p,
  .elementor-element-c029c5f h2,
  .elementor-element-c029c5f p,
  [data-id="6657edd"] h2,
  [data-id="6657edd"] p,
  .elementor-element-3ba7b15 h2,
  .elementor-element-3ba7b15 p,
  .elementor-element-9b50b4f h2,
  .elementor-element-9b50b4f p {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* Special Card with Primary Styling */

.elementor-element[data-id="d5ceb34"] {
  border-radius: 0.75rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-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);
}

/* Neutralize inline Elementor backgrounds */

.elementor-element[data-id="d5ceb34"] > .e-con-inner,
  .elementor-element[data-id="d5ceb34"] > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: transparent;
}

/* Card text styling */

.elementor-element[data-id="d5ceb34"] :is(h1, h2, h3, h4, h5, h6, p, span, li) {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* General Content Areas - Semantic background structure */

#content.site-content {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

main {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
}

/* Root section backgrounds */

main .elementor > .elementor-section {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  background-color: var(--color-surface-secondary);
}

/* Remove additional backgrounds in columns and widgets */

main .elementor-column,
main .elementor-widget-container {
  background-color: transparent;
}

/* =========================
   LIST COMPONENTS
   Unified list styling for different contexts
========================= */

/* Base List Styling */

ul:not([class]),
ol:not([class]) {
  list-style-position: outside;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}

ul:not([class]) {
  list-style-type: disc;
}

ol:not([class]) {
  list-style-type: decimal;
}

li:not([class]) {
  margin-bottom: 0.5rem;
  padding-left: 0.4rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* Scoped List Styles for Content Areas */

.post-content ul:not([class]),
.event-content ul:not([class]),
.resources-content ul:not([class]),
.workshop-content ul:not([class]),
.workshop-step-content ul:not([class]),
.wp-block ul:not([class]),
.entry-content ul:not([class]),
.hideable-content ul:not([class]),
.elementor-widget-container ul:not([class]) {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}

.post-content ol:not([class]),
.event-content ol:not([class]),
.resources-content ol:not([class]),
.workshop-content ol:not([class]),
.workshop-step-content ol:not([class]),
.wp-block ol:not([class]),
.entry-content ol:not([class]),
.hideable-content ol:not([class]),
.elementor-widget-container ol:not([class]) {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}

.post-content li:not([class]),
.event-content li:not([class]),
.resources-content li:not([class]),
.workshop-content li:not([class]),
.workshop-step-content li:not([class]),
.wp-block li:not([class]),
.entry-content li:not([class]),
.hideable-content li:not([class]),
.elementor-widget-container li:not([class]) {
  margin-bottom: 1rem;
  padding-left: 0.4rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  line-height: 1.6;
}

/* Elementor Text Editor Lists */

.elementor-widget-text-editor ol {
  list-style-type: decimal !important;
  list-style-position: outside;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}

.elementor-widget-text-editor ul {
  list-style-type: disc !important;
  list-style-position: outside;
  padding-left: 2.4rem;
  margin-bottom: 1rem;
}

.elementor-widget-text-editor li {
  display: list-item !important;
  margin-bottom: 0.5rem;
  line-height: 1.6;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.elementor-widget-text-editor ol > li {
  display: list-item !important;
  counter-increment: list-item;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* Prose Lists */

.entry-content.prose ul {
  padding-left: 1.5rem !important;
  margin-bottom: 1.5rem;
  list-style-type: disc !important;
  list-style-position: outside !important;
}

.entry-content.prose ul li {
  margin-bottom: 0.75rem !important;
  line-height: 1.7 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity)) !important;
  font-weight: 400 !important;
}

/* Workshop Requirements Lists */

.workshop-requirements-list ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.workshop-requirements-list li {
  margin-bottom: 0.5em;
}

.workshop-requirements-list a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Workshop Steps Lists */

.workshop-steps-list ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.workshop-steps-list li {
  margin-bottom: 0.5em;
}

.workshop-steps-list a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Workshop Content Lists */

.workshop-content ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.workshop-content ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

.workshop-content li {
  margin-bottom: 0.5em;
}

/* Workshop Step Content Lists */

.workshop-step-content ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

.workshop-step-content ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

.workshop-step-content li {
  margin-bottom: 0.5em;
}

/* Resource Solution Lists */

.resource-solution-item ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

.resource-solution-item ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

.resource-solution-item a {
  color: var(--color-link);
  text-decoration: underline;
}

/* Link styling within lists */

.entry-content p a, .entry-content ul a, .entry-content ol a, .block-editor-block-list__layout p a, .block-editor-block-list__layout ul a, .block-editor-block-list__layout ol a {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

.entry-content p a:hover, .entry-content ul a:hover, .entry-content ol a:hover, .block-editor-block-list__layout p a:hover, .block-editor-block-list__layout ul a:hover, .block-editor-block-list__layout ol a:hover {
  text-decoration-line: none;
}

.entry-content ul:not(.block-editor-block-variation-picker__variations) li, .block-editor-block-list__layout ul:not(.block-editor-block-variation-picker__variations) li {
  list-style-position: inside;
  list-style-type: disc;
}

.entry-content ol li, .block-editor-block-list__layout ol li {
  list-style-position: inside;
  list-style-type: decimal;
}

/* List marker colors */

::marker {
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* =========================
   CODE BLOCK COMPONENTS
   Unified styling for code elements
========================= */

/* Highlight.js Code Blocks */

code.nohighlight {
  background-color: var(--color-code-bg-light);
  color: var(--color-code-text-light);
  font-family: var(--typography-code-font-family);
  font-size: var(--typography-code-font-size);
  font-weight: var(--typography-code-font-weight);
  line-height: var(--typography-code-line-height);
  letter-spacing: var(--typography-code-letter-spacing);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  padding: var(--space-code-padding) !important;
  margin-bottom: var(--space-code-margin);
  border: 1px solid var(--color-border-secondary);
}

code.nohighlight mark {
  all: unset;
  margin-bottom: var(--space-code-margin);
}

/* Pre Code Block Wrapper */

pre.codeblock-wrapper {
  background: var(--color-code-bg-dark);
  color: var(--color-code-text-dark);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin: var(--space-code-margin) 0;
  overflow-x: auto;
  font-family: var(--typography-code-font-family);
  font-size: var(--typography-code-font-size);
  font-weight: var(--typography-code-font-weight);
  line-height: var(--typography-code-line-height);
  letter-spacing: var(--typography-code-letter-spacing);
  border: 1px solid var(--color-border-primary);
}

/* Inline Code */

code.inline-code {
  background-color: var(--color-code-bg-inline);
  color: var(--color-code-text-inline);
  padding: var(--space-code-inline);
  font-family: var(--typography-code-inline-font-family);
  font-size: var(--typography-code-inline-font-size);
  font-weight: var(--typography-code-inline-font-weight);
  line-height: var(--typography-code-inline-line-height);
  letter-spacing: var(--typography-code-inline-letter-spacing);
  border-radius: var(--radius-sm);
}

/* Dark Mode Code Block Adjustments */

:root[data-theme="dark"] code.nohighlight {
    background-color: var(--color-surface-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
  }

:root[data-theme="dark"] code.inline-code {
    background-color: var(--color-code-bg-inline-dark);
    color: var(--color-text-primary);
  }

:root[data-theme="dark"] pre.codeblock-wrapper {
    background: var(--color-surface-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
  }

/* Code blocks within list items */

li pre {
  margin: var(--space-3) 0 !important;
}

/* =========================
   SLACK ELEMENTOR CODE BLOCK WIDGET
   Extended styling for the code block widget
========================= */

.slack-code-block-widget .slack-code-block {
    position: relative;
    background: rgb(var(--color-surface-secondary));
    border: 1px solid rgb(var(--color-border-primary));
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: var(--typography-code-font-family);
  }

.slack-code-block-widget .code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: rgb(var(--color-surface-primary));
    border-bottom: 1px solid rgb(var(--color-border-primary));
    gap: var(--space-3);
  }

.slack-code-block-widget .code-block-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

.slack-code-block-widget .code-block-title {
    margin: 0;
    font-size: var(--typography-body-sm-font-size);
    font-weight: var(--typography-body-sm-font-weight);
    color: rgb(var(--color-text-primary));
  }

.slack-code-block-widget .code-block-filename {
    font-size: var(--typography-body-xs-font-size);
    color: rgb(var(--color-text-muted));
    font-family: var(--typography-code-font-family);
    background: rgb(var(--color-surface-tertiary));
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }

.slack-code-block-widget .code-language-badge {
    font-size: var(--typography-body-xs-font-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgb(var(--color-brand-primary));
    color: rgb(var(--color-text-inverse));
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }

.slack-code-block-widget .code-block-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

.slack-code-block-widget .code-copy-btn,
  .slack-code-block-widget .code-fullscreen-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: rgb(var(--color-surface-tertiary));
    border: 1px solid rgb(var(--color-border-secondary));
    border-radius: var(--radius-sm);
    color: rgb(var(--color-text-secondary));
    font-size: var(--typography-body-xs-font-size);
    cursor: pointer;
    transition: all 0.2s ease;
  }

.slack-code-block-widget .code-copy-btn:hover,
  .slack-code-block-widget .code-fullscreen-btn:hover {
    background: rgb(var(--color-surface-elevated));
    border-color: rgb(var(--color-border-primary));
    color: rgb(var(--color-text-primary));
  }

.slack-code-block-widget .code-copy-btn:focus,
  .slack-code-block-widget .code-fullscreen-btn:focus {
    outline: 2px solid rgb(var(--color-brand-primary));
    outline-offset: 2px;
  }

.slack-code-block-widget .code-block-wrapper {
    position: relative;
    overflow: hidden;
  }

.slack-code-block-widget .code-content {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--space-4);
    background: transparent;
    border: none;
    font-family: var(--typography-code-font-family);
    font-size: var(--typography-code-font-size);
    line-height: var(--typography-code-line-height);
    color: rgb(var(--color-text-primary));
    white-space: pre;
    overflow-x: auto;
    -moz-tab-size: 2;
      -o-tab-size: 2;
         tab-size: 2;
  }

/* Overflow handling */

.slack-code-block-widget.overflow-wrap .code-content {
    white-space: pre-wrap;
    overflow-x: hidden;
    word-break: break-all;
  }

.slack-code-block-widget.overflow-scroll .code-content {
    white-space: pre;
    overflow-x: auto;
  }

/* Line numbers */

.slack-code-block-widget.show-line-numbers .code-content {
    padding-left: var(--space-12);
    counter-reset: line;
  }

.slack-code-block-widget.show-line-numbers .code-content code {
    counter-increment: line;
  }

.slack-code-block-widget.show-line-numbers .code-content code::before {
    content: counter(line);
    position: absolute;
    left: 0;
    width: var(--space-10);
    text-align: right;
    padding-right: var(--space-3);
    color: rgb(var(--color-text-muted));
    font-size: var(--typography-body-xs-font-size);
    border-right: 1px solid rgb(var(--color-border-secondary));
    background: rgb(var(--color-surface-primary));
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

/* Code themes */

.slack-code-block-widget.code-theme-light .code-content {
      background: rgb(var(--color-surface-primary));
      color: #333;
    }

.slack-code-block-widget.code-theme-dark .slack-code-block {
      background: #1a1a1a;
      border-color: #333;
    }

.slack-code-block-widget.code-theme-dark .code-block-header {
      background: #2d2d2d;
      border-color: #333;
    }

.slack-code-block-widget.code-theme-dark .code-content {
      background: #1a1a1a;
      color: #f8f8f2;
    }

.slack-code-block-widget.code-theme-slack .slack-code-block {
      background: #f8f8f8;
      border-color: #e1e1e1;
    }

.slack-code-block-widget.code-theme-slack .code-block-header {
      background: #4a154b;
      color: white;
    }

.slack-code-block-widget.code-theme-slack .code-language-badge {
      background: #36c5f0;
      color: #4a154b;
    }

.slack-code-block-widget.code-theme-slack .code-content {
      background: #f8f8f8;
      color: #4a154b;
    }

/* Fullscreen modal */

.slack-code-block-widget .code-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
  }

.slack-code-block-widget .code-fullscreen-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
  }

.slack-code-block-widget .code-fullscreen-content {
    position: relative;
    width: 90vw;
    height: 90vh;
    max-width: 1200px;
    background: rgb(var(--color-surface-primary));
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

.slack-code-block-widget .code-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: rgb(var(--color-surface-secondary));
    border-bottom: 1px solid rgb(var(--color-border-primary));
  }

.slack-code-block-widget .modal-title {
    margin: 0;
    font-size: var(--typography-body-lg-font-size);
    font-weight: var(--typography-body-lg-font-weight);
    color: rgb(var(--color-text-primary));
  }

.slack-code-block-widget .code-fullscreen-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: rgb(var(--color-text-secondary));
    cursor: pointer;
    transition: all 0.2s ease;
  }

.slack-code-block-widget .code-fullscreen-close:hover {
    background: rgb(var(--color-surface-tertiary));
    color: rgb(var(--color-text-primary));
  }

.slack-code-block-widget .code-fullscreen-close:focus {
    outline: 2px solid rgb(var(--color-brand-primary));
    outline-offset: 2px;
  }

.slack-code-block-widget .code-fullscreen-body {
    flex: 1;
    overflow: auto;
    padding: 0;
  }

.slack-code-block-widget .code-fullscreen-body .code-content {
    height: 100%;
    min-height: 100%;
    margin: 0;
    border-radius: 0;
  }

/* Responsive design */

@media (max-width: 767.98px) {
    .slack-code-block-widget .code-block-header {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-2);
    }

    .slack-code-block-widget .code-block-info {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }

    .slack-code-block-widget .code-block-actions {
      justify-content: center;
    }

    .slack-code-block-widget .code-content {
      font-size: 14px;
      padding: var(--space-3);
    }

    .slack-code-block-widget.show-line-numbers .code-content {
      padding-left: var(--space-10);
    }

    .slack-code-block-widget .code-fullscreen-content {
      width: 95vw;
      height: 95vh;
    }
  }

/* High contrast support */

@media (prefers-contrast: high) {
    .slack-code-block-widget .slack-code-block {
      border-width: 2px;
    }

    .slack-code-block-widget .code-copy-btn,
    .slack-code-block-widget .code-fullscreen-btn {
      border-width: 2px;
    }

    .slack-code-block-widget .code-copy-btn:focus,
    .slack-code-block-widget .code-fullscreen-btn:focus {
      outline-width: 3px;
    }
  }

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
    .slack-code-block-widget .code-copy-btn,
    .slack-code-block-widget .code-fullscreen-btn,
    .slack-code-block-widget .code-fullscreen-close {
      transition: none;
    }
  }

/* Dark mode adjustments for Elementor widget */

:root[data-theme="dark"] .slack-code-block-widget .slack-code-block {
    background: rgb(var(--color-surface-tertiary));
    border-color: rgb(var(--color-border-primary));
  }

:root[data-theme="dark"] .slack-code-block-widget .code-block-header {
    background: rgb(var(--color-surface-secondary));
  }

:root[data-theme="dark"] .slack-code-block-widget .code-block-filename {
    background: rgb(var(--color-surface-elevated));
  }

:root[data-theme="dark"] .slack-code-block-widget .code-copy-btn,
  :root[data-theme="dark"] .slack-code-block-widget .code-fullscreen-btn {
    background: rgb(var(--color-surface-elevated));
    border-color: rgb(var(--color-border-primary));
  }

:root[data-theme="dark"] .slack-code-block-widget.show-line-numbers .code-content code::before {
    background: rgb(var(--color-surface-secondary));
    border-color: rgb(var(--color-border-primary));
  }

/**
 * Elementor Widgets - Organized Structure
 * 
 * Brand-compliant styles for custom Slack Elementor widgets
 * Organized into logical, maintainable modules
 */

/* Base styles */

/**
 * Base Widget Styles
 *
 * Common styles for all Slack Elementor widgets
 * Brand-compliant base styling with semantic tokens
 */

/* =========================
   BASE WIDGET FOUNDATION
   Core foundation styles for all Slack Elementor widgets
========================= */

.slack-elementor-widget {
  /* Base widget foundation using semantic tokens */
  position: relative;
  color: rgb(var(--color-text-primary));
}

.slack-elementor-widget * {
    /* Ensure all child elements inherit proper colors */
    border-color: inherit;
  }

/* Widget container structure */

.slack-elementor-widget .widget-container {
  width: 100%;
}

.slack-elementor-widget .widget-content > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

/* Card widget variant - extends base widget */

.slack-elementor-widget.slack-card-widget {
  border-radius: 0.5rem;
  --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);
    background-color: rgb(var(--color-surface-primary));
    border: 1px solid rgb(var(--color-border-primary));
}

/* =========================
     BRAND COLOR SCHEME VARIANTS
     Dynamic theming based on widget settings with semantic color classes
  ========================= */

/* Primary brand scheme (Slack Purple) */

.slack-elementor-widget.brand-primary {
    background-color: rgb(var(--color-brand-primary));
    color: rgb(var(--color-text-inverse));
    border-color: rgba(var(--color-brand-primary), 0.3);
  }

.slack-elementor-widget.brand-primary a {
      color: rgb(var(--color-text-inverse));
      text-decoration: underline;
    }

.slack-elementor-widget.brand-primary a:hover {
        color: rgba(var(--color-text-inverse), 0.8);
      }

/* Secondary brand scheme (Bright Purple) */

.slack-elementor-widget.brand-secondary {
    background-color: rgb(var(--color-brand-secondary));
    color: rgb(var(--color-text-inverse));
    border-color: rgba(var(--color-brand-secondary), 0.3);
  }

.slack-elementor-widget.brand-secondary a {
      color: rgb(var(--color-text-inverse));
    }

.slack-elementor-widget.brand-secondary a:hover {
        color: rgba(var(--color-text-inverse), 0.8);
      }

/* Accent scheme (Slack Blue) */

.slack-elementor-widget.brand-accent {
    background-color: rgb(var(--color-brand-accent));
    color: rgb(var(--color-text-inverse));
    border-color: rgba(var(--color-brand-accent), 0.3);
  }

.slack-elementor-widget.brand-accent a {
      color: rgb(var(--color-text-inverse));
    }

.slack-elementor-widget.brand-accent a:hover {
        color: rgba(var(--color-text-inverse), 0.8);
      }

/* Surface scheme variants */

.slack-elementor-widget.brand-surface {
    border-color: rgb(var(--color-border-secondary));
  }

/* =========================
     THEME MODE OVERRIDES
     Light/Dark theme specific adjustments
  ========================= */

.slack-elementor-widget.theme-light {
    background-color: rgb(var(--color-surface-primary));
    color: rgb(var(--color-text-primary));
    border-color: rgb(var(--color-border-primary));
  }

.slack-elementor-widget.theme-dark {
    background-color: rgb(var(--color-surface-secondary));
    color: rgb(var(--color-text-primary));
    border-color: rgb(var(--color-border-primary));
  }

/* Brand font integration with proper fallbacks */

.slack-elementor-widget.font-salesforceSans {
    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

.slack-elementor-widget.font-avantGarde {
    font-family: "Avant Garde", "Avenir", -apple-system, BlinkMacSystemFont, sans-serif;
  }

.slack-elementor-widget.font-avantGarde h1,
    .slack-elementor-widget.font-avantGarde h2,
    .slack-elementor-widget.font-avantGarde h3,
    .slack-elementor-widget.font-avantGarde h4,
    .slack-elementor-widget.font-avantGarde h5,
    .slack-elementor-widget.font-avantGarde h6 {
      font-family: inherit;
      font-weight: 700;
    }

/* =========================
   SEMANTIC COLOR UTILITY CLASSES
   Brand-specific color utilities for consistent theming
========================= */

/* Tool/Primary Brand Colors */

.brand-tool-border,
.brand-primary-border {
  border-color: #ba01ff !important;
}

.brand-tool-bg,
.brand-primary-bg {
  background-color: #ba01ff;
}

.brand-tool-hover:hover,
.brand-primary-hover:hover {
  border-color: #9900cc;
  box-shadow: 0px 8px 25px 0px rgba(186, 1, 255, 0.25);
}

/* Workshop Colors */

.brand-workshop-border {
  border-color: #ff6900 !important;
}

.brand-workshop-bg {
  background-color: #ff6900;
}

.brand-workshop-text {
  color: #ff6900;
}

.brand-workshop-dark-text {
  color: #cc5500;
}

.brand-workshop-hover:hover {
  border-color: #cc5500;
  box-shadow: 0px 8px 25px 0px rgba(255, 105, 0, 0.25);
}

.brand-workshop-badge-bg {
  background-color: rgba(255, 105, 0, 0.1);
}

.brand-workshop-badge-border {
  border-color: rgba(255, 105, 0, 0.2);
}

/* Resource Colors */

.brand-resource-border {
  border-color: #1264a3 !important;
}

.brand-resource-bg {
  background-color: #1264a3;
}

.brand-resource-text {
  color: #1264a3;
}

.brand-resource-dark-text {
  color: #0f4c75;
}

.brand-resource-hover:hover {
  border-color: #0f4c75;
  box-shadow: 0px 8px 25px 0px rgba(18, 100, 163, 0.25);
}

.brand-resource-badge-bg {
  background-color: rgba(18, 100, 163, 0.1);
}

.brand-resource-badge-border {
  border-color: rgba(18, 100, 163, 0.2);
}

/* Event Colors */

.brand-event-border {
  border-color: #007a5a !important;
}

.brand-event-bg {
  background-color: #007a5a;
}

.brand-event-text {
  color: #007a5a;
}

.brand-event-dark-text {
  color: #005a42;
}

.brand-event-hover:hover {
  border-color: #005a42;
  box-shadow: 0px 8px 25px 0px rgba(0, 122, 90, 0.25);
}

.brand-event-badge-bg {
  background-color: rgba(0, 122, 90, 0.1);
}

.brand-event-badge-border {
  border-color: rgba(0, 122, 90, 0.2);
}

/* General utility classes for consistent theming */

.brand-shadow-sm {
  box-shadow: 0px 3.93px 20px 0px rgba(0, 0, 0, 0.14);
}

.brand-shadow-md {
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
}

.brand-shadow-lg {
  box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.15);
}

.brand-rounded {
  border-radius: 12px;
}

/* =========================
   BUTTON SYSTEM FOUNDATION
   Complete button system with brand compliance and all variants
========================= */

/* Base button styles - applies to all button types */

.slack-elementor-widget button,
  .slack-elementor-widget .elementor-button,
  .slack-elementor-widget .slack-button,
  .slack-elementor-widget .slack-button-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-weight: 600;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.slack-elementor-widget button:focus,
  .slack-elementor-widget .elementor-button:focus,
  .slack-elementor-widget .slack-button:focus,
  .slack-elementor-widget .slack-button-widget: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-offset-width: 2px;
}

.slack-elementor-widget button,
  .slack-elementor-widget .elementor-button,
  .slack-elementor-widget .slack-button,
  .slack-elementor-widget .slack-button-widget {
    text-decoration: none;
    position: relative;
    cursor: pointer;
  }

.slack-elementor-widget button:hover, .slack-elementor-widget .elementor-button:hover, .slack-elementor-widget .slack-button:hover, .slack-elementor-widget .slack-button-widget:hover {
      text-decoration: none;
    }

.slack-elementor-widget button:focus, .slack-elementor-widget .elementor-button:focus, .slack-elementor-widget .slack-button:focus, .slack-elementor-widget .slack-button-widget: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);
  --tw-ring-offset-width: 2px;
      ring-color: rgb(var(--color-brand-accent));
}

.slack-elementor-widget button:active, .slack-elementor-widget .elementor-button:active, .slack-elementor-widget .slack-button:active, .slack-elementor-widget .slack-button-widget:active {
  opacity: 0.9;
}

/* =========================
   BUTTON SIZING SYSTEM
   Unified sizing system for all button types
========================= */

/* Small buttons */

.slack-button-small,
.elementor-button.elementor-size-sm {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 36px;
}

/* Medium buttons (default) */

.slack-button-medium,
button,
.elementor-button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  min-height: 44px;
}

/* Large buttons */

.slack-button-large,
.elementor-button.elementor-size-lg {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  min-height: 52px;
}

/* =========================
   BUTTON STYLE VARIANTS
   Complete button style system with all variants

   AVAILABLE BUTTON CLASSES:

   Standard Buttons (automatically adapt to dark mode):
   - .slack-button-solid/.slack-button-primary - Purple background, white text
   - .slack-button-outline/.slack-button-secondary - Transparent background, purple border/text

   USAGE EXAMPLES:

   Standard usage:
   <button class="slack-button-solid">Primary Action</button>
   <button class="slack-button-outline">Secondary Action</button>

   NOTE: Widget-specific button variants (inverse buttons, dark mode controls)
   are defined in _button.css for the Elementor button widget.

   All buttons automatically include:
   - Hover effects (transform, shadow)
   - Focus states (accessibility)
   - Disabled states
   - Responsive sizing
   - Icon support
========================= */

/* Solid/Primary Button Variant - Using semantic tokens */

.slack-button-solid,
.slack-button-primary,
.slack-elementor-widget button,
.slack-elementor-widget .elementor-button:not(.elementor-button-secondary) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-btn-solid-fill) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-solid-fill) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-solid-text) / var(--tw-text-opacity));
}

.slack-button-solid span.slack-button-text, .slack-button-primary span.slack-button-text, .slack-elementor-widget button span.slack-button-text, .slack-elementor-widget .elementor-button:not(.elementor-button-secondary) span.slack-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-solid-text) / var(--tw-text-opacity));
}

.slack-button-solid .slack-button-icon, .slack-button-primary .slack-button-icon, .slack-elementor-widget button .slack-button-icon, .slack-elementor-widget .elementor-button:not(.elementor-button-secondary) .slack-button-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-solid-text) / var(--tw-text-opacity));
}

.slack-button-solid:hover, .slack-button-primary:hover, .slack-elementor-widget button:hover, .slack-elementor-widget .elementor-button:not(.elementor-button-secondary):hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-btn-solid-fill-hover) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-solid-fill-hover) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-solid-text-hover) / var(--tw-text-opacity));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-brand-primary), 0.3);
}

.slack-button-solid:hover span.slack-button-text, .slack-button-primary:hover span.slack-button-text, .slack-elementor-widget button:hover span.slack-button-text, .slack-elementor-widget .elementor-button:not(.elementor-button-secondary):hover span.slack-button-text {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-solid-text-hover) / var(--tw-text-opacity));
}

.slack-button-solid:hover .slack-button-icon, .slack-button-primary:hover .slack-button-icon, .slack-elementor-widget button:hover .slack-button-icon, .slack-elementor-widget .elementor-button:not(.elementor-button-secondary):hover .slack-button-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-solid-text-hover) / var(--tw-text-opacity));
}

.slack-button-solid:disabled,
  .slack-button-solid[disabled],
  .slack-button-primary:disabled,
  .slack-button-primary[disabled],
  .slack-elementor-widget button:disabled,
  .slack-elementor-widget button[disabled],
  .slack-elementor-widget .elementor-button:not(.elementor-button-secondary):disabled,
  .slack-elementor-widget .elementor-button:not(.elementor-button-secondary)[disabled] {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-muted);
    border-color: var(--color-surface-tertiary);
    cursor: not-allowed;
  }

.slack-button-solid:focus, .slack-button-primary:focus, .slack-elementor-widget button:focus, .slack-elementor-widget .elementor-button:not(.elementor-button-secondary):focus {
    box-shadow: 0 0 0 3px rgba(var(--color-brand-primary), 0.3);
  }

/* Outline/Secondary Button Variant - Using semantic tokens */

.slack-button-outline,
.slack-button-secondary,
.slack-elementor-widget .elementor-button.elementor-button-secondary {
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-btn-outline-border) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-btn-outline-text) / var(--tw-bg-opacity));
  background-color: transparent;
}

.slack-button-outline span, .slack-button-secondary span, .slack-elementor-widget .elementor-button.elementor-button-secondary span {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-outline-text) / var(--tw-text-opacity));
}

.slack-button-outline .slack-button-icon, .slack-button-secondary .slack-button-icon, .slack-elementor-widget .elementor-button.elementor-button-secondary .slack-button-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-outline-text) / var(--tw-text-opacity));
}

.slack-button-outline:hover, .slack-button-secondary:hover, .slack-elementor-widget .elementor-button.elementor-button-secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-btn-outline-border-hover) / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-outline-text-hover) / var(--tw-text-opacity));
    transform: translateY(-1px);
}

.slack-button-outline:hover span, .slack-button-secondary:hover span, .slack-elementor-widget .elementor-button.elementor-button-secondary:hover span {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-outline-text-hover) / var(--tw-text-opacity));
}

.slack-button-outline:hover .slack-button-icon, .slack-button-secondary:hover .slack-button-icon, .slack-elementor-widget .elementor-button.elementor-button-secondary:hover .slack-button-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--color-btn-outline-text-hover) / var(--tw-text-opacity));
}

.slack-button-outline:disabled,
  .slack-button-outline[disabled],
  .slack-button-secondary:disabled,
  .slack-button-secondary[disabled],
  .slack-elementor-widget .elementor-button.elementor-button-secondary:disabled,
  .slack-elementor-widget .elementor-button.elementor-button-secondary[disabled] {
    background-color: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-text-muted);
    cursor: not-allowed;
  }

.slack-button-outline:focus, .slack-button-secondary:focus, .slack-elementor-widget .elementor-button.elementor-button-secondary:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-brand-primary), 0.3);
  }

/* =========================
   BUTTON ICON SYSTEM
   Icon styling for buttons
========================= */

.slack-button-icon {
  display: inline-block;
  font-size: 0.875em;
}

.slack-button-icon.icon-before {
  margin-right: 0.5rem;
}

.slack-button-icon.icon-after {
  margin-left: 0.5rem;
}

.slack-button-icon.external-link-auto {
  display: inline-block;
  width: 0.75rem;
    height: 12.408px;
    fill: currentColor;
}

/* =========================
   BUTTON STATES & UTILITIES
   Loading states, alignment, and responsive behavior
========================= */

/* Loading state */

.slack-button-loading {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header nav [x-show] > .slack-button-loading.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-button-loading.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-button-loading.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-button-loading {
  background-color: inherit;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.slack-button[data-loading="true"] .slack-button-text,
  .slack-button[data-loading="true"] .slack-button-icon {
    opacity: 0;
  }

.slack-button[data-loading="true"] .slack-button-loading {
    opacity: 1;
    visibility: visible;
  }

/* Button alignment utilities */

.slack-button-align-left .slack-button-wrapper {
  text-align: left;
}

.slack-button-align-center .slack-button-wrapper {
  text-align: center;
}

.slack-button-align-right .slack-button-wrapper {
  text-align: right;
}

.slack-button-align-justify .slack-button-wrapper {
    text-align: justify;
  }

.slack-button-align-justify .slack-button {
    width: 100%;
  }

/* Full width mobile buttons */

.slack-button-full-width-mobile .slack-button {
  width: 100%;
}

@media (min-width: 640px) {

  .slack-button-full-width-mobile .slack-button {
    width: auto;
  }
}

/* =========================
   WIDGET TYPOGRAPHY SYSTEM
   Typography utilities for widget content
========================= */

/* Code styling */

.slack-elementor-widget code {
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
    background-color: rgba(var(--color-code-inline-bg), 0.2);
    color: rgb(var(--color-code-text));
    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
}

.slack-elementor-widget pre {
  overflow-x: auto;
  border-radius: 0.5rem;
  padding: 1rem;
    background-color: rgb(var(--color-code-bg));
    border: 1px solid rgb(var(--color-border-primary));
}

.slack-elementor-widget pre code {
      background: none;
      padding: 0;
      border-radius: 0;
    }

/* List styling */

.slack-elementor-widget ul,
  .slack-elementor-widget ol {
  margin-bottom: 1rem;
}

.slack-elementor-widget ul > :not([hidden]) ~ :not([hidden]),
  .slack-elementor-widget ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.slack-elementor-widget ul,
  .slack-elementor-widget ol {
  padding-left: 1.5rem;
}

.slack-elementor-widget ul {
    list-style-type: disc;
  }

.slack-elementor-widget ol {
    list-style-type: decimal;
  }

.slack-elementor-widget li {
    color: rgb(var(--color-text-primary));
    line-height: 1.6;
  }

/* =========================
   RESPONSIVE DESIGN
   Mobile-first approach with consistent breakpoints
========================= */

@media (max-width: 639.98px) {
  .slack-elementor-widget {
    border-radius: 0.5rem;
  }

    .slack-elementor-widget button,
    .slack-elementor-widget .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 640px) and (max-width: 1279.98px) {
  .slack-elementor-widget {
    border-radius: 0.75rem;
  }
}

@media (min-width: 1025px) {
  .slack-elementor-widget {
    border-radius: 1rem;
  }
}

/* =========================
   ACCESSIBILITY FEATURES
   Comprehensive accessibility support
========================= */

.slack-elementor-widget *:focus {
    outline: 2px solid rgb(var(--color-brand-accent));
    outline-offset: 2px;
  }

.slack-elementor-widget button:focus,
  .slack-elementor-widget .elementor-button:focus,
  .slack-elementor-widget .slack-button:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-brand-accent), 0.5);
    outline: none;
  }

/* Screen reader only content */

.sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.sr-only {
  clip: rect(0, 0, 0, 0);
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .slack-elementor-widget {
    border-width: 2px;
  }

    .slack-elementor-widget button,
    .slack-elementor-widget .elementor-button,
    .slack-elementor-widget .slack-button {
      border-width: 3px;
    }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
    .slack-elementor-widget *,
    .slack-elementor-widget button,
    .slack-elementor-widget .elementor-button,
    .slack-elementor-widget .slack-button {
      transition: none;
      animation: none;
    }

  .slack-button:hover {
    transform: none;
  }

  .scroll-indicator-arrow {
    animation: none;
  }

  .slack-button-loading {
    transition: none;
  }
}

/* =========================
   PRINT STYLES
   Optimized printing across all widgets
========================= */

@media print {
  .slack-elementor-widget {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    transform: none !important;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

    .slack-elementor-widget button,
    .slack-elementor-widget .elementor-button,
    .slack-elementor-widget .slack-button {
      background: white !important;
      color: black !important;
      border: 2px solid black !important;
      box-shadow: none !important;
      transform: none !important;
    }

  .slack-button-loading {
    display: none !important;
  }
}

/* =========================
   ELEMENTOR EDITOR STYLES
   Styles for the Elementor editor interface
========================= */

.elementor-editor-active .slack-elementor-widget {
    position: relative;
  }

.elementor-editor-active .slack-elementor-widget::before {
      content: "Slack Widget";
      position: absolute;
      top: -1.5rem;
      left: 0;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      --tw-bg-opacity: 1;
      background-color: rgb(31 41 55 / var(--tw-bg-opacity));
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: 600;
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
      z-index: 10;
    }

/**
 * Card Widget Base Styles
 *
 * Foundational card widget system providing shared styles for all card types
 * Contains only truly shared functionality across all card variants
 * Inherits from: _base.css (global widget foundation)
 */

/* =========================
   CORE CARD FOUNDATION
   Base card structure and layout
========================= */

/* Support both structures: wrapper div OR combined classes on article */

.slack-card-widget .slack-card,
.slack-card-widget.slack-card {
  position: relative;
  border-radius: 0.5rem;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card,
.slack-card-widget.slack-card {
    border-radius: 0.75rem;
  }
}

.slack-card-widget .slack-card,
.slack-card-widget.slack-card {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 1rem;
  padding: 1.5rem;
  overflow: hidden;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
}

/* Base overlay link positioning - always active for full card clickability */

.slack-card-widget .slack-card .slack-card-overlay-link, .slack-card-widget.slack-card .slack-card-overlay-link {
  position: absolute;
  inset: 0px;
  z-index: 30;
}

header nav [x-show] > .slack-card-widget .slack-card .slack-card-overlay-link.w-0.h-0,header nav [x-show] >  .slack-card-widget.slack-card .slack-card-overlay-link.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-card-widget .slack-card .slack-card-overlay-link.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-card-widget .slack-card .slack-card-overlay-link.w-0.h-0,.dark header nav [x-show] >  .slack-card-widget.slack-card .slack-card-overlay-link.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] >  .slack-card-widget.slack-card .slack-card-overlay-link.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-card-widget .slack-card .slack-card-overlay-link, .slack-card-widget.slack-card .slack-card-overlay-link {
    text-decoration: none;
  }

.slack-card-widget .slack-card .slack-card-overlay-link:focus, .slack-card-widget.slack-card .slack-card-overlay-link: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-accent-300) / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
}

.slack-card-widget .slack-card:hover, .slack-card-widget.slack-card:hover {
  --tw-translate-y: -0.25rem;
  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 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);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.slack-card-widget .slack-card.slack-card-hover:hover, .slack-card-widget.slack-card.slack-card-hover:hover {
  --tw-translate-y: -0.25rem;
  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 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);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.slack-card-widget .slack-card.slack-card-hover:hover .slack-card-image, .slack-card-widget.slack-card.slack-card-hover:hover .slack-card-image {
      /* @apply scale-105; */
    }

/* Only show pointer cursor on cards with clickable overlay enabled */

.slack-card-widget .slack-card.slack-card-clickable, .slack-card-widget.slack-card.slack-card-clickable {
    cursor: pointer;
  }

/* Card Content Layout - Standardized content structure */

.slack-card-widget .slack-card .slack-card-header, .slack-card-widget.slack-card .slack-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.slack-card-widget .slack-card .slack-card-body, .slack-card-widget.slack-card .slack-card-body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
}

.slack-card-widget .slack-card .slack-card-footer, .slack-card-widget.slack-card .slack-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================
   CARD IMAGE SYSTEM
   Shared image styling and aspect ratios
========================= */

.slack-card-widget .slack-card .slack-card-image-wrapper, .slack-card-widget.slack-card .slack-card-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  background-color: var(--color-surface-secondary);
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0px;
}

.slack-card-widget .slack-card .slack-card-image-wrapper.slack-card-image-16-9, .slack-card-widget.slack-card .slack-card-image-wrapper.slack-card-image-16-9 {
  aspect-ratio: 16 / 9;
}

.slack-card-widget .slack-card .slack-card-image-wrapper.slack-card-image-4-3, .slack-card-widget.slack-card .slack-card-image-wrapper.slack-card-image-4-3 {
      aspect-ratio: 4/3;
    }

.slack-card-widget .slack-card .slack-card-image-wrapper.slack-card-image-1-1, .slack-card-widget.slack-card .slack-card-image-wrapper.slack-card-image-1-1 {
  aspect-ratio: 1 / 1;
}

.slack-card-widget .slack-card .slack-card-image-wrapper.slack-card-image-auto, .slack-card-widget.slack-card .slack-card-image-wrapper.slack-card-image-auto {
  height: auto;
}

.slack-card-widget .slack-card .slack-card-image, .slack-card-widget.slack-card .slack-card-image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16 / 9;
  height: 11rem;
  width: 100%;
  border-radius: 0px;
    transition: transform 0.3s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slack-card-widget .slack-card .slack-card-content, .slack-card-widget.slack-card .slack-card-content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  z-index: 20;
}

.slack-card-widget .slack-card .slack-card-icon, .slack-card-widget.slack-card .slack-card-icon {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-850) / var(--tw-text-opacity));
}

.slack-card-widget .slack-card.slack-card-narrow .slack-card-content, .slack-card-widget .slack-card.slack-card-compact .slack-card-content, .slack-card-widget.slack-card.slack-card-narrow .slack-card-content, .slack-card-widget.slack-card.slack-card-compact .slack-card-content {
  padding: 0.75rem;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-narrow .slack-card-content, .slack-card-widget .slack-card.slack-card-compact .slack-card-content, .slack-card-widget.slack-card.slack-card-narrow .slack-card-content, .slack-card-widget.slack-card.slack-card-compact .slack-card-content {
    padding: 1rem;
  }
}

.slack-card-widget .slack-card.slack-card-default,
  .slack-card-widget .slack-card.slack-card-standard,
  .slack-card-widget.slack-card.slack-card-default,
  .slack-card-widget.slack-card.slack-card-standard {
    aspect-ratio: 31/33;
  }

.slack-card-widget .slack-card.slack-card-default .slack-card-content, .slack-card-widget .slack-card.slack-card-standard .slack-card-content, .slack-card-widget.slack-card.slack-card-default .slack-card-content, .slack-card-widget.slack-card.slack-card-standard .slack-card-content {
  width: 100%;
  padding: 0px;
}

.slack-card-widget .slack-card.slack-card-big .slack-card-content, .slack-card-widget .slack-card.slack-card-large .slack-card-content, .slack-card-widget.slack-card.slack-card-big .slack-card-content, .slack-card-widget.slack-card.slack-card-large .slack-card-content {
  padding: 1.5rem;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-big .slack-card-content, .slack-card-widget .slack-card.slack-card-large .slack-card-content, .slack-card-widget.slack-card.slack-card-big .slack-card-content, .slack-card-widget.slack-card.slack-card-large .slack-card-content {
    padding: 2rem;
  }
}

.slack-card-widget .slack-card.slack-card-horizontal, .slack-card-widget.slack-card.slack-card-horizontal {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-horizontal, .slack-card-widget.slack-card.slack-card-horizontal {
    flex-direction: row;
  }
}

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-image-wrapper, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-image-wrapper {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0px;
  overflow: hidden;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-horizontal .slack-card-image-wrapper, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-image-wrapper {
    width: 40%;
  }
}

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-image, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: block;
      max-width: 100%;
      max-height: 100%;
}

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-content, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 0px;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-horizontal .slack-card-content, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-content {
    gap: 1.5rem;
  }
}

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-title, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-title {
  font-size: 1.125rem !important;
  line-height: 1.75rem;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-horizontal .slack-card-title, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-title, .slack-card-widget.slack-card.slack-card-horizontal .slack-card-title {
      flex-grow: 1;
    }

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-category,
    .slack-card-widget .slack-card.slack-card-horizontal .slack-card-metadata,
    .slack-card-widget.slack-card.slack-card-horizontal .slack-card-category,
    .slack-card-widget.slack-card.slack-card-horizontal .slack-card-metadata {
  flex-shrink: 0;
}

.slack-card-widget .slack-card.slack-card-horizontal .slack-card-link,
    .slack-card-widget .slack-card.slack-card-horizontal .slack-card-footer,
    .slack-card-widget.slack-card.slack-card-horizontal .slack-card-link,
    .slack-card-widget.slack-card.slack-card-horizontal .slack-card-footer {
  margin-top: auto;
  flex-shrink: 0;
}

.slack-card-widget .slack-card.slack-card-compact .slack-card-title, .slack-card-widget.slack-card.slack-card-compact .slack-card-title {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-compact .slack-card-title, .slack-card-widget.slack-card.slack-card-compact .slack-card-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.slack-card-widget .slack-card.slack-card-standard .slack-card-title, .slack-card-widget.slack-card.slack-card-standard .slack-card-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-standard .slack-card-title, .slack-card-widget.slack-card.slack-card-standard .slack-card-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.slack-card-widget .slack-card.slack-card-large .slack-card-title, .slack-card-widget.slack-card.slack-card-large .slack-card-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {

  .slack-card-widget .slack-card.slack-card-large .slack-card-title, .slack-card-widget.slack-card.slack-card-large .slack-card-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

/* =========================
   CARD TYPOGRAPHY SYSTEM
   Enhanced typography styles for all card types
   Provides consistent, standardized text styling across all card widgets
========================= */

/* Enhanced Card Title System - Standardized title styling with text clamping */

.slack-card-title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

header nav [x-show] a.slack-card-title.font-bold{
  color: var(--color-link);
}

.dark header nav [x-show] a.slack-card-title.font-bold,
:root[data-theme="dark"] header nav [x-show] a.slack-card-title.font-bold{
  color: var(--color-link);
}

.slack-elementor-widget.slack-card-title {
    font-family: "Avant Garde", "Avenir", -apple-system, BlinkMacSystemFont, sans-serif;
  }

.slack-elementor-widget.slack-card-title h1,
    .slack-elementor-widget.slack-card-title h2,
    .slack-elementor-widget.slack-card-title h3,
    .slack-elementor-widget.slack-card-title h4,
    .slack-elementor-widget.slack-card-title h5,
    .slack-elementor-widget.slack-card-title h6 {
      font-family: inherit;
      font-weight: 700;
    }

.slack-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Legacy size variants - maintained for backward compatibility */

.slack-card-title.slack-card-title-compact {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 640px) {

  .slack-card-title.slack-card-title-compact {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.slack-card-title.slack-card-title-standard {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 640px) {

  .slack-card-title.slack-card-title-standard {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.slack-card-title.slack-card-title-large {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {

  .slack-card-title.slack-card-title-large {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* Enhanced Card Description System - Standardized with precise line clamping */

.slack-card-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-card-description {
    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

.slack-card-description {
  margin-bottom: 1rem;
  max-height: 7rem;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.slack-card-description p:last-child {
  margin-bottom: 0px;
}

.slack-card-description a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-850) / var(--tw-text-opacity));
  text-decoration-line: none;
}

.slack-card-description a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-800) / var(--tw-text-opacity));
}

header nav [x-show] a.slack-card-description a:hover{
  color: var(--color-link);
}

header nav [x-show] a.slack-card-description a:hover:hover{
  color: var(--color-link-hover);
}

.dark header nav [x-show] a.slack-card-description a:hover,
:root[data-theme="dark"] header nav [x-show] a.slack-card-description a:hover{
  color: var(--color-link);
}

.dark header nav [x-show] a.slack-card-description a:hover:hover,
:root[data-theme="dark"] header nav [x-show] a.slack-card-description a:hover:hover{
  color: var(--color-link-hover);
}

.slack-card-description a:hover {
      text-decoration: underline;
    }

/* Enhanced Card Button Text - Standardized button typography */

.slack-card-button-text,
.slack-button-text {
  font-size: 1rem;
  line-height: 1rem;
  text-align: center;
  font-weight: 600;
}

.slack-elementor-widget.slack-card-button-text,.slack-elementor-widget
.slack-button-text {
    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

.slack-card-button-text,
.slack-button-text {
  color: white;
  white-space: nowrap;
}

/* Category and link text styling */

.slack-card-category {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.slack-elementor-widget.slack-card-category {
    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

.slack-card-link-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5rem;
}

header nav [x-show] a.slack-card-link-text.font-bold{
  color: var(--color-link);
}

.dark header nav [x-show] a.slack-card-link-text.font-bold,
:root[data-theme="dark"] header nav [x-show] a.slack-card-link-text.font-bold{
  color: var(--color-link);
}

.slack-elementor-widget.slack-card-link-text {
    font-family: "Avant Garde", "Avenir", -apple-system, BlinkMacSystemFont, sans-serif;
  }

.slack-elementor-widget.slack-card-link-text h1,
    .slack-elementor-widget.slack-card-link-text h2,
    .slack-elementor-widget.slack-card-link-text h3,
    .slack-elementor-widget.slack-card-link-text h4,
    .slack-elementor-widget.slack-card-link-text h5,
    .slack-elementor-widget.slack-card-link-text h6 {
      font-family: inherit;
      font-weight: 700;
    }

/* Typography responsive adjustments */

@media (max-width: 767.98px) {
  .slack-card-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .slack-card-description {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  /* Mobile Layout Adjustments - Enhanced responsive card adjustments */
  .slack-card {
    gap: 0.75rem;
    padding: 1rem;
  }
    .slack-card-workshop .slack-card-image, .slack-card-resource .slack-card-image, .slack-card-event .slack-card-image, .slack-card-blog .slack-card-image {
    height: 9rem;
  }
    .slack-card-tool .slack-card-image {
    height: 8rem;
  }
}

/* =========================
   CARD METADATA SYSTEM
   Shared metadata styling
========================= */

.slack-card-metadata {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-secondary) / var(--tw-text-opacity));
}

.slack-card-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
}

.slack-card-meta-item:not(:last-child)::after {
    content: "•";
    margin-left: 0.75rem;
    opacity: 0.5;
  }

.slack-card-meta-date {
  font-weight: 500;
}

.slack-card-meta-author {
  font-weight: 400;
}

.slack-card-meta-difficulty {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.slack-card-meta-duration {
  font-weight: 500;
}

.slack-card-meta-location {
  font-weight: 400;
}

/* =========================
   CARD BADGE SYSTEM
   Shared badge styles
========================= */

.slack-card-badge {
  margin-bottom: 0.5rem;
}

.slack-card-type-badge {
  display: inline-block;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-width: 1px;
  border-color: rgb(var(--color-primary-850) / 0.2);
  background-color: rgb(var(--color-primary-850) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-850) / var(--tw-text-opacity));
}

/* =========================
   CARD BUTTON SYSTEM
   Shared button styles for card actions
========================= */

.slack-card-action {
  margin-top: 1rem;
}

.slack-card-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 640px) {

  .slack-card-button {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.slack-card-button {
  text-decoration-line: none;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-accent-300) / var(--tw-ring-opacity));
}

.slack-card-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-offset-width: 2px;
}

.slack-card-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-850) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
}

/* @apply w-full sm:w-auto justify-center sm:justify-start; */

.slack-card-button:hover {
  --tw-translate-y: -0.125rem;
  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-bg-opacity: 1;
  background-color: rgb(var(--color-primary-800) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-inverse) / var(--tw-text-opacity));
    text-decoration: none;
}

.slack-card-button.slack-btn-text {
  border-style: none;
  background-color: transparent;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-850) / var(--tw-text-opacity));
    text-decoration: underline;
    text-decoration-color: rgb(var(--color-primary-850) / 50%);
}

.slack-card-button.slack-btn-text:hover {
  transform: none;
  background-color: transparent;
      text-decoration-color: rgb(var(--color-primary-850) / 1);
}

.slack-card-button.slack-btn-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-primary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  background-color: var(--color-surface-secondary);
}

.slack-card-button.slack-btn-secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-850) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity));
}

.slack-card-external-icon {
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0.75;
}

/* =========================
   CARD LINK SYSTEM
   Shared link styles
========================= */

.slack-card-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.slack-card-arrow {
  margin-left: auto;
  height: 8.6px;
  width: 18px;
}

/* =========================
   CARD STYLE PRESETS
   Base style variations
========================= */

/* Support both structures for style presets */

.slack-card-widget .slack-card.slack-card-default, .slack-card-widget.slack-card.slack-card-default {
    /* Uses base card styles above */
  }

.slack-card-widget .slack-card.slack-card-highlight, .slack-card-widget.slack-card.slack-card-highlight {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-800) / var(--tw-border-opacity));
  --tw-shadow: 0 2px 8px;
  --tw-shadow-colored: 0 2px 8px 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-shadow-color: rgb(var(--color-primary-800) / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.slack-card-widget .slack-card.slack-card-highlight:hover, .slack-card-widget.slack-card.slack-card-highlight:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-primary-850) / var(--tw-border-opacity));
  --tw-shadow: 0 8px 25px;
  --tw-shadow-colored: 0 8px 25px 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-shadow-color: rgb(var(--color-primary-850) / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon, .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-800) / var(--tw-text-opacity));
}

header nav [x-show] a.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon,header nav [x-show] a .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon{
  color: var(--color-link);
}

header nav [x-show] a.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon:hover,header nav [x-show] a .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon:hover{
  color: var(--color-link-hover);
}

.dark header nav [x-show] a.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon,
:root[data-theme="dark"] header nav [x-show] a.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon,.dark header nav [x-show] a .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon,
:root[data-theme="dark"] header nav [x-show] a .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon{
  color: var(--color-link);
}

.dark header nav [x-show] a.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon:hover,
:root[data-theme="dark"] header nav [x-show] a.slack-card-widget .slack-card.slack-card-highlight .slack-card-icon:hover,.dark header nav [x-show] a .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon:hover,
:root[data-theme="dark"] header nav [x-show] a .slack-card-widget.slack-card.slack-card-highlight .slack-card-icon:hover{
  color: var(--color-link-hover);
}

.slack-card-widget .slack-card.slack-card-loop, .slack-card-widget.slack-card.slack-card-loop {
    position: relative;
  }

.slack-card-widget .slack-card.slack-card-loop::after, .slack-card-widget.slack-card.slack-card-loop::after {
      content: "";
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      height: 0.5rem;
      width: 0.5rem;
      border-radius: 9999px;
      --tw-bg-opacity: 1;
      background-color: rgb(var(--color-accent-300) / var(--tw-bg-opacity));
      opacity: 0.6;
    }

header nav [x-show] > .slack-card-widget .slack-card.slack-card-loop.w-0.h-0::after,header nav [x-show] >  .slack-card-widget.slack-card.slack-card-loop.w-0.h-0::after{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-card-widget .slack-card.slack-card-loop.w-0.h-0::after,
:root[data-theme="dark"] header nav [x-show] > .slack-card-widget .slack-card.slack-card-loop.w-0.h-0::after,.dark header nav [x-show] >  .slack-card-widget.slack-card.slack-card-loop.w-0.h-0::after,
:root[data-theme="dark"] header nav [x-show] >  .slack-card-widget.slack-card.slack-card-loop.w-0.h-0::after{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-card-widget .slack-card.slack-card-advanced .slack-card-metadata, .slack-card-widget.slack-card.slack-card-advanced .slack-card-metadata {
  margin-top: 1rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-primary) / var(--tw-border-opacity));
  padding-top: 0.75rem;
}

/* =========================
   CARD ACCESSIBILITY
   Enhanced accessibility and focus management
========================= */

/* Support both structures for accessibility */

.slack-card-widget .slack-card:focus-within, .slack-card-widget.slack-card:focus-within {
    outline: 2px solid rgb(var(--color-brand-accent));
    outline-offset: 2px;
  }

.slack-card-widget .slack-card .sr-only, .slack-card-widget.slack-card .sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .slack-card-widget .slack-card .sr-only.w-0.h-0,header nav [x-show] >  .slack-card-widget.slack-card .sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-card-widget .slack-card .sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-card-widget .slack-card .sr-only.w-0.h-0,.dark header nav [x-show] >  .slack-card-widget.slack-card .sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] >  .slack-card-widget.slack-card .sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-card-widget .slack-card .sr-only, .slack-card-widget.slack-card .sr-only {
    clip: rect(0, 0, 0, 0);
  }

.slack-card-button:focus, .slack-card-overlay-link: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-accent-300) / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
}

/* Focus Management - Standardized focus states for all card types */

.slack-card-widget .slack-card:focus-within,
.slack-card-widget.slack-card:focus-within {
  outline: 2px solid rgb(var(--color-brand-accent));
  outline-offset: 2px;
}

/* =========================
   CARD DARK MODE
   Dark theme support
========================= */

.dark .slack-card-widget .slack-card,
  .dark .slack-card-widget.slack-card {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-border-secondary) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-secondary) / var(--tw-bg-opacity));
  background-color: var(--color-surface-secondary);
}

.dark .slack-card-image-wrapper {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity));
}

/* Card type styles */

/**
 * Card Blog & Developer Story Styles
 *
 * Figma Design System Implementation using semantic tokens
 * Matches exact specifications from Figma component
 * Inherits from .slack-elementor-widget and .slack-card-widget bases
 */

/* =========================
   BLOG & DEVELOPER STORY CARDS
   Unique layout styles - typography handled by _card-base.css
========================= */

/* Blog and Developer Story Cards - unique layout and proportions */

.slack-elementor-widget.slack-card-widget.slack-card-blog,
.slack-elementor-widget.slack-card-widget.slack-card-developer-story {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem;
}

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-image-wrapper, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
    flex-basis: 0;
    flex-grow: 1;
    min-height: 150px;
    min-width: 1px;
    max-height: 55%;
    aspect-ratio: 16/9;
    height: auto;
}

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-image, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* Blog-specific content adjustments */

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-category, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-category {
  margin: 0px;
  flex-shrink: 0;
  text-align: left;
  line-height: 1rem;
}

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-title, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-title {
  margin: 0px;
  width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 1rem;
  line-height: 1.25rem;
    min-height: 60px;
}

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-link, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-link {
  flex-shrink: 0;
}

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-link-text, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-link-text {
  flex-shrink: 0;
    text-decoration: none;
}

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-link-text:hover, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-link-text:hover {
      text-decoration: underline;
    }

.slack-elementor-widget.slack-card-widget.slack-card-blog .slack-card-arrow, .slack-elementor-widget.slack-card-widget.slack-card-developer-story .slack-card-arrow {
  flex-shrink: 0;
}

/* Blog-specific hover effects */

.slack-elementor-widget.slack-card-widget.slack-card-blog.slack-card-hover:hover, .slack-elementor-widget.slack-card-widget.slack-card-developer-story.slack-card-hover:hover {
    box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, 0.2);
  }

/**
 * Tool Card Styles
 *
 * Manual content cards with user-selectable icons and purple accent styling
 * Used primarily on home page for tool/integration showcases
 * Inherits from .slack-elementor-widget and .slack-card-widget bases
 */

/* =========================
   TOOL CARDS
   Brand-specific styles - base styles handled by _card-base.css
========================= */

/* Tool Card - brand-specific overrides */

.slack-elementor-widget.slack-card-widget.slack-card-tool {
  aspect-ratio: 1 / 1;
  border-color: #ba01ff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  padding-top: 1.5rem;
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-title {
  margin: 0px;
  flex-shrink: 0;
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-title h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-description {
  overflow: visible !important;
  display: block !important;
  -webkit-box-orient: horizontal !important;
  -webkit-line-clamp: none !important;
  height: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-description p {
  margin: 0px;
  height: auto;
}

/* Tool-specific icon styling */

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-icon {
  margin-left: 0px;
  margin-right: 0px;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-icon svg,
    .slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-icon img {
  height: 100%;
  width: 100%;
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary-800) / var(--tw-text-opacity));
      fill: currentColor;
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-image {
  aspect-ratio: 1 / 1;
  height: 9rem;
    aspect-ratio: 1/1;
}

/* Tool-specific button styling - different from base cards */

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button {
  margin: 0px;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background-color: transparent;
  color: rgb(var(--color-text-primary));
  border-color: rgb(var(--color-text-primary));
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button:hover {
    color: rgb(var(--color-text-highlight));
    border-color: rgb(var(--color-border-highlight));
  }

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button:hover .slack-card-button-text,.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button:hover .slack-card-button-icon {
      color: rgb(var(--color-text-highlight));
    }

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button {
  border-radius: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  border-width: 1px;
  border-style: solid;
    box-sizing: border-box;
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button:hover {
  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));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-shadow: 0 0 0 2px;
  --tw-shadow-colored: 0 0 0 2px 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-shadow-color: rgb(var(--color-primary-850) / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-button-text {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* Tool-specific responsive adjustments */

@media (max-width: 767.98px) {

.slack-elementor-widget.slack-card-widget.slack-card-tool {
    gap: 1rem;
    padding: 1rem;
  }

    .slack-elementor-widget.slack-card-widget.slack-card-tool .slack-card-icon {
    height: 2rem;
    width: 2rem;
  }
  }

/**
 * Workshop Card Styles
 *
 * Workshop card styling following Figma design system
 * Orange accent color, similar layout to Tool cards but with content-based styling
 * Inherits from .slack-elementor-widget and .slack-card-widget bases
 */

/* =========================
   WORKSHOP CARDS
   Brand-specific styles - base styles handled by _card-base.css
========================= */

/* Workshop Card - brand-specific overrides */

.slack-elementor-widget.slack-card-widget.slack-card-workshop {
  border-color: #ff6900;
}

/* Workshop brand-specific styling */

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-category {
  color: #ff6900;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-meta-difficulty {
  font-weight: 500;
  color: #ff6900;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-meta-duration {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-link-text {
  color: #cc5500;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-arrow {
  color: #cc5500;
}

/* Workshop type badge */

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-type-badge {
  color: #cc5500;
  background-color: rgba(255, 105, 0, 0.1);
  border-color: rgba(255, 105, 0, 0.2);
}

/* Workshop-specific button styling */

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-button {
  border-style: solid;
  background-color: #ff6900;
    color: white;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-button:hover {
  color: #cc5500;
      background-color: #cc5500;
      border-color: #cc5500;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-button-text {
    color: white;
  }

/* Horizontal layout image constraints */

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
    flex-basis: 0;
    flex-grow: 1;
    min-height: 150px;
    min-width: 1px;
    max-height: 55%;
    aspect-ratio: 16/9;
    height: auto;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop .slack-card-content {
  padding: 1rem;
}

/* Workshop-specific hover effects - orange branded shadow */

.slack-elementor-widget.slack-card-widget.slack-card-workshop.slack-card-hover:hover {
    box-shadow: 0px 12px 30px 0px rgba(255, 105, 0, 0.3);
  }

.slack-elementor-widget.slack-card-widget.slack-card-workshop:hover:hover {
  border-color: #cc5500;
  box-shadow: 0px 8px 25px 0px rgba(255, 105, 0, 0.25);
}

.slack-elementor-widget.slack-card-widget.slack-card-workshop:hover {
    box-shadow: 0px 12px 30px 0px rgba(255, 105, 0, 0.3);
  }

/**
 * Resource Card Styles
 *
 * Resource card styling following Figma design system
 * Blue accent color, comprehensive styling with proper layout, typography, and interactions
 * Inherits from .slack-elementor-widget and .slack-card-widget bases
 */

/* =========================
   RESOURCE CARDS
   Brand-specific styles - base styles handled by _card-base.css
========================= */

/* Resource Card - brand-specific overrides */

/* Resource-specific metadata styling */

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-meta-difficulty {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

/* Resource brand-specific styling */

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-category {
  color: #1264a3;
}

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-link-text {
  color: #0f4c75;
}

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-arrow {
  color: #0f4c75;
}

/* Resource type badge */

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-type-badge {
  color: #0f4c75;
  background-color: rgba(18, 100, 163, 0.1);
  border-color: rgba(18, 100, 163, 0.2);
}

/* Resource-specific button styling */

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-300) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-card-widget.slack-card-resource .slack-card-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-accent-400) / var(--tw-bg-opacity));
      background-color: #0f4c75;
      border-color: #0f4c75;
}

/* Resource-specific hover effects - blue branded shadow */

.slack-elementor-widget.slack-card-widget.slack-card-resource.slack-card-hover:hover {
    box-shadow: 0px 12px 30px 0px rgba(18, 100, 163, 0.3);
  }

.slack-elementor-widget.slack-card-widget.slack-card-resource:hover:hover {
  border-color: #0f4c75;
  box-shadow: 0px 8px 25px 0px rgba(18, 100, 163, 0.25);
}

.slack-elementor-widget.slack-card-widget.slack-card-resource:hover {
    box-shadow: 0px 12px 30px 0px rgba(18, 100, 163, 0.3);
  }

/**
 * Event Card Styles
 *
 * Event card styling following Figma design system
 * Green accent color, unique layout with date/time display
 * Inherits from .slack-elementor-widget and .slack-card-widget bases
 */

/* =========================
   EVENT CARDS
   Brand-specific styles - base styles handled by _card-base.css
========================= */

/* Event Card - brand-specific overrides */

.slack-elementor-widget.slack-card-widget.slack-card-event {
  border-color: #007a5a;
  border-left-width: 4px;
  border-color: rgb(var(--color-warning-500) / 0.3);
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning-500) / var(--tw-border-opacity));
}

.slack-elementor-widget.slack-card-widget.slack-card-event:hover {
  border-color: rgb(var(--color-warning-500) / 0.5);
  --tw-border-opacity: 1;
  border-left-color: rgb(var(--color-warning-500) / var(--tw-border-opacity));
    box-shadow: 0px 12px 30px 0px rgba(0, 122, 90, 0.3);
}

/* Event brand-specific styling */

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-category {
  color: #007a5a;
}

/* Event-specific metadata styling with emphasis on date/time */

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-metadata {
  gap: 1rem;
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

header nav [x-show] a.font-avantGarde.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date{
  color: var(--color-link);
}

.dark header nav [x-show] a.font-avantGarde.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date,
:root[data-theme="dark"] header nav [x-show] a.font-avantGarde.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date{
  color: var(--color-link);
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date {
  color: #007a5a;
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-location {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-item {
  font-weight: 500;
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-link-text {
  color: #005a42;
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-arrow {
  color: #005a42;
}

/* Event type badge */

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-type-badge {
  color: #005a42;
  background-color: rgba(0, 122, 90, 0.1);
  border-color: rgba(0, 122, 90, 0.2);
}

/* Event-specific button styling */

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-button {
  border-style: solid;
  background-color: #007a5a;
    color: white;
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-button:hover {
      background-color: #005a42;
      border-color: #005a42;
    }

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-button-text {
    color: white;
  }

/* Special date badge styling for events */

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-date-badge {
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  background-color: rgba(0, 122, 90, 0.1);
  border-color: rgba(0, 122, 90, 0.2);
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-date-badge-icon {
  height: 1rem;
  width: 1rem;
  color: #007a5a;
}

.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-date-badge-text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #005a42;
}

/* Event-specific hover effects - green branded shadow */

.slack-elementor-widget.slack-card-widget.slack-card-event.slack-card-hover:hover {
    box-shadow: 0px 12px 30px 0px rgba(0, 122, 90, 0.3);
  }

.slack-elementor-widget.slack-card-widget.slack-card-event:hover:hover {
  border-color: #005a42;
  box-shadow: 0px 8px 25px 0px rgba(0, 122, 90, 0.25);
}

/* Responsive adjustments for events */

@media (max-width: 767.98px) {
    .slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
  }

header nav [x-show] a.font-avantGarde.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date{
  color: var(--color-link);
}

.dark header nav [x-show] a.font-avantGarde.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date,
:root[data-theme="dark"] header nav [x-show] a.font-avantGarde.slack-elementor-widget.slack-card-widget.slack-card-event .slack-card-meta-date{
  color: var(--color-link);
}
  }

/* Other widget styles */

/**
 * Button Widget Styles
 *
 * Brand-compliant button widget with locked styling
 * Widget-specific button styles and variants
 * Inherits from .slack-elementor-widget base
 */

/* Button Widget Container - inherits from base */

.slack-elementor-widget.slack-button-widget {
  /* Inherit all base widget styles */
}

/* Button widget-specific layout adjustments */

.slack-button-widget .elementor-widget-container {
  width: 100%;
}

.slack-button-widget .elementor-button-wrapper {
  display: flex;
}

/* =========================
   INVERSE BUTTON VARIANTS (WIDGET-SPECIFIC)
   For use on dark backgrounds - provides light/contrast styling
========================= */

/* Inverse Solid Button - Light button for dark backgrounds */

.slack-button-inverse-solid,
.slack-elementor-widget .slack-button-inverse-solid {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(72 26 84 / var(--tw-text-opacity));
}

.slack-button-inverse-solid:hover, .slack-elementor-widget .slack-button-inverse-solid:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(115 3 148 / var(--tw-text-opacity));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.slack-button-inverse-solid:disabled,
  .slack-button-inverse-solid[disabled],
  .slack-elementor-widget .slack-button-inverse-solid:disabled,
  .slack-elementor-widget .slack-button-inverse-solid[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-smoke-50) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-smoke-50) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-smoke-600) / var(--tw-text-opacity));
}

.slack-button-inverse-solid:focus, .slack-elementor-widget .slack-button-inverse-solid:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  }

/* Inverse Outline Button - Light outline for dark backgrounds */

.slack-button-inverse-outline,
.slack-elementor-widget .slack-button-inverse-outline {
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.slack-button-inverse-outline:hover, .slack-elementor-widget .slack-button-inverse-outline:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(203 101 255 / var(--tw-text-opacity));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.slack-button-inverse-outline:disabled,
  .slack-button-inverse-outline[disabled],
  .slack-elementor-widget .slack-button-inverse-outline:disabled,
  .slack-elementor-widget .slack-button-inverse-outline[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-smoke-300) / var(--tw-border-opacity));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-smoke-300) / var(--tw-text-opacity));
}

.slack-button-inverse-outline:focus, .slack-elementor-widget .slack-button-inverse-outline:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
  }

/* =========================
   DARK MODE CONTROL MODIFIERS (WIDGET-SPECIFIC)
   Prevents automatic dark mode adaptation for specific buttons
========================= */

/* No Dark Response - Prevents dark mode theme switching */

/* Override any dark mode styles - maintains original appearance */

.slack-button-no-dark-response.slack-button-solid,
  .slack-button-no-dark-response.slack-button-primary,
  .slack-elementor-widget .slack-button-no-dark-response.slack-button-solid,
  .slack-elementor-widget .slack-button-no-dark-response.slack-button-primary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(72 26 84 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(72 26 84 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.slack-button-no-dark-response.slack-button-solid:hover, .slack-button-no-dark-response.slack-button-primary:hover, .slack-elementor-widget .slack-button-no-dark-response.slack-button-solid:hover, .slack-elementor-widget .slack-button-no-dark-response.slack-button-primary:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(115 3 148 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(115 3 148 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.slack-button-no-dark-response.slack-button-outline,
  .slack-button-no-dark-response.slack-button-secondary,
  .slack-elementor-widget .slack-button-no-dark-response.slack-button-outline,
  .slack-elementor-widget .slack-button-no-dark-response.slack-button-secondary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(72 26 84 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
  --tw-text-opacity: 1 !important;
  color: rgb(72 26 84 / var(--tw-text-opacity)) !important;
}

.slack-button-no-dark-response.slack-button-outline:hover, .slack-button-no-dark-response.slack-button-secondary:hover, .slack-elementor-widget .slack-button-no-dark-response.slack-button-outline:hover, .slack-elementor-widget .slack-button-no-dark-response.slack-button-secondary:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(115 3 148 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
  --tw-text-opacity: 1 !important;
  color: rgb(115 3 148 / var(--tw-text-opacity)) !important;
}

/* JavaScript-Enhanced Dark Mode Controls */

.dark-mode-locked {
  /* Marker class for buttons locked to specific appearance */
  /* Styles are controlled by force-standard-state and force-inverse-state classes */
}

/* Force standard appearance regardless of theme */

.force-standard-state.slack-button-solid,
  .force-standard-state.slack-button-primary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(72 26 84 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(72 26 84 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.force-standard-state.slack-button-solid:hover, .force-standard-state.slack-button-primary:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(115 3 148 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(115 3 148 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.force-standard-state.slack-button-outline,
  .force-standard-state.slack-button-secondary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(72 26 84 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
  --tw-text-opacity: 1 !important;
  color: rgb(72 26 84 / var(--tw-text-opacity)) !important;
}

.force-standard-state.slack-button-outline:hover, .force-standard-state.slack-button-secondary:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(115 3 148 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
  --tw-text-opacity: 1 !important;
  color: rgb(115 3 148 / var(--tw-text-opacity)) !important;
}

/* Force inverse appearance regardless of theme */

.force-inverse-state.slack-button-inverse-solid,
  .force-inverse-state.slack-button-solid,
  .force-inverse-state.slack-button-primary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(72 26 84 / var(--tw-text-opacity)) !important;
}

.force-inverse-state.slack-button-inverse-solid span, .force-inverse-state.slack-button-solid span, .force-inverse-state.slack-button-primary span {
  --tw-text-opacity: 1 !important;
  color: rgb(72 26 84 / var(--tw-text-opacity)) !important;
}

.force-inverse-state.slack-button-inverse-solid:hover, .force-inverse-state.slack-button-solid:hover, .force-inverse-state.slack-button-primary:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(115 3 148 / var(--tw-text-opacity)) !important;
}

.force-inverse-state.slack-button-inverse-solid:hover span, .force-inverse-state.slack-button-solid:hover span, .force-inverse-state.slack-button-primary:hover span {
  --tw-text-opacity: 1 !important;
  color: rgb(115 3 148 / var(--tw-text-opacity)) !important;
}

.force-inverse-state.slack-button-inverse-outline,
  .force-inverse-state.slack-button-outline,
  .force-inverse-state.slack-button-secondary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.force-inverse-state.slack-button-inverse-outline:hover, .force-inverse-state.slack-button-outline:hover, .force-inverse-state.slack-button-secondary:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
  background-color: transparent !important;
  --tw-text-opacity: 1 !important;
  color: rgb(203 101 255 / var(--tw-text-opacity)) !important;
}

/* =========================
   WIDGET DARK MODE OVERRIDES
   Dark mode behavior for widget-specific button variants
========================= */

/* Inverse buttons maintain their appearance in dark mode */

.dark .slack-button-inverse-solid,
  .dark .slack-button-inverse-outline {
    /* Inverse buttons are designed for dark backgrounds so they don't need dark mode overrides */
    /* They already use the appropriate light colors */
  }

/* =========================
   RESPONSIVE DESIGN
   Mobile-first approach with consistent breakpoints
========================= */

@media (max-width: 639.98px) {
  .slack-elementor-widget.slack-button-widget {
    margin: 0.25rem;
  }
}

/**
 * Slack Container Widget Styles
 *
 * Responsive container widget that provides fluid width system
 * with background options and section spacing
 * Inherits from .slack-elementor-widget base
 */

/* =========================
   CONTAINER WIDGET BASE
   Foundation styling for container widget
   Inherits from base widget styles
========================= */

/* Container Widget - inherits from base */

.slack-elementor-widget.slack-container-widget {
  position: relative;
  width: 100%;
}

.slack-elementor-widget.slack-container-widget .section-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slack-elementor-widget.slack-container-widget .slack-container-content {
  position: relative;
  z-index: 10;
  /* Content gets proper positioning above backgrounds */
}

/* =========================
   BACKGROUND VARIANTS
   Different background options for containers
========================= */

/* No background (default transparent) */

.slack-container-widget .section-wrapper.background-none {
  background: transparent;
}

/* Solid color background */

.slack-container-widget .section-wrapper.background-color {
  /* Background color set via inline styles or selectors */
}

/* Gradient backgrounds with brand presets */

.slack-container-widget .section-wrapper.background-gradient.gradient-primary {
  background: linear-gradient(135deg, rgb(var(--color-brand-primary)) 0%, rgb(var(--color-brand-secondary)) 100%);
  color: rgb(var(--color-text-inverse));
}

.slack-container-widget .section-wrapper.background-gradient.gradient-secondary {
  background: linear-gradient(135deg, rgb(var(--color-brand-secondary)) 0%, rgb(var(--color-brand-primary)) 100%);
  color: rgb(var(--color-text-inverse));
}

.slack-container-widget .section-wrapper.background-gradient.gradient-accent {
  background: linear-gradient(135deg, rgb(var(--color-brand-accent)) 0%, rgba(var(--color-brand-primary), 0.8) 100%);
  color: rgb(var(--color-text-inverse));
}

.slack-container-widget .section-wrapper.background-gradient.gradient-subtle {
  background: linear-gradient(135deg, rgba(var(--color-surface-secondary), 0.8) 0%, rgba(var(--color-surface-tertiary), 0.4) 100%);
  color: rgb(var(--color-text-primary));
}

/* Image background */

.slack-container-widget .section-wrapper.background-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.slack-container-widget .section-wrapper.background-image .container-background-overlay {
  position: absolute;
  inset: 0px;
}

header nav [x-show] > .slack-container-widget .section-wrapper.background-image .container-background-overlay.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .slack-container-widget .section-wrapper.background-image .container-background-overlay.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .slack-container-widget .section-wrapper.background-image .container-background-overlay.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

.slack-container-widget .section-wrapper.background-image .container-background-overlay {
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Ensure content is above overlay */

.slack-container-widget .section-wrapper.background-image .container-content {
  position: relative;
  z-index: 2;
}

/* =========================
   SECTION SPACING PRESETS
   Responsive vertical spacing options
========================= */

.slack-container-widget .section-wrapper.section-spacing-y-small {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 768px) {

  .slack-container-widget .section-wrapper.section-spacing-y-small {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.slack-container-widget .section-wrapper.section-spacing-y {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 768px) {

  .slack-container-widget .section-wrapper.section-spacing-y {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {

  .slack-container-widget .section-wrapper.section-spacing-y {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.slack-container-widget .section-wrapper.section-spacing-y-large {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {

  .slack-container-widget .section-wrapper.section-spacing-y-large {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1280px) {

  .slack-container-widget .section-wrapper.section-spacing-y-large {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

/* =========================
   CONTAINER CONTENT STYLING
   Content area within the container
========================= */

.slack-container-widget .slack-container-content {
  width: 100%;
}

/* Typography adjustments for gradient/dark backgrounds */

.slack-container-widget .section-wrapper.has-background .slack-container-content h1,
.slack-container-widget .section-wrapper.has-background .slack-container-content h2,
.slack-container-widget .section-wrapper.has-background .slack-container-content h3,
.slack-container-widget .section-wrapper.has-background .slack-container-content h4,
.slack-container-widget .section-wrapper.has-background .slack-container-content h5,
.slack-container-widget .section-wrapper.has-background .slack-container-content h6 {
  color: inherit;
}

.slack-container-widget .section-wrapper.has-background .slack-container-content p {
  color: inherit;
  opacity: 0.95;
}

.slack-container-widget .section-wrapper.has-background .slack-container-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.slack-container-widget .section-wrapper.has-background .slack-container-content a:hover {
  opacity: 0.8;
}

/* =========================
   RESPONSIVE ADJUSTMENTS
   Container specific mobile optimizations
========================= */

/* Mobile adjustments */

@media (max-width: 639.98px) {
  .slack-container-widget .section-wrapper {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .slack-container-widget .section-wrapper.section-spacing-y-small {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .slack-container-widget .section-wrapper.section-spacing-y {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .slack-container-widget .section-wrapper.section-spacing-y-large {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Tablet adjustments */

@media (min-width: 640px) and (max-width: 1023.98px) {
  .slack-container-widget .section-wrapper {
    border-radius: 0.5rem;
  }
}

/* Desktop adjustments */

@media (min-width: 1024px) {
  .slack-container-widget .section-wrapper {
    border-radius: 0.75rem;
  }
}

/* =========================
   EDITOR SPECIFIC STYLES
   Elementor editor interface enhancements
========================= */

.elementor-editor-active .slack-container-widget .slack-container-content:empty::before {
  content: "📦 Container Content Area";
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 2px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
  padding: 2rem;
  text-align: center;
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
  min-height: 200px;
}

.elementor-editor-active .slack-container-widget .slack-container-content:empty::after {
  content: "Add content using the Container Content field in the widget settings.";
  margin-top: 0.5rem;
  display: block;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

/* =========================
   ACCESSIBILITY ENHANCEMENTS
   Focus states and high contrast support
========================= */

.slack-container-widget .slack-container-content *:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .slack-container-widget .section-wrapper.has-background {
    border: 2px solid;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .slack-container-widget .section-wrapper {
    transition: none;
  }
}

/* =========================
   UTILITY CLASSES
   Additional helper classes for specific use cases
========================= */

/* Full height container option */

.slack-container-widget .section-wrapper.full-height {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Centered content option */

.slack-container-widget .section-wrapper.content-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Text alignment utilities */

.slack-container-widget .slack-container-content.container-text-center {
  text-align: center;
}

.slack-container-widget .slack-container-content.container-text-left {
  text-align: left;
}

.slack-container-widget .slack-container-content.container-text-right {
  text-align: right;
}

/**
 * Code Block Widget Styles
 * 
 * All code block widget specific styles
 * Syntax highlighting and code presentation
 */

/* =========================
   SLACK CODE BLOCK WIDGET STYLES
   Placeholder for future code block widget implementation
========================= */

/* Note: Code block widget styles will be added here when implemented */

/* This file maintains the organized structure for future development */

/**
 * Slack Latest News Widget Styles
 *
 * Styles for the latest news widget with accordion functionality,
 * featured articles, and responsive design based on Figma mockups.
 * Inherits from .slack-elementor-widget base
 */

.slack-elementor-widget.slack-latest-news-widget {
  width: 100%;
  max-width: none;
  border-style: none;
  background-color: transparent;
}

.slack-news-container {
  width: 100%;
  color: var(--color-text-primary);
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
    
    .dark .slack-news-container {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
}

/* Column Headers - DATE | ARTICLE NAME */

.slack-news-header {
  display: grid;
  gap: 1rem;
  border-bottom-width: 1px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;

  /* Two-column layout: reasonable DATE column width */
  grid-template-columns: 100px minmax(0, 1fr);
}

.slack-news-header-date,
  .slack-news-header-article {
  text-align: left;
}

/* News List */

.slack-news-list > :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));
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-smoke-800) / var(--tw-divide-opacity));
}

/* News Item Base */

.slack-news-item {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main Item Layout - Two-column: DATE | ARTICLE NAME */

.slack-news-item-main {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  vertical-align: middle;

    grid-template-columns: 100px minmax(0, 1fr);
    height: 48px;
}

/* Date Column */

.slack-news-item-date {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

header nav [x-show] a.font-avantGarde.slack-news-item-date{
  color: var(--color-link);
}

.dark header nav [x-show] a.font-avantGarde.slack-news-item-date,
:root[data-theme="dark"] header nav [x-show] a.font-avantGarde.slack-news-item-date{
  color: var(--color-link);
}

.slack-news-item-date {
    letter-spacing: 0.6px;
    line-height: 1.5;
  }

/* Article Title Section */

.slack-news-item-title-section {
  width: 100%;
}

.slack-news-item button {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  border-style: none;
  background-color: transparent;
  padding: 0px;
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-news-item 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-brand-accent) / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
}

.slack-news-item button:focus:is(.dark *) {
  --tw-ring-offset-color: rgb(var(--color-surface-primary) / 1);
}

.slack-news-item button {
    min-width: 0;
  }

/* Allow flex item to shrink */

.slack-news-item button:hover {
  border-style: none;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(115 3 148 / 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);
}

.slack-news-item button:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(207 207 201 / var(--tw-text-opacity));
}

.slack-news-item button:hover {
      transform: translate(0, 0);
    }

.slack-news-item button h3.slack-news-item-title {
  margin: 0px;
  overflow: hidden;
  padding-right: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
      font-family: "Avant Garde", "Avant Garde For Salesforce", sans-serif;
      font-weight: 600; /* Demi weight */
      white-space: nowrap;
      text-overflow: ellipsis;
      min-width: 0;
}

/* Important for flex items to shrink */

.slack-news-item button h3.slack-news-item-title:hover {
  --tw-text-opacity: 1;
  color: rgb(115 3 148 / var(--tw-text-opacity));
}

.slack-news-item button h3.slack-news-item-title:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(207 207 201 / var(--tw-text-opacity));
}

/* External Link Icon */

.slack-news-item-external-icon {
  height: 0.75rem;
  width: 0.75rem;
  flex-shrink: 0;
}

.slack-news-item-chevron {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-text-opacity: 1;
  color: rgb(16 124 173 / var(--tw-text-opacity));
}

.slack-news-item-chevron:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(26 185 255 / var(--tw-text-opacity));
}

.slack-news-item-chevron.expanded {
  --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));
}

.slack-news-item-chevron.collapsed {
  --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));
}

/* Expandable Content - Featured article content area */

.slack-news-item-content {
  display: grid;
  gap: 1rem;
  overflow: hidden;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
    /* Align with the article column, offset by date column width */
    margin-left: 104px !important;
    grid-template-columns: 1fr auto;
    /* Reasonable expanded content height */
    min-height: 140px;
}

/* Ensure smooth animations for accordion */

.slack-news-item-content[x-transition] {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Excerpt - Full width in grid row */

.slack-news-item-excerpt {
    grid-column: 1 / -1;
    margin-bottom: 1rem;
    max-width: none;
    font-family: "Salesforce Sans", sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
  }

.slack-news-item-excerpt p:last-child {
  margin-bottom: 0px;
}

/* Author */

.slack-news-item-author {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

header nav [x-show] a.font-avantGarde.slack-news-item-author{
  color: var(--color-link);
}

.dark header nav [x-show] a.font-avantGarde.slack-news-item-author,
:root[data-theme="dark"] header nav [x-show] a.font-avantGarde.slack-news-item-author{
  color: var(--color-link);
}

.slack-news-item-author {
    font-family: "Salesforce Sans", sans-serif;
    letter-spacing: 0.6px;
    line-height: 1.5;
  }

/* Actions - Source button */

.slack-news-item-actions {
  display: flex;
  justify-content: flex-end;
}

.slack-news-item-actions a.slack-news-item-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.slack-news-item-actions a.slack-news-item-link: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-brand-accent) / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
}

.slack-news-item-actions a.slack-news-item-link:focus:is(.dark *) {
  --tw-ring-offset-color: rgb(var(--color-surface-primary) / 1);
}

.slack-news-item-actions a.slack-news-item-link {
      /* Light mode: purple stroke button, Dark mode: existing styling */
      border-width: 1px;
      --tw-border-opacity: 1;
      border-color: rgb(var(--color-brand-primary) / var(--tw-border-opacity));
      --tw-text-opacity: 1;
      color: rgb(var(--color-brand-primary) / var(--tw-text-opacity));
    }

.slack-news-item-actions a.slack-news-item-link:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(72 26 84 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Dark mode featured article title override */

:root[data-theme="dark"] .slack-news-featured {
    background-color: var(--color-primary-850) !important;
  }

/* Support for reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .slack-news-item-content[x-transition] {
    transition-property: none;
  }

  .slack-news-item-chevron {
    transition-property: none;
  }
}

/* Responsive Design - Mobile adjustments */

@media (max-width: 768px) {
  /* Hide column headers on mobile */
  .slack-news-header {
    display: none;
  }
    /* Stack date above title - convert from grid to flex column */
    .slack-news-item-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
      height: auto; /* Remove fixed height */
  }

    /* Date styling for stacked layout */
    .slack-news-item-date {
    font-size: 0.75rem;
    line-height: 1rem;
  }

    /* Title section takes full width */
    .slack-news-item-title-section {
    width: 100%;
  }

    /* Full-width expanded content with no offset */
    .slack-news-item-content {
    gap: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
      margin-left: 0 !important; /* Remove date column offset */
      grid-template-columns: 1fr; /* Single column */
  }

    /* Full-width button */
    .slack-news-item-actions {
    width: 100%;
  }

      .slack-news-item-actions a.slack-news-item-link {
    width: 100%;
    justify-content: center;
  }

    /* Smaller title on mobile */
    .slack-news-item button h3 {
    font-size: 0.875rem;
    line-height: 1.25rem;
      white-space: normal; /* Allow wrapping on mobile */
      text-overflow: clip;
  }
}

/* Tablet adjustments - keep two-column but adjust proportions */

@media (min-width: 769px) and (max-width: 1024px) {
  .slack-news-header {
    padding-left: 1rem;
    padding-right: 1rem;
    grid-template-columns: 120px minmax(0, 1fr);
  }
    .slack-news-item-main {
    padding-left: 1rem;
    padding-right: 1rem;
      grid-template-columns: 120px minmax(0, 1fr);
  }

    .slack-news-item-content {
      margin-left: 124px !important;
    }
}

/* High Contrast Mode Support */

@media (prefers-contrast: high) {
  .slack-news-item {
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-border-secondary) / var(--tw-border-opacity));
  }
  .slack-news-item:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-border-primary) / var(--tw-border-opacity));
  }

    .slack-news-item-title {
    --tw-text-opacity: 1;
    color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  }

  .slack-news-featured {
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-brand-primary) / var(--tw-border-opacity));
  }
}

/* Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {
  .slack-news-item,
  .slack-news-item-chevron,
  .slack-news-item-title,
  .slack-news-item-link,
  .slack-news-link-arrow {
    transition-property: none;
  }
}

/* Print Styles */

@media print {
    .slack-news-item-chevron {
    display: none;
  }

    .slack-news-item-content {
    display: block !important;
  }

    .slack-news-item-toggle {
    cursor: default;
  }

  .slack-news-featured {
    border-left-width: 8px;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-text-primary) / var(--tw-border-opacity));
  }
}

/* Focus Visible Support */

.slack-news-item-toggle:focus-visible {
  --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-brand-accent) / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
}

.slack-news-item-toggle:focus-visible:is(.dark *) {
  --tw-ring-offset-color: rgb(var(--color-surface-primary) / 1);
}

.slack-news-item-link:focus-visible {
  --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-brand-accent) / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
}

.slack-news-item-link:focus-visible:is(.dark *) {
  --tw-ring-offset-color: rgb(var(--color-surface-primary) / 1);
}

/* Empty State */

.slack-news-empty {
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity));
}

.slack-news-empty-icon {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  height: 3rem;
  width: 3rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-muted) / var(--tw-text-opacity));
}

/* Accessibility Enhancements */

.slack-news-item-toggle[aria-expanded="true"] .slack-news-item-chevron {
  --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));
}

.slack-news-item-toggle[aria-expanded="false"] .slack-news-item-chevron {
  --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));
}

/* Screen Reader Only Text */

.sr-only {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
}

header nav [x-show] > .sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-primary));
}

.dark header nav [x-show] > .sr-only.w-0.h-0,
:root[data-theme="dark"] header nav [x-show] > .sr-only.w-0.h-0{
  border-bottom-color: rgb(var(--color-surface-secondary));
}

/* Widget Brand Integration */

.slack-elementor-widget.slack-latest-news-widget.brand-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-brand-primary) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-latest-news-widget.brand-primary:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--color-secondary-100) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-latest-news-widget.brand-secondary {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-900) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-latest-news-widget.brand-secondary:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-100) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-latest-news-widget.theme-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-primary) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

.slack-elementor-widget.slack-latest-news-widget.theme-light {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
}

/* =========================
   PRINT STYLES
   Optimized printing layout
========================= */

@media print {
  .slack-elementor-widget {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }
  
  .slack-elementor-widget button,
  .slack-elementor-widget .elementor-button {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }
}

/* Layout Specific Styles */

/* =========================
   WORKSHOP LAYOUT STYLES
   Specific styling for workshop pages
========================= */

/* Workshop Background */

.workshop-background {
  background-image: url('/wp-content/themes/slack-developers/assets/images/workshop-bg.png');
  background-repeat: no-repeat;
  background-position: top right;
}

/* Workshop Content Typography - Using typography tokens */

.workshop-content h1 {
  font-family: var(--typography-display-2-font-family);
  font-size: var(--typography-display-2-font-size);
  font-weight: var(--typography-display-2-font-weight);
  line-height: var(--typography-display-2-line-height);
  letter-spacing: var(--typography-display-2-letter-spacing);
  color: rgb(var(--color-brand-primary) / 1);
  margin-bottom: var(--space-text-base);
}

.workshop-content h2 {
  font-family: var(--typography-heading-1-font-family);
  font-size: var(--typography-heading-1-font-size);
  font-weight: var(--typography-heading-1-font-weight);
  line-height: var(--typography-heading-1-line-height);
  letter-spacing: var(--typography-heading-1-letter-spacing);
  color: rgb(var(--color-brand-primary) / 1);
  margin-bottom: var(--space-text-base);
}

.workshop-content h3 {
  font-family: var(--typography-heading-2-font-family);
  font-size: var(--typography-heading-2-font-size);
  font-weight: var(--typography-heading-2-font-weight);
  line-height: var(--typography-heading-2-line-height);
  letter-spacing: var(--typography-heading-2-letter-spacing);
  color: rgb(var(--color-brand-primary) / 1);
  margin-bottom: var(--space-text-base);
}

.workshop-content p {
  font-family: var(--typography-body-font-family);
  font-size: var(--typography-body-font-size);
  font-weight: var(--typography-body-font-weight);
  line-height: var(--typography-body-line-height);
  letter-spacing: var(--typography-body-letter-spacing);
  color: rgb(var(--color-text-secondary) / 1);
  margin-bottom: var(--space-text-base);
}

/* Workshop Step Content */

.workshop-step-content p {
  margin-bottom: var(--space-text-base);
}

.workshop-step-content strong {
  font-weight: var(--font-weight-bold);
  color: rgb(var(--color-brand-primary) / 1);
}

.workshop-step-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: var(--text-underline-offset);
  text-decoration-thickness: var(--text-decoration-thickness);
  font-weight: var(--font-weight-medium);
}

/* Dark Mode Adjustments */

:root[data-theme="dark"] .workshop-content h1,
  :root[data-theme="dark"] .workshop-content h2,
  :root[data-theme="dark"] .workshop-content h3 {
    color: rgb(var(--color-text-primary) / 1);
  }

:root[data-theme="dark"] .workshop-content p {
    color: rgb(var(--color-text-secondary) / 1);
  }

:root[data-theme="dark"] .workshop-step-content strong {
    color: rgb(var(--color-brand-secondary) / 1);
  }

/* =========================
   RESOURCE LAYOUT STYLES
   Specific styling for resource pages
========================= */

/* Resource Background */

.resource-background {
  background-image: url('/wp-content/themes/slack-developers/assets/images/resource-bg.png');
  background-repeat: no-repeat;
  background-position: top right;
}

/* Resource Solution Items */

.resource-solution-item {
  margin-bottom: 1rem;
}

.resource-solution-item a {
  color: var(--color-link);
  text-decoration: underline;
}

/* RSI Tools Links */

.rsi-tools a {
  color: rgb(var(--color-text-primary) / 1) !important;
  text-decoration: underline;
}

/* Dark Mode Adjustments */

:root[data-theme="dark"] .rsi-tools a {
    color: rgb(var(--color-text-primary) / 1) !important;
  }

/* =========================
   EVENT LAYOUT STYLES
   Specific styling for event pages
========================= */

/* Event Background */

.event-background {
  background-image: url('/wp-content/themes/slack-developers/assets/images/event-bg.png');
  background-repeat: no-repeat;
  background-position: top right;
}

/* =========================
   BUILD PAGE LAYOUT STYLES
   Specific styling for build page
========================= */

.tools-card-background {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface-tertiary) / var(--tw-bg-opacity));
}

/* =========================
   BUILD PAGE LAYOUT STYLES
   Specific styling for blog posts
========================= */

.text-post {
  --tw-text-opacity: 1 !important;
  color: rgb(24 24 24 / var(--tw-text-opacity)) !important;
}

:root[data-theme="dark"] .text-post {
  --tw-text-opacity: 1 !important;
  color: rgb(249 240 255 / var(--tw-text-opacity)) !important;
}

.elementor-share-buttons--color-custom.elementor-share-buttons--skin-framed .elementor-share-btn__icon svg {
  fill: #181818 !important;
}

:root[data-theme="dark"] .elementor-share-buttons--color-custom.elementor-share-buttons--skin-framed .elementor-share-btn__icon svg {
  fill: #F9F0FF !important;
}

/* =========================
   BUILD PAGE LAYOUT STYLES
   Specific styling for blog posts
========================= */

.elementor-widget-divider.my-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon)
  .elementor-divider-separator {
  --divider-border-width: 0;
  border-block-start: none !important;

  /* convierte el separator en TU barra */
  display: block;
  width: 96%;
  height: 0.5px;               
  background: #000;          
  line-height: 0;
}

/* DARK */

:root[data-theme="dark"]
  .elementor-widget-divider.my-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon)
  .elementor-divider-separator {
  background: #FFFFFF;     
}

.elementor-widget-divider.my-divider .elementor-divider {
  margin: 0;
  line-height: 0;
}

.elementor-widget-divider.my-divider .elementor-divider:before,
.elementor-widget-divider.my-divider .elementor-divider:after {
  border: none !important;
}

.text-slack-detail {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.button-widget-purple-bg .slack-button-wrapper .slack-button {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(72 26 84 / var(--tw-text-opacity)) !important;
}

.button-widget-purple-bg .slack-button-wrapper .slack-button .slack-button-icon {
  color: slack-violet-850 !important;
}

/* Theme Variants */

/* ===========================
   LIGHT THEME
   Light mode token values - optimized with Tailwind built-ins
=========================== */

:root {
  /* Light theme surface colors - Using Tailwind slate/white where appropriate */
  --color-surface-primary: 255 255 255;       /* white - Main content areas */
  --color-surface-secondary: 255 255 255;     /* white - Cards, sections */
  --color-surface-tertiary: 249 240 255;      /* slack-violet-50 - Subtle light violet backgrounds */
  --color-surface-elevated: 255 255 255;      /* white - Modals, overlays */
  --color-surface-highlight: 72 26 84;      /* slack-violet-850 - CTAs, etc. */

  /* Light theme text colors - Using Tailwind slate scale */
  --color-text-primary: 0 0 0;             /* black - Primary text */
  --color-text-secondary: 24 24 24;          /* slack-neutral-950 - Secondary text */
  --color-text-muted: 160 160 160;            /* slack-neutral-400 - Muted text */
  --color-text-inverse: 255 255 255;          /* white - Inverse text */
  --color-text-highlight: 115 3 148;
  
  /* Light theme border colors - Using Tailwind slate scale */
  --color-border-primary: 226 232 240;        /* slate-200 - Default borders */
  --color-border-secondary: 203 213 225;      /* slate-300 - Subtle borders */
  --color-border-focus: var(--color-brand-accent);  /* Brand accent for focus */
  --color-border-highlight: 115 3 148;
  
  /* Light theme code colors - Using Tailwind slate scale */
  --color-code-bg: 248 250 252;               /* slate-50 - Code backgrounds */
  --color-code-text: 51 65 85;                /* slate-700 - Code text */

  /* Button specific colors */
  --color-btn-solid-text:       255 255 255; /* theme("colors.white") */
  --color-btn-solid-fill:       72 26 84; /* theme("colors.slack-violet.850") */
  --color-btn-solid-text-hover: 255 255 255; /* theme("colors.white") */
  --color-btn-solid-fill-hover: 115 3 148; /* theme("colors.slack-violet.800") */
  
  --color-btn-outline-text:         72 26 84; /* theme("colors.slack-violet.850") */
  --color-btn-outline-border:       72 26 84; /* theme("colors.slack-violet.850") */
  --color-btn-outline-text-hover:   115 3 148; /* theme("colors.slack-violet.800") */
  --color-btn-outline-border-hover: 115 3 148; /* theme("colors.slack-violet.800") */
}

/* Light Theme Display Controls */

.only-light {
  display: block;
}

.only-dark {
  display: none;
}

/* Light Theme Specific Styles */

/* Elementor headings in light mode */

:root:not([data-theme="dark"]) main .elementor :is(h1, h2, h3, h4, h5, h6), :root:not([data-theme="dark"]) main .elementor .elementor-heading-title {
    color: var(--color-text-primary);
  }

/* Text content in light mode */

:root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor,
  :root:not([data-theme="dark"]) main .elementor .elementor-text-editor {
    color: var(--color-text-primary);
  }

:root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor p, :root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor li, :root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor span, :root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor div, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor p, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor li, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor span, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor div {
      color: var(--color-text-primary);
    }

:root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor a, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor a {
      color: rgb(var(--color-brand-primary) / 1);
    }

:root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor a:hover, :root:not([data-theme="dark"]) main .elementor .elementor-widget-text-editor a:focus, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor a:hover, :root:not([data-theme="dark"]) main .elementor .elementor-text-editor a:focus {
        color: rgb(var(--color-brand-secondary) / 1);
      }

/* =========================
   DARK THEME
   Dark mode specific overrides and styles
========================= */

/* Dark Theme Display Controls */

:root[data-theme="dark"] .only-light {
  display: none !important;
}

:root[data-theme="dark"] .only-dark {
  display: block !important;
}

/* ===========================
   DARK THEME TOKEN OVERRIDES
   Dark mode specific token values aligned with optimized system
=========================== */

:root[data-theme="dark"] {
  /* Dark theme surface colors - Optimized neutral grays */
  --color-surface-primary: 24 24 24;          /* slack-neutral-950 - main backgrounds */
  --color-surface-secondary: 24 24 24;        /* slack-neutral-950 - card backgrounds */
  --color-surface-tertiary: 24 24 24;         /* slack-neutral-950 - subtle sections */
  --color-surface-elevated: 24 24 24;         /* slack-neutral-950 - Elevated surfaces */
  --color-surface-highlight: 72 26 84;      /* slack-violet-850 - CTAs, etc. */

  /* Dark theme text colors - High contrast for accessibility */
  --color-text-primary: 255 255 255;          /* white - Primary text */
  --color-text-secondary: 229 229 229;        /* slack-neutral-100 - Secondary text */
  --color-text-muted: 116 116 116;            /* slack-neutral-500 - Muted text */
  --color-text-inverse: 0 0 0;             /* black - Inverse text */
  --color-text-highlight: 186 1 255;

  /* Dark theme border colors */
  --color-border-primary: 64 64 64;           /* Dark border - primary */
  --color-border-secondary: 82 82 82;         /* Lighter dark border - secondary */
  --color-border-highlight: 186 1 255;
  
  /* Dark theme code colors */
  --color-code-bg: 32 32 32;                  /* Dark code backgrounds */
  --color-code-text: 229 229 229;             /* Light code text */
  --color-code-inline-bg: var(--color-accent-300); /* Bright inline code */
  
  /* Adjust interactive colors for dark mode contrast */
  --color-link: var(--color-brand-accent);    /* Brighter links in dark mode */
  --color-link-hover: var(--color-brand-secondary); /* Purple hover */

    /* Button specific colors */
  --color-btn-solid-text:       72 26 84; /* theme("colors.slack-violet.850") */
  --color-btn-solid-fill:       255 255 255; /* theme("colors.white") */
  --color-btn-solid-text-hover: 115 3 148; /* theme("colors.slack-violet.800") */
  --color-btn-solid-fill-hover: 255 255 255; /* theme("colors.white") */
  
  --color-btn-outline-text:         255 255 255; /* theme("colors.white") */
  --color-btn-outline-border:       255 255 255; /* theme("colors.white") */
  --color-btn-outline-text-hover:   229 229 229; /* theme("colors.slack-neutral.100") */
  --color-btn-outline-border-hover: 229 229 229;
}

/* theme("colors.slack-neutral.100") */

/* Main content background */

:root[data-theme="dark"] #content.site-content {
    background-color: rgb(var(--color-surface-primary) / 1);
    color: rgb(var(--color-text-primary) / 1);
  }

/* Input placeholder styling */

:root[data-theme="dark"] main input::-moz-placeholder {
    color: rgb(var(--color-text-muted) / 1);
  }

:root[data-theme="dark"] main input::placeholder {
    color: rgb(var(--color-text-muted) / 1);
  }

/* Elementor headings */

:root[data-theme="dark"] main .elementor :is(h1, h2, h3, h4, h5, h6), :root[data-theme="dark"] main .elementor .elementor-heading-title {
    color: rgb(var(--color-text-primary) / 1);
  }

/* Text content */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor,
  :root[data-theme="dark"] main .elementor .elementor-text-editor {
    color: rgb(var(--color-text-primary) / 1);
  }

/* Typography elements */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor p, :root[data-theme="dark"] main .elementor .elementor-widget-text-editor li, :root[data-theme="dark"] main .elementor .elementor-widget-text-editor span, :root[data-theme="dark"] main .elementor .elementor-widget-text-editor div, :root[data-theme="dark"] main .elementor .elementor-text-editor p, :root[data-theme="dark"] main .elementor .elementor-text-editor li, :root[data-theme="dark"] main .elementor .elementor-text-editor span, :root[data-theme="dark"] main .elementor .elementor-text-editor div {
      color: rgb(var(--color-text-primary) / 1);
    }

/* List markers */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor ::marker, :root[data-theme="dark"] main .elementor .elementor-text-editor ::marker {
      color: rgb(var(--color-text-primary) / 1);
    }

/* Horizontal rules */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor hr, :root[data-theme="dark"] main .elementor .elementor-text-editor hr {
      border-color: rgb(var(--color-border-primary) / 1);
    }

/* Link styling */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor a, :root[data-theme="dark"] main .elementor .elementor-text-editor a {
      color: rgb(var(--color-text-primary) / 1);
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: from-font;
      -webkit-text-decoration-skip: ink;
              text-decoration-skip-ink: auto;
    }

/* Hover and focus states */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor a:hover,
      :root[data-theme="dark"] main .elementor .elementor-widget-text-editor a:focus,
      :root[data-theme="dark"] main .elementor .elementor-text-editor a:hover,
      :root[data-theme="dark"] main .elementor .elementor-text-editor a:focus {
        color: rgb(var(--color-brand-accent) / 1);
        text-decoration-color: rgb(var(--color-brand-accent) / 1);
      }

/* Visited state */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor a:visited, :root[data-theme="dark"] main .elementor .elementor-text-editor a:visited {
        color: rgb(var(--color-text-primary) / 1);
        text-decoration-color: currentColor;
      }

/* SVG icons within links */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor a svg,
      :root[data-theme="dark"] main .elementor .elementor-widget-text-editor a svg *,
      :root[data-theme="dark"] main .elementor .elementor-text-editor a svg,
      :root[data-theme="dark"] main .elementor .elementor-text-editor a svg * {
        fill: currentColor;
        stroke: currentColor;
      }

/* Text emphasis */

:root[data-theme="dark"] main .elementor .elementor-widget-text-editor strong,
    :root[data-theme="dark"] main .elementor .elementor-widget-text-editor em,
    :root[data-theme="dark"] main .elementor .elementor-text-editor strong,
    :root[data-theme="dark"] main .elementor .elementor-text-editor em {
      color: rgb(var(--color-text-primary) / 1);
    }

/* =========================
   CLEANUP NOTES:
   - Removed redundant token files (colors.css, typography.css, spacing.css, shadows.css)
   - Streamlined components to use @apply and semantic tokens
   - Maintained single semantic-tokens.css as design system foundation
   - Maximized Tailwind utility usage throughout component files
========================= */

.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\:border-\[\#730394\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(115 3 148 / var(--tw-border-opacity));
}

.hover\:bg-\[\#730394\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(115 3 148 / var(--tw-bg-opacity));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:text-accent-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-accent-500) / var(--tw-text-opacity));
}

.hover\:text-primary-800:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-primary-800) / var(--tw-text-opacity));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.active\:shadow-none:active {
  --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);
}

.active\:outline-none:active {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.prose-headings\:text-gray-900 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.prose-p\:leading-relaxed :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  line-height: 1.625;
}

.prose-img\:rounded-lg :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-radius: 0.5rem;
}

.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {

  .md\:my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .md\:my-\[70px\] {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-\[70px\] {
    margin-bottom: 70px;
  }

  .md\:mt-\[100px\] {
    margin-top: 100px;
  }

  .md\:mt-\[70px\] {
    margin-top: 70px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-\[365px\] {
    height: 365px;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-\[570px\] {
    width: 570px;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .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\:flex-col {
    flex-direction: column;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:bg-auto {
    background-size: auto;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-\[24px\] {
    font-size: 24px;
  }

  .md\:text-\[48px\] {
    font-size: 48px;
  }
}

@media (min-width: 1280px) {

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:rounded-br-xl {
    border-bottom-right-radius: 0.75rem;
  }

  .lg\:rounded-tl-none {
    border-top-left-radius: 0px;
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:pl-20 {
    padding-left: 5rem;
  }

  .lg\:pt-24 {
    padding-top: 6rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1440px) {

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}