/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-content: "";
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-space-y-reverse: 0;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

:root, :host {
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-ibm-plex-mono: "IBM Plex Mono", monospace;
  --font-instrument-serif: "Instrument Serif", serif;
  --font-manrope: "Manrope", sans-serif;
  --font-sora: "Sora", sans-serif;
  --color-background-1: #3d4753;
  --color-background-3: #252a32;
  --color-background-4: #191d2a;
  --color-background-5: #11141d;
  --color-background-6: #0d1017;
  --color-background-7: #f8f9fa;
  --color-background-8: #f1f4f6;
  --color-background-9: #ebf0f3;
  --color-background-11: #dbe2e6;
  --color-background-12: #ced7de;
  --color-background-13: #0d0d12;
  --color-background-14: #12161f;
  --color-stroke-1: #94aecf;
  --color-stroke-3: #7c8ea5;
  --color-opai-yellow: #fff049;
  --color-opai-purple: #8d59ff;
  --color-opai-blue: #227eff;
  --color-opai-lemon: #d0ff00;
  --color-opai-green: #09f647;
  --color-opai-cyan: #5ddcf6;
  --color-gradient-14: radial-gradient(#5ddcf6 100%, #5ddcf6 3%);
  --text-it-heading-4: 2rem;
  --text-it-heading-4--line-height: 130%;
  --text-it-heading-5: 1.5rem;
  --text-it-heading-5--line-height: 140%;
  --text-is-heading-5: 1.75rem;
  --text-is-heading-5--line-height: 140%;
  --text-sora-heading-1: 4rem;
  --text-sora-heading-1--line-height: 120%;
  --text-sora-heading-1--letter-spacing: -3.2px;
  --text-sora-heading-2: 3rem;
  --text-sora-heading-2--line-height: 120%;
  --text-sora-heading-2--letter-spacing: -2.4px;
  --text-sora-heading-3: 2.5rem;
  --text-sora-heading-3--line-height: 120%;
  --text-sora-heading-3--letter-spacing: -1.6px;
  --text-sora-heading-4: 2rem;
  --text-sora-heading-4--line-height: 130%;
  --text-sora-heading-5: 1.5rem;
  --text-sora-heading-5--line-height: 140%;
  --text-sora-heading-6: 1.25rem;
  --text-sora-heading-6--line-height: 140%;
  --text-manrope-heading-4: 2rem;
  --text-manrope-heading-4--line-height: 130%;
  --text-manrope-heading-5: 1.5rem;
  --text-manrope-heading-5--line-height: 140%;
  --text-manrope-heading-6: 1.25rem;
  --text-manrope-heading-6--line-height: 140%;
  --text-tagline-1: 1.125rem;
  --text-tagline-1--line-height: 150%;
  --text-tagline-2: 1rem;
  --text-tagline-2--line-height: 150%;
  --text-tagline-3: .875rem;
  --text-tagline-3--line-height: 150%;
  --text-tagline-4: .75rem;
  --text-tagline-4--line-height: 150%;
  --easing-faq: cubic-bezier(.4, 0, .2, 1);
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-4xl: 2rem;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --blur-xs: 4px;
  --blur-md: 12px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
}

body {
  font-family: var(--font-inter-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-opai-animate] {
  opacity: 0;
}

[data-opai-avatar] {
  opacity: 0;
  scale: 0;
}

[data-opai-text-reveal] {
  opacity: 0;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .2s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .2s;
  transition-timing-function: var(--ease-in-out);
}

.scroll-bar::-webkit-scrollbar {
  display: none;
}

.scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-header {
  background-color: #0d1017cc;
}

@supports (color: color-mix(in lab, red, red)) {
  .scroll-header {
    background-color: color-mix(in oklab, var(--color-background-6) 80%, transparent);
  }
}

.scroll-header {
  --tw-shadow: 0 4px 30px var(--tw-shadow-color, #00000026);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
  padding-inline: calc(var(--spacing) * 5) !important;
}

.navbar-link {
  position: relative;
}

.navbar-link:before {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  top: 66.6667%;
  left: calc(var(--spacing) * 0);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  transform-origin: 100%;
  content: var(--tw-content);
  --tw-translate-y: calc(2 / 3 * 100%);
  width: 100%;
  height: 1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  --tw-scale-x: 0%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
  content: var(--tw-content);
  background-color: #fff9;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .navbar-link:before {
    background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
  }
}

.navbar-link:before {
  content: var(--tw-content);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .5s;
  --tw-content: "";
  content: var(--tw-content);
  transition-duration: .5s;
}

@media (hover: hover) {
  .navbar-link:hover:before {
    content: var(--tw-content);
    transform-origin: 0;
    content: var(--tw-content);
    --tw-scale-x: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
}

.footer-title {
  background: var(--Gradient-12, linear-gradient(180deg, #ffffff0d 0%, #fff3 100%));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.laser-flow {
  pointer-events: none;
  top: calc(var(--spacing) * 0);
  width: 100%;
  position: absolute;
  overflow: hidden;
}

.laser-flow-canvas {
  inset: calc(var(--spacing) * 0);
  top: calc(var(--spacing) * 0);
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.underline-hover-effect .blog-title h3 {
  cursor: pointer;
  width: 100%;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .5s;
  --tw-ease: cubic-bezier(.645,.045,.355,1);
  background-image: linear-gradient(#0000 calc(100% - 1px), #fff 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  padding-bottom: 1px;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.645, .045, .355, 1);
  display: inline;
}

.underline-hover-effect:hover .blog-title h3 {
  background-size: 100% 100%;
}

.underline-hover-effect-black .blog-title-black h3 {
  cursor: pointer;
  width: 100%;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .5s;
  --tw-ease: cubic-bezier(.645,.045,.355,1);
  background-image: linear-gradient(#0000 calc(100% - 1px), #000 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  padding-bottom: 1px;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.645, .045, .355, 1);
  display: inline;
}

.underline-hover-effect-black:hover .blog-title-black h3 {
  background-size: 100% 100%;
}

.lock-fade-animation-delay-1, .lock-fade-animation-delay-2 {
  animation: 5s cubic-bezier(.4, 0, .6, 1) infinite lockFadeInOut;
}

.lock-fade-animation-delay-3 {
  animation: 5s cubic-bezier(.4, 0, .6, 1) infinite lockFadeOpacity;
}

@keyframes lockFadeInOut {
  0% {
    opacity: .8;
    transform: scale(.92);
  }

  20% {
    opacity: 1;
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: .8;
    transform: scale(.92);
  }
}

.image-loading-reveal img {
  will-change: transform, clip-path;
}

.details-page-content {
  flex: 1;
}

:where(.details-page-content > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
}

@media (min-width: 48rem) {
  :where(.details-page-content > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 18) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 18) * calc(1 - var(--tw-space-y-reverse)));
  }
}

.details-page-content p {
  font-family: var(--font-inter-tight);
  font-size: var(--text-tagline-2);
  line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  --tw-leading: 150%;
  --tw-font-weight: var(--font-weight-normal);
  line-height: 150%;
  font-weight: var(--font-weight-normal);
  color: #fff9;
}

@supports (color: color-mix(in lab, red, red)) {
  .details-page-content p {
    color: color-mix(in oklab, var(--color-white) 60%, transparent);
  }
}

.details-page-content p:not(:last-child) {
  margin-bottom: calc(var(--spacing) * 9);
}

.details-page-content h3 {
  margin-bottom: calc(var(--spacing) * 4);
  font-family: var(--font-sora);
  font-size: var(--text-sora-heading-5);
  line-height: var(--tw-leading, var(--text-sora-heading-5--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: -1.28px;
  letter-spacing: -1.28px;
  color: #ffffffe6;
}

@supports (color: color-mix(in lab, red, red)) {
  .details-page-content h3 {
    color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}

@media (min-width: 64rem) {
  .details-page-content h3 {
    font-family: var(--font-sora);
    font-size: var(--text-sora-heading-4);
    line-height: var(--tw-leading, var(--text-sora-heading-4--line-height));
  }
}

.details-page-content h4 {
  margin-top: calc(var(--spacing) * 6);
  margin-bottom: calc(var(--spacing) * 3);
  font-family: var(--font-sora);
  font-size: var(--text-sora-heading-5);
  line-height: var(--tw-leading, var(--text-sora-heading-5--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: -.72px;
  letter-spacing: -.72px;
  color: #ffffffe6;
}

@supports (color: color-mix(in lab, red, red)) {
  .details-page-content h4 {
    color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}

:where(.details-page-content ul > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

.details-page-content ul li {
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-left: calc(var(--spacing) * 4);
  font-family: var(--font-inter-tight);
  font-size: var(--text-tagline-2);
  line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #ffffffe6;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .details-page-content ul li {
    color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}

.details-page-content ul li:before {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  top: 50%;
  left: calc(var(--spacing) * 0);
  content: var(--tw-content);
  content: var(--tw-content);
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  content: var(--tw-content);
  background-color: #ffffffe6;
  border-radius: 3.40282e38px;
  display: block;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .details-page-content ul li:before {
    background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}

.details-page-content ul li:before {
  --tw-content: "";
  content: var(--tw-content);
}

:where(.details-page-content div > div > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}

.details-page-content div > div:not(:last-child) {
  margin-bottom: calc(var(--spacing) * 4);
}

.details-page-content time {
  margin-top: calc(var(--spacing) * -4);
  font-family: var(--font-inter-tight);
  font-size: var(--text-tagline-3);
  line-height: var(--tw-leading, var(--text-tagline-3--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #fff9;
  display: block;
}

@supports (color: color-mix(in lab, red, red)) {
  .details-page-content time {
    color: color-mix(in oklab, var(--color-white) 60%, transparent);
  }
}

.blog-details-content {
  flex: 1;
}

:where(.blog-details-content > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
}

@media (min-width: 48rem) {
  :where(.blog-details-content > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 17.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 17.5) * calc(1 - var(--tw-space-y-reverse)));
  }
}

.blog-details-content p {
  font-family: var(--font-inter-tight);
  font-size: var(--text-tagline-2);
  line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  --tw-leading: 150%;
  --tw-font-weight: var(--font-weight-normal);
  line-height: 150%;
  font-weight: var(--font-weight-normal);
  color: #0d0d1299;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-details-content p {
    color: color-mix(in oklab, var(--color-background-13) 60%, transparent);
  }
}

.blog-details-content p:not(:last-child) {
  margin-bottom: calc(var(--spacing) * 4);
}

.blog-details-content h3 {
  margin-bottom: calc(var(--spacing) * 1);
  font-family: var(--font-sora);
  font-size: var(--text-sora-heading-5);
  line-height: var(--tw-leading, var(--text-sora-heading-5--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: -1.28px;
  letter-spacing: -1.28px;
  color: #0d0d12e6;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-details-content h3 {
    color: color-mix(in oklab, var(--color-background-13) 90%, transparent);
  }
}

@media (min-width: 64rem) {
  .blog-details-content h3 {
    font-family: var(--font-sora);
    font-size: var(--text-sora-heading-4);
    line-height: var(--tw-leading, var(--text-sora-heading-4--line-height));
  }
}

:where(.blog-details-content ul > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}

.blog-details-content ul li {
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-left: calc(var(--spacing) * 3);
  font-family: var(--font-inter-tight);
  font-size: var(--text-tagline-2);
  line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #0d0d12e6;
  display: flex;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-details-content ul li {
    color: color-mix(in oklab, var(--color-background-13) 90%, transparent);
  }
}

.blog-details-content ul li:before {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  top: 50%;
  left: calc(var(--spacing) * 0);
  content: var(--tw-content);
  content: var(--tw-content);
  width: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 1.5);
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  content: var(--tw-content);
  background-color: #0d0d12e6;
  border-radius: 3.40282e38px;
  display: block;
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-details-content ul li:before {
    background-color: color-mix(in oklab, var(--color-background-13) 90%, transparent);
  }
}

.blog-details-content ul li:before {
  --tw-content: "";
  content: var(--tw-content);
}

.blog-details-content figure {
  height: 400px;
}

:where(.blog-details-content figure > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}

.blog-details-content figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.blog-details-content figure img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.blog-details-content figcaption {
  font-family: var(--font-sora);
  font-size: var(--text-sora-heading-5);
  line-height: var(--tw-leading, var(--text-sora-heading-5--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  --tw-tracking: -.72px;
  letter-spacing: -.72px;
  color: #0d0d12e6;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-details-content figcaption {
    color: color-mix(in oklab, var(--color-background-13) 90%, transparent);
  }
}

.blog-details-content blockquote {
  align-items: flex-start;
  gap: calc(var(--spacing) * 6);
  border-radius: var(--radius-xl);
  background-color: var(--color-background-4);
  padding-block: calc(var(--spacing) * 6);
  padding-right: calc(var(--spacing) * 6);
  display: flex;
}

.blog-details-content blockquote .blockquote-divider {
  height: 90px;
  width: calc(var(--spacing) * .5);
  background-color: var(--color-opai-blue);
  border-radius: 3.40282e38px;
  flex-shrink: 0;
}

.blog-details-content blockquote p {
  margin-bottom: calc(var(--spacing) * 0);
  font-family: var(--font-inter-tight);
  font-size: var(--text-tagline-1);
  line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: #ffffffe6;
}

@supports (color: color-mix(in lab, red, red)) {
  .blog-details-content blockquote p {
    color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}

@layer theme;

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

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

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

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .footer-link {
    position: relative;
    overflow: hidden;
  }

  .footer-link:before {
    content: var(--tw-content);
    content: var(--tw-content);
    bottom: calc(var(--spacing) * 0);
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
    content: var(--tw-content);
    content: var(--tw-content);
    content: var(--tw-content);
    transform-origin: 100%;
    content: var(--tw-content);
    --tw-scale-x: 0%;
    width: 100%;
    height: 1px;
    scale: var(--tw-scale-x) var(--tw-scale-y);
    content: var(--tw-content);
    background-color: var(--color-white);
    content: var(--tw-content);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    content: var(--tw-content);
    --tw-duration: .5s;
    --tw-content: "";
    content: var(--tw-content);
    transition-duration: .5s;
    position: absolute;
  }

  @media (hover: hover) {
    .footer-link:hover:before {
      content: var(--tw-content);
      transform-origin: 0;
      content: var(--tw-content);
      --tw-scale-x: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .-top-20 {
    top: calc(var(--spacing) * -20);
  }

  .-top-40 {
    top: calc(var(--spacing) * -40);
  }

  .-top-80 {
    top: calc(var(--spacing) * -80);
  }

  .-top-\[4\.5\%\] {
    top: -4.5%;
  }

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

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

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

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

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

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

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

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

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

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

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

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

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

  .top-\[-4\.5\%\] {
    top: -4.5%;
  }

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

  .top-\[-6\.5\%\] {
    top: -6.5%;
  }

  .top-\[-10\.5\%\] {
    top: -10.5%;
  }

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

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

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

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

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

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

  .top-\[-23\.5\%\] {
    top: -23.5%;
  }

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

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

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

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

  .top-full {
    top: 100%;
  }

  .-right-15 {
    right: calc(var(--spacing) * -15);
  }

  .-right-60 {
    right: calc(var(--spacing) * -60);
  }

  .-right-\[0\.5\%\] {
    right: -.5%;
  }

  .-right-\[2\%\] {
    right: -2%;
  }

  .-right-\[3\%\] {
    right: -3%;
  }

  .-right-\[5\%\] {
    right: -5%;
  }

  .-right-\[9\%\] {
    right: -9%;
  }

  .-right-\[10\%\] {
    right: -10%;
  }

  .-right-\[18\%\] {
    right: -18%;
  }

  .-right-\[25\%\] {
    right: -25%;
  }

  .-right-\[30\%\] {
    right: -30%;
  }

  .-right-\[33\%\] {
    right: -33%;
  }

  .-right-\[35\%\] {
    right: -35%;
  }

  .-right-\[80\%\] {
    right: -80%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-\[-2\%\] {
    right: -2%;
  }

  .right-\[-9\%\] {
    right: -9%;
  }

  .right-\[-13\%\] {
    right: -13%;
  }

  .right-\[-17\%\] {
    right: -17%;
  }

  .right-\[-20\%\] {
    right: -20%;
  }

  .right-\[-24\%\] {
    right: -24%;
  }

  .right-\[-37\%\] {
    right: -37%;
  }

  .right-\[60px\] {
    right: 60px;
  }

  .-bottom-3 {
    bottom: calc(var(--spacing) * -3);
  }

  .-bottom-10 {
    bottom: calc(var(--spacing) * -10);
  }

  .-bottom-16 {
    bottom: calc(var(--spacing) * -16);
  }

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

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-\[-2\%\] {
    bottom: -2%;
  }

  .bottom-\[-12\%\] {
    bottom: -12%;
  }

  .bottom-\[4\%\] {
    bottom: 4%;
  }

  .bottom-\[5\%\] {
    bottom: 5%;
  }

  .bottom-\[12\%\] {
    bottom: 12%;
  }

  .bottom-\[15px\] {
    bottom: 15px;
  }

  .bottom-\[19\.5\%\] {
    bottom: 19.5%;
  }

  .-left-\[2\%\] {
    left: -2%;
  }

  .-left-\[9\%\] {
    left: -9%;
  }

  .-left-\[13\%\] {
    left: -13%;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

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

  .left-\[-2\%\] {
    left: -2%;
  }

  .left-\[-9\%\] {
    left: -9%;
  }

  .left-\[-17\%\] {
    left: -17%;
  }

  .left-\[-18\%\] {
    left: -18%;
  }

  .left-\[-20\%\] {
    left: -20%;
  }

  .left-\[-25\%\] {
    left: -25%;
  }

  .left-\[-26\%\] {
    left: -26%;
  }

  .left-\[50\%\] {
    left: 50%;
  }

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

  .-z-0 {
    z-index: calc(0 * -1);
  }

  .-z-10 {
    z-index: calc(10 * -1);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .z-\[-1\] {
    z-index: -1;
  }

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

  .container {
    width: 100%;
  }

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

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .main-container {
    max-width: 1290px;
    padding-inline: calc(var(--spacing) * 5);
    margin-inline: auto;
  }

  @media (min-width: 1440px) {
    .main-container {
      padding-inline: calc(var(--spacing) * 0);
    }
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .ms-2\.5 {
    margin-inline-start: calc(var(--spacing) * 2.5);
  }

  .me-2\.5 {
    margin-inline-end: calc(var(--spacing) * 2.5);
  }

  .-mt-5 {
    margin-top: calc(var(--spacing) * -5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-4\.5 {
    margin-top: calc(var(--spacing) * 4.5);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-7 {
    margin-top: calc(var(--spacing) * 7);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5\.5 {
    margin-bottom: calc(var(--spacing) * 5.5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .mb-13 {
    margin-bottom: calc(var(--spacing) * 13);
  }

  .mb-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-6 {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-10 {
    margin-left: calc(var(--spacing) * 10);
  }

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

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

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

  .table {
    display: table;
  }

  .size-1\.5 {
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-6\.5 {
    width: calc(var(--spacing) * 6.5);
    height: calc(var(--spacing) * 6.5);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-11 {
    width: calc(var(--spacing) * 11);
    height: calc(var(--spacing) * 11);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }

  .size-17 {
    width: calc(var(--spacing) * 17);
    height: calc(var(--spacing) * 17);
  }

  .size-17\.5 {
    width: calc(var(--spacing) * 17.5);
    height: calc(var(--spacing) * 17.5);
  }

  .size-29 {
    width: calc(var(--spacing) * 29);
    height: calc(var(--spacing) * 29);
  }

  .size-30 {
    width: calc(var(--spacing) * 30);
    height: calc(var(--spacing) * 30);
  }

  .size-34 {
    width: calc(var(--spacing) * 34);
    height: calc(var(--spacing) * 34);
  }

  .size-37 {
    width: calc(var(--spacing) * 37);
    height: calc(var(--spacing) * 37);
  }

  .size-41 {
    width: calc(var(--spacing) * 41);
    height: calc(var(--spacing) * 41);
  }

  .size-\[150px\] {
    width: 150px;
    height: 150px;
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-10\! {
    height: calc(var(--spacing) * 10) !important;
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-19 {
    height: calc(var(--spacing) * 19);
  }

  .h-23 {
    height: calc(var(--spacing) * 23);
  }

  .h-26 {
    height: calc(var(--spacing) * 26);
  }

  .h-45\.5 {
    height: calc(var(--spacing) * 45.5);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-\[409\.723px\] {
    height: 409.723px;
  }

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

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

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

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

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

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

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-175 {
    max-height: calc(var(--spacing) * 175);
  }

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

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

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

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

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

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

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

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

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

  .max-h-max {
    max-height: max-content;
  }

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

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

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

  .w-0\.5 {
    width: calc(var(--spacing) * .5);
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-11\.5 {
    width: calc(var(--spacing) * 11.5);
  }

  .w-15 {
    width: calc(var(--spacing) * 15);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-22 {
    width: calc(var(--spacing) * 22);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

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

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

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

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

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

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

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

  .w-\[287\.266px\] {
    width: 287.266px;
  }

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

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

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

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

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

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

  .w-\[calc\(100\%\+50px\)\] {
    width: calc(100% + 50px);
  }

  .w-\[calc\(100\%-12px\)\] {
    width: calc(100% - 12px);
  }

  .w-\[calc\(100\%-30px\)\] {
    width: calc(100% - 30px);
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .max-w-full {
    max-width: 100%;
  }

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

  .flex-1 {
    flex: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-2 {
    --tw-translate-x: calc(var(--spacing) * -2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-4 {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-12 {
    --tw-translate-x: calc(var(--spacing) * -12);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-10\.5 {
    --tw-translate-y: calc(var(--spacing) * 10.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[57\%\] {
    --tw-translate-y: 57%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-0 {
    --tw-scale-x: 0%;
    --tw-scale-y: 0%;
    --tw-scale-z: 0%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .-rotate-45 {
    rotate: -45deg;
  }

  .-rotate-\[109deg\] {
    rotate: -109deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-\[-109\.904deg\] {
    rotate: -109.904deg;
  }

  .rotate-\[-109deg\] {
    rotate: -109deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize {
    resize: both;
  }

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

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

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

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

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

  .place-items-end {
    place-items: end;
  }

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

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

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

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

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

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

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

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

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

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

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

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-7 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-9 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 9) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 9) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-9\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 9.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 9.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-10 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-10\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 10.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 10.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-13 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 13) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 13) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-14 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 14) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-16 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-17 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 17) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 17) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-18 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 18) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 18) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-19 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 19) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 19) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-2\.5 {
    column-gap: calc(var(--spacing) * 2.5);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }

  .gap-x-10 {
    column-gap: calc(var(--spacing) * 10);
  }

  .gap-x-12 {
    column-gap: calc(var(--spacing) * 12);
  }

  .gap-x-14 {
    column-gap: calc(var(--spacing) * 14);
  }

  :where(.-space-x-2\.5 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * -2.5) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * -2.5) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-2 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-2\.5 {
    row-gap: calc(var(--spacing) * 2.5);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }

  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }

  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }

  .gap-y-15 {
    row-gap: calc(var(--spacing) * 15);
  }

  .gap-y-18 {
    row-gap: calc(var(--spacing) * 18);
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-4xl {
    border-radius: var(--radius-4xl);
  }

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

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

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

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

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

  .rounded-\[18px\]\! {
    border-radius: 18px !important;
  }

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

  .rounded-\[20px\]\! {
    border-radius: 20px !important;
  }

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

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

  .rounded-\[409\.723px\] {
    border-radius: 409.723px;
  }

  .rounded-\[431\.011px\] {
    border-radius: 431.011px;
  }

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

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-tl-xl {
    border-top-left-radius: var(--radius-xl);
  }

  .rounded-tr-xl {
    border-top-right-radius: var(--radius-xl);
  }

  .rounded-br-xl {
    border-bottom-right-radius: var(--radius-xl);
  }

  .rounded-bl-xl {
    border-bottom-left-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-\[6px\] {
    border-style: var(--tw-border-style);
    border-width: 6px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-\[\#1B232F\] {
    border-color: #1b232f;
  }

  .border-stroke-1\/10 {
    border-color: #94aecf1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-1\/10 {
      border-color: color-mix(in oklab, var(--color-stroke-1) 10%, transparent);
    }
  }

  .border-stroke-1\/11 {
    border-color: #94aecf1c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-1\/11 {
      border-color: color-mix(in oklab, var(--color-stroke-1) 11%, transparent);
    }
  }

  .border-stroke-1\/18 {
    border-color: #94aecf2e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-1\/18 {
      border-color: color-mix(in oklab, var(--color-stroke-1) 18%, transparent);
    }
  }

  .border-stroke-3\/11 {
    border-color: #7c8ea51c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-3\/11 {
      border-color: color-mix(in oklab, var(--color-stroke-3) 11%, transparent);
    }
  }

  .border-stroke-3\/18 {
    border-color: #7c8ea52e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-3\/18 {
      border-color: color-mix(in oklab, var(--color-stroke-3) 18%, transparent);
    }
  }

  .border-stroke-3\/20 {
    border-color: #7c8ea533;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-3\/20 {
      border-color: color-mix(in oklab, var(--color-stroke-3) 20%, transparent);
    }
  }

  .border-stroke-3\/25 {
    border-color: #7c8ea540;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-3\/25 {
      border-color: color-mix(in oklab, var(--color-stroke-3) 25%, transparent);
    }
  }

  .border-stroke-3\/30 {
    border-color: #7c8ea54d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-3\/30 {
      border-color: color-mix(in oklab, var(--color-stroke-3) 30%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-\[\#0d0d1280\] {
    background-color: #0d0d1280;
  }

  .bg-\[rgba\(34\,126\,255\,0\.10\)\] {
    background-color: #227eff1a;
  }

  .bg-\[rgba\(250\,252\,255\,0\.05\)\] {
    background-color: #fafcff0d;
  }

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

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

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

  .bg-background-5\/25 {
    background-color: #11141d40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background-5\/25 {
      background-color: color-mix(in oklab, var(--color-background-5) 25%, transparent);
    }
  }

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

  .bg-background-6\/10 {
    background-color: #0d10171a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background-6\/10 {
      background-color: color-mix(in oklab, var(--color-background-6) 10%, transparent);
    }
  }

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

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

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

  .bg-background-13\/20 {
    background-color: #0d0d1233;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background-13\/20 {
      background-color: color-mix(in oklab, var(--color-background-13) 20%, transparent);
    }
  }

  .bg-background-13\/50 {
    background-color: #0d0d1280;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background-13\/50 {
      background-color: color-mix(in oklab, var(--color-background-13) 50%, transparent);
    }
  }

  .bg-background-13\/60 {
    background-color: #0d0d1299;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background-13\/60 {
      background-color: color-mix(in oklab, var(--color-background-13) 60%, transparent);
    }
  }

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

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-opai-blue {
    background-color: var(--color-opai-blue);
  }

  .bg-opai-cyan {
    background-color: var(--color-opai-cyan);
  }

  .bg-opai-lemon {
    background-color: var(--color-opai-lemon);
  }

  .bg-opai-yellow {
    background-color: var(--color-opai-yellow);
  }

  .bg-stroke-1\/10 {
    background-color: #94aecf1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-stroke-1\/10 {
      background-color: color-mix(in oklab, var(--color-stroke-1) 10%, transparent);
    }
  }

  .bg-stroke-1\/18 {
    background-color: #94aecf2e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-stroke-1\/18 {
      background-color: color-mix(in oklab, var(--color-stroke-1) 18%, transparent);
    }
  }

  .bg-stroke-3\/20 {
    background-color: #7c8ea533;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-stroke-3\/20 {
      background-color: color-mix(in oklab, var(--color-stroke-3) 20%, transparent);
    }
  }

  .bg-stroke-3\/25 {
    background-color: #7c8ea540;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-stroke-3\/25 {
      background-color: color-mix(in oklab, var(--color-stroke-3) 25%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

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

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/20 {
    background-color: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/20 {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .bg-white\/90 {
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/90 {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .bg-linear-\[90deg\,\#DBE2E6_0\%\,\#FFF_71\.63\%\] {
    --tw-gradient-position: 90deg,#dbe2e6 0%,#fff 71.63%;
    background-image: linear-gradient(var(--tw-gradient-stops, 90deg,#dbe2e6 0%,#fff 71.63%));
  }

  .bg-linear-\[180deg\,rgba\(13\,16\,23\,0\.00\)_0\%\,\#0D1017_93\.95\%\] {
    --tw-gradient-position: 180deg,#0d101700 0%,#0d1017 93.95%;
    background-image: linear-gradient(var(--tw-gradient-stops, 180deg,#0d101700 0%,#0d1017 93.95%));
  }

  .bg-linear-\[270deg\,\#5A9FFF_0\%\,rgba\(255\,250\,107\,0\.20\)_95\.12\%\] {
    --tw-gradient-position: 270deg,#5a9fff 0%,#fffa6b33 95.12%;
    background-image: linear-gradient(var(--tw-gradient-stops, 270deg,#5a9fff 0%,#fffa6b33 95.12%));
  }

  .bg-\[linear-gradient\(180deg\,_rgba\(17\,20\,29\,0\.04\)_0\%\,_rgba\(17\,20\,29\,0\.04\)_100\%\)\] {
    background-image: linear-gradient(#11141d0a 0% 100%);
  }

  .bg-\[linear-gradient\(223deg\,_rgba\(13\,16\,23\,0\)_54\%\,_rgba\(13\,16\,23\,0\.6\)_83\%\,_rgba\(13\,16\,23\,1\)_100\%\)\] {
    background-image: linear-gradient(223deg, #0d101700 54%, #0d101799 83%, #0d1017 100%);
  }

  .bg-\[url\(\'\/images\/gradient\/opai-35\.jpg\'\)\] {
    background-image: url("../images/gradient/opai-35.jpg");
  }

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

  .bg-center {
    background-position: center;
  }

  .fill-stroke-3\/18 {
    fill: #7c8ea52e;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fill-stroke-3\/18 {
      fill: color-mix(in oklab, var(--color-stroke-3) 18%, transparent);
    }
  }

  .stroke-background-6 {
    stroke: var(--color-background-6);
  }

  .stroke-background-7\/80\! {
    stroke: #f8f9facc !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-background-7\/80\! {
      stroke: color-mix(in oklab, var(--color-background-7) 80%, transparent) !important;
    }
  }

  .stroke-background-13 {
    stroke: var(--color-background-13);
  }

  .stroke-background-14 {
    stroke: var(--color-background-14);
  }

  .stroke-opai-blue {
    stroke: var(--color-opai-blue);
  }

  .stroke-opai-green {
    stroke: var(--color-opai-green);
  }

  .stroke-opai-lemon {
    stroke: var(--color-opai-lemon);
  }

  .stroke-opai-purple {
    stroke: var(--color-opai-purple);
  }

  .stroke-white {
    stroke: var(--color-white);
  }

  .stroke-white\/10 {
    stroke: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-white\/10 {
      stroke: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .stroke-white\/20 {
    stroke: #fff3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-white\/20 {
      stroke: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }

  .stroke-white\/60 {
    stroke: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-white\/60 {
      stroke: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .stroke-white\/90 {
    stroke: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .stroke-white\/90 {
      stroke: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .object-contain {
    object-fit: contain;
  }

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

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-12 {
    padding: calc(var(--spacing) * 12);
  }

  .p-16 {
    padding: calc(var(--spacing) * 16);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-4\.5 {
    padding-inline: calc(var(--spacing) * 4.5);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-9 {
    padding-inline: calc(var(--spacing) * 9);
  }

  .px-11 {
    padding-inline: calc(var(--spacing) * 11);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-9 {
    padding-block: calc(var(--spacing) * 9);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-10\.5 {
    padding-block: calc(var(--spacing) * 10.5);
  }

  .py-11 {
    padding-block: calc(var(--spacing) * 11);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-17 {
    padding-block: calc(var(--spacing) * 17);
  }

  .py-18 {
    padding-block: calc(var(--spacing) * 18);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-\[9px\] {
    padding-block: 9px;
  }

  .py-\[11px\] {
    padding-block: 11px;
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }

  .pt-18 {
    padding-top: calc(var(--spacing) * 18);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }

  .pt-26 {
    padding-top: calc(var(--spacing) * 26);
  }

  .pt-28 {
    padding-top: calc(var(--spacing) * 28);
  }

  .pt-29 {
    padding-top: calc(var(--spacing) * 29);
  }

  .pt-30 {
    padding-top: calc(var(--spacing) * 30);
  }

  .pt-39 {
    padding-top: calc(var(--spacing) * 39);
  }

  .pt-40 {
    padding-top: calc(var(--spacing) * 40);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-13 {
    padding-bottom: calc(var(--spacing) * 13);
  }

  .pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-17 {
    padding-bottom: calc(var(--spacing) * 17);
  }

  .pb-18 {
    padding-bottom: calc(var(--spacing) * 18);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }

  .pb-\[30px\] {
    padding-bottom: 30px;
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

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

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

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

  .font-ibm-plex-mono {
    font-family: var(--font-ibm-plex-mono);
  }

  .font-inter-tight {
    font-family: var(--font-inter-tight);
  }

  .font-manrope {
    font-family: var(--font-manrope);
  }

  .font-sora {
    font-family: var(--font-sora);
  }

  .text-is-heading-5 {
    font-family: var(--font-instrument-serif);
  }

  .text-it-heading-4, .text-it-heading-5 {
    font-family: var(--font-inter-tight);
  }

  .text-manrope-heading-4, .text-manrope-heading-5, .text-manrope-heading-6 {
    font-family: var(--font-manrope);
  }

  .text-sora-heading-2, .text-sora-heading-3, .text-sora-heading-4, .text-sora-heading-5, .text-sora-heading-6 {
    font-family: var(--font-sora);
  }

  .text-sora-heading-2 {
    font-size: var(--text-sora-heading-2);
    line-height: var(--tw-leading, var(--text-sora-heading-2--line-height));
    letter-spacing: var(--tw-tracking, var(--text-sora-heading-2--letter-spacing));
  }

  .text-sora-heading-3 {
    font-size: var(--text-sora-heading-3);
    line-height: var(--tw-leading, var(--text-sora-heading-3--line-height));
    letter-spacing: var(--tw-tracking, var(--text-sora-heading-3--letter-spacing));
  }

  .\!text-tagline-3 {
    font-size: var(--text-tagline-3) !important;
    line-height: var(--tw-leading, var(--text-tagline-3--line-height)) !important;
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-is-heading-5 {
    font-size: var(--text-is-heading-5);
    line-height: var(--tw-leading, var(--text-is-heading-5--line-height));
  }

  .text-it-heading-4 {
    font-size: var(--text-it-heading-4);
    line-height: var(--tw-leading, var(--text-it-heading-4--line-height));
  }

  .text-it-heading-5 {
    font-size: var(--text-it-heading-5);
    line-height: var(--tw-leading, var(--text-it-heading-5--line-height));
  }

  .text-manrope-heading-4 {
    font-size: var(--text-manrope-heading-4);
    line-height: var(--tw-leading, var(--text-manrope-heading-4--line-height));
  }

  .text-manrope-heading-5 {
    font-size: var(--text-manrope-heading-5);
    line-height: var(--tw-leading, var(--text-manrope-heading-5--line-height));
  }

  .text-manrope-heading-6 {
    font-size: var(--text-manrope-heading-6);
    line-height: var(--tw-leading, var(--text-manrope-heading-6--line-height));
  }

  .text-sora-heading-4 {
    font-size: var(--text-sora-heading-4);
    line-height: var(--tw-leading, var(--text-sora-heading-4--line-height));
  }

  .text-sora-heading-5 {
    font-size: var(--text-sora-heading-5);
    line-height: var(--tw-leading, var(--text-sora-heading-5--line-height));
  }

  .text-sora-heading-6 {
    font-size: var(--text-sora-heading-6);
    line-height: var(--tw-leading, var(--text-sora-heading-6--line-height));
  }

  .text-tagline-1 {
    font-size: var(--text-tagline-1);
    line-height: var(--tw-leading, var(--text-tagline-1--line-height));
  }

  .text-tagline-2 {
    font-size: var(--text-tagline-2);
    line-height: var(--tw-leading, var(--text-tagline-2--line-height));
  }

  .text-tagline-3 {
    font-size: var(--text-tagline-3);
    line-height: var(--tw-leading, var(--text-tagline-3--line-height));
  }

  .text-tagline-4 {
    font-size: var(--text-tagline-4);
    line-height: var(--tw-leading, var(--text-tagline-4--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

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

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

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

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

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

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

  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }

  .leading-\[21\.7px\] {
    --tw-leading: 21.7px;
    line-height: 21.7px;
  }

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

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

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.6px\] {
    --tw-tracking: -.6px;
    letter-spacing: -.6px;
  }

  .tracking-\[-0\.72px\] {
    --tw-tracking: -.72px;
    letter-spacing: -.72px;
  }

  .tracking-\[-1\.28px\] {
    --tw-tracking: -1.28px;
    letter-spacing: -1.28px;
  }

  .tracking-\[-2\.4px\] {
    --tw-tracking: -2.4px;
    letter-spacing: -2.4px;
  }

  .tracking-\[1\.68px\] {
    --tw-tracking: 1.68px;
    letter-spacing: 1.68px;
  }

  .tracking-\[30\.48px\] {
    --tw-tracking: 30.48px;
    letter-spacing: 30.48px;
  }

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

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

  .\!text-white\/90 {
    color: #ffffffe6 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\!text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent) !important;
    }
  }

  .text-background-6 {
    color: var(--color-background-6);
  }

  .text-background-7 {
    color: var(--color-background-7);
  }

  .text-background-7\/60 {
    color: #f8f9fa99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background-7\/60 {
      color: color-mix(in oklab, var(--color-background-7) 60%, transparent);
    }
  }

  .text-background-8 {
    color: var(--color-background-8);
  }

  .text-background-11 {
    color: var(--color-background-11);
  }

  .text-background-12\/60 {
    color: #ced7de99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background-12\/60 {
      color: color-mix(in oklab, var(--color-background-12) 60%, transparent);
    }
  }

  .text-background-13\/60 {
    color: #0d0d1299;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background-13\/60 {
      color: color-mix(in oklab, var(--color-background-13) 60%, transparent);
    }
  }

  .text-background-13\/90 {
    color: #0d0d12e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background-13\/90 {
      color: color-mix(in oklab, var(--color-background-13) 90%, transparent);
    }
  }

  .text-background-14 {
    color: var(--color-background-14);
  }

  .text-opai-blue {
    color: var(--color-opai-blue);
  }

  .text-opai-green {
    color: var(--color-opai-green);
  }

  .text-opai-lemon {
    color: var(--color-opai-lemon);
  }

  .text-opai-purple {
    color: var(--color-opai-purple);
  }

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

  .text-white\/10 {
    color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/10 {
      color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .text-white\/30 {
    color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/30 {
      color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .text-white\/50 {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

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

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .mix-blend-color-dodge {
    mix-blend-mode: color-dodge;
  }

  .mix-blend-lighten {
    mix-blend-mode: lighten;
  }

  .mix-blend-plus-lighter {
    mix-blend-mode: plus-lighter;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2 {
    --tw-shadow: 0 4px 4px 0 var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-3 {
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-6 {
    --tw-shadow: 0 20px 65px -5px var(--tw-shadow-color, #1c222b0d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

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

  .ring-8 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-background-3 {
    --tw-ring-color: var(--color-background-3);
  }

  .ring-white {
    --tw-ring-color: var(--color-white);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

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

  .blur-\[7px\] {
    --tw-blur: blur(7px);
    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, );
  }

  .blur-\[12px\] {
    --tw-blur: blur(12px);
    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, );
  }

  .blur-\[25\.5px\] {
    --tw-blur: blur(25.5px);
    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, );
  }

  .blur-\[30px\] {
    --tw-blur: blur(30px);
    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, );
  }

  .blur-\[42px\] {
    --tw-blur: blur(42px);
    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, );
  }

  .blur-\[70px\] {
    --tw-blur: blur(70px);
    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, );
  }

  .blur-\[107px\] {
    --tw-blur: blur(107px);
    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, );
  }

  .blur-\[125px\] {
    --tw-blur: blur(125px);
    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, );
  }

  .blur-\[142px\] {
    --tw-blur: blur(142px);
    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, );
  }

  .blur-\[155\.6551513671875px\] {
    --tw-blur: blur(155.655px);
    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, );
  }

  .blur-\[162px\] {
    --tw-blur: blur(162px);
    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, );
  }

  .blur-\[200px\] {
    --tw-blur: blur(200px);
    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, );
  }

  .blur-md {
    --tw-blur: blur(var(--blur-md));
    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, );
  }

  .blur-xs {
    --tw-blur: blur(var(--blur-xs));
    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, );
  }

  .grayscale-25 {
    --tw-grayscale: grayscale(25%);
    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, );
  }

  .grayscale-100 {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-\[3\.5px\] {
    --tw-backdrop-blur: blur(3.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[6px\] {
    --tw-backdrop-blur: blur(6px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[12\.5px\] {
    --tw-backdrop-blur: blur(12.5px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[12px\] {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[17px\] {
    --tw-backdrop-blur: blur(17px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[25px\] {
    --tw-backdrop-blur: blur(25px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[57px\] {
    --tw-backdrop-blur: blur(57px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .delay-75 {
    transition-delay: 75ms;
  }

  .delay-300 {
    transition-delay: .3s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-400 {
    --tw-duration: .4s;
    transition-duration: .4s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .content-\[\'\'\] {
    --tw-content: "";
    content: var(--tw-content);
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  @media (hover: hover) {
    .group-hover\:-translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-0:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-1:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:-translate-y-0:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:-translate-y-1\/2:is(:where(.group):hover *) {
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-y-0:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:scale-100:is(:where(.group):hover *) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:rotate-1:is(:where(.group):hover *) {
      rotate: 1deg;
    }

    .group-hover\:rotate-2:is(:where(.group):hover *) {
      rotate: 2deg;
    }

    .group-hover\:bg-background-3:is(:where(.group):hover *) {
      background-color: var(--color-background-3);
    }

    .group-hover\:stroke-background-6:is(:where(.group):hover *) {
      stroke: var(--color-background-6);
    }

    .group-hover\:stroke-background-7:is(:where(.group):hover *) {
      stroke: var(--color-background-7);
    }

    .group-hover\:text-background-6:is(:where(.group):hover *) {
      color: var(--color-background-6);
    }

    .group-hover\:text-background-7:is(:where(.group):hover *) {
      color: var(--color-background-7);
    }

    .group-hover\:text-background-13:is(:where(.group):hover *) {
      color: var(--color-background-13);
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }

    .group-hover\:opacity-40:is(:where(.group):hover *) {
      opacity: .4;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\:grayscale-0:is(:where(.group):hover *) {
      --tw-grayscale: grayscale(0%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }

    .group-hover\/nav-item\:rotate-180:is(:where(.group\/nav-item):hover *) {
      rotate: 180deg;
    }

    .group-hover\/nav-item\:stroke-white:is(:where(.group\/nav-item):hover *) {
      stroke: var(--color-white);
    }

    .group-hover\/nav-item\:text-white:is(:where(.group\/nav-item):hover *) {
      color: var(--color-white);
    }
  }

  .peer-checked\:bg-white\/30:is(:where(.peer):checked ~ *) {
    background-color: #ffffff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .peer-checked\:bg-white\/30:is(:where(.peer):checked ~ *) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }

  .peer-checked\:text-white\/90:is(:where(.peer):checked ~ *) {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .peer-checked\:text-white\/90:is(:where(.peer):checked ~ *) {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .peer-focus\:outline-none:is(:where(.peer):focus ~ *) {
    --tw-outline-style: none;
    outline-style: none;
  }

  .placeholder\:text-tagline-3::placeholder {
    font-size: var(--text-tagline-3);
    line-height: var(--tw-leading, var(--text-tagline-3--line-height));
  }

  .placeholder\:font-normal::placeholder {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .placeholder\:text-background-8::placeholder {
    color: var(--color-background-8);
  }

  .placeholder\:text-white\/50::placeholder {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/50::placeholder {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .placeholder\:text-white\/60::placeholder {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/60::placeholder {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
  }

  .before\:top-1\/2:before {
    content: var(--tw-content);
    top: 50%;
  }

  .before\:left-0:before {
    content: var(--tw-content);
    left: calc(var(--spacing) * 0);
  }

  .before\:left-\[26\%\]:before {
    content: var(--tw-content);
    left: 26%;
  }

  .before\:block:before {
    content: var(--tw-content);
    display: block;
  }

  .before\:size-1\.5:before {
    content: var(--tw-content);
    width: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 1.5);
  }

  .before\:h-\[1px\]:before, .before\:h-px:before {
    content: var(--tw-content);
    height: 1px;
  }

  .before\:w-\[43px\]:before {
    content: var(--tw-content);
    width: 43px;
  }

  .before\:-translate-y-1\/2:before {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .before\:rounded-full:before {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .before\:bg-background-12:before {
    content: var(--tw-content);
    background-color: var(--color-background-12);
  }

  .before\:bg-white\/90:before {
    content: var(--tw-content);
    background-color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .before\:bg-white\/90:before {
      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .before\:bg-\[linear-gradient\(270deg\,rgba\(210\,223\,240\,0\.40\)_0\%\,rgba\(210\,223\,240\,0\.00\)_78\.71\%\)\]:before {
    content: var(--tw-content);
    background-image: linear-gradient(270deg, #d2dff066 0%, #d2dff000 78.71%);
  }

  .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:inset-s-\[2px\]:after {
    content: var(--tw-content);
    inset-inline-start: 2px;
  }

  .after\:top-1\/2:after {
    content: var(--tw-content);
    top: 50%;
  }

  .after\:right-\[26\%\]:after {
    content: var(--tw-content);
    right: 26%;
  }

  .after\:left-1\/2:after {
    content: var(--tw-content);
    left: 50%;
  }

  .after\:block:after {
    content: var(--tw-content);
    display: block;
  }

  .after\:size-3:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .after\:size-5:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .after\:h-\[1px\]:after, .after\:h-px:after {
    content: var(--tw-content);
    height: 1px;
  }

  .after\:w-\[43px\]:after {
    content: var(--tw-content);
    width: 43px;
  }

  .after\:-translate-x-1\/2:after {
    content: var(--tw-content);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:-translate-y-1\/2:after {
    content: var(--tw-content);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .after\:rotate-180:after {
    content: var(--tw-content);
    rotate: 180deg;
  }

  .after\:rounded-\[2px\]:after {
    content: var(--tw-content);
    border-radius: 2px;
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .after\:bg-white\/50:after {
    content: var(--tw-content);
    background-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .after\:bg-white\/50:after {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .after\:bg-\(image\:--color-gradient-14\):after {
    content: var(--tw-content);
    background-image: var(--color-gradient-14);
  }

  .after\:bg-\[linear-gradient\(270deg\,rgba\(210\,223\,240\,0\.40\)_0\%\,rgba\(210\,223\,240\,0\.00\)_78\.71\%\)\]:after {
    content: var(--tw-content);
    background-image: linear-gradient(270deg, #d2dff066 0%, #d2dff000 78.71%);
  }

  .after\:opacity-0:after {
    content: var(--tw-content);
    opacity: 0;
  }

  .after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .peer-checked\:after\:translate-x-full:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .peer-checked\:after\:opacity-100:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    opacity: 1;
  }

  .first\:ml-8:first-child {
    margin-left: calc(var(--spacing) * 8);
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .focus-within\:border-stroke-1\/70:focus-within {
    border-color: #94aecfb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:border-stroke-1\/70:focus-within {
      border-color: color-mix(in oklab, var(--color-stroke-1) 70%, transparent);
    }
  }

  .focus-within\:outline-none:focus-within {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (hover: hover) {
    .hover\:-translate-y-1:hover {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:translate-y-\[-5px\]:hover {
      --tw-translate-y: -5px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-\[99\.5\%\]:hover {
      scale: .995;
    }

    .hover\:border-stroke-1\/20:hover {
      border-color: #94aecf33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-stroke-1\/20:hover {
        border-color: color-mix(in oklab, var(--color-stroke-1) 20%, transparent);
      }
    }

    .hover\:border-stroke-3\/30:hover {
      border-color: #7c8ea54d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-stroke-3\/30:hover {
        border-color: color-mix(in oklab, var(--color-stroke-3) 30%, transparent);
      }
    }

    .hover\:border-stroke-3\/50:hover {
      border-color: #7c8ea580;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-stroke-3\/50:hover {
        border-color: color-mix(in oklab, var(--color-stroke-3) 50%, transparent);
      }
    }

    .hover\:bg-background-7:hover {
      background-color: var(--color-background-7);
    }

    .hover\:bg-stroke-3\/25:hover {
      background-color: #7c8ea540;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-stroke-3\/25:hover {
        background-color: color-mix(in oklab, var(--color-stroke-3) 25%, transparent);
      }
    }

    .hover\:bg-transparent:hover {
      background-color: #0000;
    }

    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }

    .hover\:text-background-6:hover {
      color: var(--color-background-6);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:text-white\/90:hover {
      color: #ffffffe6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-white\/90:hover {
        color: color-mix(in oklab, var(--color-white) 90%, transparent);
      }
    }

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

    .hover\:opacity-90:hover {
      opacity: .9;
    }
  }

  .focus\:border-white\/50:focus {
    border-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-white\/50:focus {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .focus\:ring-offset-background-1:focus {
    --tw-ring-offset-color: var(--color-background-1);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media not all and (min-width: 602px) {
    .max-\[602px\]\:size-\[107\%\] {
      width: 107%;
      height: 107%;
    }
  }

  @media not all and (min-width: 375px) {
    .max-\[375px\]\:flex-col {
      flex-direction: column;
    }

    .max-\[375px\]\:text-center {
      text-align: center;
    }
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:flex {
      display: flex;
    }

    .max-lg\:h-\[440px\] {
      height: 440px;
    }

    .max-lg\:flex-col-reverse {
      flex-direction: column-reverse;
    }

    .max-lg\:flex-wrap {
      flex-wrap: wrap;
    }

    :where(.max-lg\:space-y-3 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.max-lg\:space-y-8 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }

    .max-lg\:gap-y-20 {
      row-gap: calc(var(--spacing) * 20);
    }
  }

  @media not all and (min-width: 48rem) {
    .max-md\:main-container {
      max-width: 1290px;
      padding-inline: calc(var(--spacing) * 5);
      margin-inline: auto;
    }

    @media (min-width: 1440px) {
      .max-md\:main-container {
        padding-inline: calc(var(--spacing) * 0);
      }
    }

    .max-md\:mt-8 {
      margin-top: calc(var(--spacing) * 8);
    }

    .max-md\:w-full {
      width: 100%;
    }

    .max-md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    :where(.max-md\:space-y-8 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }

    .max-md\:gap-y-14 {
      row-gap: calc(var(--spacing) * 14);
    }

    .max-md\:border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }

    .max-md\:text-left {
      text-align: left;
    }

    .max-md\:leading-\[1\.1\] {
      --tw-leading: 1.1;
      line-height: 1.1;
    }

    .max-md\:leading-\[1\.15\] {
      --tw-leading: 1.15;
      line-height: 1.15;
    }
  }

  @media (min-width: 40rem) {
    .sm\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .sm\:w-1\/2 {
      width: 50%;
    }

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

    .sm\:items-end {
      align-items: flex-end;
    }

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

    .sm\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .sm\:pt-34 {
      padding-top: calc(var(--spacing) * 34);
    }

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

    .sm\:leading-\[120px\] {
      --tw-leading: 120px;
      line-height: 120px;
    }

    .sm\:before\:left-\[35\%\]:before {
      content: var(--tw-content);
      left: 35%;
    }

    .sm\:after\:right-\[35\%\]:after {
      content: var(--tw-content);
      right: 35%;
    }
  }

  @media (min-width: 48rem) {
    .md\:top-0 {
      top: calc(var(--spacing) * 0);
    }

    .md\:top-16 {
      top: calc(var(--spacing) * 16);
    }

    .md\:-bottom-\[60\%\] {
      bottom: -60%;
    }

    .md\:bottom-5 {
      bottom: calc(var(--spacing) * 5);
    }

    .md\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .md\:mx-auto {
      margin-inline: auto;
    }

    .md\:mt-11 {
      margin-top: calc(var(--spacing) * 11);
    }

    .md\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }

    .md\:mb-14 {
      margin-bottom: calc(var(--spacing) * 14);
    }

    .md\:block {
      display: block;
    }

    .md\:size-9 {
      width: calc(var(--spacing) * 9);
      height: calc(var(--spacing) * 9);
    }

    .md\:size-16 {
      width: calc(var(--spacing) * 16);
      height: calc(var(--spacing) * 16);
    }

    .md\:size-\[72px\] {
      width: 72px;
      height: 72px;
    }

    .md\:size-full {
      width: 100%;
      height: 100%;
    }

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

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

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

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

    .md\:min-h-\[110px\] {
      min-height: 110px;
    }

    .md\:min-h-\[420px\] {
      min-height: 420px;
    }

    .md\:min-h-\[662px\] {
      min-height: 662px;
    }

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

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

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

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

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

    .md\:w-\[calc\(100\%\+100px\)\] {
      width: calc(100% + 100px);
    }

    .md\:w-\[calc\(100\%-40px\)\] {
      width: calc(100% - 40px);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:w-full {
      width: 100%;
    }

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

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

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

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

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

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

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

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

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

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

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

    .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\:flex-col {
      flex-direction: column;
    }

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

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

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

    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .md\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }

    .md\:gap-18 {
      gap: calc(var(--spacing) * 18);
    }

    :where(.md\:space-y-3 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-4 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-6 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-10 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-12 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-13 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 13) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 13) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-14 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 14) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-15 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 15) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 15) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-16 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-18 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 18) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 18) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-20 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 20) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 20) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-24 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 24) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 24) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.md\:space-y-26 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 26) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 26) * calc(1 - var(--tw-space-y-reverse)));
    }

    .md\:gap-x-6 {
      column-gap: calc(var(--spacing) * 6);
    }

    .md\:gap-x-8 {
      column-gap: calc(var(--spacing) * 8);
    }

    .md\:gap-x-10 {
      column-gap: calc(var(--spacing) * 10);
    }

    .md\:gap-y-0 {
      row-gap: calc(var(--spacing) * 0);
    }

    .md\:gap-y-3\.5 {
      row-gap: calc(var(--spacing) * 3.5);
    }

    .md\:gap-y-14 {
      row-gap: calc(var(--spacing) * 14);
    }

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

    .md\:rounded-tl-xl {
      border-top-left-radius: var(--radius-xl);
    }

    .md\:rounded-r-xl {
      border-top-right-radius: var(--radius-xl);
      border-bottom-right-radius: var(--radius-xl);
    }

    .md\:rounded-tr-none {
      border-top-right-radius: 0;
    }

    .md\:rounded-br-xl {
      border-bottom-right-radius: var(--radius-xl);
    }

    .md\:rounded-bl-none {
      border-bottom-left-radius: 0;
    }

    .md\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .md\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }

    .md\:object-cover {
      object-fit: cover;
    }

    .md\:p-7\.5 {
      padding: calc(var(--spacing) * 7.5);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .md\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .md\:p-18 {
      padding: calc(var(--spacing) * 18);
    }

    .md\:p-20 {
      padding: calc(var(--spacing) * 20);
    }

    .md\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }

    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-10\.5 {
      padding-inline: calc(var(--spacing) * 10.5);
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .md\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .md\:py-14 {
      padding-block: calc(var(--spacing) * 14);
    }

    .md\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .md\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }

    .md\:py-22 {
      padding-block: calc(var(--spacing) * 22);
    }

    .md\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .md\:py-26 {
      padding-block: calc(var(--spacing) * 26);
    }

    .md\:py-27 {
      padding-block: calc(var(--spacing) * 27);
    }

    .md\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .md\:py-29 {
      padding-block: calc(var(--spacing) * 29);
    }

    .md\:py-30 {
      padding-block: calc(var(--spacing) * 30);
    }

    .md\:py-\[13px\] {
      padding-block: 13px;
    }

    .md\:pt-10 {
      padding-top: calc(var(--spacing) * 10);
    }

    .md\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }

    .md\:pt-15 {
      padding-top: calc(var(--spacing) * 15);
    }

    .md\:pt-20 {
      padding-top: calc(var(--spacing) * 20);
    }

    .md\:pt-27 {
      padding-top: calc(var(--spacing) * 27);
    }

    .md\:pt-30 {
      padding-top: calc(var(--spacing) * 30);
    }

    .md\:pt-32 {
      padding-top: calc(var(--spacing) * 32);
    }

    .md\:pt-34 {
      padding-top: calc(var(--spacing) * 34);
    }

    .md\:pt-39 {
      padding-top: calc(var(--spacing) * 39);
    }

    .md\:pt-43 {
      padding-top: calc(var(--spacing) * 43);
    }

    .md\:pb-2\.5 {
      padding-bottom: calc(var(--spacing) * 2.5);
    }

    .md\:pb-6 {
      padding-bottom: calc(var(--spacing) * 6);
    }

    .md\:pb-8 {
      padding-bottom: calc(var(--spacing) * 8);
    }

    .md\:pb-13 {
      padding-bottom: calc(var(--spacing) * 13);
    }

    .md\:pb-15 {
      padding-bottom: calc(var(--spacing) * 15);
    }

    .md\:pb-16 {
      padding-bottom: calc(var(--spacing) * 16);
    }

    .md\:pb-17 {
      padding-bottom: calc(var(--spacing) * 17);
    }

    .md\:pb-18 {
      padding-bottom: calc(var(--spacing) * 18);
    }

    .md\:pb-20 {
      padding-bottom: calc(var(--spacing) * 20);
    }

    .md\:pb-24 {
      padding-bottom: calc(var(--spacing) * 24);
    }

    .md\:pb-26 {
      padding-bottom: calc(var(--spacing) * 26);
    }

    .md\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }

    .md\:pb-29 {
      padding-bottom: calc(var(--spacing) * 29);
    }

    .md\:pb-\[100px\] {
      padding-bottom: 100px;
    }

    .md\:text-sora-heading-2, .md\:text-sora-heading-3 {
      font-family: var(--font-sora);
    }

    .md\:text-sora-heading-2 {
      font-size: var(--text-sora-heading-2);
      line-height: var(--tw-leading, var(--text-sora-heading-2--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-2--letter-spacing));
    }

    .md\:text-sora-heading-3 {
      font-size: var(--text-sora-heading-3);
      line-height: var(--tw-leading, var(--text-sora-heading-3--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-3--letter-spacing));
    }

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

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

    .md\:tracking-\[50\.48px\] {
      --tw-tracking: 50.48px;
      letter-spacing: 50.48px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:sticky {
      position: sticky;
    }

    .lg\:-top-\[68\%\] {
      top: -68%;
    }

    .lg\:top-30 {
      top: calc(var(--spacing) * 30);
    }

    .lg\:-right-\[3\.5\%\] {
      right: -3.5%;
    }

    .lg\:right-\[-31\%\] {
      right: -31%;
    }

    .lg\:-bottom-\[7\%\] {
      bottom: -7%;
    }

    .lg\:bottom-6 {
      bottom: calc(var(--spacing) * 6);
    }

    .lg\:bottom-\[-47\%\] {
      bottom: -47%;
    }

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

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:mx-auto {
      margin-inline: auto;
    }

    .lg\:mt-14 {
      margin-top: calc(var(--spacing) * 14);
    }

    .lg\:mt-17\.5 {
      margin-top: calc(var(--spacing) * 17.5);
    }

    .lg\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .lg\:mb-14 {
      margin-bottom: calc(var(--spacing) * 14);
    }

    .lg\:mb-17\.5 {
      margin-bottom: calc(var(--spacing) * 17.5);
    }

    .lg\:mb-19 {
      margin-bottom: calc(var(--spacing) * 19);
    }

    .lg\:ml-\[69px\] {
      margin-left: 69px;
    }

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:size-10 {
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
    }

    .lg\:size-18\.5 {
      width: calc(var(--spacing) * 18.5);
      height: calc(var(--spacing) * 18.5);
    }

    .lg\:size-\[72px\] {
      width: 72px;
      height: 72px;
    }

    .lg\:size-\[336px\] {
      width: 336px;
      height: 336px;
    }

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

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

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

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

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

    .lg\:h-full {
      height: 100%;
    }

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

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

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

    .lg\:w-\[calc\(100\%-48px\)\] {
      width: calc(100% - 48px);
    }

    .lg\:w-full {
      width: 100%;
    }

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

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

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

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

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

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

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

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

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

    .lg\:shrink-0 {
      flex-shrink: 0;
    }

    .lg\:translate-y-\[30\%\] {
      --tw-translate-y: 30%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .lg\:scale-\[90\%\] {
      scale: .9;
    }

    .lg\:-rotate-4 {
      rotate: -4deg;
    }

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

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

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

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

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

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

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

    .lg\:gap-0 {
      gap: calc(var(--spacing) * 0);
    }

    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }

    .lg\:gap-18 {
      gap: calc(var(--spacing) * 18);
    }

    .lg\:gap-25 {
      gap: calc(var(--spacing) * 25);
    }

    .lg\:gap-\[70px\] {
      gap: 70px;
    }

    :where(.lg\:space-y-3 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-8 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-12 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-14 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 14) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-17 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 17) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 17) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-17\.5 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 17.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 17.5) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-18 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 18) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 18) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-19 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 19) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 19) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-28 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 28) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 28) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-29 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 29) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 29) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.lg\:space-y-36 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 36) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 36) * calc(1 - var(--tw-space-y-reverse)));
    }

    .lg\:gap-x-6 {
      column-gap: calc(var(--spacing) * 6);
    }

    .lg\:gap-x-8 {
      column-gap: calc(var(--spacing) * 8);
    }

    .lg\:gap-x-12 {
      column-gap: calc(var(--spacing) * 12);
    }

    .lg\:gap-x-17\.5 {
      column-gap: calc(var(--spacing) * 17.5);
    }

    .lg\:gap-x-19 {
      column-gap: calc(var(--spacing) * 19);
    }

    .lg\:gap-x-\[69px\] {
      column-gap: 69px;
    }

    .lg\:self-start {
      align-self: flex-start;
    }

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

    .lg\:rounded-tr-xl {
      border-top-right-radius: var(--radius-xl);
    }

    .lg\:rounded-br-xl {
      border-bottom-right-radius: var(--radius-xl);
    }

    .lg\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .lg\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .lg\:p-10\.5 {
      padding: calc(var(--spacing) * 10.5);
    }

    .lg\:p-14 {
      padding: calc(var(--spacing) * 14);
    }

    .lg\:p-25 {
      padding: calc(var(--spacing) * 25);
    }

    .lg\:px-11 {
      padding-inline: calc(var(--spacing) * 11);
    }

    .lg\:px-13 {
      padding-inline: calc(var(--spacing) * 13);
    }

    .lg\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }

    .lg\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .lg\:py-18 {
      padding-block: calc(var(--spacing) * 18);
    }

    .lg\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .lg\:py-25 {
      padding-block: calc(var(--spacing) * 25);
    }

    .lg\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .lg\:py-30 {
      padding-block: calc(var(--spacing) * 30);
    }

    .lg\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

    .lg\:py-39 {
      padding-block: calc(var(--spacing) * 39);
    }

    .lg\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }

    .lg\:pt-18 {
      padding-top: calc(var(--spacing) * 18);
    }

    .lg\:pt-26 {
      padding-top: calc(var(--spacing) * 26);
    }

    .lg\:pt-28 {
      padding-top: calc(var(--spacing) * 28);
    }

    .lg\:pt-33 {
      padding-top: calc(var(--spacing) * 33);
    }

    .lg\:pt-36 {
      padding-top: calc(var(--spacing) * 36);
    }

    .lg\:pt-38 {
      padding-top: calc(var(--spacing) * 38);
    }

    .lg\:pt-39 {
      padding-top: calc(var(--spacing) * 39);
    }

    .lg\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }

    .lg\:pt-46 {
      padding-top: calc(var(--spacing) * 46);
    }

    .lg\:pt-\[120px\] {
      padding-top: 120px;
    }

    .lg\:pb-18 {
      padding-bottom: calc(var(--spacing) * 18);
    }

    .lg\:pb-19 {
      padding-bottom: calc(var(--spacing) * 19);
    }

    .lg\:pb-24 {
      padding-bottom: calc(var(--spacing) * 24);
    }

    .lg\:pb-26 {
      padding-bottom: calc(var(--spacing) * 26);
    }

    .lg\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }

    .lg\:pb-32 {
      padding-bottom: calc(var(--spacing) * 32);
    }

    .lg\:pb-34 {
      padding-bottom: calc(var(--spacing) * 34);
    }

    .lg\:pb-36 {
      padding-bottom: calc(var(--spacing) * 36);
    }

    .lg\:pb-47 {
      padding-bottom: calc(var(--spacing) * 47);
    }

    .lg\:pl-5 {
      padding-left: calc(var(--spacing) * 5);
    }

    .lg\:text-left {
      text-align: left;
    }

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

    .lg\:text-sora-heading-2, .lg\:text-sora-heading-3, .lg\:text-sora-heading-4 {
      font-family: var(--font-sora);
    }

    .lg\:text-sora-heading-2 {
      font-size: var(--text-sora-heading-2);
      line-height: var(--tw-leading, var(--text-sora-heading-2--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-2--letter-spacing));
    }

    .lg\:text-sora-heading-3 {
      font-size: var(--text-sora-heading-3);
      line-height: var(--tw-leading, var(--text-sora-heading-3--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-3--letter-spacing));
    }

    .lg\:text-sora-heading-4 {
      font-size: var(--text-sora-heading-4);
      line-height: var(--tw-leading, var(--text-sora-heading-4--line-height));
    }

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

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

    .lg\:tracking-\[-3\.2px\] {
      --tw-tracking: -3.2px;
      letter-spacing: -3.2px;
    }

    .lg\:tracking-\[70\.48px\] {
      --tw-tracking: 70.48px;
      letter-spacing: 70.48px;
    }

    .lg\:opacity-0 {
      opacity: 0;
    }

    @media (hover: hover) {
      .lg\:group-hover\:translate-y-0:is(:where(.group):hover *) {
        --tw-translate-y: calc(var(--spacing) * 0);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }

      .lg\:group-hover\:scale-100:is(:where(.group):hover *) {
        --tw-scale-x: 100%;
        --tw-scale-y: 100%;
        --tw-scale-z: 100%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }

      .lg\:group-hover\:opacity-100:is(:where(.group):hover *) {
        opacity: 1;
      }
    }
  }

  @media (min-width: 80rem) {
    .xl\:-top-\[53\%\] {
      top: -53%;
    }

    .xl\:-top-\[67\%\] {
      top: -67%;
    }

    .xl\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .xl\:block {
      display: block;
    }

    .xl\:hidden {
      display: none;
    }

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

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

    .xl\:h-full {
      height: 100%;
    }

    .xl\:min-h-\[600px\] {
      min-height: 600px;
    }

    .xl\:min-h-\[640px\] {
      min-height: 640px;
    }

    .xl\:min-h-\[767px\] {
      min-height: 767px;
    }

    .xl\:w-\[calc\(100\%\+200px\)\] {
      width: calc(100% + 200px);
    }

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

    .xl\:gap-20 {
      gap: calc(var(--spacing) * 20);
    }

    :where(.xl\:space-y-3 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.xl\:space-y-33 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 33) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 33) * calc(1 - var(--tw-space-y-reverse)));
    }

    :where(.xl\:space-y-39 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 39) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 39) * calc(1 - var(--tw-space-y-reverse)));
    }

    .xl\:py-24 {
      padding-block: calc(var(--spacing) * 24);
    }

    .xl\:py-26 {
      padding-block: calc(var(--spacing) * 26);
    }

    .xl\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .xl\:py-33 {
      padding-block: calc(var(--spacing) * 33);
    }

    .xl\:py-36 {
      padding-block: calc(var(--spacing) * 36);
    }

    .xl\:py-44 {
      padding-block: calc(var(--spacing) * 44);
    }

    .xl\:pt-24 {
      padding-top: calc(var(--spacing) * 24);
    }

    .xl\:pt-28 {
      padding-top: calc(var(--spacing) * 28);
    }

    .xl\:pt-39 {
      padding-top: calc(var(--spacing) * 39);
    }

    .xl\:pt-40 {
      padding-top: calc(var(--spacing) * 40);
    }

    .xl\:pt-40\.5 {
      padding-top: calc(var(--spacing) * 40.5);
    }

    .xl\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }

    .xl\:pt-47 {
      padding-top: calc(var(--spacing) * 47);
    }

    .xl\:pt-48 {
      padding-top: calc(var(--spacing) * 48);
    }

    .xl\:pt-49 {
      padding-top: calc(var(--spacing) * 49);
    }

    .xl\:pt-\[176px\] {
      padding-top: 176px;
    }

    .xl\:pb-24 {
      padding-bottom: calc(var(--spacing) * 24);
    }

    .xl\:pb-26 {
      padding-bottom: calc(var(--spacing) * 26);
    }

    .xl\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }

    .xl\:pb-33 {
      padding-bottom: calc(var(--spacing) * 33);
    }

    .xl\:pb-39 {
      padding-bottom: calc(var(--spacing) * 39);
    }

    .xl\:pb-50\.5 {
      padding-bottom: calc(var(--spacing) * 50.5);
    }

    .xl\:pb-\[70px\] {
      padding-bottom: 70px;
    }

    .xl\:pl-10 {
      padding-left: calc(var(--spacing) * 10);
    }

    .xl\:text-sora-heading-1, .xl\:text-sora-heading-2, .xl\:text-sora-heading-3 {
      font-family: var(--font-sora);
    }

    .xl\:text-sora-heading-1 {
      font-size: var(--text-sora-heading-1);
      line-height: var(--tw-leading, var(--text-sora-heading-1--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-1--letter-spacing));
    }

    .xl\:text-sora-heading-2 {
      font-size: var(--text-sora-heading-2);
      line-height: var(--tw-leading, var(--text-sora-heading-2--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-2--letter-spacing));
    }

    .xl\:text-sora-heading-3 {
      font-size: var(--text-sora-heading-3);
      line-height: var(--tw-leading, var(--text-sora-heading-3--line-height));
      letter-spacing: var(--tw-tracking, var(--text-sora-heading-3--letter-spacing));
    }

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

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

    .xl\:leading-\[168px\] {
      --tw-leading: 168px;
      line-height: 168px;
    }

    .xl\:tracking-\[-2\.4px\] {
      --tw-tracking: -2.4px;
      letter-spacing: -2.4px;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:gap-32 {
      gap: calc(var(--spacing) * 32);
    }

    :where(.\32 xl\:space-y-39 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 39) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 39) * calc(1 - var(--tw-space-y-reverse)));
    }

    .\32 xl\:gap-x-25 {
      column-gap: calc(var(--spacing) * 25);
    }

    .\32 xl\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .\32 xl\:py-39 {
      padding-block: calc(var(--spacing) * 39);
    }

    .\32 xl\:pt-28 {
      padding-top: calc(var(--spacing) * 28);
    }

    .\32 xl\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }

    .\32 xl\:pt-45 {
      padding-top: calc(var(--spacing) * 45);
    }

    .\32 xl\:pt-50 {
      padding-top: calc(var(--spacing) * 50);
    }

    .\32 xl\:pt-52 {
      padding-top: calc(var(--spacing) * 52);
    }

    .\32 xl\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }

    .\32 xl\:pb-39 {
      padding-bottom: calc(var(--spacing) * 39);
    }

    .\32 xl\:tracking-\[100\.48px\] {
      --tw-tracking: 100.48px;
      letter-spacing: 100.48px;
    }
  }

  .rtl\:peer-checked\:after\:-translate-x-full:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *):is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

.accordion-item.active {
  background-color: var(--color-background-5);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
}

.accordion-item.active h3 {
  padding-bottom: calc(var(--spacing) * 4) !important;
}

:is(.accordion-item.active h3 .accordion-plus-icon, .accordion-item.active h3 .accordion-plus-icon-v2):before {
  content: var(--tw-content);
  rotate: 90deg;
}

.accordion-item.active .accordion-active-gradient {
  opacity: 1;
}

.accordion-item.active [data-homepage-two-faq-top-line="true"] {
  width: 100%;
  transition-property: width;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .6s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .6s;
  transition-timing-function: var(--ease-in-out);
}

.accordion-item.active [data-homepage-two-faq-gradient="true"] {
  height: 110%;
  transition-property: height;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .6s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .6s;
  transition-timing-function: var(--ease-in-out);
}

.accordion-content {
  transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.accordion-content p {
  transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  transform-style: preserve-3d;
}

.accordion-content .split-text-line {
  transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.accordion-plus-icon {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #ffffff80;
  border-radius: 3.40282e38px;
  position: relative;
}

@supports (color: color-mix(in lab, red, red)) {
  .accordion-plus-icon {
    border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
  }
}

.accordion-plus-icon {
  --tw-duration: .4s;
  --tw-ease: var(--easing-faq);
  transition-duration: .4s;
  transition-timing-function: var(--easing-faq);
  padding-inline: 8.5px;
}

.accordion-plus-icon:before {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  --tw-translate-x: calc(62% * -1);
  width: 1px;
  height: 8.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  background-color: #ffffff80;
  border-radius: 3.40282e38px;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: 0deg;
}

@supports (color: color-mix(in lab, red, red)) {
  .accordion-plus-icon:before {
    background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
  }
}

.accordion-plus-icon:before {
  content: var(--tw-content);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .4s;
  content: var(--tw-content);
  --tw-ease: var(--easing-faq);
  transition-duration: .4s;
  transition-timing-function: var(--easing-faq);
  --tw-content: "";
  content: var(--tw-content);
}

.accordion-plus-icon:after {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  width: 1px;
  height: 8.5px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  background-color: #ffffff80;
  border-radius: 3.40282e38px;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: 90deg;
}

@supports (color: color-mix(in lab, red, red)) {
  .accordion-plus-icon:after {
    background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
  }
}

.accordion-plus-icon:after {
  content: var(--tw-content);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .4s;
  content: var(--tw-content);
  --tw-ease: var(--easing-faq);
  transition-duration: .4s;
  transition-timing-function: var(--easing-faq);
  --tw-content: "";
  content: var(--tw-content);
}

.accordion-plus-icon-v2 {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  --tw-duration: .4s;
  --tw-ease: var(--easing-faq);
  transition-duration: .4s;
  transition-timing-function: var(--easing-faq);
  border-radius: 3.40282e38px;
  padding-inline: 8.5px;
  position: relative;
}

.accordion-plus-icon-v2:before {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  --tw-translate-x: calc(62% * -1);
  width: 1px;
  height: 16px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  background-color: var(--color-white);
  content: var(--tw-content);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .4s;
  content: var(--tw-content);
  --tw-ease: var(--easing-faq);
  transition-duration: .4s;
  transition-timing-function: var(--easing-faq);
  --tw-content: "";
  content: var(--tw-content);
  border-radius: 3.40282e38px;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: 0deg;
}

.accordion-plus-icon-v2:after {
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  width: 1px;
  height: 16px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  content: var(--tw-content);
  content: var(--tw-content);
  content: var(--tw-content);
  background-color: var(--color-white);
  content: var(--tw-content);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  content: var(--tw-content);
  --tw-duration: .4s;
  content: var(--tw-content);
  --tw-ease: var(--easing-faq);
  transition-duration: .4s;
  transition-timing-function: var(--easing-faq);
  --tw-content: "";
  content: var(--tw-content);
  border-radius: 3.40282e38px;
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: 90deg;
}

@font-face {
  font-family: next-sass;
  src: url("../fonts/next-sass-icons.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ns-"], [class*=" ns-"] {
  speak: never;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: next-sass !important;
}

.ns-shape-1:before {
  content: "";
}

.ns-shape-2:before {
  content: "";
}

.ns-shape-3:before {
  content: "";
}

.ns-shape-4:before {
  content: "";
}

.ns-shape-5:before {
  content: "";
}

.ns-shape-6:before {
  content: "";
}

.ns-shape-7:before {
  content: "";
}

.ns-shape-8:before {
  content: "";
}

.ns-shape-9:before {
  content: "";
}

.ns-shape-10:before {
  content: "";
}

.ns-shape-11:before {
  content: "";
}

.ns-shape-12:before {
  content: "";
}

.ns-shape-13:before {
  content: "";
}

.ns-shape-14:before {
  content: "";
}

.ns-shape-15:before {
  content: "";
}

.ns-shape-16:before {
  content: "";
}

.ns-shape-17:before {
  content: "";
}

.ns-shape-18:before {
  content: "";
}

.ns-shape-19:before {
  content: "";
}

.ns-shape-20:before {
  content: "";
}

.ns-shape-21:before {
  content: "";
}

.ns-shape-22:before {
  content: "";
}

.ns-shape-23:before {
  content: "";
}

.ns-shape-24:before {
  content: "";
}

.ns-shape-25:before {
  content: "";
}

.ns-shape-26:before {
  content: "";
}

.ns-shape-27:before {
  content: "";
}

.ns-shape-28:before {
  content: "";
}

.ns-shape-29:before {
  content: "";
}

.ns-shape-30:before {
  content: "";
}

.ns-shape-31:before {
  content: "";
}

.ns-shape-32:before {
  content: "";
}

.ns-shape-33:before {
  content: "";
}

.ns-shape-34:before {
  content: "";
}

.ns-shape-35:before {
  content: "";
}

.ns-shape-36:before {
  content: "";
}

.ns-shape-37:before {
  content: "";
}

.ns-shape-38:before {
  content: "";
}

.ns-shape-39:before {
  content: "";
}

.ns-shape-40:before {
  content: "";
}

.ns-shape-41:before {
  content: "";
}

.ns-shape-42:before {
  content: "";
}

.ns-shape-43:before {
  content: "";
}

.ns-shape-44:before {
  content: "";
}

.ns-shape-45:before {
  content: "";
}

.ns-shape-46:before {
  content: "";
}

.ns-shape-47:before {
  content: "";
}

.ns-shape-48:before {
  content: "";
}

.ns-shape-49:before {
  content: "";
}

.ns-shape-50:before {
  content: "";
}

.ns-shape-51:before {
  content: "";
}

.ns-shape-52:before {
  content: "";
}

.ns-shape-53:before {
  content: "";
}

.ns-shape-54:before {
  content: "";
}

.ns-shape-55:before {
  content: "";
}

.ns-shape-56:before {
  content: "";
}

.ns-shape-57:before {
  content: "";
}

.ns-shape-58:before {
  content: "";
}

.ns-shape-59:before {
  content: "";
}

.ns-shape-60:before {
  content: "";
}

.ns-shape-61:before {
  content: "";
}

.ns-shape-62:before {
  content: "";
}

.ns-shape-63:before {
  content: "";
}

.ns-shape-64:before {
  content: "";
}

.ns-shape-65:before {
  content: "";
}

.ns-shape-66:before {
  content: "";
}

.ns-shape-67:before {
  content: "";
}

.ns-shape-68:before {
  content: "";
}

.ns-shape-69:before {
  content: "";
}

.ns-shape-70:before {
  content: "";
}

.ns-shape-71:before {
  content: "";
}

.ns-shape-72:before {
  content: "";
}

.ns-shape-73:before {
  content: "";
}

.ns-shape-74:before {
  content: "";
}

.ns-shape-75:before {
  content: "";
}

.ns-shape-76:before {
  content: "";
}

.ns-shape-77:before {
  content: "";
}

.ns-shape-78:before {
  content: "";
}

.ns-shape-79:before {
  content: "";
}

.ns-shape-80:before {
  content: "";
}

.ns-shape-81:before {
  content: "";
}

.ns-shape-82:before {
  content: "";
}

.ns-shape-83:before {
  content: "";
}

.ns-shape-84:before {
  content: "";
}

.ns-shape-85:before {
  content: "";
}

.ns-shape-86:before {
  content: "";
}

.ns-shape-87:before {
  content: "";
}

.ns-shape-88:before {
  content: "";
}

.ns-shape-89:before {
  content: "";
}

.ns-shape-90:before {
  content: "";
}

.ns-shape-91:before {
  content: "";
}

.ns-shape-92:before {
  content: "";
}

.ns-shape-93:before {
  content: "";
}

.ns-shape-94:before {
  content: "";
}

.ns-shape-95:before {
  content: "";
}

.ns-shape-96:before {
  content: "";
}

.ns-shape-97:before {
  content: "";
}

.ns-shape-98:before {
  content: "";
}

.ns-shape-99:before {
  content: "";
}

.ns-shape-100:before {
  content: "";
}

.ns-shape-101:before {
  content: "";
}

.ns-shape-102:before {
  content: "";
}

.ns-shape-103:before {
  content: "";
}

.ns-shape-104:before {
  content: "";
}

.ns-shape-105:before {
  content: "";
}

.ns-shape-106:before {
  content: "";
}

.ns-shape-107:before {
  content: "";
}

.ns-shape-108:before {
  content: "";
}

.ns-shape-109:before {
  content: "";
}

.ns-shape-110:before {
  content: "";
}

.ns-shape-111:before {
  content: "";
}

.ns-shape-112:before {
  content: "";
}

.ns-shape-113:before {
  content: "";
}

.ns-shape-114:before {
  content: "";
}

.ns-shape-115:before {
  content: "";
}

.ns-shape-116:before {
  content: "";
}

.ns-shape-117:before {
  content: "";
}

.ns-shape-118:before {
  content: "";
}

.ns-shape-119:before {
  content: "";
}

.ns-shape-120:before {
  content: "";
}

.ns-shape-121:before {
  content: "";
}

.ns-shape-122:before {
  content: "";
}

.ns-shape-123:before {
  content: "";
}

.ns-shape-124:before {
  content: "";
}

.ns-shape-125:before {
  content: "";
}

.ns-shape-126:before {
  content: "";
}

.ns-shape-127:before {
  content: "";
}

.ns-shape-128:before {
  content: "";
}

.glowing-card {
  z-index: 5;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .5s;
  --tw-ease: cubic-bezier(.4,0,.2,1);
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.glowing-card:before {
  pointer-events: none;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  border-radius: inherit;
  opacity: .3;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-out);
  --tw-content: "";
  content: var(--tw-content);
  position: absolute;
}

@media (hover: hover) {
  .glowing-card:before:hover {
    opacity: .6;
  }
}

.glowing-card:before {
  background: radial-gradient(100rem circle at var(--xPos) var(--yPos), #227eff66, transparent 15%);
}

.glowing-card:after {
  pointer-events: none;
  inset: calc(var(--spacing) * 0);
  z-index: 2;
  border-radius: inherit;
  opacity: .2;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .5s;
  --tw-ease: var(--ease-out);
  transition-duration: .5s;
  transition-timing-function: var(--ease-out);
  --tw-content: "";
  content: var(--tw-content);
  position: absolute;
}

@media (hover: hover) {
  .glowing-card:after:hover {
    opacity: .4;
  }
}

.glowing-card:after {
  background: radial-gradient(60rem circle at var(--xPos) var(--yPos), #227effb3, transparent 35%);
}

.glowing-card-v2 {
  z-index: 5;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .5s;
  --tw-ease: cubic-bezier(.4,0,.2,1);
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}

.glowing-card-v2:before {
  pointer-events: none;
  inset: calc(var(--spacing) * 0);
  z-index: 1;
  border-radius: inherit;
  opacity: .3;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-out);
  --tw-content: "";
  content: var(--tw-content);
  position: absolute;
}

@media (hover: hover) {
  .glowing-card-v2:before:hover {
    opacity: .6;
  }
}

.glowing-card-v2:before {
  background: radial-gradient(100rem circle at var(--xPos) var(--yPos), #8d59ff66, transparent 15%);
}

.glowing-card-v2:after {
  pointer-events: none;
  inset: calc(var(--spacing) * 0);
  z-index: 2;
  border-radius: inherit;
  opacity: .2;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .5s;
  --tw-ease: var(--ease-out);
  transition-duration: .5s;
  transition-timing-function: var(--ease-out);
  --tw-content: "";
  content: var(--tw-content);
  position: absolute;
}

@media (hover: hover) {
  .glowing-card-v2:after:hover {
    opacity: .4;
  }
}

.glowing-card-v2:after {
  background: radial-gradient(60rem circle at var(--xPos) var(--yPos), #8d59ffb3, transparent 35%);
}

.horizontal-marquee {
  gap: var(--_gap);
  flex-wrap: nowrap;
  max-width: 100%;
  display: flex;
  overflow: hidden;
}

.horizontal-marquee.smooth {
  -webkit-mask: linear-gradient(90deg, #0000, #fff 20% 80%, #0000);
  mask: linear-gradient(90deg, #0000, #fff 20% 80%, #0000);
}

.gradient-hidden .horizontal-marquee.smooth {
  -webkit-mask: none;
  mask: none;
}

.horizontal-marquee.paused .horizontal-marquee-inner {
  animation-play-state: paused;
}

.horizontal-marquee.full .horizontal-marquee-inner {
  min-width: var(--_containerWidth);
}

.horizontal-marquee-inner {
  justify-content: space-around;
  align-items: center;
  gap: var(--_gap);
  white-space: nowrap;
  flex-wrap: nowrap;
  display: flex;
}

[data-animate="true"] .horizontal-marquee-inner {
  animation: horizontal-marquee var(--_speed) linear infinite var(--_direction);
}

@keyframes horizontal-marquee {
  0% {
    transform: translate(calc(var(--_gap) * -1));
  }

  100% {
    transform: translate(calc(-100% - var(--_gap) * 2));
  }
}

.vertical-marquee {
  margin-bottom: var(--_gap);
  max-height: 100%;
  height: calc(calc(var(--_containerSize) - var(--_vGap)) / 1.2);
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.vertical-marquee.smooth {
  -webkit-mask: linear-gradient(#0000, #fff 20% 80%, #0000);
  mask: linear-gradient(#0000, #fff 20% 80%, #0000);
}

.vertical-marquee.paused .vertical-marquee-inner {
  animation-play-state: paused;
}

.vertical-marquee-inner {
  align-items: center;
  gap: var(--_vGap);
  margin-bottom: var(--_vGap);
  flex-flow: column;
  flex-shrink: 0;
  justify-content: space-around;
  display: flex;
}

[data-animate="true"] .vertical-marquee-inner {
  animation: vertical-marquee var(--_speed) linear infinite var(--_direction);
}

.vertical-marquee-inner > :not(:last-child) {
  margin-right: var(--_hGap);
}

@keyframes vertical-marquee {
  0% {
    transform: translateY(calc(var(--_vGap) * -1));
  }

  100% {
    transform: translateY(calc(-100% - var(--_vGap) * 2));
  }
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

/* ============================= Market360X custom styles ============================= */
:root {
  --m3x-mint: #00f80c;
  --m3x-up: #16a34a;
  --m3x-down: #dc2626;
}

.text-mint {
  color: var(--m3x-mint) !important;
}

/* Hero terminal mockup */
.m3x-terminal {
  background: var(--t-surface);
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08);
  color: var(--t-ink);
  font-family: "Inter Tight", sans-serif;
}
.m3x-term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(var(--t-ink-rgb) / 0.06);
  background: var(--t-subtle);
}
.m3x-term-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--t-ink-rgb) / 0.15);
}
.m3x-term-url {
  margin: 0 auto;
  padding: 4px 16px;
  border-radius: 6px;
  background: rgb(var(--t-ink-rgb) / 0.05);
  color: rgb(var(--t-ink-rgb) / 0.5);
  font-size: 12px;
}
.m3x-term-body {
  display: grid;
  gap: 16px;
  padding: 16px;
}
@media (min-width: 1024px) {
  .m3x-term-body {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 20px;
    padding: 24px;
  }
}
.m3x-panel {
  border: 1px solid rgb(var(--t-ink-rgb) / 0.06);
  border-radius: 10px;
  background: var(--t-subtle);
  padding: 16px;
  text-align: left;
}
.m3x-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: rgb(var(--t-ink-rgb) / 0.5);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.m3x-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--m3x-mint);
}
.m3x-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m3x-mint);
  animation: m3x-pulse 1.6s ease-in-out infinite;
}
@keyframes m3x-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.m3x-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid rgb(var(--t-ink-rgb) / 0.05);
  font-size: 13px;
}
.m3x-row:first-of-type { border-top: 0; }
.m3x-row b { font-weight: 500; color: rgb(var(--t-ink-rgb) / 0.9); }
.m3x-row small { display: block; color: rgb(var(--t-ink-rgb) / 0.4); font-size: 11px; }
.m3x-row .m3x-num { text-align: right; color: rgb(var(--t-ink-rgb) / 0.8); }
.m3x-up { color: var(--m3x-up) !important; }
.m3x-down { color: var(--m3x-down) !important; }
.m3x-signal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.m3x-signal-head h3 {
  font-family: "Sora", sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.m3x-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.12);
  color: var(--m3x-up);
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
}
.m3x-score {
  text-align: right;
  color: rgb(var(--t-ink-rgb) / 0.45);
  font-size: 11px;
}
.m3x-score strong {
  display: block;
  color: var(--m3x-mint);
  font-family: "Sora", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
.m3x-streams {
  display: flex;
  gap: 4px;
  margin: 12px 0 4px;
}
.m3x-streams span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--m3x-mint);
}
.m3x-streams span.off { background: rgb(var(--t-ink-rgb) / 0.12); }
.m3x-muted { color: rgb(var(--t-ink-rgb) / 0.45); font-size: 12px; }
.m3x-chart { display: block; width: 100%; height: 120px; margin: 12px 0; }
.m3x-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.m3x-levels div {
  padding: 8px;
  border-radius: 8px;
  background: rgb(var(--t-ink-rgb) / 0.04);
  font-size: 11px;
  color: rgb(var(--t-ink-rgb) / 0.45);
}
.m3x-levels b {
  display: block;
  margin-top: 2px;
  color: var(--t-ink);
  font-size: 13px;
  font-weight: 500;
}
.m3x-feed-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgb(var(--t-ink-rgb) / 0.05);
  font-size: 13px;
  line-height: 1.4;
  color: rgb(var(--t-ink-rgb) / 0.8);
}
.m3x-feed-item:first-of-type { border-top: 0; }
.m3x-feed-item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--m3x-dot, var(--m3x-mint));
}
.m3x-feed-item small { display: block; color: rgb(var(--t-ink-rgb) / 0.4); font-size: 11px; }
@media (max-width: 1023px) {
  .m3x-hide-mobile { display: none; }
}

/* Hero bottom fade (shorter than the template default so the dashboard stays readable) */
.m3x-hero-fade { height: 40px; }
@media (min-width: 1024px) {
  .m3x-hero-fade { height: 80px; }
}

/* Market ticker chips (marquee) */
.m3x-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: "Inter Tight", sans-serif;
}
.m3x-chip b {
  color: var(--t-ink);
  font-size: 16px;
  font-weight: 500;
}
.m3x-chip span {
  color: rgb(var(--t-ink-rgb) / 0.45);
  font-size: 14px;
}
/* Ticker logos: brand mark in a white disc, coin icons full-bleed, FX pairs as overlapping flags */
.m3x-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--t-surface);
  overflow: hidden;
}
.m3x-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.m3x-logo--full {
  padding: 0;
  background: transparent;
}
.m3x-flags {
  display: inline-flex;
  flex: none;
  align-items: center;
}
.m3x-flags img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--t-subtle-2);
}
.m3x-flags img + img {
  margin-left: -9px;
}
.m3x-chip:first-child { margin-left: 32px; }

/* Card descriptions in the "how it works" grid */
.m3x-card-text {
  margin-top: 10px;
  color: rgb(var(--t-ink-rgb) / 0.5);
  font-size: 15px;
  line-height: 1.5;
}

/* Footer wordmark: MARKET360X is longer than the template's word, so tighten the tracking */
.footer-title.m3x-footer-title {
  letter-spacing: 0.18em !important;
  padding-left: 0.18em !important;
  font-size: clamp(30px, 8.4vw, 112px) !important;
  line-height: 1.5 !important;
}

/* Risk disclaimer under the footer */
.m3x-risk {
  margin-top: 20px;
  color: rgb(var(--t-ink-rgb) / 0.35);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.m3x-term-note {
  color: rgb(var(--t-ink-rgb) / 0.35);
  font-size: 11px;
  white-space: nowrap;
}

/* Trading navigation */
.m3x-trade-nav { gap: clamp(12px, 2vw, 28px); white-space: nowrap; }
.m3x-trade-nav a { color: rgb(var(--t-ink-rgb) / .65); outline-offset: 5px; }
.m3x-trade-nav a[aria-current="page"] { color: var(--t-ink); }
@media (max-width: 1199px) { .m3x-trade-nav { gap: 14px; }.m3x-trade-nav span { font-size: 13px; letter-spacing: 0; } }


/* ============================= Market360X light theme =============================
   The template is a dark Tailwind build. Its utilities read colour variables, so remapping
   the variables flips the whole site: "white" utilities become ink, dark surfaces become light. */
:root {
  --m3x-ink: #111827;
  --m3x-accent: #00a30a;
  --color-white: #111827;
  --color-background-1: #cbd5e1;
  --color-background-3: #e2e8f0;
  --color-background-4: #eef2f6;
  --color-background-5: #ffffff;
  --color-background-6: #f6f8fb;
  --color-background-7: #111827;
  --color-background-8: #6b7280;
  --color-background-11: #111827;
  --color-background-13: #ffffff;
  --color-background-14: #ffffff;
  --color-stroke-1: #64748b;
  --color-stroke-3: #64748b;
  color-scheme: light;
}
body { background: var(--t-page); color: var(--t-ink); }

/* Accent text: bright #00f80c is unreadable as text on white, so text/logo use a deeper shade */
.text-mint { color: var(--m3x-accent) !important; }
.m3x-live, .m3x-score strong { color: var(--m3x-accent); }
.m3x-live::before { background: var(--m3x-accent); }

/* Primary buttons: the light gradient pill becomes a solid ink pill with light text */
[class*="bg-linear-[90deg,#DBE2E6_0%,#FFF_71.63%]"] {
  background-image: none !important;
  background-color: var(--t-ink) !important;
}
.magnetic-button svg path[stroke="#0D1017"] { stroke: var(--t-surface); }

/* Hero fade into the page colour instead of near-black */
[class*="bg-linear-[180deg,rgba(13,16,23,0.00)_0%,#0D1017_93.95%]"] {
  background-image: linear-gradient(180deg, rgba(246, 248, 251, 0) 0%, var(--t-page) 94%) !important;
}

/* Cards: white surfaces need a hairline + soft shadow to separate from the page */
.bg-background-5 {
  border: 1px solid rgb(var(--t-ink-rgb) / 0.07);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -12px rgba(17, 24, 39, 0.12);
}
.m3x-chip.bg-background-4 { border: 1px solid rgb(var(--t-ink-rgb) / 0.06); background: var(--t-surface); }
.m3x-terminal { box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.25); }

/* Avatar stacks: keep white rings and a light "99+" bubble */
.ring-white { --tw-ring-color: var(--t-surface) !important; }
.bg-\[\#0d0d1280\] { background-color: rgba(255, 255, 255, 0.9) !important; }

/* Footer: wordmark gradient and social icon strokes were white */
.footer-title {
  background: linear-gradient(180deg, rgb(var(--t-ink-rgb) / 0.05) 0%, rgb(var(--t-ink-rgb) / 0.18) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
footer svg [stroke="#CED7DE"] { stroke: #475569; }
footer svg [fill="#CED7DE"] { fill: #475569; }

/* Decorative glows built for dark backgrounds: hide or soften on light */
.globe-image,
.laser-flow,
img[src*="gradient/opai-14"] { display: none !important; }
img[src*="gradient/opai-11"] { opacity: 0.4; }
img[src*="gradient/opai-10"] { opacity: 0.2; }
.bg-opai-blue[class*="blur-"] { opacity: 0.3; }
.bg-white[class*="mix-blend-plus-lighter"] { display: none; }

/* Template accent colours that were tuned for dark backgrounds */
:root {
  --color-opai-lemon: #65a30d;
  --color-opai-yellow: #ca8a04;
}

/* Fixed chip width: the marquee measures chips before the web font loads, so content-sized chips
   grew afterwards and overlapped at the loop seam */
.m3x-chip {
  width: 272px;
  justify-content: flex-start;
  overflow: hidden;
}
.m3x-chip span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hero glow behind the dashboard mockup reads as a hard cyan bar on light backgrounds */
img[src="images/effect.png"] { opacity: 0.35; }

/* ============================= Options Alert dropdown ============================= */
.m3x-has-menu { position: relative; }
.m3x-caret {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgb(var(--t-ink-rgb) / 0.55);
  transition: transform 0.25s ease;
}
.m3x-has-menu:hover .m3x-caret,
.m3x-has-menu:focus-within .m3x-caret { transform: rotate(180deg); }
.m3x-dropdown {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  z-index: 60;
  min-width: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08);
  border-radius: 14px;
  background: var(--t-surface);
  box-shadow: 0 18px 40px -16px rgba(17, 24, 39, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.m3x-has-menu:hover .m3x-dropdown,
.m3x-has-menu:focus-within .m3x-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.m3x-dropdown a,
.m3x-dropdown .m3x-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
}
.m3x-dropdown a { color: var(--t-ink); }
.m3x-dropdown a:hover,
.m3x-dropdown a:focus-visible,
.m3x-dropdown a[aria-current="page"] { background: var(--t-subtle); }
.m3x-soon {
  color: rgb(var(--t-ink-rgb) / 0.45);
  cursor: default;
}
.m3x-soon em {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--t-subtle-2);
  color: rgb(var(--t-ink-rgb) / 0.55);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-style: normal;
}

/* Mobile menu: alerts listed under Options Alert */
.m3x-mobile-sub {
  margin: 0 0 6px;
  padding: 0 0 0 14px;
  list-style: none;
  border-left: 1px solid rgb(var(--t-ink-rgb) / 0.1);
}
.m3x-mobile-sub a,
.m3x-mobile-sub .m3x-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
}
.m3x-mobile-sub a { color: var(--t-ink); }

/* ============================= Nifty alert plans ============================= */
.m3x-eyebrow {
  color: var(--m3x-accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.m3x-plan-week {
  margin-top: 6px;
  color: var(--t-ink);
  font-family: "Inter Tight", sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.m3x-plan-save {
  margin-top: 2px;
  color: var(--m3x-accent);
  font-family: "Inter Tight", sans-serif;
  font-size: 14px;
}
.m3x-plan-save s {
  margin-right: 6px;
  color: rgb(var(--t-ink-rgb) / 0.4);
}
.m3x-plan-best {
  border-color: rgba(0, 163, 10, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(0, 163, 10, 0.25), 0 18px 40px -20px rgba(0, 163, 10, 0.35) !important;
}
.m3x-plan-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--m3x-accent);
  color: var(--t-surface);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}
/* Equal-height plan cards with buttons aligned at the bottom */
.price-scope .grid > article > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.price-scope .grid > article > div > ul { flex-grow: 1; }

/* ============================= Company logo (header, mobile menu, footer) ============================= */
.m3x-brand { margin: 0; }
.m3x-brand img { display: block; width: auto; height: 100%; }
.m3x-brand--header { height: 46px; }
@media (min-width: 1024px) { .m3x-brand--header { height: 72px; } }
.m3x-brand--sidebar { height: 46px; }
.m3x-brand--footer { height: 110px; }

/* ============================= Header actions + "Market ±N%" badge ============================= */
.m3x-head-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.m3x-mkt {
  --mkt: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--mkt);
  font: 500 13px/1 "IBM Plex Mono", monospace;
  white-space: nowrap;
  transition: opacity 0.2s, color 0.2s;
}
.m3x-mkt[hidden] { display: none; }
.m3x-mkt:hover { opacity: 0.75; }
.m3x-mkt.is-bullish { --mkt: #15803d; }
.m3x-mkt.is-bearish { --mkt: #dc2626; }
.m3x-mkt-label { color: rgb(var(--t-ink-rgb) / 0.65); font-weight: 400; }
.m3x-mkt-value { font-weight: 600; }
.m3x-mkt-icon { display: inline-flex; }
.m3x-mkt-icon svg {
  display: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m3x-mkt.is-bullish .m3x-ico-up,
.m3x-mkt.is-bearish .m3x-ico-down,
.m3x-mkt.is-neutral .m3x-ico-flat { display: block; }
@media (max-width: 420px) {
  .m3x-mkt-label { display: none; }
  .m3x-mkt { padding: 0 2px; }
}

/* Buttons: remove the template's blue glow behind every button */
.magnetic-button-gradient { display: none !important; }

/* ============================= Product screenshots slider (homepage) ============================= */
.m3x-shots {
  --shot-gap: 24px;
  position: relative;
  overflow: hidden;
  padding-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.m3x-shots-track {
  display: flex;
  gap: var(--shot-gap);
  width: max-content;
  padding: 0 0 24px;
  animation: m3x-shots-scroll 70s linear infinite;
}
.m3x-shots:hover .m3x-shots-track,
.m3x-shots:focus-within .m3x-shots-track { animation-play-state: paused; }
.m3x-shot {
  flex: none;
  width: min(46vw, 880px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08);
  border-radius: 16px;
  background: var(--t-surface);
  box-shadow: 0 18px 40px -24px rgba(17, 24, 39, 0.35);
}
.m3x-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}
/* One copy of the slides = 50% of the track plus half a gap, so the loop is seamless. */
@keyframes m3x-shots-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--shot-gap) / 2)); }
}
@media (max-width: 767px) {
  .m3x-shots { --shot-gap: 14px; }
  .m3x-shot { width: 82vw; border-radius: 12px; }
  .m3x-shots-track { animation-duration: 45s; }
}
@media (prefers-reduced-motion: reduce) {
  .m3x-shots { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .m3x-shots-track { animation: none; padding-inline: 16px; }
  .m3x-shot { scroll-snap-align: center; }
  .m3x-shot[aria-hidden="true"] { display: none; }
}

/* ============================= Header profile menu / Log in link ============================= */
.m3x-icon { flex: none; width: 18px; height: 18px; }
.m3x-acct { position: relative; }
.m3x-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--t-ink);
  color: var(--t-surface);
  font: 600 12px/1 "Inter Tight", sans-serif;
  letter-spacing: 0.02em;
}
.m3x-avatar.is-lg { width: 40px; height: 40px; font-size: 14px; }
.m3x-avatar.is-xl { width: 52px; height: 52px; font-size: 18px; }
.m3x-acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 4px 10px 4px 5px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.12);
  border-radius: 999px;
  background: var(--t-surface);
  color: var(--t-ink);
  font: 500 13px/1 "IBM Plex Mono", monospace;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.m3x-acct-btn:hover, .m3x-acct.is-open .m3x-acct-btn { border-color: rgb(var(--t-ink-rgb) / 0.28); box-shadow: 0 4px 14px -6px rgba(17, 24, 39, 0.25); }
.m3x-acct-btn .m3x-acct-caret { width: 16px; height: 16px; color: rgb(var(--t-ink-rgb) / 0.55); transition: transform 0.2s; }
.m3x-acct.is-open .m3x-acct-caret { transform: rotate(180deg); }
.m3x-acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 264px;
  padding: 8px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08);
  border-radius: 14px;
  background: var(--t-surface);
  box-shadow: 0 20px 50px -18px rgba(17, 24, 39, 0.35);
  animation: m3x-menu-in 0.16s ease-out;
}
.m3x-acct-menu[hidden] { display: none; }
@keyframes m3x-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.m3x-acct-who { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 8px 12px; border-bottom: 1px solid rgb(var(--t-ink-rgb) / 0.07); }
.m3x-acct-who > span:last-child, .m3x-mobile-acct-who > span:last-child { display: grid; gap: 2px; min-width: 0; }
.m3x-acct-who strong, .m3x-mobile-acct-who strong { overflow: hidden; color: var(--t-ink); font: 600 14px/1.3 "Inter Tight", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.m3x-acct-who small, .m3x-mobile-acct-who small { overflow: hidden; color: rgb(var(--t-ink-rgb) / 0.55); font: 400 12px/1.3 "Inter Tight", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.m3x-acct-menu ul { margin: 0; padding: 0; list-style: none; }
.m3x-acct-menu a, .m3x-acct-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--t-ink);
  font: 400 14px/1.2 "Inter Tight", sans-serif;
  text-align: left;
  cursor: pointer;
}
.m3x-acct-menu a:hover, .m3x-acct-menu a:focus-visible, .m3x-acct-menu button:hover, .m3x-acct-menu button:focus-visible { background: var(--t-subtle); outline: none; }
.m3x-acct-menu a .m3x-icon { color: rgb(var(--t-ink-rgb) / 0.5); }
.m3x-acct-menu a:hover .m3x-icon { color: #00a30a; }
.m3x-acct-menu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgb(var(--t-ink-rgb) / 0.07); }
.m3x-acct-menu button { color: #b91c1c; }
.m3x-acct-menu button:hover { background: #fef2f2; }
.m3x-acct-login {
  display: none;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 4px;
  color: rgb(var(--t-ink-rgb) / 0.75);
  font: 500 13px/1 "IBM Plex Mono", monospace;
  transition: color 0.2s;
}
.m3x-acct-login:hover { color: var(--t-ink); }
.m3x-acct-login .m3x-icon { width: 18px; height: 18px; }
@media (min-width: 1024px) { .m3x-acct-login { display: inline-flex; } }
@media (max-width: 639.98px) {
  .m3x-acct-name, .m3x-acct-btn .m3x-acct-caret { display: none; }
  .m3x-acct-btn { padding: 4px; }
}
/* account links in the mobile menu */
.m3x-mobile-acct { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgb(var(--t-ink-rgb) / 0.1); }
.m3x-mobile-acct-who { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.m3x-mobile-acct ul { margin: 0; padding: 0; list-style: none; }
.m3x-mobile-acct a, .m3x-mobile-acct button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  color: rgb(var(--t-ink-rgb) / 0.75);
  font: 400 16px/1.2 "Inter Tight", sans-serif;
  cursor: pointer;
}
.m3x-mobile-acct .m3x-icon { width: 18px; height: 18px; color: rgb(var(--t-ink-rgb) / 0.5); }
.m3x-mobile-acct button { color: #b91c1c; }
.m3x-mobile-acct button .m3x-icon { color: currentColor; }
@media (prefers-reduced-motion: reduce) { .m3x-acct-menu { animation: none; } }

/* ============================= Header index strip (top bar) ============================= */
.m3x-ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 34px;
  margin: -16px -8px 12px; /* full width: cancel the header's padding */
  overflow: hidden;
  background: #111827;
  color: #ffffff;
  font: 500 12.5px/1 "IBM Plex Mono", monospace;
}
@media (min-width: 1024px) { .m3x-ticker { margin: 0 -8px; } }
.m3x-ticker-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 16px;
  background: #111827;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 12px 0 14px -4px #111827;
}
.m3x-ticker-status i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.m3x-ticker-status.is-open i { background: #22c55e; animation: m3x-live 1.6s ease-in-out infinite; }
@keyframes m3x-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } }
.m3x-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; }
.m3x-ticker-track { display: flex; width: max-content; height: 100%; animation: m3x-ticker 45s linear infinite; }
.m3x-ticker:hover .m3x-ticker-track { animation-play-state: paused; }
@keyframes m3x-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m3x-ticker-list { display: flex; align-items: center; justify-content: space-around; min-width: 100vw; margin: 0; padding: 0; list-style: none; }
.m3x-tick { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, 0.1); }
.m3x-tick-name { color: #ffffff; font-weight: 600; letter-spacing: 0.03em; }
.m3x-tick-price { color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.m3x-tick-chg { font-variant-numeric: tabular-nums; }
.m3x-tick.is-up .m3x-tick-chg { color: #4ade80; }
.m3x-tick.is-down .m3x-tick-chg { color: #f87171; }
.m3x-tick.is-flat .m3x-tick-chg { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 639.98px) {
  .m3x-ticker { font-size: 12px; }
  .m3x-ticker-status { padding: 0 10px 0 12px; }
  .m3x-ticker-status span { display: none; }
  .m3x-tick { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .m3x-ticker-track { animation: none; }
  .m3x-ticker-viewport { overflow-x: auto; }
  .m3x-ticker-list[aria-hidden="true"] { display: none; }
  .m3x-ticker-status.is-open i { animation: none; }
}

/* The template's scroll script adds .scroll-header, which widens the header padding to 20px (spacing * 5):
   keep the index strip edge to edge in both states. */
.m3x-ticker { transition: margin 0.5s ease-in-out; }
.scroll-header .m3x-ticker { margin-left: calc(var(--spacing) * -5); margin-right: calc(var(--spacing) * -5); }

/* Footer "Options Alert" column: alerts that aren't live yet */
.m3x-foot-soon { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--t-ink-rgb) / 0.38); font-weight: 400; cursor: default; }
.m3x-foot-soon em { padding: 2px 8px; border-radius: 999px; background: rgb(var(--t-ink-rgb) / 0.06); color: rgb(var(--t-ink-rgb) / 0.5); font: 500 11px/1.4 "IBM Plex Mono", monospace; font-style: normal; letter-spacing: 0.02em; }

/* ============================= Consistent section spacing =============================
   Every top-level section (class m3x-sec, added in the page views) gets the same top and bottom padding,
   so the gap between any two sections is identical. The first section also clears the fixed header + index strip.
   !important is needed to override the template's per-section Tailwind padding utilities. */
:root { --m3x-sec-y: 48px; --m3x-hero-top: 152px; }
@media (min-width: 768px) { :root { --m3x-sec-y: 64px; --m3x-hero-top: 168px; } }
@media (min-width: 1024px) { :root { --m3x-sec-y: 80px; --m3x-hero-top: 184px; } }
.m3x-sec { padding-top: var(--m3x-sec-y) !important; padding-bottom: var(--m3x-sec-y) !important; }
.m3x-sec--hero { padding-top: var(--m3x-hero-top) !important; }
.m3x-footer { padding-top: calc(var(--m3x-sec-y) - 24px) !important; border-top: 1px solid rgb(var(--t-ink-rgb) / 0.08); } /* the inner container adds 24px */

/* ============================= Theme tokens: light (default) and dark =============================
   Our custom CSS reads these instead of fixed colours; the toggle in the header sets html[data-theme]. */
:root {
  --t-ink: #111827;
  --t-ink-rgb: 17 24 39;
  --t-ink-hover: #1f2937;
  --t-surface: #ffffff;
  --t-page: #f6f8fb;
  --t-subtle: #f3f6f9;
  --t-subtle-2: #eef2f6;
}
html[data-theme="dark"] {
  --t-ink: #f3f4f6;
  --t-ink-rgb: 243 244 246;
  --t-ink-hover: #d1d5db;
  --t-surface: #121826;
  --t-page: #0a0e15;
  --t-subtle: #19212f;
  --t-subtle-2: #222b3b;
  --m3x-ink: #f3f4f6;
  --m3x-accent: #34d058;
  --acc-green: #34d058;
  --acc-error: #f87171;

  /* the template's own colour variables (it was a dark design originally) */
  --color-white: #f3f4f6;
  --color-background-1: #334155;
  --color-background-3: #1f2937;
  --color-background-4: #161d2a;
  --color-background-5: #121826;
  --color-background-6: #0a0e15;
  --color-background-7: #f3f4f6;
  --color-background-8: #9ca3af;
  --color-background-11: #f3f4f6;
  --color-background-13: #121826;
  --color-background-14: #0a0e15;
  --color-stroke-1: #94a3b8;
  --color-stroke-3: #94a3b8;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: #0a0e15; color: #e5e7eb; }

/* ---------- dark mode: template pieces the light theme had restyled ---------- */
html[data-theme="dark"] [class*="bg-linear-[90deg,#DBE2E6_0%,#FFF_71.63%]"] { background-color: #f3f4f6 !important; }
html[data-theme="dark"] .magnetic-button svg path[stroke="#0D1017"] { stroke: #0a0e15; }
html[data-theme="dark"] [class*="bg-linear-[180deg,rgba(13,16,23,0.00)_0%,#0D1017_93.95%]"] {
  background-image: linear-gradient(180deg, rgba(10, 14, 21, 0) 0%, #0a0e15 94%) !important;
}
html[data-theme="dark"] .bg-background-5 { border-color: rgba(255, 255, 255, 0.07); box-shadow: none; }
html[data-theme="dark"] .m3x-chip.bg-background-4 { border-color: rgba(255, 255, 255, 0.08); background: #121826; }
html[data-theme="dark"] .ring-white { --tw-ring-color: #0a0e15 !important; }
html[data-theme="dark"] .bg-\[\#0d0d1280\] { background-color: rgba(18, 24, 38, 0.92) !important; }
html[data-theme="dark"] .footer-title { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.14) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html[data-theme="dark"] footer svg [stroke="#CED7DE"] { stroke: #94a3b8; }
html[data-theme="dark"] footer svg [fill="#CED7DE"] { fill: #94a3b8; }
html[data-theme="dark"] .m3x-terminal { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .scroll-header { --tw-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .m3x-footer { border-top-color: rgba(255, 255, 255, 0.08); }

/* Logo: its wordmark is dark ink; give it a soft light plate so it stays readable on dark backgrounds */
html[data-theme="dark"] .m3x-brand img { padding: 4px 8px; border-radius: 8px; background: #f3f4f6; box-sizing: content-box; }

/* Status colours: soft light tints become deep tints */
html[data-theme="dark"] .m3x-mkt.is-bullish { --mkt: #34d058; }
html[data-theme="dark"] .m3x-mkt.is-bearish { --mkt: #f87171; }
html[data-theme="dark"] .m3x-flash.is-success { border-color: rgba(52, 208, 88, 0.35); background: rgba(52, 208, 88, 0.1); color: #86efac; }
html[data-theme="dark"] .m3x-flash.is-error,
html[data-theme="dark"] .m3x-auth-error { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
html[data-theme="dark"] .m3x-field input[aria-invalid="true"],
html[data-theme="dark"] .m3x-field textarea[aria-invalid="true"],
html[data-theme="dark"] .m3x-select select[aria-invalid="true"],
html[data-theme="dark"] .m3x-check.is-invalid { border-color: #f87171; background: rgba(248, 113, 113, 0.08); }
html[data-theme="dark"] .m3x-field-error { color: #fca5a5; }
html[data-theme="dark"] .m3x-qr-enter { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.1); color: #fcd34d; }
html[data-theme="dark"] .m3x-qr-enter strong { color: #fde68a; }
html[data-theme="dark"] .m3x-co-lines .is-saving dd,
html[data-theme="dark"] .m3x-co-product { color: #34d058; }
html[data-theme="dark"] .m3x-field input:focus,
html[data-theme="dark"] .m3x-field textarea:focus,
html[data-theme="dark"] .m3x-select select:focus { border-color: #34d058; box-shadow: 0 0 0 3px rgba(52, 208, 88, 0.18); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: rgba(243, 244, 246, 0.38); }
html[data-theme="dark"] .m3x-stat-icon,
html[data-theme="dark"] .m3x-co-plan-icon,
html[data-theme="dark"] .m3x-thanks-icon { background: rgba(52, 208, 88, 0.12); color: #34d058; }
html[data-theme="dark"] .m3x-check input { accent-color: #34d058; }
html[data-theme="dark"] .m3x-dropdown { box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.7); }
/* Feature cards: the template's blurred corner glows, in brand green. Shown in dark mode (like the original
   dark theme), hidden in light mode. The mouse-follow spotlight is green too. Section glow images are green copies
   (images/gradient/*-green.*). */
html:not([data-theme="dark"]) .glowing-card .bg-opai-blue,
html:not([data-theme="dark"]) .glowing-card .mix-blend-plus-lighter { display: none; }
html[data-theme="dark"] .glowing-card .bg-opai-blue { background-color: #00f80c; }
.glowing-card:before { background: radial-gradient(100rem circle at var(--xPos) var(--yPos), rgba(0, 248, 12, 0.4), transparent 15%); }
/* Dark mode = the original dark theme's glows at full strength (the light theme tones them down / hides them), in green */
html[data-theme="dark"] .bg-opai-blue { background-color: #00f80c; }
html[data-theme="dark"] .bg-opai-blue[class*="blur-"] { opacity: 1; }
html[data-theme="dark"] .bg-white[class*="mix-blend-plus-lighter"] { display: block; }
html[data-theme="dark"] img[src*="gradient/opai-11"],
html[data-theme="dark"] img[src*="gradient/opai-10"] { opacity: 1; }
html[data-theme="dark"] img[src*="gradient/opai-14"] { display: block !important; }
/* Green reads much brighter than the original blue: soften the two big glows so they feel the same strength
   and the footer text over the corner glow stays readable. */
html[data-theme="dark"] img[src*="gradient/opai-11"] { opacity: 0.75; }
html[data-theme="dark"] img[src*="gradient/opai-14"] { opacity: 0.4; }
/* Homepage slider glow: blue in light mode (user preference), green in dark mode */
.m3x-glow-dark, html[data-theme="dark"] .m3x-glow-light { display: none; }
html[data-theme="dark"] .m3x-glow-dark { display: block; }

/* Utility: remove a section's top padding (works with .m3x-sec, which otherwise forces it). Add class="m3x-pt-0". */
.m3x-pt-0, .m3x-sec.m3x-pt-0 { padding-top: 0 !important; }

/* Homepage: title above the Nifty sentiment dashboard, left-aligned with the dashboard card */
.m3x-dash-title { max-width: 1288px; margin: 0 auto 24px; text-align: left; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .m3x-dash-title { margin-bottom: 32px; } }

/* ---------- Header refinements (2026-10-17) ---------- */
/* 1. Index strip: taller, larger text */
.m3x-ticker { height: 42px; font-size: 14px; }
.m3x-tick { gap: 10px; padding: 0 26px; }
@media (max-width: 639.98px) { .m3x-ticker { height: 38px; font-size: 13px; } .m3x-tick { padding: 0 18px; } }
/* 2. Menu: bigger, bolder, centred in the space between the logo and the right-hand actions */
@media (min-width: 1024px) {
  .m3x-trade-nav { flex: 1 1 auto; justify-content: center; }
}
.m3x-trade-nav > li > a > span { font-size: 15.5px !important; font-weight: 500 !important; letter-spacing: 0.4px !important; }
.m3x-trade-nav > li > a[aria-current="page"] > span, .m3x-trade-nav > li.m3x-has-menu:hover > a > span { font-weight: 600 !important; }
@media (max-width: 1199px) { .m3x-trade-nav > li > a > span { font-size: 14px !important; } }
/* 3. Market badge: "Market +67% ↑ Bullish" */
.m3x-mkt-state { font-weight: 600; }
.m3x-mkt-state:empty { display: none; }
@media (max-width: 359.98px) { .m3x-mkt-state { display: none; } }

/* ---------- Mobile menu (2026-10-17) ---------- */
.m3x-msb {
  height: 100vh;
  height: 100dvh;
  background: var(--t-surface);
  border-left: 1px solid rgb(var(--t-ink-rgb) / 0.08);
}
.m3x-msb.translate-x-0 { box-shadow: -24px 0 60px rgb(0 0 0 / 0.12); }
.m3x-msb-inner { display: flex; flex-direction: column; height: 100%; }
.m3x-msb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgb(var(--t-ink-rgb) / 0.08);
}
.m3x-msb-close {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.1);
  border-radius: 10px;
  background: var(--t-subtle);
  color: var(--t-ink);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.m3x-msb-close:hover { background: var(--t-subtle-2); border-color: rgb(var(--t-ink-rgb) / 0.18); }
.m3x-msb-close .m3x-icon { width: 20px; height: 20px; }
.m3x-msb-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 24px; }
.m3x-msb-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.m3x-msb-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--t-ink);
  font: 500 16px/1.3 "Inter Tight", sans-serif;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s, color 0.2s;
}
.m3x-msb-link::-webkit-details-marker { display: none; }
.m3x-msb-link::marker { content: ""; }
.m3x-msb-link:hover, .m3x-msb-group[open] > .m3x-msb-link { background: var(--t-subtle); }
.m3x-msb-link:focus-visible, .m3x-msb-sublink:focus-visible, .m3x-msb-cta:focus-visible, .m3x-msb-close:focus-visible {
  outline: 2px solid var(--m3x-accent);
  outline-offset: 2px;
}
.m3x-msb-ico {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--t-subtle-2);
  color: rgb(var(--t-ink-rgb) / 0.7);
  transition: background-color 0.2s, color 0.2s;
}
.m3x-msb-label { flex: 1 1 auto; min-width: 0; }
.m3x-msb-caret { width: 18px; height: 18px; color: rgb(var(--t-ink-rgb) / 0.35); transition: transform 0.25s ease; }
.m3x-msb-group[open] > .m3x-msb-link .m3x-msb-caret { transform: rotate(180deg); color: var(--t-ink); }
.m3x-msb-link.is-active { background: rgb(0 248 12 / 0.1); font-weight: 600; }
.m3x-msb-link.is-active .m3x-msb-ico { background: var(--m3x-mint); color: #0a0e15; }

.m3x-msb-sub {
  display: grid;
  gap: 2px;
  margin: 6px 0 8px 30px;
  padding: 0 0 0 16px;
  list-style: none;
  border-left: 1px solid rgb(var(--t-ink-rgb) / 0.1);
}
.m3x-msb-group[open] .m3x-msb-sub { animation: m3x-msb-in 0.22s ease; }
@keyframes m3x-msb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.m3x-msb-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--t-ink);
  font: 500 15px/1.35 "Inter Tight", sans-serif;
}
a.m3x-msb-sublink:hover, .m3x-msb-sublink.is-active { background: var(--t-subtle); }
.m3x-msb-sublink.is-soon { color: rgb(var(--t-ink-rgb) / 0.45); font-weight: 400; cursor: default; }
.m3x-msb-sublink em {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--t-subtle-2);
  color: rgb(var(--t-ink-rgb) / 0.55);
  font: 500 11px/1.5 "IBM Plex Mono", monospace;
  font-style: normal;
}
.m3x-msb-sublink em.m3x-msb-live { background: rgb(0 248 12 / 0.14); color: var(--m3x-accent); }

/* Settings under the links: Dark mode (the footer switch) and Language (English only for now) */
.m3x-msb-settings {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(var(--t-ink-rgb) / 0.08);
}
.m3x-msb-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--t-ink);
  font: 600 16px/1.3 "Manrope", sans-serif;
}
.m3x-msb-select { position: relative; flex: none; display: inline-flex; align-items: center; }
.m3x-msb-select select {
  height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.16);
  border-radius: 9px;
  background: var(--t-surface);
  color: var(--t-ink);
  font: 500 15px/1 "Inter Tight", sans-serif;
  appearance: none;
  cursor: pointer;
}
.m3x-msb-select select:focus-visible { outline: 2px solid var(--m3x-accent); outline-offset: 2px; }
.m3x-msb-select .m3x-icon { position: absolute; right: 10px; width: 16px; height: 16px; color: rgb(var(--t-ink-rgb) / 0.55); pointer-events: none; }

.m3x-msb-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--t-ink-rgb) / 0.08); }
.m3x-msb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--m3x-mint);
  color: #0a0e15;
  font: 600 15px/1.2 "IBM Plex Mono", monospace;
  transition: filter 0.2s;
}
.m3x-msb-cta:hover { filter: brightness(0.95); }
.m3x-msb-cta .m3x-icon { width: 18px; height: 18px; }
html[data-theme="dark"] .m3x-msb.translate-x-0 { box-shadow: -24px 0 60px rgb(0 0 0 / 0.5); }
html[data-theme="dark"] .m3x-msb-link.is-active { background: rgb(0 248 12 / 0.12); }
.m3x-msb .m3x-mobile-acct { margin-top: 16px; }

/* ---------- Wordmark logo (2026-10-18) ---------- */
/* the one-line logo (504 x 80, 2026-10-31): 30px tall on phones and tablets. The "MARKET 360" lettering sits in rows
   18-43 of the 80 (the X reaches below it), so the image moves down 9/80 of its height to centre the lettering, not the
   whole image, in the header */
.m3x-brand--header { height: 30px; }
:is(.m3x-brand--header, .m3x-brand--sidebar) img { transform: translateY(11.25%); }
@media (min-width: 1024px) { .m3x-brand--header { height: 29px; } }
@media (min-width: 1440px) { .m3x-brand--header { height: 34px; } }
.m3x-brand--sidebar { height: 30px; }
.m3x-brand--footer { height: 56px; }
@media (min-width: 768px) { .m3x-brand--footer { height: 64px; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .m3x-brand--header { height: 24px; } }
/* Light and dark versions of the logo swap with the theme (no backing pill needed). */
.m3x-brand .m3x-logo-dark { display: none; }
html[data-theme="dark"] .m3x-brand .m3x-logo-light { display: none; }
html[data-theme="dark"] .m3x-brand .m3x-logo-dark { display: block; }
html[data-theme="dark"] .m3x-brand img { padding: 0; border-radius: 0; background: none; }

/* ---------- Footer on small screens (2026-10-19) ----------
   12-column grids with 40px/32px gaps are wider than a phone (11 gaps = 440px), which pushed the
   address off-screen. Below the breakpoint where columns sit side by side, drop the column gaps. */
.m3x-footer .grid > * { min-width: 0; }
.m3x-footer a, .m3x-footer p { overflow-wrap: anywhere; }
@media (max-width: 1023.98px) { .m3x-footer .main-container > .grid { column-gap: 0; } }
@media (max-width: 639.98px) { .m3x-footer .main-container > .grid > .grid { column-gap: 0; } }

/* ---------- Pricing sections: no nested scroll box (2026-10-19) ----------
   overflow-x: hidden forces overflow-y to auto, turning the tall pricing section into its own scroll
   container; on phones a swipe that starts inside it scrolls (and stalls in) that box instead of the page.
   clip hides the sideways overflow without creating a scroll container. */
.m3x-sec.overflow-x-hidden { overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
.m3x-risk strong { color: rgb(var(--t-ink-rgb) / 0.55); font-weight: 600; }
.m3x-risk a { color: rgb(var(--t-ink-rgb) / 0.55); text-decoration: underline; text-underline-offset: 2px; }
.m3x-risk a:hover { color: var(--m3x-accent); }
/* Header CTA never wraps ("Try now" split onto two lines at ~1280px once the header shrinks on scroll) */
.m3x-head-actions .magnetic-button, .m3x-head-actions .magnetic-button span { white-space: nowrap; }
.m3x-head-actions .magnetic-button { flex: none; }
/* 1024-1365px: six menu items, the badge and the buttons only just fit (2026-10-19) */
header nav > div > a:first-child { flex: none; } /* never squash the logo */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .m3x-trade-nav { column-gap: 12px !important; }
  .m3x-trade-nav > li > a > span { font-size: 13.5px !important; letter-spacing: 0.2px !important; }
}
/* badge shows just "+67% ↑" up to 1365px; the words come back from 1366px */
@media (min-width: 1024px) and (max-width: 1365.98px) { .m3x-mkt-label, .m3x-mkt-state { display: none; } }
@media (min-width: 1024px) and (max-width: 1099.98px) { .m3x-head-actions .m3x-mkt { display: none !important; } }

/* ---------- Footer wordmark in the logo's colours (2026-10-19) ----------
   Not .footer-title any more: that class runs a letter-shuffle animation that rewrites the text (and the colour spans). */
.m3x-footer-word {
  container-type: inline-size;
  padding: clamp(20px, 3vw, 40px) 0 clamp(4px, 1vw, 12px);
  overflow: hidden;
}
.m3x-footer-title {
  margin: 0;
  /* sized from the container so the word spans the footer at any width */
  font-size: clamp(30px, 12vw, 220px);
  font-size: 13.1cqw;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0.1em;
  padding: 0.04em 0 0 0.1em;
  white-space: nowrap;
}
/* Outlined wordmark in the brand green. The font's letters are built from overlapping shapes (A, R), so a
   plain stroke shows lines inside them; instead the stroke is painted first and the fill (footer background)
   on top, which hides the inner half of the stroke and those overlaps. */
.m3x-footer-title, .m3x-footer-title span {
  color: var(--t-page);
  -webkit-text-fill-color: var(--t-page);
  background: none;
  -webkit-text-stroke: max(2px, 0.024em) #00f80c;
  paint-order: stroke fill;
}
/* The template's row gaps (xl:gap-20 = 80px, 2xl:gap-32 = 128px) pushed the buttons off-screen at 1280-1536px.
   Keep a small minimum gap; the menu (flex: 1, centred) absorbs the rest. */
@media (min-width: 1024px) { header nav > div { column-gap: 24px !important; } }

/* ---------- Market360X Club mega menu (2026-10-19) ----------
   Full width of the header bar; the Club <li> is static so the panel positions against the header <nav>. */
.m3x-trade-nav > li.m3x-has-mega { position: static !important; }
.m3x-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 0 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.m3x-has-mega:hover .m3x-mega,
.m3x-has-mega:focus-within .m3x-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.m3x-mega-inner {
  margin: 0 auto;
  padding: 24px clamp(20px, 2.4vw, 32px) 28px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08);
  border-radius: 10px;
  background: var(--t-surface);
  box-shadow: 0 28px 60px -24px rgba(17, 24, 39, 0.3);
}
.m3x-mega-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.m3x-mega-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  color: var(--m3x-accent); font: 600 13px/1.4 "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase;
}
.m3x-mega-eyebrow em {
  padding: 2px 8px; border-radius: 999px; background: var(--t-subtle-2);
  color: rgb(var(--t-ink-rgb) / 0.6); font-size: 11px; font-style: normal; letter-spacing: 0.02em; text-transform: none;
}
.m3x-mega-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; color: var(--t-ink); font: 400 clamp(18px, 1.6vw, 22px)/1.3 "Sora", sans-serif; }
.m3x-mega-title i { color: #00f80c; font-style: normal; }
.m3x-mega-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.m3x-mega-step {
  display: flex; flex-direction: column; padding: 12px 12px 16px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 10px; background: var(--t-page);
  transition: border-color 0.2s, transform 0.2s;
}
.m3x-mega-step:hover { border-color: rgb(0 163 10 / 0.4); transform: translateY(-2px); }
/* Line art is black and green, so it always sits on a light tile (also in dark mode) */
.m3x-mega-ill { display: block; height: clamp(130px, 12vw, 180px); margin: 0 0 14px; padding: 10px; overflow: hidden; border-radius: 8px; background: #eef8ef; }
.m3x-mega-ill img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: contain; }
.m3x-mega-num { margin: 0 4px; color: var(--m3x-accent); font: 600 13px/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; }
.m3x-mega-step-title { margin: 6px 4px 6px; color: var(--t-ink); font: 500 18px/1.3 "Sora", sans-serif; }
.m3x-mega-text { margin: 0 4px; color: rgb(var(--t-ink-rgb) / 0.62); font: 400 14px/1.5 "Inter Tight", sans-serif; }
html[data-theme="dark"] .m3x-mega-inner { box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.7); }
html[data-theme="dark"] .m3x-mega-ill { background: #e9f3ea; }
@media (max-width: 1279.98px) { .m3x-mega-text { font-size: 13px; } .m3x-mega-step-title { font-size: 16px; } }

/* Mobile menu: Club steps as plain text */
.m3x-msb-steps .m3x-msb-sublink b { margin-right: 10px; color: var(--m3x-accent); font: 600 12px/1 "IBM Plex Mono", monospace; }
.m3x-mega { white-space: normal; text-align: left; }
.m3x-mega-ill { height: clamp(150px, 13vw, 210px); padding: 8px; }

/* ---------- Footer: full logo and a more readable disclaimer (2026-10-22) ---------- */
.m3x-brand--footer { height: 110px; }
@media (min-width: 768px) { .m3x-brand--footer { height: 140px; } }
/* Borderless logo: the light version as supplied, a brightened copy for the dark footer (swapped by .m3x-logo-light/-dark) */
.m3x-risk {
  color: rgb(var(--t-ink-rgb) / 0.62);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}
.m3x-risk strong { color: rgb(var(--t-ink-rgb) / 0.85); font-weight: 700; }
.m3x-risk a { color: rgb(var(--t-ink-rgb) / 0.8); }
@media (max-width: 639.98px) { .m3x-risk { font-size: 13px; } }


/* ================= Manrope for menu items, button labels and headings (site-wide, 2026-10-22) =================
   Body copy, the price ticker and numbers keep their fonts. */

/* ---------- Header and menus ---------- */
body .m3x-trade-nav > li > a > span {
  font-family: "Manrope", sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
body .m3x-trade-nav > li > a[aria-current="page"] > span,
body .m3x-trade-nav > li.m3x-has-menu:hover > a > span { font-weight: 700 !important; }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body .m3x-trade-nav > li > a > span { font-size: 14px !important; }
}
body .m3x-mkt,
body .m3x-mkt span { font-family: "Manrope", sans-serif; letter-spacing: 0; }
body .m3x-mkt-value,
body .m3x-mkt-state { font-weight: 700; }
body .m3x-dropdown a,
body .m3x-dropdown .m3x-soon,
body .m3x-mega-title,
body .m3x-mega-step-title,
body .m3x-msb-link,
body .m3x-msb-sublink { font-family: "Manrope", sans-serif; letter-spacing: 0; }
body .m3x-mega-step-title { font-weight: 700; }
body .m3x-msb-link { font-weight: 600; }

/* ---------- Buttons ---------- */
body :is(.magnetic-button, .m3x-btn, .m3x-plan-btn, .m3x-msb-cta, .m3x-co-next, .m3x-co-submit),
body :is(.magnetic-button, .m3x-btn, .m3x-plan-btn, .m3x-msb-cta) span:not(.sr-only) {
  font-family: "Manrope", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* ---------- Headings (the big outlined footer wordmark keeps its own style) ---------- */
body :is(h1, h2, h3, h4, h5, h6):not(.m3x-footer-title),
body :is(h1, h2, h3, h4, h5, h6):not(.m3x-footer-title) *:not(svg):not(svg *) {
  font-family: "Manrope", sans-serif !important;
}
body :is(h1, h2):not(.m3x-footer-title) { font-weight: 700 !important; letter-spacing: -0.035em !important; }
body :is(h3, h4, h5, h6) { font-weight: 700 !important; letter-spacing: -0.015em !important; }

/* Text-reveal headings hide their overflow for the animation; Manrope's descenders (g, y, p) reach below the
   1.2 line box, so give them room inside the clip (the heading keeps its own bottom margin as well). */
body :is(h1, h2, h3, h4)[data-opai-text-reveal] { padding-bottom: 0.16em; }

/* Hero: "Accurate alerts," on the first line and the whole green "backed by data." on the next */
body.m3x-home h1 > .text-mint { display: block; }
body.m3x-home h1 > .text-mint br { display: none !important; }

/* Header menu: spread the items evenly across the free space between the logo and the badge
   (the header itself stops growing at 1920px). */
@media (min-width: 1024px) {
  .m3x-trade-nav { justify-content: space-evenly !important; column-gap: 12px !important; }
}

/* ================= About: vision, objectives, mission, commitment (2026-10-24) ================= */
.m3x-motive-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.m3x-motive-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.m3x-motive-pills li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.1); border-radius: 999px; background: var(--t-surface);
  color: var(--t-ink); font: 600 14px/1.2 "Manrope", sans-serif;
}
.m3x-motive-pills .m3x-icon { width: 16px; height: 16px; color: var(--m3x-accent); }
.m3x-motive-title { margin: 0; color: var(--t-ink); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.12; }
.m3x-motive-lead { margin: 14px 0 0; color: rgb(var(--t-ink-rgb) / 0.66); font: 400 clamp(16px, 1.4vw, 18px)/1.6 "Inter Tight", sans-serif; }

.m3x-objectives { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .m3x-objectives { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m3x-objective {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 10px; background: var(--t-surface);
  box-shadow: 0 10px 30px -18px rgba(17, 24, 39, 0.22);
}
.m3x-objective-icon {
  display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; background: rgb(0 248 12 / 0.12); color: var(--m3x-accent);
}
.m3x-objective-icon .m3x-icon { width: 22px; height: 22px; }
.m3x-objective-num { margin: 4px 0 0; color: var(--m3x-accent); font: 600 12px/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.m3x-objective h3 { margin: 0; color: var(--t-ink); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; }
.m3x-objective > p:not(.m3x-objective-num) { margin: 0; color: rgb(var(--t-ink-rgb) / 0.68); font: 400 15.5px/1.65 "Inter Tight", sans-serif; }
.m3x-objective strong { color: var(--t-ink); font-weight: 700; }
.m3x-objective-note { margin-left: 1px; color: var(--m3x-accent); font-weight: 700; text-decoration: none; }
.m3x-objective-quote {
  display: flex; align-items: flex-start; gap: 10px; margin: auto 0 0; padding: 14px 16px;
  border-left: 3px solid #00f80c; border-radius: 0 10px 10px 0; background: rgb(0 248 12 / 0.08);
  color: var(--t-ink); font: 700 16px/1.45 "Manrope", sans-serif;
}
.m3x-objective-quote .m3x-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--m3x-accent); }

.m3x-philosophy { margin-top: 28px; padding: clamp(22px, 2.6vw, 34px); border-radius: 10px; background: #0d1017; text-align: center; }
.m3x-philosophy-label { margin: 0 0 16px; color: rgb(var(--t-ink-rgb) / 0.62); font: 500 15px/1.4 "Inter Tight", sans-serif; }
.m3x-philosophy .m3x-philosophy-label { color: rgba(255, 255, 255, 0.65); }
.m3x-philosophy-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .m3x-philosophy-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m3x-philosophy-steps li {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.04);
  color: #ffffff; font: 700 clamp(15px, 1.3vw, 18px)/1.3 "Manrope", sans-serif;
}
.m3x-philosophy-steps span { color: #00f80c; font: 600 12px/1 "IBM Plex Mono", monospace; }

.m3x-mission { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .m3x-mission { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.m3x-mission-card {
  padding: clamp(22px, 2.6vw, 34px); border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 10px;
  background: var(--t-surface); box-shadow: 0 10px 30px -18px rgba(17, 24, 39, 0.22);
}
.m3x-mission-card h3 { margin: 0 0 16px; color: var(--t-ink); font-size: 20px; }
.m3x-mission-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.m3x-mission-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  border-top: 1px solid rgb(var(--t-ink-rgb) / 0.07); color: rgb(var(--t-ink-rgb) / 0.8); font: 500 16px/1.5 "Inter Tight", sans-serif;
}
.m3x-mission-list li:first-child { border-top: 0; }
.m3x-mission-list .m3x-icon { width: 20px; height: 20px; margin-top: 2px; color: var(--m3x-accent); }

.m3x-commitments { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .m3x-commitments { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m3x-commitments li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 10px; background: var(--t-surface);
  color: var(--t-ink); font: 700 clamp(16px, 1.4vw, 19px)/1.3 "Manrope", sans-serif;
}
.m3x-principles { margin-top: 32px; text-align: center; }
.m3x-principles-line { margin: 0; color: var(--t-ink); font: 800 clamp(26px, 3.6vw, 46px)/1.2 "Manrope", sans-serif; letter-spacing: -0.03em; }

.m3x-motive-disclaimer {
  margin-top: 40px; padding: 18px 20px; border: 1px solid rgb(245 158 11 / 0.35); border-left: 3px solid #f59e0b;
  border-radius: 0 10px 10px 0; background: rgb(245 158 11 / 0.08); scroll-margin-top: 150px;
}
.m3x-motive-disclaimer p { margin: 0 0 8px; color: rgb(var(--t-ink-rgb) / 0.72); font: 400 14px/1.6 "Inter Tight", sans-serif; }
.m3x-motive-disclaimer p:last-child { margin-bottom: 0; }
.m3x-motive-disclaimer .m3x-motive-disclaimer-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--t-ink); font: 700 15px/1.4 "Manrope", sans-serif; }
.m3x-motive-disclaimer-title .m3x-icon { width: 18px; height: 18px; color: #d97706; }
html[data-theme="dark"] .m3x-philosophy { background: #111827; border: 1px solid rgba(255, 255, 255, 0.06); }

/* ---------- About: objective cards on photo backgrounds (2026-10-24) ----------
   The photo sits in ::before (so it can zoom on hover) under a dark gradient that keeps the text readable. */
.m3x-objective {
  position: relative; isolation: isolate; overflow: hidden; min-height: 520px; gap: 14px;
  justify-content: flex-start; border: 0; background: #0d1017; box-shadow: 0 18px 40px -22px rgba(17, 24, 39, 0.55);
}
.m3x-objective::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--bg) center / cover no-repeat; filter: saturate(0.85); transform: scale(1.02); transition: transform 0.7s ease;
}
.m3x-objective::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 14, 21, 0.9) 0%, rgba(10, 14, 21, 0.78) 42%, rgba(10, 14, 21, 0.42) 68%, rgba(10, 14, 21, 0.88) 100%);
}
.m3x-objective:hover::before { transform: scale(1.08); }
.m3x-objective .m3x-objective-num { margin-top: 0; color: #00f80c; }
.m3x-objective h3 { color: #ffffff; }
.m3x-objective > p:not(.m3x-objective-num) { color: rgba(255, 255, 255, 0.84); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.m3x-objective strong { color: #ffffff; }
.m3x-objective-note { color: #00f80c; }
.m3x-objective-quote {
  border-left-color: #00f80c; background: rgba(0, 248, 12, 0.14); color: #ffffff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.m3x-objective-quote .m3x-icon { color: #00f80c; }
@media (max-width: 1023.98px) { .m3x-objective { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { .m3x-objective::before { transition: none; } }

/* ================= Homepage: background video hero (2026-10-24) =================
   Full-screen trading-chart video under a dark shade (stronger on the left, behind the title).
   Title in the left half, vertically centred; "backed by data." outlined. Dark in both themes. */
.m3x-hero4 {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
  padding: 150px 0 80px; background: #070a14 url("/videos/hero-trading-poster.webp") center / cover no-repeat;
}
.m3x-hero4-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.m3x-hero4-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m3x-hero4-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 15, 0.86) 0%, rgba(5, 7, 15, 0.7) 38%, rgba(5, 7, 15, 0.25) 70%, rgba(5, 7, 15, 0.15) 100%),
    linear-gradient(180deg, rgba(5, 7, 15, 0.35) 0%, transparent 30%, transparent 70%, rgba(5, 7, 15, 0.55) 100%);
}
@media (prefers-reduced-motion: reduce) { .m3x-hero4-video { display: none; } } /* the still poster shows instead */
.m3x-hero4-inner { position: relative; width: 100%; }
.m3x-hero4-copy { max-width: min(46%, 760px); }
@media (max-width: 1023.98px) { .m3x-hero4-copy { max-width: none; } }
body .m3x-hero4-title {
  margin: 0; color: #ffffff;
  font-size: clamp(44px, 6vw, 100px) !important; font-weight: 600 !important; line-height: 1.04; letter-spacing: -0.04em !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.m3x-hero4-outline, .m3x-hero4-outline > * { color: inherit !important; -webkit-text-fill-color: currentColor; }
.m3x-hero4-outline { filter: url(#m3x-outline4); }
.m3x-hero4-cta { display: flex; margin-top: clamp(40px, 6vh, 64px); }
.m3x-hero4-cta .magnetic-button { width: auto; }
/* white button on the dark video in both themes */
.m3x-hero4-cta .magnetic-button > div > div { background: #ffffff !important; }
.m3x-hero4-cta .magnetic-button span:not(.sr-only) { color: #0a0e15 !important; }
.m3x-hero4-cta .magnetic-button svg path { stroke: #0a0e15 !important; }
@media (min-width: 640px) { body .m3x-hero4-title { white-space: nowrap; } }
/* a little air between the letters and the lines (2026-10-31): the site-wide heading rule (-0.035em) packed them too tight, and the
   outline of the second line made the letters touch */
body h1.m3x-hero4-title { letter-spacing: 0.01em !important; line-height: 1.16; }
.m3x-hero4-line { white-space: nowrap; }
@media (max-width: 379.98px) { body h1.m3x-hero4-title { font-size: 40px !important; } }
/* The title alternates between "Alerts / Backed By Data." and "Loss By Guess / Win By Data." (8s cycle, CSS only,
   transform + opacity): each line slides up out of its own mask while the next title's line comes up from below; the
   bottom line follows the top one 0.24s later, going in and coming out. Both titles sit in one grid cell. The first is
   fully in from the first paint (the delays start it at 10.5%, when both its lines are in): it is the largest paint on
   the page. Reduced motion: the first title only. */
.m3x-hero4-rotor { display: grid; }
.m3x-hero4-slide { grid-area: 1 / 1; display: block; }
.m3x-hero4-mask { display: block; clip-path: inset(-0.1em -100vw -0.34em -100vw); }
.m3x-hero4-line { display: inline-block; animation: m3x-hero-l1 8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both; }
.m3x-hero4-mask + .m3x-hero4-mask > .m3x-hero4-line { animation-name: m3x-hero-l2; }
.m3x-hero4-slide:first-child .m3x-hero4-line { animation-delay: -0.84s; }
.m3x-hero4-slide + .m3x-hero4-slide .m3x-hero4-line { animation-delay: 3.16s; }
@keyframes m3x-hero-l1 {
  0% { transform: translateY(100%); opacity: 0; }
  7.5%, 50% { transform: none; opacity: 1; }
  57.5%, 100% { transform: translateY(-100%); opacity: 0; }
}
@keyframes m3x-hero-l2 {
  0%, 3% { transform: translateY(100%); opacity: 0; }
  10.5%, 53% { transform: none; opacity: 1; }
  60.5%, 100% { transform: translateY(-100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m3x-hero4-line { animation: none; }
  .m3x-hero4-slide + .m3x-hero4-slide { display: none; }
}
@media (min-width: 1024px) { .m3x-hero4-copy { max-width: none; } }

/* Homepage: dark glass header while it sits over the video (both themes); once the page scrolls
   (.scroll-header) it switches to the normal header, so it stays light in light mode */
body.m3x-home-v4 header.header-scroll:not(.scroll-header) {
  background: linear-gradient(180deg, rgba(8, 10, 20, 0.55) 0%, rgba(8, 10, 20, 0.3) 100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none !important;
}
body.m3x-home-v4 header:not(.scroll-header) > nav .m3x-brand .m3x-logo-light { display: none; }
body.m3x-home-v4 header:not(.scroll-header) > nav .m3x-brand .m3x-logo-dark { display: block; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-trade-nav > li > a > span { color: rgba(255, 255, 255, 0.72) !important; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-trade-nav > li > a[aria-current="page"] > span,
body.m3x-home-v4 header:not(.scroll-header) .m3x-trade-nav > li:hover > a > span { color: #ffffff !important; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-trade-nav .m3x-caret { stroke: rgba(255, 255, 255, 0.72); color: rgba(255, 255, 255, 0.72); }
body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt, body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt-label, body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt-state { color: rgba(255, 255, 255, 0.78) !important; }
body.m3x-home-v4 header:not(.scroll-header) .nav-hamburger span:not(.sr-only) { background: #ffffff !important; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-head-actions .magnetic-button > div > div { background: #ffffff !important; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-head-actions .magnetic-button span:not(.sr-only) { color: #0a0e15 !important; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-head-actions .magnetic-button svg path { stroke: #0a0e15 !important; }

/* ================= Homepage section headers (all homepage versions, 2026-10-26) =================
   Section titles in one solid colour (no green second half); title on the left, paragraph on the right.
   Since 2026-10-29 the inner marketing pages (body.m3x-inner) follow the same rules. */
body:is(.m3x-home, .m3x-inner) main h2 { color: var(--t-ink) !important; }
body:is(.m3x-home, .m3x-inner) main h2 .text-mint, body:is(.m3x-home, .m3x-inner) main h2 .text-mint * { color: inherit !important; -webkit-text-fill-color: currentColor; }

body:is(.m3x-home, .m3x-inner) .m3x-sec-head, body:is(.m3x-home, .m3x-inner) .m3x-sec-head > * { text-align: left !important; }
@media (min-width: 1024px) {
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); row-gap: 10px;
    align-items: end; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > * { grid-column: 1; margin: 0 !important; max-width: none !important; }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > p:not(.m3x-eyebrow) { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 0.35em; }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > .m3x-eyebrow + h2 { grid-row: 2; }
  /* FAQ: trust row under the header lines up on the left too */
  body:is(.m3x-home, .m3x-inner) #faq .text-center { text-align: left; }
  body:is(.m3x-home, .m3x-inner) #faq .m3x-sec-head + div { justify-content: flex-start; }
}
/* section titles at weight 500; paragraph pushed to the right edge, starting level with the title's top */
body:is(.m3x-home, .m3x-inner) main h2, body:is(.m3x-home, .m3x-inner) main h2 * { font-weight: 700 !important; } /* all h2 are 700 (2026-10-28) */
@media (min-width: 1024px) {
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head { align-items: start; }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > p:not(.m3x-eyebrow) {
    grid-row: 1; align-self: start; justify-self: end; width: 100%; max-width: 520px !important;
    padding: 0.55em 0 0; /* sits level with the cap height of the title's first line */
  }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head:has(> .m3x-eyebrow) > p:not(.m3x-eyebrow) { grid-row: 2; }
}
/* paragraph: right-aligned text flush with the right edge, centred vertically against the title */
@media (min-width: 1024px) {
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > p:not(.m3x-eyebrow) { align-self: center; padding: 0; text-align: right !important; }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > p:not(.m3x-eyebrow) > * { text-align: right !important; }
}

/* ---------- Homepage FAQ: header, trust row and button on the left 40%, questions on the right 60% (2026-10-26) ---------- */
@media (min-width: 1024px) {
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 96px);
    grid-template-rows: auto auto 1fr; align-items: start; text-align: left;
  }
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .m3x-sec-head { grid-column: 1; grid-row: 1; display: block; margin: 0 0 28px !important; }
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .m3x-sec-head > p:not(.m3x-eyebrow),
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .m3x-sec-head > p:not(.m3x-eyebrow) > * { text-align: left !important; }
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .m3x-sec-head > p:not(.m3x-eyebrow) { margin-top: 14px !important; max-width: 440px !important; }
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .m3x-sec-head + div { grid-column: 1; grid-row: 2; justify-content: flex-start; padding-bottom: 32px; }
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .accordion { grid-column: 2; grid-row: 1 / span 3; max-width: none; margin: 0; padding-bottom: 0; }
  body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .accordion + div { grid-column: 1; grid-row: 3; width: auto; margin: 0; text-align: left; }
}

/* ================= Even spacing between sections, site-wide (2026-10-26) =================
   Every section gets the same top and bottom padding (half the gap each), so the space between any two
   sections is one constant: 72px phones, 100px tablets, 128px desktop. This supersedes .m3x-pt-0 on sections.
   Leading/trailing margins inside a section are trimmed so they don't add to the gap. */
:root { --m3x-gap: 72px; }
@media (min-width: 768px) { :root { --m3x-gap: 100px; } }
@media (min-width: 1024px) { :root { --m3x-gap: 128px; } }
.m3x-sec, .m3x-sec.m3x-pt-0 { padding-top: calc(var(--m3x-gap) / 2) !important; padding-bottom: calc(var(--m3x-gap) / 2) !important; }
.m3x-sec--hero { padding-top: var(--m3x-hero-top) !important; }
.m3x-footer { padding-top: calc(var(--m3x-gap) / 2 - 24px) !important; }
/* trim only the section wrapper's own trailing space; never padding of nested boxes (cards, banners keep theirs) */
/* (boxed cards keep their own bottom padding - only the outer spacing of plain blocks is trimmed) */
.m3x-sec > .main-container > :last-child { margin-bottom: 0 !important; }
.m3x-sec > .main-container > :last-child:not(.m3x-mission-card, .m3x-philosophy, .m3x-motive-disclaimer, .m3x-cta4-box, .m3x-panel, .m3x-legal-body) { padding-bottom: 0 !important; }
/* "last child of the last block": :not(:has(~ *)) rather than :last-child before a combinator, which made Chrome
   restyle the whole page whenever any element was added to or removed from <body> (gsap/ScrollTrigger do that often) */
.m3x-sec > .main-container > :not(:has(~ *)) > :last-child { margin-bottom: 0 !important; }
.m3x-sec > .main-container > :first-child { margin-top: 0 !important; }

/* ---------- Homepage: four highlight cards under the hero (2026-10-26) ---------- */
.m3x-stats3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .m3x-stats3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.m3x-stats3-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 10px; background: var(--t-surface);
  box-shadow: 0 10px 30px -20px rgba(17, 24, 39, 0.3); transition: transform 0.2s, border-color 0.2s;
}
.m3x-stats3-card:hover { transform: translateY(-3px); border-color: rgb(0 163 10 / 0.35); }
.m3x-stats3-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 10px; background: rgb(0 248 12 / 0.12); color: var(--m3x-accent); }
.m3x-stats3-icon .m3x-icon { width: 22px; height: 22px; }
.m3x-stats3-card strong { color: var(--t-ink); font: 600 clamp(26px, 2.4vw, 34px)/1.1 "Manrope", sans-serif; letter-spacing: -0.02em; }
.m3x-stats3-card > span:last-child { color: rgb(var(--t-ink-rgb) / 0.62); font: 400 15px/1.45 "Inter Tight", sans-serif; }
/* Highlights: no cards or icons - plain columns split by vertical lines that fade out at top and bottom */
.m3x-stats3-grid { gap: 0 !important; }
.m3x-stats3-card {
  position: relative; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 36px); transform: none !important;
}
.m3x-stats3-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgb(var(--t-ink-rgb) / 0.16) 25%, rgb(var(--t-ink-rgb) / 0.16) 75%, transparent 100%);
}
@media (min-width: 1024px) { .m3x-stats3-card:first-child::before { display: none; } }
@media (max-width: 1023.98px) {
  .m3x-stats3-card:nth-child(odd)::before { display: none; }
  .m3x-stats3-card:nth-child(n + 3)::after { /* faded horizontal line between the two rows */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgb(var(--t-ink-rgb) / 0.16) 25%, rgb(var(--t-ink-rgb) / 0.16) 75%, transparent 100%);
  }
}

/* Homepage "Open interest & PCR" card: inverted - black in light mode, light in dark mode (2026-10-26) */
.m3x-card-invert { --inv-bg: #0d1017; --inv-ink: #ffffff; --inv-muted: rgba(255, 255, 255, 0.68); background: var(--inv-bg) !important; border-color: transparent !important; }
html[data-theme="dark"] .m3x-card-invert { --inv-bg: #f3f5f8; --inv-ink: #0d1017; --inv-muted: rgba(13, 16, 23, 0.66); }
.m3x-card-invert h3, .m3x-card-invert h3 *, .m3x-card-invert [class*="ns-shape"] { color: var(--inv-ink) !important; }
.m3x-card-invert .m3x-card-text { color: var(--inv-muted) !important; }
html[data-theme="dark"] .m3x-card-invert img[src*="opai-10"] { opacity: 0.45; }
/* dark mode: much softer green glow under the platform screenshots ("One alert service", 2026-10-28) */
html[data-theme="dark"] .m3x-glow-dark { opacity: 0.3 !important; }
/* "Everything behind every alert": three cards, equal height (2026-10-28) */
.glowing-cards > div:has(> article:only-child) { display: flex; }
.glowing-cards > div:has(> article:only-child) > article { flex: 1; }
.glowing-cards > div:has(> article:only-child) > article { display: flex; flex-direction: column; justify-content: space-between; }

/* "Data-confirmed alerts" card: compact four-step timeline instead of the tall flow (2026-10-28) */
.m3x-flow-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.m3x-flow { position: relative; z-index: 10; display: grid; gap: 10px; margin: 0; padding: 0 0 0 18px; list-style: none; }
.m3x-flow::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: rgb(var(--t-ink-rgb) / 0.14); }
.m3x-flow li { --c: #227eff; position: relative; display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--t-subtle); }
.m3x-flow li::before { content: ""; position: absolute; left: -18px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--t-surface); }
.m3x-flow .is-analyze { --c: #c39e00; }
.m3x-flow .is-verify { --c: #8b5cf6; }
.m3x-flow .is-alert { --c: #16a34a; }
.m3x-flow-tag { justify-self: start; color: var(--c); font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; }
.m3x-flow p { margin: 0; color: var(--t-ink); font: 600 14px/1.35 "Manrope", sans-serif; }
.m3x-flow small { display: block; margin-top: 2px; color: rgb(var(--t-ink-rgb) / 0.55); font: 400 12.5px/1.35 "Inter Tight", sans-serif; }

/* Homepage section titles: each sentence on its own line (2026-10-28). A sentence never wraps on desktop;
   the title column sizes itself to the longest sentence and any paragraph takes the rest. */
body:is(.m3x-home, .m3x-inner) main h2 .m3x-line { display: block; }
@media (min-width: 1024px) {
  body:is(.m3x-home, .m3x-inner) main h2:not(.m3x-footer-title) { white-space: nowrap; }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head { grid-template-columns: max-content minmax(0, 1fr) !important; }
  body:is(.m3x-home, .m3x-inner) .m3x-sec-head > h2 { max-width: none !important; }
  /* "From alert to trade in four steps." sat in a 544px column */
  body:is(.m3x-home, .m3x-inner) .md\:max-w-\[544px\]:has(> h2) { max-width: none !important; }
}
@media (min-width: 1024px) { body:is(.m3x-home, .m3x-inner) .m3x-faq-layout > .m3x-sec-head > p:not(.m3x-eyebrow) { justify-self: start !important; } }

/* ================= Header search (2026-10-28) =================
   Pill field with the icon on the right; suggestions drop down under it (src/client/search.ts).
   The desktop pill sits before the market badge; the mobile menu has a full-width field at the top. */
.m3x-search { position: relative; display: flex; align-items: center; }
.m3x-search input[type="search"] {
  width: 100%; height: 38px; padding: 0 40px 0 16px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.14); border-radius: 999px;
  background: rgb(var(--t-ink-rgb) / 0.03); color: var(--t-ink);
  font: 500 14px/1 "Manrope", sans-serif; letter-spacing: 0;
  -webkit-appearance: none; appearance: none; outline: none;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.m3x-search input[type="search"]::placeholder { color: rgb(var(--t-ink-rgb) / 0.5); opacity: 1; }
.m3x-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.m3x-search input[type="search"]:hover { border-color: rgb(var(--t-ink-rgb) / 0.28); }
.m3x-search input[type="search"]:focus { border-color: var(--m3x-accent, #00a30a); background: var(--t-surface); box-shadow: 0 0 0 3px rgba(0, 163, 10, 0.14); }
.m3x-search-btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: rgb(var(--t-ink-rgb) / 0.7); cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.m3x-search-btn:hover, .m3x-search-btn:focus-visible { color: var(--t-ink); background: rgb(var(--t-ink-rgb) / 0.07); }
.m3x-search-btn .m3x-icon { width: 17px; height: 17px; }

.m3x-search--head { flex: none; width: clamp(120px, 12vw, 220px); }
@media (max-width: 1023.98px) { .m3x-search--head { display: none; } }

.m3x-search-list {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  width: max(100%, 340px); max-height: min(440px, 70vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.1); border-radius: 16px;
  background: var(--t-surface); box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.4);
  text-align: left; white-space: normal;
}
.m3x-search-list[hidden] { display: none; }
.m3x-search-empty { padding: 14px 10px; font: 500 14px/1.4 "Manrope", sans-serif; color: rgb(var(--t-ink-rgb) / 0.6); }
.m3x-search-item { display: grid; gap: 3px; padding: 9px 12px; border-radius: 10px; color: var(--t-ink); text-decoration: none; transition: background-color 0.15s; }
.m3x-search-item strong { display: flex; align-items: center; gap: 8px; font: 700 14px/1.3 "Manrope", sans-serif; color: inherit; }
.m3x-search-item small { font: 500 12.5px/1.35 "Manrope", sans-serif; color: rgb(var(--t-ink-rgb) / 0.58); }
.m3x-search-item em { padding: 2px 7px; border-radius: 999px; background: rgb(var(--t-ink-rgb) / 0.07); color: rgb(var(--t-ink-rgb) / 0.6); font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 1.3; }
.m3x-search-item.is-soon { cursor: default; opacity: 0.72; }
[role="option"][aria-selected="true"] > .m3x-search-item:not(.is-soon) { background: rgb(var(--t-ink-rgb) / 0.05); }
[role="option"][aria-selected="true"] > .m3x-search-item:not(.is-soon) strong { color: var(--m3x-accent, #00a30a); }

/* mobile menu: full-width field, suggestions push the menu down instead of floating */
.m3x-search--menu { margin: 0 0 14px; }
.m3x-search--menu input[type="search"] { height: 46px; padding-left: 18px; font-size: 16px; }
.m3x-search--menu .m3x-search-btn { right: 7px; width: 34px; height: 34px; }
.m3x-search--menu .m3x-search-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: auto; }

/* Homepage header over the video: glassy white pill */
body.m3x-home-v4 header:not(.scroll-header) .m3x-search--head input[type="search"] { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #ffffff; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-search--head input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.7); }
body.m3x-home-v4 header:not(.scroll-header) .m3x-search--head .m3x-search-btn { color: rgba(255, 255, 255, 0.85); }
body.m3x-home-v4 header:not(.scroll-header) .m3x-search--head input[type="search"]:focus { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.14); box-shadow: none; }

/* Menu items a little closer together (Contact moved to the footer) to make room for the search pill */
@media (min-width: 1024px) {
  .m3x-trade-nav { justify-content: center !important; column-gap: clamp(16px, 2.1vw, 34px) !important; }
  .m3x-head-actions { gap: 12px; }
}

/* ================= "We don't guess" stacking cards (homepage, 2026-10-28) =================
   Title, text and button on the left (sticky on desktop); the four cards on the right stick one after
   another, each resting --peek px lower than the last so the cards underneath show a strip of their top.
   All cards keep the same size; /js/stack.js sets --depth (how many cards sit on top) to dim the ones underneath slightly. */
.m3x-stack { --stack-top: 124px; --peek: 22px; --card-h: 330px; display: grid; row-gap: 40px; }
@media (min-width: 768px) { .m3x-stack { --peek: 26px; --card-h: 360px; } }
@media (min-width: 1024px) {
  .m3x-stack {
    --stack-top: 160px; --peek: 30px; --card-h: 400px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 112px); align-items: start;
  }
  .m3x-stack-intro { position: sticky; top: var(--stack-top); }
}
.m3x-stack-intro { text-align: left; }
.m3x-stack-intro h2 { margin: 0; }
.m3x-stack-lead { max-width: 470px; margin: 20px 0 0; color: rgb(var(--t-ink-rgb) / 0.62); font-size: 17px; line-height: 1.6; }
.m3x-stack-cta { margin-top: 32px; }

.m3x-stack-list { --n: 4; display: grid; row-gap: 28px; margin: 0; padding: 0; list-style: none; }
/* The bottom margins line up every card's margin box at the same bottom edge, so at the end of the list all the
   cards are released together and scroll away as one stack (without them the last card slid over the strips).
   The ::after spacer holds the finished stack on screen for a moment first. */
.m3x-stack-item { --depth: 0; position: sticky; top: calc(var(--stack-top) + var(--i) * var(--peek)); margin-bottom: calc((var(--n) - 1 - var(--i)) * var(--peek)); }
.m3x-stack-list::after { content: ""; height: clamp(24px, 12vh, 120px); }
/* short screens: the whole stack (three strips + one card) still fits under the header */
.m3x-stack-card { --fit-h: calc(100vh - var(--stack-top) - 3 * var(--peek) - 32px); }
.m3x-stack-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  height: max(280px, min(var(--card-h), var(--fit-h))); padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 8px;
  background: var(--t-surface); color: var(--t-ink);
  box-shadow: 0 -14px 36px -22px rgba(15, 23, 42, 0.28), 0 28px 50px -36px rgba(15, 23, 42, 0.3);
}
/* the cards underneath get a little darker as more cards cover them */
.m3x-stack-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: #0b0f17; opacity: calc(var(--depth) * 0.07);
}
html[data-theme="dark"] .m3x-stack-card::after { background: #000000; opacity: calc(var(--depth) * 0.18); }
html[data-theme="dark"] .m3x-stack-card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 -14px 36px -20px rgba(0, 0, 0, 0.7); }

.m3x-stack-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.m3x-stack-ico { display: block; color: inherit; font-size: clamp(48px, 4.2vw, 64px); line-height: 1; }
.m3x-stack-num { font: 700 15px/1 "Manrope", sans-serif; letter-spacing: 0; color: inherit; }
.m3x-stack-num small { margin-left: 2px; font-size: 13px; font-weight: 600; opacity: 0.45; }
.m3x-stack-body { position: relative; z-index: 1; display: grid; gap: 10px; }
.m3x-stack-title { margin: 0; color: inherit; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; }
.m3x-stack-text { max-width: 460px; margin: 0; color: rgb(var(--t-ink-rgb) / 0.62); font-size: 16px; line-height: 1.55; }

/* second card: black in light mode, light in dark mode, with the green glow */
.m3x-stack-card.is-invert { border-color: transparent; background: #0d1017; color: #ffffff; }
.m3x-stack-card.is-invert .m3x-stack-text { color: rgba(255, 255, 255, 0.68); }
html[data-theme="dark"] .m3x-stack-card.is-invert { background: #f3f5f8; color: #0d1017; }
html[data-theme="dark"] .m3x-stack-card.is-invert .m3x-stack-text { color: rgba(13, 16, 23, 0.66); }
.m3x-stack-glow { position: absolute; top: -290px; right: -250px; z-index: 0; width: 520px; max-width: none; height: 520px; object-fit: cover; pointer-events: none; }
html[data-theme="dark"] img.m3x-stack-glow { opacity: 0.3; }


/* ================= Pricing cards (homepage #pricing + /nifty-alert, 2026-10-28) =================
   views/partials/pricing-cards.ejs. 8px cards (the template's rounded-lg). Tinted top panel (icon, name, tagline);
   the featured monthly plan has a solid black panel (light panel in dark mode), a black outline and the filled button;
   the other plans have outline buttons. Features use round green checks. */
.m3x-price-grid { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .m3x-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023.98px) { .m3x-price-grid { width: 100%; max-width: 560px; margin-inline: auto; } }

.m3x-price-card {
  --feat: #0d1017; --feat-ink: #ffffff; --feat-muted: rgba(255, 255, 255, 0.72);
  position: relative; display: flex; flex-direction: column; gap: 26px;
  padding: 10px 10px 30px; border: 1px solid rgb(var(--t-ink-rgb) / 0.09); border-radius: 8px;
  background: var(--t-surface); color: var(--t-ink); text-align: left;
  box-shadow: 0 22px 50px -38px rgba(15, 23, 42, 0.4);
  transition: box-shadow 0.3s, border-color 0.3s;
}
html[data-theme="dark"] .m3x-price-card { --feat: #f3f5f8; --feat-ink: #0d1017; --feat-muted: rgba(13, 16, 23, 0.66); border-color: rgba(255, 255, 255, 0.09); box-shadow: none; }
.m3x-price-card:hover { border-color: rgb(var(--t-ink-rgb) / 0.18); box-shadow: 0 30px 60px -36px rgba(15, 23, 42, 0.5); }
.m3x-price-card.is-featured { border: 2px solid var(--feat); padding: 9px 9px 29px; box-shadow: 0 30px 70px -40px rgba(15, 23, 42, 0.55); }
html[data-theme="dark"] .m3x-price-card.is-featured { border-color: var(--feat); }
.m3x-price-amount, .m3x-price-btn, .m3x-price-features { margin-inline: 18px; }

/* top panel */
.m3x-price-top {
  position: relative; display: grid; gap: 6px; padding: 24px;
  border: 1px solid rgb(var(--t-ink-rgb) / 0.05); border-radius: 6px; background: rgb(var(--t-ink-rgb) / 0.035);
}
.m3x-price-ico { display: block; width: 30px; height: 30px; margin-bottom: 14px; color: var(--m3x-accent, #00a30a); }
.m3x-price-ico .m3x-icon { width: 30px; height: 30px; stroke-width: 1.75; }
.m3x-price-name { margin: 0; color: inherit; font-size: 24px; line-height: 1.2; }
.m3x-price-tagline { margin: 0; color: rgb(var(--t-ink-rgb) / 0.6); font-size: 15px; line-height: 1.45; }
/* featured plan: diagonal "Recommended" ribbon across the top-right corner */
.m3x-price-card.is-featured { overflow: hidden; }
.m3x-price-ribbon {
  position: absolute; top: 26px; right: -46px; z-index: 2; width: 190px; padding: 7px 0;
  background: #00f80c; color: #0d1017; transform: rotate(45deg);
  font: 800 11px/1 "Manrope", sans-serif; letter-spacing: 0.08em; text-align: center; text-transform: uppercase;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); pointer-events: none;
}
.m3x-price-card.is-featured .m3x-price-top { border-color: transparent; background: var(--feat); color: var(--feat-ink); }
.m3x-price-card.is-featured .m3x-price-tagline { color: var(--feat-muted); }
.m3x-price-card.is-featured .m3x-price-ico { color: #00f80c; }
html[data-theme="dark"] .m3x-price-card.is-featured .m3x-price-ico { color: #00a30a; }

/* price */
.m3x-price-amount { display: grid; gap: 4px; }
.m3x-price-value { display: flex; align-items: flex-start; margin: 0; color: var(--t-ink); font: 800 46px/1 "Manrope", sans-serif; letter-spacing: -0.03em; }
.m3x-price-cur { margin: 5px 3px 0 0; font-size: 22px; font-weight: 700; letter-spacing: 0; }
.m3x-price-per { align-self: flex-end; margin: 0 0 6px 6px; color: rgb(var(--t-ink-rgb) / 0.55); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.m3x-price-week { margin: 12px 0 0; color: var(--t-ink); font: 700 15px/1.4 "Manrope", sans-serif; }
.m3x-price-save { margin: 0; color: var(--m3x-accent, #00a30a); font: 600 14px/1.4 "Manrope", sans-serif; }
.m3x-price-save s { margin-right: 6px; color: rgb(var(--t-ink-rgb) / 0.4); font-weight: 500; }

/* buttons: outline on the outer plans, filled black on the featured plan (both invert in dark mode) */
.m3x-price-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px;
  border: 1.5px solid var(--t-ink); border-radius: 999px; background: transparent; color: var(--t-ink);
  font: 700 15px/1 "Manrope", sans-serif; text-decoration: none; transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.m3x-price-btn:hover { background: var(--t-ink); color: var(--t-surface); }
.m3x-price-btn:focus-visible { outline: 2px solid var(--m3x-accent, #00a30a); outline-offset: 3px; }
.m3x-price-btn .m3x-icon { width: 18px; height: 18px; transition: transform 0.3s; }
.m3x-price-btn:hover .m3x-icon { transform: translateX(3px); }
.m3x-price-card.is-featured .m3x-price-btn { background: var(--t-ink); color: var(--t-surface); }
.m3x-price-card.is-featured .m3x-price-btn:hover { opacity: 0.88; }

/* features */
.m3x-price-features { display: grid; gap: 14px; margin-top: 0; margin-bottom: 0; padding: 24px 0 0; border-top: 1px dashed rgb(var(--t-ink-rgb) / 0.14); list-style: none; }
.m3x-price-features li { display: flex; align-items: flex-start; gap: 12px; color: rgb(var(--t-ink-rgb) / 0.78); font-size: 15px; line-height: 1.4; }
.m3x-price-check { display: grid; flex: none; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; background: rgba(0, 163, 10, 0.12); color: var(--m3x-accent, #00a30a); }
.m3x-price-check .m3x-icon { width: 12px; height: 12px; stroke-width: 3; }
.m3x-price-card.is-featured .m3x-price-check { background: #00a30a; color: #ffffff; }
html[data-theme="dark"] .m3x-price-check { background: rgba(52, 208, 88, 0.14); }
html[data-theme="dark"] .m3x-price-card.is-featured .m3x-price-check { background: #22c55e; color: #0d1017; }

/* ================= "From alert to trade in four steps": left block on a soft blue panel (2026-10-28) =================
   The panel stays light in both themes, so its text stays dark ink. */
body .m3x-steps-intro {
  padding: clamp(28px, 4vw, 56px); border-radius: 8px;
  background: #cfe0fb url("/images/steps-bg.webp") center / cover no-repeat;
  color: #0d1017;
}
@media (min-width: 1024px) { body .m3x-steps-intro { align-self: stretch; } }
html body main .m3x-steps-intro.m3x-steps-intro h2, html body main .m3x-steps-intro.m3x-steps-intro h2 * { color: #0d1017 !important; -webkit-text-fill-color: currentColor; }
body .m3x-steps-intro p { color: rgba(13, 16, 23, 0.68) !important; }
body .m3x-steps-intro .magnetic-button > div > div { background: #0d1017 !important; }
body .m3x-steps-intro .magnetic-button span:not(.sr-only) { color: #ffffff !important; }
body .m3x-steps-intro .magnetic-button svg path { stroke: #ffffff !important; }
html[data-theme="dark"] body .m3x-steps-intro { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
@media (min-width: 1024px) { body div:has(> .m3x-steps-intro) { column-gap: clamp(40px, 5vw, 88px); } }

/* "Loss by guess. / Win by data." title in the logo's red and green (the one homepage title with two colours, 2026-10-28):
   the light-theme logo's deep red and green, and the brighter pair from the dark-theme logo in dark mode. */
html body.m3x-home main h2 .m3x-loss { color: #980400 !important; -webkit-text-fill-color: currentColor; }
html body.m3x-home main h2 .m3x-win { color: #008000 !important; -webkit-text-fill-color: currentColor; }
html[data-theme="dark"] body.m3x-home main h2 .m3x-loss { color: #f02828 !important; }
html[data-theme="dark"] body.m3x-home main h2 .m3x-win { color: #08c808 !important; }

/* ================= Homepage: Our Vision / Our Mission tabs (2026-10-29) =================
   Pill tab switcher (selected = ink pill), panels share one grid cell so switching never changes the height. */
.m3x-vm { display: grid; gap: 20px; text-align: left; }
.m3x-vm-tabs { display: inline-flex; justify-self: start; gap: 4px; padding: 4px; border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 999px; background: rgb(var(--t-ink-rgb) / 0.04); }
@media (max-width: 1023.98px) { .m3x-vm-tabs { justify-self: center; } }
.m3x-vm-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px;
  background: transparent; color: rgb(var(--t-ink-rgb) / 0.65); cursor: pointer;
  font: 700 15px/1 "Manrope", sans-serif; transition: background-color 0.25s, color 0.25s;
}
.m3x-vm-tab .m3x-icon { width: 17px; height: 17px; }
.m3x-vm-tab:hover { color: var(--t-ink); }
.m3x-vm-tab[aria-selected="true"] { background: var(--t-ink); color: var(--t-surface); }
.m3x-vm-tab:focus-visible { outline: 2px solid var(--m3x-accent, #00a30a); outline-offset: 2px; }

.m3x-vm-panels { display: grid; }
.m3x-vm-panel {
  grid-area: 1 / 1; display: grid; align-content: start; gap: 20px;
  padding: clamp(24px, 3vw, 36px); border: 1px solid rgb(var(--t-ink-rgb) / 0.07); border-radius: 8px;
  background: rgb(var(--t-ink-rgb) / 0.035);
  animation: m3x-vm-in 0.35s ease both;
}
.m3x-vm-panel.is-inactive { visibility: hidden; animation: none; }
.m3x-vm-panel:focus-visible { outline: 2px solid var(--m3x-accent, #00a30a); outline-offset: 3px; }
@keyframes m3x-vm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m3x-vm-panel { animation: none; } }

.m3x-vm-lead { margin: 0; color: var(--t-ink); font: 600 18px/1.6 "Manrope", sans-serif; }
.m3x-vm-more {
  display: inline-flex; align-items: center; justify-self: start; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: 999px; background: var(--t-ink); color: var(--t-surface);
  font: 700 15px/1 "Manrope", sans-serif; text-decoration: none; transition: opacity 0.2s;
}
.m3x-vm-more .m3x-icon { width: 18px; height: 18px; transition: transform 0.3s; }
.m3x-vm-more:hover { opacity: 0.88; }
.m3x-vm-more:hover .m3x-icon { transform: translateX(3px); }
.m3x-vm-more:focus-visible { outline: 2px solid var(--m3x-accent, #00a30a); outline-offset: 3px; }
@media (max-width: 1023.98px) { .m3x-vm-more { justify-self: center; } }

/* ================= "One alert service" screenshot showcase (homepage, 2026-10-29) =================
   Replaces the sliding carousel. The section title scrolls normally (centred, one line on desktop); after it the slides
   pin under the header for (steps - 1) x 70vh of scroll: left, the name of the screenshot shown; right, the screenshot.
   /js/showcase.js sets .is-active / .is-past. Below 1024px nothing pins: the screenshots stack with their names. */
.m3x-showcase { --sc-top: 112px; --sc-step: 70vh; position: relative; overflow: clip; }
.m3x-sc-heading { margin: 0 0 40px; text-align: center; }
.m3x-sc-grid { display: grid; gap: 40px; }
.m3x-sc-titles { display: grid; text-align: left; }
p.m3x-sc-title { display: none; }

.m3x-sc-stage { display: grid; gap: 40px; }
.m3x-sc-frame {
  overflow: hidden; border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 8px; background: var(--t-surface);
  box-shadow: 0 40px 80px -48px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(15, 23, 42, 0.04);
}
html[data-theme="dark"] .m3x-sc-frame { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.8); }
.m3x-sc-frame img { display: block; width: 100%; height: auto; }
.m3x-sc-shot { margin: 0; }
.m3x-sc-shot figcaption { margin-top: 14px; color: var(--t-ink); font: 700 20px/1.3 "Manrope", sans-serif; letter-spacing: -0.01em; }

@media (min-width: 1024px) {
  .m3x-showcase { padding-bottom: 0 !important; }
  .m3x-sc-track { height: calc(100vh - var(--sc-top) + (var(--steps) - 1) * var(--sc-step)); }
  .m3x-sc-sticky { position: sticky; top: var(--sc-top); display: flex; align-items: center; height: calc(100vh - var(--sc-top)); }
  /* section title on one line, centred above the pinned slides */
  .m3x-sc-heading { margin-bottom: 0; white-space: nowrap; }
  .m3x-sc-inner { width: 100%; }
  .m3x-sc-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; column-gap: clamp(40px, 5vw, 96px); }

  /* screenshot names share one grid cell: the active one fades and rises in, the previous one fades up and out */
  .m3x-sc-titles { align-items: center; }
  .m3x-sc-title {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(36px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.8s;
  }
  .m3x-sc-title.is-past { transform: translateY(-36px); }
  .m3x-sc-title.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s, 0.08s, 0s; }
  p.m3x-sc-title {
    display: block; margin: 0; color: var(--t-ink);
    font: 700 clamp(42px, 3.8vw, 64px)/1.08 "Manrope", sans-serif; letter-spacing: -0.035em;
  }

  /* screenshots share one grid cell too */
  .m3x-sc-stage { position: relative; gap: 0; }
  .m3x-sc-stage::before {
    content: ""; position: absolute; inset: 8% -6% -6% 10%; z-index: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(90, 159, 255, 0.28), rgba(90, 159, 255, 0)); filter: blur(30px);
  }
  html[data-theme="dark"] .m3x-sc-stage::before { background: radial-gradient(closest-side, rgba(0, 248, 12, 0.12), rgba(0, 248, 12, 0)); }
  .m3x-sc-shot {
    position: relative; z-index: 1; grid-area: 1 / 1; opacity: 0; visibility: hidden;
    transform: translateY(48px) scale(0.97); transform-origin: 50% 100%;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.9s;
  }
  .m3x-sc-shot.is-past { transform: translateY(-32px) scale(0.96); transform-origin: 50% 0; }
  .m3x-sc-shot.is-active { z-index: 2; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .m3x-sc-shot figcaption { display: none; }
  .m3x-sc-frame { aspect-ratio: 16 / 9; }
  .m3x-sc-frame img { height: 100%; object-fit: cover; object-position: top left; }
  /* the whole screenshot always fits in the pinned area under the header */
  .m3x-sc-stage { justify-self: end; width: 100%; max-width: calc((100vh - var(--sc-top) - 80px) * 16 / 9); }
}

@media (prefers-reduced-motion: reduce) {
  .m3x-sc-shot, .m3x-sc-title { transition: none !important; }
}

/* ================= Homepage "Markets" index chart (2026-10-29) =================
   views/partials/index-chart.ejs + /js/index-chart.js. Chart card ~65% on the left, index picker on the right. */
.m3x-ic { --ic-up: #00a30a; --ic-down: #e5484d; display: grid; gap: 20px; }
html[data-theme="dark"] .m3x-ic { --ic-up: #22c55e; --ic-down: #f87171; }
@media (min-width: 1024px) { .m3x-ic { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 24px; align-items: stretch; } }
.m3x-ic-main, .m3x-ic-side {
  min-width: 0; padding: clamp(20px, 2.4vw, 32px); border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 8px;
  background: var(--t-surface); box-shadow: 0 24px 60px -44px rgba(15, 23, 42, 0.4); text-align: left;
}
html[data-theme="dark"] .m3x-ic-main, html[data-theme="dark"] .m3x-ic-side { border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }

/* chart header */
.m3x-ic-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.m3x-ic-name { margin: 0; color: var(--t-ink); font: 700 22px/1.25 "Manrope", sans-serif; }
.m3x-ic-meta { display: flex; gap: 8px; margin: 4px 0 0; color: rgb(var(--t-ink-rgb) / 0.55); font: 600 13px/1.4 "Manrope", sans-serif; }
.m3x-ic-meta i { font-style: normal; }
.m3x-ic-quote { display: grid; justify-items: end; gap: 2px; text-align: right; }
.m3x-ic-price { color: var(--t-ink); font: 800 clamp(26px, 2.6vw, 34px)/1.1 "Manrope", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m3x-ic-chg { font: 700 15px/1.3 "Manrope", sans-serif; font-variant-numeric: tabular-nums; }
.m3x-ic-chg.is-up, .m3x-ic-pick-chg.is-up { color: var(--ic-up); }
.m3x-ic-chg.is-down, .m3x-ic-pick-chg.is-down { color: var(--ic-down); }
.m3x-ic-chg.is-flat, .m3x-ic-pick-chg.is-flat { color: rgb(var(--t-ink-rgb) / 0.55); }
.m3x-ic-period { color: rgb(var(--t-ink-rgb) / 0.5); font: 600 12px/1.3 "Manrope", sans-serif; }

/* range buttons */
.m3x-ic-ranges { display: inline-flex; gap: 4px; margin: 20px 0 8px; padding: 4px; border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 999px; background: rgb(var(--t-ink-rgb) / 0.04); }
.m3x-ic-ranges button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgb(var(--t-ink-rgb) / 0.62); cursor: pointer; font: 700 14px/1 "Manrope", sans-serif; transition: background-color 0.2s, color 0.2s; }
.m3x-ic-ranges button:hover { color: var(--t-ink); }
.m3x-ic-ranges button[aria-pressed="true"] { background: var(--t-ink); color: var(--t-surface); }
.m3x-ic-ranges button:focus-visible, .m3x-ic-pick:focus-visible, .m3x-ic-plot:focus-visible { outline: 2px solid var(--m3x-accent, #00a30a); outline-offset: 2px; }

/* plot */
.m3x-ic-plot { position: relative; margin-top: 8px; border-radius: 6px; }
.m3x-ic-canvas { position: relative; }
.m3x-ic-surface { position: relative; height: clamp(240px, 30vw, 360px); margin-right: 76px; touch-action: pan-y; cursor: crosshair; }
.m3x-ic-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.m3x-ic-line { fill: none; stroke: var(--ic-up); stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.m3x-ic-svg.is-down .m3x-ic-line { stroke: var(--ic-down); }
.m3x-ic-stop-a { stop-color: var(--ic-up); stop-opacity: 0.22; }
.m3x-ic-stop-b { stop-color: var(--ic-up); stop-opacity: 0; }
.m3x-ic-svg.is-down .m3x-ic-stop-a, .m3x-ic-svg.is-down .m3x-ic-stop-b { stop-color: var(--ic-down); }
.m3x-ic-grid { stroke: rgb(var(--t-ink-rgb) / 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m3x-ic-base { stroke: rgb(var(--t-ink-rgb) / 0.35); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.m3x-ic-y { position: absolute; left: calc(100% + 10px); transform: translateY(-50%); color: rgb(var(--t-ink-rgb) / 0.5); font: 600 12px/1 "Manrope", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m3x-ic-baselabel { position: absolute; left: 8px; transform: translateY(-120%); padding: 2px 6px; border-radius: 4px; background: var(--t-surface); color: rgb(var(--t-ink-rgb) / 0.55); font: 600 11px/1.3 "Manrope", sans-serif; white-space: nowrap; pointer-events: none; }
.m3x-ic-xaxis { position: relative; height: 26px; margin-right: 76px; }
.m3x-ic-x { position: absolute; top: 8px; transform: translateX(-50%); color: rgb(var(--t-ink-rgb) / 0.5); font: 600 12px/1 "Manrope", sans-serif; white-space: nowrap; }
.m3x-ic-x:first-child { transform: none; }
.m3x-ic-x:last-child { transform: translateX(-100%); }

/* crosshair + tooltip */
.m3x-ic-cross, .m3x-ic-dot, .m3x-ic-tip { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.m3x-ic-surface.is-hover .m3x-ic-cross, .m3x-ic-surface.is-hover .m3x-ic-dot, .m3x-ic-surface.is-hover .m3x-ic-tip { opacity: 1; }
.m3x-ic-cross { top: 0; bottom: 0; width: 1px; background: rgb(var(--t-ink-rgb) / 0.25); }
.m3x-ic-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--t-surface); border-radius: 50%; background: var(--ic-up); box-shadow: 0 0 0 4px rgba(0, 163, 10, 0.18); }
.m3x-ic-dot.is-down { background: var(--ic-down); box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.18); }
/* the tooltip sits above the hovered point (below it near the top), shifted inwards near the edges */
.m3x-ic-tip { --tx: -50%; --ty: calc(-100% - 16px); z-index: 2; display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; background: #0d1017; color: #ffffff; transform: translate(var(--tx), var(--ty)); white-space: nowrap; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5); }
.m3x-ic-tip.is-below { --ty: 16px; }
.m3x-ic-tip.is-left { --tx: -12px; }
.m3x-ic-tip.is-right { --tx: calc(-100% + 12px); }
.m3x-ic-tip strong { font: 800 15px/1.2 "Manrope", sans-serif; font-variant-numeric: tabular-nums; }
.m3x-ic-tip span { color: rgba(255, 255, 255, 0.7); font: 600 12px/1.2 "Manrope", sans-serif; }
html[data-theme="dark"] .m3x-ic-tip { background: #f3f5f8; color: #0d1017; }
html[data-theme="dark"] .m3x-ic-tip span { color: rgba(13, 16, 23, 0.65); }

/* loading / error */
.m3x-ic-msg { display: none; margin: 0; }
.m3x-ic-plot.is-loading .m3x-ic-msg, .m3x-ic-plot.is-error .m3x-ic-msg {
  display: grid; place-items: center; height: clamp(240px, 30vw, 360px); padding: 0 24px; border-radius: 6px;
  color: rgb(var(--t-ink-rgb) / 0.55); font: 600 14px/1.5 "Manrope", sans-serif; text-align: center;
}
.m3x-ic-plot.is-loading .m3x-ic-msg {
  background: linear-gradient(90deg, rgb(var(--t-ink-rgb) / 0.03) 0%, rgb(var(--t-ink-rgb) / 0.07) 50%, rgb(var(--t-ink-rgb) / 0.03) 100%) 0 0 / 200% 100%;
  animation: m3x-ic-shimmer 1.4s linear infinite;
}
.m3x-ic-plot.is-error .m3x-ic-msg { background: rgb(var(--t-ink-rgb) / 0.03); }
@keyframes m3x-ic-shimmer { to { background-position: -200% 0; } }
.m3x-ic-note { margin: 12px 0 0; color: rgb(var(--t-ink-rgb) / 0.45); font-size: 12.5px; line-height: 1.5; }

/* index picker */
.m3x-ic-side { display: flex; flex-direction: column; gap: 14px; }
.m3x-ic-side-title { display: flex; justify-content: space-between; margin: 0; color: var(--t-ink); font: 700 16px/1.3 "Manrope", sans-serif; }
.m3x-ic-side-title span { color: rgb(var(--t-ink-rgb) / 0.5); font-size: 13px; font-weight: 600; }
.m3x-ic-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.m3x-ic-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; padding: 12px 14px;
  border: 1px solid transparent; border-radius: 8px; background: rgb(var(--t-ink-rgb) / 0.03); color: var(--t-ink);
  cursor: pointer; text-align: left; transition: background-color 0.2s, border-color 0.2s;
}
.m3x-ic-pick:hover { background: rgb(var(--t-ink-rgb) / 0.06); }
.m3x-ic-pick[aria-pressed="true"] { border-color: var(--t-ink); background: var(--t-surface); box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.45); }
html[data-theme="dark"] .m3x-ic-pick[aria-pressed="true"] { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.04); }
.m3x-ic-pick-name { display: flex; align-items: center; gap: 8px; font: 700 15.5px/1.3 "Manrope", sans-serif; }
.m3x-ic-pick-name em { padding: 2px 7px; border-radius: 999px; background: rgb(var(--t-ink-rgb) / 0.07); color: rgb(var(--t-ink-rgb) / 0.55); font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.m3x-ic-pick-name em.is-live { background: rgba(0, 163, 10, 0.12); color: var(--m3x-accent, #00a30a); }
.m3x-ic-pick-ex { grid-column: 1; color: rgb(var(--t-ink-rgb) / 0.5); font: 500 12.5px/1.3 "Manrope", sans-serif; }
.m3x-ic-pick-px { grid-column: 2; grid-row: 1; justify-self: end; font: 700 15px/1.3 "Manrope", sans-serif; font-variant-numeric: tabular-nums; }
.m3x-ic-pick-chg { grid-column: 2; grid-row: 2; justify-self: end; font: 700 12.5px/1.3 "Manrope", sans-serif; font-variant-numeric: tabular-nums; }
.m3x-ic-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-top: auto; padding: 0 22px;
  border-radius: 999px; background: var(--t-ink); color: var(--t-surface); font: 700 15px/1 "Manrope", sans-serif; text-decoration: none; transition: opacity 0.2s;
}
.m3x-ic-cta:hover { opacity: 0.88; }
.m3x-ic-cta .m3x-icon { width: 18px; height: 18px; }
@media (max-width: 639.98px) {
  .m3x-ic-surface, .m3x-ic-xaxis { margin-right: 64px; }
  .m3x-ic-quote { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .m3x-ic-plot.is-loading .m3x-ic-msg { animation: none; } }

/* ================= Homepage closing CTA before the footer (2026-10-29) =================
   Green-yellow line texture (public/images/cta-lines.jpg) with a dark wash. Title on the left, the two buttons on
   the right, vertically centred; equal padding top and bottom (!important: the section "trim last child" rule
   would otherwise remove the bottom padding). Phones: title above the buttons, left-aligned. */
.m3x-cta4-box {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  border-radius: 8px; text-align: left;
  background: #0b2a22 url("/images/cta-lines.jpg") center / cover no-repeat;
}
.m3x-sec.m3x-cta4 > .main-container > .m3x-cta4-box { padding: clamp(32px, 4vw, 52px) clamp(24px, 4.5vw, 64px) !important; }
.m3x-cta4-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5, 22, 17, 0.7) 0%, rgba(5, 22, 17, 0.4) 55%, rgba(5, 22, 17, 0.3) 100%);
}
html body:is(.m3x-home, .m3x-inner) main .m3x-cta4 .m3x-cta4-title {
  margin: 0; padding: 0; color: #ffffff !important; white-space: normal !important;
  font: 700 clamp(22px, 2vw, 30px)/1.25 "Manrope", sans-serif; letter-spacing: -0.02em; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.m3x-cta4-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 768px) {
  .m3x-cta4-box { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .m3x-cta4-actions { flex: none; flex-wrap: nowrap; }
}
.m3x-cta4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px;
  border-radius: 999px; font: 700 15.5px/1 "Manrope", sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.m3x-cta4-btn .m3x-icon { width: 18px; height: 18px; transition: transform 0.3s; }
.m3x-cta4-btn:hover .m3x-icon { transform: translateX(3px); }
.m3x-cta4-btn.is-primary { background: #ffffff; color: #0d1017; }
.m3x-cta4-btn.is-primary:hover { background: #00f80c; }
.m3x-cta4-btn.is-ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); color: #ffffff; backdrop-filter: blur(6px); }
.m3x-cta4-btn.is-ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.16); }
.m3x-cta4-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (max-width: 479.98px) { .m3x-cta4-actions { width: 100%; } .m3x-cta4-btn { flex: 1 1 0; padding: 0 16px; } }

/* ================= Showcase: faint hexagon grid behind the screenshot names (trial, 2026-10-29) =================
   Outline hexagons (pointy-top, 28px radius) as a repeating SVG, faded out towards the edges with a radial mask. */
@media (min-width: 1024px) {
  .m3x-sc-titles { position: relative; isolation: isolate; align-self: stretch; }
  .m3x-sc-titles::before {
    content: ""; position: absolute; inset: -18% -12% -18% -24%; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.497' height='84' viewBox='0 0 48.497 84'%3E%3Cpath d='M24.249 0 48.497 14v28L24.249 56 0 42V14zM24.249 56v28' fill='none' stroke='%23111827' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 48.497px 84px;
    background-position: center;
    -webkit-mask-image: radial-gradient(closest-side at 45% 50%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    mask-image: radial-gradient(closest-side at 45% 50%, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  }
  html[data-theme="dark"] .m3x-sc-titles::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.497' height='84' viewBox='0 0 48.497 84'%3E%3Cpath d='M24.249 0 48.497 14v28L24.249 56 0 42V14zM24.249 56v28' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  }
}

/* ================= Inner marketing pages follow the homepage rules (body.m3x-inner, 2026-10-29) =================
   About, Features, Nifty Alert, Options, Algo, Contact and the legal pages. The section-header rules above
   (single-colour titles, title left / paragraph right, one sentence per line, FAQ 40/60) already cover them;
   this block handles what is only on these pages. */

/* page titles (h1) in one solid colour too */
body.m3x-inner main h1 { color: var(--t-ink) !important; }
body.m3x-inner main h1 .text-mint, body.m3x-inner main h1 .text-mint * { color: inherit !important; -webkit-text-fill-color: currentColor; }

/* About - Vision / Mission / Commitment: same title size as other section titles, title left and lead paragraph
   right (pills above, on the left); the principles line in one colour, left-aligned */
body.m3x-inner .m3x-motive-title { font-size: 32px; line-height: 1.3; letter-spacing: -0.035em; }
@media (min-width: 1024px) { body.m3x-inner .m3x-motive-title { font-size: 40px; line-height: 1.2; } }
@media (min-width: 1280px) { body.m3x-inner .m3x-motive-title { font-size: 48px; } }
body.m3x-inner .m3x-motive-head { max-width: none; margin: 0 0 40px; text-align: left; }
body.m3x-inner .m3x-motive-pills { justify-content: flex-start; }
@media (min-width: 1024px) {
  body.m3x-inner .m3x-motive-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(40px, 6vw, 120px); align-items: center; margin-bottom: 48px; }
  body.m3x-inner .m3x-motive-pills { grid-column: 1 / -1; }
  body.m3x-inner .m3x-motive-head > .m3x-motive-title { grid-column: 1; }
  body.m3x-inner .m3x-motive-head > .m3x-motive-lead { grid-column: 2; justify-self: end; max-width: 520px; margin: 0; text-align: right; }
}
body.m3x-inner .m3x-mission-copy { text-align: left; }
body.m3x-inner .m3x-principles { text-align: left; }
body.m3x-inner .m3x-principles-line .text-mint { color: inherit !important; }

/* cards and panels: the 8px corners used on the homepage */
body.m3x-inner main :is(.rounded-xl, .rounded-2xl, .rounded-\[20px\], .rounded-\[24px\]):not(.m3x-ic-pick) { border-radius: 8px !important; }
/* Contact and legal pages: panels with the same 8px corners */
body.m3x-inner :is(.m3x-panel, .m3x-contact-card, .m3x-legal-toc, .m3x-legal-body) { border-radius: 8px !important; }
/* Options / Algo: titles stay on one line, so give them room - the intro box is no longer capped at 690px, and the
   "What is algo trading?" section puts its title across the full width with the two paragraphs side by side below */
@media (min-width: 1024px) {
  body.m3x-inner .trading-page .trade-section-intro { max-width: none; }
  body.m3x-inner .trading-page .trade-section-intro > p { max-width: 640px; }
  body.m3x-inner .trading-page .trade-rule { row-gap: 24px; }
  body.m3x-inner .trading-page .trade-rule > .trade-copy { grid-column: 1 / -1; }
  body.m3x-inner .trading-page .trade-rule > .trade-copy + .trade-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 70px; }
  body.m3x-inner .trading-page .trade-rule > .trade-copy + .trade-copy > p { margin: 0; }
}
/* Options hero: left-aligned like every other title */
body.m3x-inner .trading-page .trade-center { text-align: left; }
body.m3x-inner .trading-page .trade-center h1, body.m3x-inner .trading-page .trade-center .trade-lead { margin-inline: 0; }
body.m3x-inner .trading-page .trade-center .trade-actions { justify-content: flex-start; }
body.m3x-inner .trading-page .trade-hero .trade-label { justify-content: flex-start; }
@media (min-width: 1024px) {
  /* Algo hero: the one-sentence title runs across the full width; the intro text and the workflow panel sit below it */
  body.m3x-inner.trading-site .trade-hero .trade-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 70px; row-gap: 0; align-items: start; }
  body.m3x-inner.trading-site .trade-hero .trade-split > .trade-hero-copy { display: contents; }
  body.m3x-inner.trading-site .trade-hero .trade-split > .trade-hero-copy > * { grid-column: 1; }
  body.m3x-inner.trading-site .trade-hero .trade-split > .trade-hero-copy > :is(.trade-label, h1) { grid-column: 1 / -1; }
  body.m3x-inner.trading-site .trade-hero .trade-split > .trade-hero-copy > h1 { margin-bottom: 36px; white-space: nowrap; }
  body.m3x-inner.trading-site .trade-hero .trade-split > .trade-panel { grid-column: 2; grid-row: 3 / span 3; }
  /* CTA band: the title (a full sentence) fills the space left of the buttons, on up to two lines */
  body:is(.m3x-home, .m3x-inner) main .m3x-cta4 .m3x-cta4-title { flex: 1 1 auto; max-width: 900px; }
}

/* ================= Even spacing rhythm, homepages + inner pages (2026-10-29) =================
   Between sections: var(--m3x-gap) (72 / 100 / 128px) from the last content of one section to the first of the next.
   Inside a section: var(--m3x-head-gap) (40 / 48 / 64px, half the section gap on desktop) between the title block and
   what follows it, and above a button that ends a section. */
:root { --m3x-head-gap: 40px; }
@media (min-width: 768px) { :root { --m3x-head-gap: 48px; } }
@media (min-width: 1024px) { :root { --m3x-head-gap: 64px; } }

body:is(.m3x-home, .m3x-inner) .m3x-sec .m3x-sec-head:not(.m3x-faq-layout > .m3x-sec-head),
body:is(.m3x-home, .m3x-inner) .m3x-sec .m3x-block-head { margin-bottom: var(--m3x-head-gap) !important; }
/* nothing under a title adds its own extra top space */
body:is(.m3x-home, .m3x-inner) .m3x-sec :is(.m3x-sec-head:not(.m3x-faq-layout > .m3x-sec-head), .m3x-block-head) + * { margin-top: 0 !important; padding-top: 0 !important; }
/* a button that ends a section sits the same distance below the content */
body:is(.m3x-home, .m3x-inner) .m3x-sec > .main-container > div:last-child:has(> a.magnetic-button) { margin-top: var(--m3x-head-gap) !important; }

/* Highlights row under the hero (v3/v4): a full section gap below the hero's edge, no extra padding in the items
   (their dividers reach a little past the text instead) */
body.m3x-home .m3x-sec.m3x-stats3 { padding-top: var(--m3x-gap) !important; }
.m3x-stats3-card { padding-block: 0 !important; }
.m3x-stats3-card::before { top: -14px !important; bottom: -14px !important; }

/* "One alert service" showcase: the pinned area is only as tall as its content (it was a full screen, which left
   ~300px empty after the slides and pushed the slides far below the title) */
@media (min-width: 1024px) {
  .m3x-showcase { padding-bottom: calc(var(--m3x-gap) / 2) !important; }
  .m3x-sec.m3x-showcase > .main-container > .m3x-sc-heading { margin-bottom: var(--m3x-head-gap) !important; }
  .m3x-sc-track { height: auto !important; }
  .m3x-sc-track::after { content: ""; display: block; height: calc((var(--steps) - 1) * var(--sc-step)); }
  .m3x-sc-sticky { top: calc(var(--sc-top) + 32px) !important; display: block !important; height: auto !important; }
  .m3x-sc-stage { max-width: calc((100vh - var(--sc-top) - 64px) * 16 / 9) !important; }
}
/* rhythm, continued: About's Vision/Commitment titles, the Options/Algo intros, and their FAQ lists (the first
   question started 23px inside its box, which added to the section gap above) */
body.m3x-inner .m3x-motive-head { margin-bottom: var(--m3x-head-gap) !important; }
body.m3x-inner .trading-page .trade-section-intro { margin-bottom: var(--m3x-head-gap) !important; }
body.m3x-inner .trading-page .trade-faq details:first-child { padding-top: 0; }
/* four steps: panel and step list stacked on phones/tablets with the same title gap */
@media (max-width: 1023.98px) { body.m3x-home div:has(> .m3x-steps-intro) { row-gap: var(--m3x-head-gap) !important; } }
/* About: the photo under the page title is a shorter banner (was up to 700px tall) */
.m3x-about-banner { height: clamp(200px, 30vw, 440px); }
.m3x-about-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

/* ================= About: objective cards with a frosted panel (2026-10-29) =================
   The photo fills the card (no drop shadow, no dark wash); the label, title, text and quote sit together in one
   frosted white panel at the bottom. Text stays dark ink on the panel in both themes. */
.m3x-objective {
  justify-content: flex-end !important; gap: 0 !important; min-height: 640px; padding: 14px !important;
  border-radius: 8px !important; box-shadow: none !important;
}
.m3x-objective::after { background: linear-gradient(180deg, rgba(10, 14, 21, 0) 40%, rgba(10, 14, 21, 0.25) 100%) !important; }
.m3x-objective-panel {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 6px;
  background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.m3x-objective .m3x-objective-panel .m3x-objective-num { color: #00a30a; }
.m3x-objective .m3x-objective-panel h3 { color: #0d1017; }
.m3x-objective .m3x-objective-panel > p:not(.m3x-objective-num) { margin: 0; color: rgba(13, 16, 23, 0.74); text-shadow: none; font-size: 15px; line-height: 1.6; }
.m3x-objective .m3x-objective-panel strong { color: #0d1017; }
.m3x-objective .m3x-objective-panel .m3x-objective-note { color: #00a30a; }
/* quote: the last line of the panel, under a thin divider */
.m3x-objective .m3x-objective-panel .m3x-objective-quote {
  margin: 6px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(13, 16, 23, 0.12); border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #0d1017;
}
.m3x-objective .m3x-objective-panel .m3x-objective-quote .m3x-icon { color: #00a30a; }
@media (max-width: 1023.98px) { .m3x-objective { min-height: 520px; } }

/* About Vision: the lead paragraph sits under the title, left-aligned */
@media (min-width: 1024px) {
  body.m3x-inner .m3x-motive-head { display: block !important; }
  body.m3x-inner .m3x-motive-head > .m3x-motive-lead { justify-self: start !important; max-width: 720px !important; margin: 16px 0 0 !important; text-align: left !important; }
}
/* Showcase on phones/tablets: each screenshot's name (with an arrow on the right) above the image, no shadow */
@media (max-width: 1023.98px) {
  .m3x-sc-shot { display: flex; flex-direction: column; }
  .m3x-sc-shot figcaption { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; font-size: 24px; }
  .m3x-sc-shot figcaption .m3x-icon { flex: none; width: 26px; height: 26px; color: var(--t-ink); }
  .m3x-sc-frame { box-shadow: none !important; }
}
/* About objective cards fit on one screen under the header: card height follows the screen height, tighter panel */
@media (min-width: 1024px) {
  .m3x-objective { min-height: clamp(420px, calc(100vh - 180px), 560px) !important; padding: 12px !important; }
  .m3x-objective-panel { gap: 8px; padding: 18px 20px; }
  .m3x-objective .m3x-objective-panel h3 { font-size: 19px; line-height: 1.25; }
  .m3x-objective .m3x-objective-panel > p:not(.m3x-objective-num) { font-size: 14px; line-height: 1.55; }
  .m3x-objective .m3x-objective-panel .m3x-objective-quote { margin-top: 4px; padding-top: 12px; font-size: 15px; }
}

/* ================= About: "Our philosophy" step cards (2026-10-29) =================
   Each step: a green icon tile (top left), the title at the bottom, and its number as a large faint watermark in the
   top-right corner, cut off by the card edge. Soft top highlight and a green glow on hover add depth. */
.m3x-philosophy { text-align: left !important; border-radius: 8px !important; }
.m3x-philosophy .m3x-philosophy-label { margin-bottom: 18px; color: rgba(255, 255, 255, 0.7); font: 700 13px/1.3 "Manrope", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.m3x-philosophy-steps { gap: 14px !important; }
@media (min-width: 640px) and (max-width: 1023.98px) { .m3x-philosophy-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) { .m3x-philosophy-steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.m3x-philosophy-steps li.m3x-philo-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 28px;
  min-height: 168px; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 8px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(0, 248, 12, 0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s, transform 0.3s, background-color 0.3s;
}
.m3x-philosophy-steps li.m3x-philo-card::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; z-index: -1; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 248, 12, 0.22), rgba(0, 248, 12, 0)); opacity: 0; transition: opacity 0.35s;
}
.m3x-philosophy-steps li.m3x-philo-card:hover { border-color: rgba(0, 248, 12, 0.35); transform: translateY(-3px); }
.m3x-philosophy-steps li.m3x-philo-card:hover::after { opacity: 1; }
/* watermark number: big outlined digits, partly outside the top-right corner */
.m3x-philosophy-steps .m3x-philo-num {
  position: absolute; top: -22px; right: -10px; z-index: -1; color: transparent;
  font: 800 112px/1 "Manrope", sans-serif; letter-spacing: -0.06em;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.13); pointer-events: none; user-select: none;
}
.m3x-philosophy-steps .m3x-philo-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px;
  border: 1px solid rgba(0, 248, 12, 0.3); background: rgba(0, 248, 12, 0.1); color: #00f80c;
}
.m3x-philosophy-steps .m3x-philo-ico .m3x-icon { width: 22px; height: 22px; }
.m3x-philosophy-steps .m3x-philo-title { color: #ffffff; font: 700 clamp(17px, 1.4vw, 20px)/1.25 "Manrope", sans-serif; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .m3x-philosophy-steps li.m3x-philo-card { transition: none; } }
@media (max-width: 639.98px) { .m3x-philosophy-steps li.m3x-philo-card { min-height: 132px; gap: 20px; } .m3x-philosophy-steps .m3x-philo-num { font-size: 96px; } }

/* ================= Homepage cards from the real terminal (2026-10-29) =================
   views/partials/terminal-alerts.ejs (Alert Engine log) and terminal-chart.ejs (candles + alert markers);
   /js/terminal-cards.js animates them. Badge colours follow the terminal: entry red-pink, re-entry amber,
   reversal green, exit grey; chart ▲ markers green below candles, ▼ markers red above. */

/* ---------- alert log ---------- */
.m3x-tlog { border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 8px; background: var(--t-surface); overflow: hidden; }
.m3x-tlog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgb(var(--t-ink-rgb) / 0.07); }
.m3x-tlog-name { display: inline-flex; align-items: center; gap: 8px; color: var(--t-ink); font: 700 13px/1 "Manrope", sans-serif; }
.m3x-tlog-name i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); animation: m3x-tlog-pulse 1.8s ease-in-out infinite; }
@keyframes m3x-tlog-pulse { 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } }
.m3x-tlog-meta { color: rgb(var(--t-ink-rgb) / 0.55); font: 600 11.5px/1 "Manrope", sans-serif; white-space: nowrap; }
.m3x-tlog-meta b { color: var(--t-ink); font-variant-numeric: tabular-nums; }
.m3x-tlog-list { display: grid; margin: 0; padding: 6px; list-style: none; min-height: calc(5 * 58px + 12px); align-content: start; }
.m3x-tlog-row {
  display: grid; grid-template-columns: 40px 66px minmax(0, 1fr); align-items: center; gap: 8px;
  padding: 9px 8px; border-radius: 6px; font-size: 12px;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), background-color 1.2s ease;
}
.m3x-tlog-row + .m3x-tlog-row { border-top: 1px solid rgb(var(--t-ink-rgb) / 0.06); }
.m3x-tlog-row.is-new { opacity: 0; transform: translateY(-14px); background: rgba(0, 163, 10, 0.1); }
.m3x-tlog-row:first-child:not(.is-new) { background: rgba(0, 163, 10, 0.04); }
.m3x-tlog-time { color: rgb(var(--t-ink-rgb) / 0.5); font: 600 11.5px/1 "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.m3x-tlog-kind {
  justify-self: start; padding: 3px 7px; border: 1px solid currentColor; border-radius: 4px;
  font: 700 9.5px/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.m3x-tlog-row.is-entry .m3x-tlog-kind { color: #e11d48; background: rgba(225, 29, 72, 0.07); }
.m3x-tlog-row.is-re-entry .m3x-tlog-kind { color: #d97706; background: rgba(217, 119, 6, 0.08); }
.m3x-tlog-row.is-reversal .m3x-tlog-kind { color: #16a34a; background: rgba(22, 163, 74, 0.08); }
.m3x-tlog-row.is-exit .m3x-tlog-kind { color: #64748b; background: rgba(100, 116, 139, 0.08); }
.m3x-tlog-text { display: grid; gap: 2px; min-width: 0; }
.m3x-tlog-text strong { overflow: hidden; color: var(--t-ink); font: 700 12.5px/1.3 "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.m3x-tlog-text small { overflow: hidden; color: rgb(var(--t-ink-rgb) / 0.55); font: 500 11px/1.3 "IBM Plex Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- chart ---------- */
.m3x-tchart { margin: 0; padding: 14px 14px 10px; border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 8px; background: var(--t-surface); }
.m3x-tchart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.m3x-tchart-name { color: var(--t-ink); font: 700 13px/1 "Manrope", sans-serif; }
.m3x-tchart-name em { margin-left: 8px; color: rgb(var(--t-ink-rgb) / 0.5); font-size: 11.5px; font-style: normal; font-weight: 600; }
.m3x-tchart-last { color: #16a34a; font: 700 12px/1 "IBM Plex Mono", monospace; }
.m3x-tchart-plot { position: relative; height: 250px; margin-right: 46px; }
.m3x-tchart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m3x-tchart-grid { stroke: rgb(var(--t-ink-rgb) / 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m3x-tchart-lastline { stroke: #16a34a; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.7; }
.m3x-tchart-candle line { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.m3x-tchart-candle.is-up line { stroke: #22c55e; } .m3x-tchart-candle.is-up rect { fill: #22c55e; }
.m3x-tchart-candle.is-down line { stroke: #ef4444; } .m3x-tchart-candle.is-down rect { fill: #ef4444; }
.m3x-tchart-mark {
  position: absolute; z-index: 1; transform: translate(-50%, 6px); padding: 3px 6px; border-radius: 5px; white-space: nowrap;
  font: 700 8.5px/1.15 "IBM Plex Mono", monospace; text-align: center; pointer-events: none;
}
.m3x-tchart-mark.is-up { background: #0f9f5a; color: #ffffff; }
.m3x-tchart-mark.is-down { background: #e11d48; color: #ffffff; transform: translate(-50%, calc(-100% - 6px)); }
.m3x-tchart-mark.is-single.is-up { border: 1px solid rgba(15, 159, 90, 0.35); background: rgba(34, 197, 94, 0.14); color: #0f7a46; }
.m3x-tchart-mark.is-single.is-down { border: 1px solid rgba(225, 29, 72, 0.3); background: rgba(225, 29, 72, 0.1); color: #be123c; }
.m3x-tchart-mark b { display: block; font-size: 9.5px; }
.m3x-tchart-tag { position: absolute; left: 100%; transform: translate(4px, -50%); padding: 2px 5px; border-radius: 3px; background: #16a34a; color: #ffffff; font: 700 9.5px/1.2 "IBM Plex Mono", monospace; }
.m3x-tchart-x { display: flex; justify-content: space-between; margin: 8px 46px 0 0; color: rgb(var(--t-ink-rgb) / 0.45); font: 600 10.5px/1 "IBM Plex Mono", monospace; }

/* entry animation: candles rise in left to right, markers pop in after their candle */
.m3x-tchart.is-armed .m3x-tchart-candle { opacity: 0; transform: scaleY(0.2); transform-box: fill-box; transform-origin: 50% 50%; }
.m3x-tchart.is-armed .m3x-tchart-mark, .m3x-tchart.is-armed .m3x-tchart-tag, .m3x-tchart.is-armed .m3x-tchart-lastline { opacity: 0; }
.m3x-tchart.is-in .m3x-tchart-candle { animation: m3x-candle-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--i) * 70ms); }
.m3x-tchart.is-in .m3x-tchart-mark { animation: m3x-mark-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 70ms + 380ms); }
.m3x-tchart.is-in .m3x-tchart-tag, .m3x-tchart.is-in .m3x-tchart-lastline { animation: m3x-fade-in 0.5s ease forwards; animation-delay: 1.6s; }
@keyframes m3x-candle-in { to { opacity: 1; transform: scaleY(1); } }
@keyframes m3x-mark-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes m3x-fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .m3x-tchart.is-armed .m3x-tchart-candle, .m3x-tchart.is-armed .m3x-tchart-mark, .m3x-tchart.is-armed .m3x-tchart-tag, .m3x-tchart.is-armed .m3x-tchart-lastline { opacity: 1; transform: none; animation: none; }
  .m3x-tlog-name i { animation: none; }
}
@media (max-width: 479.98px) { .m3x-tchart-plot { height: 220px; } .m3x-tlog-row { grid-template-columns: 36px 60px minmax(0, 1fr); gap: 6px; } }
/* stagger: every other candle's labels sit one row further from the candle so neighbours never overlap */
.m3x-tchart-mark.is-up { transform: translate(-50%, calc(6px + var(--lift, 0) * 24px)); }
.m3x-tchart-mark.is-down { transform: translate(-50%, calc(-100% - 6px - var(--lift, 0) * 24px)); }
.m3x-tchart-plot { margin-right: 52px; }
.m3x-tchart-x { margin-right: 52px; }
.m3x-tchart-plot { height: 290px; }
.m3x-tchart-mark { font-size: 8px; padding: 2px 5px; }
.m3x-tchart-mark.is-up { transform: translate(-50%, calc(5px + var(--lift, 0) * 21px)); }
.m3x-tchart-mark.is-down { transform: translate(-50%, calc(-100% - 5px - var(--lift, 0) * 21px)); }
@media (max-width: 479.98px) { .m3x-tchart-plot { height: 260px; } }

/* ---------- terminal cards, simplified (2026-10-29): plain feed + clean chart with alert dots ---------- */
.m3x-tlog-head { padding: 14px 16px; }
.m3x-tlog-name { font-size: 14px; }
.m3x-tlog-meta { font-size: 12.5px; }
.m3x-tlog-list { min-height: calc(4 * 52px + 16px); padding: 8px; }
.m3x-tlog-row {
  grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 12px !important;
  padding: 13px 10px !important; font-size: 14px;
}
.m3x-tlog-row + .m3x-tlog-row { border-top: 0; }
.m3x-tlog-kind { padding: 4px 10px; border: 0; border-radius: 999px; font: 700 12px/1.2 "Manrope", sans-serif; letter-spacing: 0; text-transform: none; }
.m3x-tlog-text { display: block; color: var(--t-ink); font: 600 14px/1.3 "Manrope", sans-serif; }
.m3x-tlog-time { color: rgb(var(--t-ink-rgb) / 0.5); font: 600 12.5px/1 "Manrope", sans-serif; }
.m3x-tlog-row:first-child:not(.is-new) { background: rgb(var(--t-ink-rgb) / 0.035); }
.m3x-tlog-row.is-entry .m3x-tlog-kind, .m3x-tlog-row.is-re-entry .m3x-tlog-kind { color: #00800a; background: rgba(0, 163, 10, 0.1); }
.m3x-tlog-row.is-reversal .m3x-tlog-kind { color: #b45309; background: rgba(217, 119, 6, 0.1); }
.m3x-tlog-row.is-exit .m3x-tlog-kind { color: #475569; background: rgba(100, 116, 139, 0.1); }
html[data-theme="dark"] .m3x-tlog-row.is-entry .m3x-tlog-kind, html[data-theme="dark"] .m3x-tlog-row.is-re-entry .m3x-tlog-kind { color: #4ade80; }
html[data-theme="dark"] .m3x-tlog-row.is-reversal .m3x-tlog-kind { color: #fbbf24; }
html[data-theme="dark"] .m3x-tlog-row.is-exit .m3x-tlog-kind { color: #cbd5e1; }

.m3x-tchart { padding: 16px; }
.m3x-tchart-head { margin-bottom: 10px; }
.m3x-tchart-name { font-size: 14px; }
.m3x-tchart-last { color: var(--t-ink); font: 700 13px/1 "Manrope", sans-serif; }
.m3x-tchart-plot { height: 220px !important; margin-right: 0 !important; }
.m3x-tchart-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--t-surface);
  background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); transform: translate(-50%, 7px);
}
.m3x-tchart-dot.is-down { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); transform: translate(-50%, calc(-100% - 7px)); }
.m3x-tchart-dot.is-static { position: static; display: inline-block; transform: none; vertical-align: middle; }
.m3x-tchart-legend { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: rgb(var(--t-ink-rgb) / 0.55); font: 600 12.5px/1 "Manrope", sans-serif; }
.m3x-tchart.is-armed .m3x-tchart-dot:not(.is-static) { opacity: 0; }
.m3x-tchart.is-in .m3x-tchart-dot:not(.is-static) { animation: m3x-mark-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(var(--i) * 70ms + 380ms); }
@media (prefers-reduced-motion: reduce) { .m3x-tchart.is-armed .m3x-tchart-dot { opacity: 1; animation: none; } }
.m3x-tlog-row { grid-template-columns: 88px minmax(0, 1fr) auto !important; }
.m3x-tlog-kind { justify-self: start; }

/* ================= About fixes (2026-10-29) ================= */
/* Objective cards: the three frosted panels are the same height (a shared subgrid row; the photo row takes the rest),
   with the quote pinned to the bottom of each panel */
@media (min-width: 1024px) {
  .m3x-objectives { grid-template-rows: clamp(140px, calc(100vh - 470px), 280px) auto; row-gap: 0 !important; }
  .m3x-objective { min-height: 0 !important; }
  .m3x-objective { display: grid !important; grid-row: span 2; grid-template-rows: subgrid; }
  .m3x-objective-panel { grid-row: 2; align-self: stretch; }
  .m3x-objective .m3x-objective-panel .m3x-objective-quote { margin-top: auto !important; }
}

/* Our philosophy: light in light mode (white cards, ink text, green icons, faint watermark numbers);
   the dark version stays for dark mode */
html:not([data-theme="dark"]) .m3x-philosophy { border: 1px solid rgb(var(--t-ink-rgb) / 0.08); background: #eef7f0 !important; }
html:not([data-theme="dark"]) .m3x-philosophy .m3x-philosophy-label { color: rgb(var(--t-ink-rgb) / 0.6); }
html:not([data-theme="dark"]) .m3x-philosophy-steps li.m3x-philo-card {
  border-color: rgb(var(--t-ink-rgb) / 0.08); background: #ffffff; box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.35);
}
html:not([data-theme="dark"]) .m3x-philosophy-steps li.m3x-philo-card:hover { border-color: rgba(0, 163, 10, 0.4); }
html:not([data-theme="dark"]) .m3x-philosophy-steps li.m3x-philo-card::after { background: radial-gradient(closest-side, rgba(0, 163, 10, 0.14), rgba(0, 163, 10, 0)); }
html:not([data-theme="dark"]) .m3x-philosophy-steps .m3x-philo-num { -webkit-text-stroke-color: rgb(var(--t-ink-rgb) / 0.1); }
html:not([data-theme="dark"]) .m3x-philosophy-steps .m3x-philo-ico { border-color: rgba(0, 163, 10, 0.25); background: rgba(0, 163, 10, 0.1); color: #00a30a; }
html:not([data-theme="dark"]) .m3x-philosophy-steps .m3x-philo-title { color: var(--t-ink); }

/* SEBI disclaimer: no left border, plain pastel blue */
.m3x-motive-disclaimer { border: 1px solid #d6e4fb !important; border-radius: 8px !important; background: #eef4ff !important; }
.m3x-motive-disclaimer-title .m3x-icon { color: #2563eb; }
html[data-theme="dark"] .m3x-motive-disclaimer { border-color: rgba(96, 165, 250, 0.22) !important; background: rgba(59, 130, 246, 0.08) !important; }
html[data-theme="dark"] .m3x-motive-disclaimer-title .m3x-icon { color: #93c5fd; }
/* About: the principles line belongs to "Our Commitment", so it reads as content, well below the section title size */
.m3x-principles { margin-top: 36px !important; }
.m3x-principles .m3x-philosophy-label { margin-bottom: 8px; }
.m3x-principles-line { font: 700 clamp(19px, 1.8vw, 26px)/1.3 "Manrope", sans-serif !important; letter-spacing: -0.015em !important; }

/* ================= Performance (2026-10-29) ================= */
/* Hero title: visible from the first paint (it is the largest paint on the page), with a short CSS slide-up
   instead of the JS word reveal, which kept it hidden until the animation scripts ran */
.m3x-hero4-title { animation: m3x-hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes m3x-hero-rise { from { transform: translateY(28px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .m3x-hero4-title { animation: none; } }

/* ================= Header "Market ±N%" badge (2026-10-31) =================
   Same font as the menu items (Manrope 15.5px, 14px up to 1279px). Plain text: the figure and the word are green when
   the market is bullish, red when bearish, and the menu colour when neutral. */
body .m3x-mkt { font-size: 15.5px; }
body .m3x-mkt-label { font-weight: 600; }
body .m3x-mkt-icon svg { width: 17px; height: 17px; }
@media (max-width: 1279.98px) { body .m3x-mkt { font-size: 14px; } }
body .m3x-mkt.is-neutral { --mkt: rgb(var(--t-ink-rgb) / 0.72); }
body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt.is-neutral { --mkt: rgba(255, 255, 255, 0.78); }
body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt.is-bullish { --mkt: #34d058; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt.is-bearish { --mkt: #f87171; }
body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt.m3x-mkt,
body.m3x-home-v4 header:not(.scroll-header) .m3x-mkt .m3x-mkt-state { color: var(--mkt) !important; }
/* phones: room for the menu button - no "Market" word below 480px, just "+43% ↑" below 380px */
@media (max-width: 479.98px) { body .m3x-mkt { font-size: 13px; } .m3x-mkt-label { display: none; } }
@media (max-width: 379.98px) { .m3x-mkt-state { display: none; } }

/* ================= Light / dark switch in the footer (2026-10-31) =================
   A switch on the right of the social icons row (desktop; phones and tablets have it in the menu). The knob slides over the sun
   (light) or the moon (dark). */
@media (min-width: 1024px) {
  .m3x-foot-cols { align-content: space-between; }
  .m3x-foot-theme { justify-content: flex-end; }
}
.m3x-foot-theme { display: flex; }
@media (max-width: 1023.98px) { .m3x-foot-theme { display: none; } }
/* hamburger: three equal bars */
.m3x-burger { gap: 5px; width: 36px; height: 36px; padding: 0; border: 0; background: none; }
.m3x-burger-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--t-ink); }
.m3x-theme-switch { padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.m3x-theme-switch:focus-visible { outline: 2px solid #007d0a; outline-offset: 3px; }
.m3x-theme-track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 64px; height: 34px; padding: 0 8px; border: 1px solid rgb(var(--t-ink-rgb) / 0.16); border-radius: 999px;
  background: rgb(var(--t-ink-rgb) / 0.06); color: rgb(var(--t-ink-rgb) / 0.5);
  transition: border-color 0.2s, background-color 0.2s;
}
.m3x-theme-switch:hover .m3x-theme-track { border-color: rgb(var(--t-ink-rgb) / 0.32); }
/* the 64 x 34 track (32px inside the border) has two knob stops, centred 16px and 46px from the left: each icon is
   pinned to the centre of its stop so it sits in the middle of the knob */
.m3x-theme-track .m3x-icon { position: absolute; top: 9px; z-index: 1; width: 14px; height: 14px; transition: color 0.3s; }
.m3x-theme-track .is-sun { left: 9px; }
.m3x-theme-track .is-moon { left: 39px; }
.m3x-theme-knob {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1);
}
html:not([data-theme="dark"]) .m3x-theme-track .is-sun { color: #b45309; }
html[data-theme="dark"] .m3x-theme-knob { transform: translateX(30px); background: #e5e7eb; }
html[data-theme="dark"] .m3x-theme-track .is-moon { color: #0d1017; }
@media (prefers-reduced-motion: reduce) { .m3x-theme-knob, .m3x-theme-track .m3x-icon { transition: none; } }

/* Web fonts, self-hosted (2026-10-29): Inter Tight, Manrope, Sora and IBM Plex Mono, latin + latin-ext, from Google Fonts,
   plus a one-glyph file per font for the rupee sign (2026-10-30).
   Served from this site instead of fonts.googleapis.com / fonts.gstatic.com, which cost two extra connections
   before the first paint. */
/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-300-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the rupee sign only (about 1 KB), so prices don't download the whole latin-ext file */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-300-rupee.woff2) format("woff2");
  unicode-range: U+20B9;
}
/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-300-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the rupee sign only (about 1 KB), so prices don't download the whole latin-ext file */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-500-rupee.woff2) format("woff2");
  unicode-range: U+20B9;
}
/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the rupee sign only (about 1 KB), so prices don't download the whole latin-ext file */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-600-rupee.woff2) format("woff2");
  unicode-range: U+20B9;
}
/* latin */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/ibm-plex-mono-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/gf/inter-tight-300-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the rupee sign only (about 1 KB), so prices don't download the whole latin-ext file */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/gf/inter-tight-300-600-rupee.woff2) format("woff2");
  unicode-range: U+20B9;
}
/* latin */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/gf/inter-tight-300-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-300-800-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the rupee sign only (about 1 KB), so prices don't download the whole latin-ext file */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-300-800-rupee.woff2) format("woff2");
  unicode-range: U+20B9;
}
/* latin */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-300-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/gf/sora-300-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the rupee sign only (about 1 KB), so prices don't download the whole latin-ext file */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/gf/sora-300-600-rupee.woff2) format("woff2");
  unicode-range: U+20B9;
}
/* latin */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/gf/sora-300-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* FAQ: closed answers start collapsed (main.js sets each accordion up as it nears the viewport and then takes over
   with inline heights); without scripts every answer stays open */
html.m3x-js .accordion-item:not(.default-open) > .accordion-content { height: 0; opacity: 0; overflow: hidden; }

/* Below-the-fold sections skip layout and paint until they near the viewport (the whole long page was laid out
   before the first paint). The pinned showcase and the stacking cards keep normal rendering (position: sticky).
   A section's real size is remembered once it has rendered. */
@media screen {
  /* (not the sentiment banner: its indicators popover may extend past the section) */
  body:is(.m3x-home, .m3x-inner) main > section.m3x-sec:not(:first-child):not(.m3x-showcase):not(:has(.m3x-stack)):not(#m3x-after-hero) {
    content-visibility: auto; contain-intrinsic-size: auto 900px;
  }
  /* the footer is always below the first screen */
  body > footer { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
}

/* Accessibility (2026-10-29): small text at 4.5:1 contrast or better */
.m3x-stack-num small { opacity: 0.66; }
html:not([data-theme="dark"]) .m3x-eyebrow { color: #007d0a; }

/* Reveal animations (2026-10-29): content is visible from the first paint instead of waiting for the animation
   scripts, which load after it (public/js/boot.js). main.js hides and reveals only what starts below the screen.
   The first section of each page gets a short CSS rise instead (backwards fill: never overrides gsap transforms). */
[data-opai-animate], [data-opai-text-reveal] { opacity: 1; }
main > section:first-child :is([data-opai-animate], [data-opai-text-reveal], [data-opai-word-slide-reveal]) {
  animation: m3x-hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  main > section:first-child :is([data-opai-animate], [data-opai-text-reveal], [data-opai-word-slide-reveal]) { animation: none; }
}

/* Accessibility (2026-10-29): text contrast of at least 4.5:1 (3:1 for large text) in the light theme.
   Muted template text (text-white/30..60 = ink at 30-60%) and the site's own muted greys go to 64-66% ink;
   small green text uses the deeper brand green. Dark theme already passes. */
html:not([data-theme="dark"]) .text-white\/30,
html:not([data-theme="dark"]) .text-white\/50 { color: rgb(var(--t-ink-rgb) / 0.64); }
html:not([data-theme="dark"]) .text-white\/60 { color: rgb(var(--t-ink-rgb) / 0.66); }
html:not([data-theme="dark"]) :is(.m3x-tlog-time, .m3x-tlog-meta, .m3x-tchart-legend, .m3x-ic-period, .m3x-ic-meta span,
  .m3x-ic-note, .m3x-ic-side-title span, .m3x-ic-pick-ex, .m3x-ic-pick-name em, .m3x-price-per, .m3x-price-save s,
  .m3x-ic-chg.is-flat, .m3x-ic-pick-chg.is-flat, .m3x-card-text:not(.m3x-card-invert *), .trade-label) { color: rgb(var(--t-ink-rgb) / 0.66) !important; }
html:not([data-theme="dark"]) :is(.m3x-legal-num, .m3x-legal-body a) { color: #007d0a; }
html:not([data-theme="dark"]) .m3x-ic { --ic-up: #007d0a; --ic-down: #d42a30; }
html:not([data-theme="dark"]) :is(.m3x-price-save, .m3x-ic-pick-name em.is-live) { color: #007d0a; }
html:not([data-theme="dark"]) .m3x-tlog-row:is(.is-entry, .is-re-entry) .m3x-tlog-kind { color: #006b08; }
html:not([data-theme="dark"]) .text-opai-blue { color: #1d5fd6; }
html:not([data-theme="dark"]) .text-opai-green { color: #04752a; }
html:not([data-theme="dark"]) .text-opai-lemon { color: #3f6a06; }
html:not([data-theme="dark"]) .text-opai-purple { color: #6a3ddb; }
/* footer wordmark: outline in the brand text green on the light page */
html:not([data-theme="dark"]) :is(.m3x-footer-title, .m3x-footer-title span) { -webkit-text-stroke-color: #00a30a; }
/* footer contact links: at least 24px tall touch targets */
footer .space-y-6 > div > a.text-tagline-3 { display: inline-block; min-height: 24px; line-height: 24px; }

/* ================= Features: "Inside the terminal" - the screens the homepage showcases (2026-10-30) ================= */
.m3x-screens { display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .m3x-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .m3x-screens { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.m3x-screen-shot {
  margin: 0 0 20px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid rgb(var(--t-ink-rgb) / 0.08); border-radius: 8px;
  background: var(--t-surface);
}
.m3x-screen-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
html[data-theme="dark"] .m3x-screen-shot { border-color: rgba(255, 255, 255, 0.08); }
.m3x-screen-name { margin: 0 0 6px; color: var(--t-ink); font: 700 clamp(19px, 1.6vw, 22px)/1.25 "Manrope", sans-serif; letter-spacing: -0.015em; }
.m3x-screen-text { margin: 0; color: rgb(var(--t-ink-rgb) / 0.66); font: 400 15px/1.55 "Inter Tight", sans-serif; }

/* Highlights row on phones and tablets (2026-10-30): a tidy 2 x 2 grid of equal tiles instead of the
   desktop's line-separated columns (whose lines didn't meet and sat on the text at this size) */
@media (max-width: 1023.98px) {
  .m3x-stats3-grid { gap: 12px !important; }
  .m3x-stats3-card {
    justify-content: flex-start; gap: 6px;
    padding: 18px 16px !important; border: 1px solid rgb(var(--t-ink-rgb) / 0.08) !important; border-radius: 8px;
    background: var(--t-surface) !important;
  }
  .m3x-stats3-card::before, .m3x-stats3-card::after { display: none !important; }
  .m3x-stats3-card strong { font-size: clamp(19px, 5vw, 26px); line-height: 1.15; white-space: nowrap; }
  .m3x-stats3-card > span:last-child { font-size: 13.5px; line-height: 1.45; }
}
@media (max-width: 359.98px) { .m3x-stats3-card strong { white-space: normal; } }