/*! tailwindcss v4.1.13 | 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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-font-weight: initial;
      --tw-content: "";
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-tracking: 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-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-2: #323a44;
  --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-13: #0d0d12;
  --color-background-14: #12161f;
  --color-stroke-1: #94aecf;
  --color-stroke-2: #0708052d;
  --color-stroke-3: #7c8ea5;
  --color-opai-yellow: #ff6f00;
  --color-opai-purple: #ff36a0;
  --color-opai-blue: #4d338b;
  --color-opai-lemon: #ff6f00;
  --color-opai-green: #ff36a0;
  --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-it-heading-6: 1.25rem;
  --text-it-heading-6--line-height: 140%;
  --text-is-heading-6: 1.25rem;
  --text-is-heading-6--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-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);
  --button-shadow: 0 4px 4px 0 #00000040, 0 0 8px 0 #ffffff80 inset;
  --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;
  --container-xs: 20rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --font-weight-extralight: 200;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-sm: .25rem;
  --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);
  --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], [data-opai-split-text] {
  opacity: 0;
}

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

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

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

.modal-open {
  display: grid;
}

.modal-close {
  display: none;
}

dialog.modal-overlay {
  background: none;
  border: none;
  padding: 0;
}

dialog.modal-overlay::backdrop {
  background: #000000f2;
}

dialog.modal-overlay.modal-close {
  display: none;
}

.text-reveal {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.scroll-header {
  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);
  top: calc(var(--spacing) * 2) !important;
}

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

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

.active-menu {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-background-6);
}

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

  .sticky {
    position: sticky;
  }

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

  .inset-\[-11px\] {
    inset: -11px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .top-full {
    top: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .-bottom-px {
    bottom: -1px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .left-\[3\.5px\] {
    left: 3.5px;
  }

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

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

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

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

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

  .\!z-5 {
    z-index: 5 !important;
  }

  .\!z-\[9999\] {
    z-index: 9999 !important;
  }

  .-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-10 {
    z-index: 10;
  }

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

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

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

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

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

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

  .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-\[9999\] {
    z-index: 9999;
  }

  .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-0\.5 {
    margin-block: calc(var(--spacing) * -.5);
  }

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

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

  .my-auto {
    margin-block: auto;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 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-14 {
    margin-bottom: calc(var(--spacing) * 14);
  }

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

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

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

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

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

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

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

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

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

  .table {
    display: table;
  }

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

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.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-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-13 {
    width: calc(var(--spacing) * 13);
    height: calc(var(--spacing) * 13);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .size-\[120\%\] {
    width: 120%;
    height: 120%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-\[89\%\] {
    height: 89%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

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

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

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

  .max-h-\[30\%\] {
    max-height: 30%;
  }

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

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

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

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

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

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

  .max-h-full {
    max-height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

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

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

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

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

  .flex-1 {
    flex: 1;
  }

  .flex-auto {
    flex: auto;
  }

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

  .grow {
    flex-grow: 1;
  }

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

  .basis-\[409px\] {
    flex-basis: 409px;
  }

  .origin-center {
    transform-origin: center;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    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-6 {
    --tw-translate-x: calc(var(--spacing) * -6);
    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-\[7px\] {
    --tw-translate-x: calc(7px * -1);
    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);
  }

  .translate-y-px {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

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

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

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

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

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

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

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

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

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

  .rotate-12 {
    rotate: 12deg;
  }

  .rotate-15 {
    rotate: 15deg;
  }

  .rotate-45 {
    rotate: 45deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .rotate-\[-10\.86deg\] {
    rotate: -10.86deg;
  }

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

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

  .resize-none {
    resize: none;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-disc {
    list-style-type: disc;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .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-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

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

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

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

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

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

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

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

  :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-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-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-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-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-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-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-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(.space-y-25 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 25) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 25) * calc(1 - var(--tw-space-y-reverse)));
  }

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

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

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

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

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

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

  .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-3\.5 {
    column-gap: calc(var(--spacing) * 3.5);
  }

  .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-6\.5 {
    column-gap: calc(var(--spacing) * 6.5);
  }

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

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

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

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

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

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

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

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

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

  .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-12 {
    row-gap: calc(var(--spacing) * 12);
  }

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

  .gap-y-\[70px\] {
    row-gap: 70px;
  }

  .overflow-auto {
    overflow: auto;
  }

  .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-\[6px\] {
    border-radius: 6px;
  }

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

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

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

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

  .rounded-\[50\%\] {
    border-radius: 50%;
  }

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

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

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

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

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

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

  .rounded-t-\[10px\] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .rounded-t-md {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
  }

  .rounded-r-full {
    border-top-right-radius: 3.40282e38px;
    border-bottom-right-radius: 3.40282e38px;
  }

  .rounded-b-\[10px\] {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

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

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

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

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

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-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-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-\[\#6A727B\] {
    border-color: #6a727b;
  }

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

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

  .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-2\/40 {
    border-color: #07080512;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-stroke-2\/40 {
      border-color: color-mix(in oklab, var(--color-stroke-2) 40%, 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-stroke-3\/35 {
    border-color: #7c8ea559;
  }

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

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

  .border-white\/3 {
    border-color: #ffffff08;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .border-l-opai-purple {
    border-left-color: var(--color-opai-purple);
  }

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

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

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

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

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

  .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-13\/90 {
    background-color: #0d0d12e6;
  }

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

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

  .bg-black\/95 {
    background-color: #000000f2;
  }

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

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

  .bg-opai-blue\/10 {
    background-color: #4d338b1a;
  }

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

  .bg-opai-green\/10 {
    background-color: #ff36a01a;
  }

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

  .bg-opai-lemon\/10 {
    background-color: #ff6f001a;
  }

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

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

  .bg-opai-purple\/10 {
    background-color: #ff36a01a;
  }

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

  .bg-opai-purple\/90 {
    background-color: #ff36a0e6;
  }

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

  .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-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\/40 {
    background-color: #fff6;
  }

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

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

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

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, 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-to-r {
    --tw-gradient-position: to right;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-r {
      --tw-gradient-position: to right in oklab;
    }
  }

  .bg-linear-to-r {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-linear-to-t {
    --tw-gradient-position: to top;
  }

  @supports (background-image: linear-gradient(in lab, red, red)) {
    .bg-linear-to-t {
      --tw-gradient-position: to top in oklab;
    }
  }

  .bg-linear-to-t {
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-radial-\[circle\,\#FFFFFF_0\%\,\#7C8EA52E_100\%\] {
    --tw-gradient-position: circle, #fff 0%, #7c8ea52e 100%;
    background-image: radial-gradient(var(--tw-gradient-stops, circle, #fff 0%, #7c8ea52e 100%));
  }

  .bg-radial-\[circle_at_center\] {
    --tw-gradient-position: circle at center;
    background-image: radial-gradient(var(--tw-gradient-stops, circle at center));
  }

  .bg-\[linear-gradient\(232deg\,rgba\(13\,16\,23\,0\.00\)_49\.68\%\,rgba\(13\,16\,23\,0\.60\)_70\.59\%\,\#0D1017_84\.77\%\)\] {
    background-image: linear-gradient(232deg, #0d101700 49.68%, #0d101799 70.59%, #0d1017 84.77%);
  }

  .bg-\[linear-gradient\(var\(--color-background-4\)\)\,linear-gradient\(\#121213_0\%\,rgba\(18\,18\,19\,0\.6\)_80\%\,rgba\(18\,18\,19\,0\)\)\,linear-gradient\(90deg\,var\(--color-background-4\)\,\#ff36a0\,\#ff9238\,\#ff5350\,\#ff6f00\,\#ff36a0\,\#ff9238\,\#ff5350\,\#ff6f00\,var\(--color-background-4\)\)\] {
    background-image: linear-gradient(var(--color-background-4)), linear-gradient(#121213 0%, #12121399 80%, #12121300), linear-gradient(90deg, var(--color-background-4), #ff36a0, #ff9238, #ff5350, #ff6f00, #ff36a0, #ff9238, #ff5350, #ff6f00, var(--color-background-4));
  }

  .bg-\[radial-gradient\(65\.52\%_100\.25\%_at_15\.82\%_5\.75\%\,rgba\(141\,89\,255\,0\.2\)_0\%\,rgba\(141\,89\,255\,0\.00\)_59\.03\%\)\] {
    background-image: radial-gradient(65.52% 100.25% at 15.82% 5.75%, #ff36a033 0%, #ff36a000 59.03%);
  }

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

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

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

  .from-\[\#0D1017\] {
    --tw-gradient-from: #0d1017;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#FF535000\] {
    --tw-gradient-from: #ff535000;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#FF36A000\] {
    --tw-gradient-from: #ff36a000;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#FF36A066\] {
    --tw-gradient-from: #ff36a066;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-\[\#4D338B00\] {
    --tw-gradient-from: #4d338b00;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-30\% {
    --tw-gradient-from-position: 30%;
  }

  .from-40\% {
    --tw-gradient-from-position: 40%;
  }

  .from-\[10\.09\%\] {
    --tw-gradient-from-position: 10.09%;
  }

  .to-\[\#FF5350\] {
    --tw-gradient-to: #ff5350;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#FF36A000\] {
    --tw-gradient-to: #ff36a000;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#FF36A0\] {
    --tw-gradient-to: #ff36a0;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#4D338B\] {
    --tw-gradient-to: #4d338b;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#11141D00\] {
    --tw-gradient-to: #11141d00;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#FFF\] {
    --tw-gradient-to: #fff;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-background-7 {
    --tw-gradient-to: var(--color-background-7);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-100\% {
    --tw-gradient-to-position: 100%;
  }

  .to-\[55\.05\%\] {
    --tw-gradient-to-position: 55.05%;
  }

  .to-\[60\.6\%\] {
    --tw-gradient-to-position: 60.6%;
  }

  .to-\[69\.05\%\] {
    --tw-gradient-to-position: 69.05%;
  }

  .to-\[89\.05\%\] {
    --tw-gradient-to-position: 89.05%;
  }

  .to-\[90\.05\%\] {
    --tw-gradient-to-position: 90.05%;
  }

  .to-\[99\.05\%\] {
    --tw-gradient-to-position: 99.05%;
  }

  .bg-\[length\:400\%\] {
    background-size: 400%;
  }

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

  .\[background-clip\:padding-box\,border-box\,border-box\] {
    background-clip: padding-box, border-box, border-box;
  }

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

  .bg-no-repeat {
    background-repeat: no-repeat;
  }

  .\[background-origin\:border-box\] {
    background-origin: border-box;
  }

  .\!fill-opai-purple {
    fill: var(--color-opai-purple) !important;
  }

  .fill-\[\#FF6F00\] {
    fill: #ff6f00;
  }

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

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

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

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

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

  .\!stroke-background-7 {
    stroke: var(--color-background-7) !important;
  }

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

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

  .stroke-opai-blue\/60 {
    stroke: #4d338b99;
  }

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

  .stroke-opai-green\/60 {
    stroke: #ff36a099;
  }

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

  .stroke-opai-lemon\/60 {
    stroke: #ff6f0099;
  }

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

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

  .stroke-opai-purple\/60 {
    stroke: #ff36a099;
  }

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

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

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

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

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

  .stroke-\[1\.5px\] {
    stroke-width: 1.5px;
  }

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

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

  .object-center {
    object-position: center;
  }

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

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

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

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

  .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-10 {
    padding: calc(var(--spacing) * 10);
  }

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

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

  .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-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

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

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

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

  .px-\[14px\] {
    padding-inline: 14px;
  }

  .px-\[18px\] {
    padding-inline: 18px;
  }

  .px-\[29px\] {
    padding-inline: 29px;
  }

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

  .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-7 {
    padding-block: calc(var(--spacing) * 7);
  }

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

  .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-20 {
    padding-block: calc(var(--spacing) * 20);
  }

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

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

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

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

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

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

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

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

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

  .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-10\.5 {
    padding-top: calc(var(--spacing) * 10.5);
  }

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

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

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

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

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

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

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

  .pt-\[26px\] {
    padding-top: 26px;
  }

  .pt-\[27px\] {
    padding-top: 27px;
  }

  .pt-\[57px\] {
    padding-top: 57px;
  }

  .pt-\[70px\] {
    padding-top: 70px;
  }

  .pr-0\.5 {
    padding-right: calc(var(--spacing) * .5);
  }

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

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

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

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

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

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

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

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

  .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-10\.5 {
    padding-bottom: calc(var(--spacing) * 10.5);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pl-\[18px\] {
    padding-left: 18px;
  }

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

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

  .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-6 {
    font-family: var(--font-instrument-serif);
  }

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

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

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

  .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-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-is-heading-6 {
    font-size: var(--text-is-heading-6);
    line-height: var(--tw-leading, var(--text-is-heading-6--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-it-heading-6 {
    font-size: var(--text-it-heading-6);
    line-height: var(--tw-leading, var(--text-it-heading-6--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-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-\[8px\] {
    font-size: 8px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .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\.72px\] {
    --tw-tracking: -.72px;
    letter-spacing: -.72px;
  }

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

  .tracking-\[22\.48px\] {
    --tw-tracking: 22.48px;
    letter-spacing: 22.48px;
  }

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

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

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

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

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

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

  .text-background-6\/50 {
    color: #0d101780;
  }

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

  .text-background-6\/80 {
    color: #0d1017cc;
  }

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

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

  .text-background-7\/50 {
    color: #f8f9fa80;
  }

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

  .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-13\/50 {
    color: #0d0d1280;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-background-13\/50 {
      color: color-mix(in oklab, var(--color-background-13) 50%, 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-black {
    color: var(--color-black);
  }

  .text-opai-blue\/60 {
    color: #4d338b99;
  }

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

  .text-opai-green\/60 {
    color: #ff36a099;
  }

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

  .text-opai-lemon\/60 {
    color: #ff6f0099;
  }

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

  .text-opai-purple\/60 {
    color: #ff36a099;
  }

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

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

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

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/20 {
      color: color-mix(in oklab, var(--color-white) 20%, 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);
    }
  }

  .capitalize {
    text-transform: capitalize;
  }

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

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

  .opacity-0 {
    opacity: 0;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-100 {
    opacity: 1;
  }

  .bg-blend-lighten {
    background-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-\[0_3px_18px_0_rgba\(141\,89\,255\,0\.80\)\] {
    --tw-shadow: 0 3px 18px 0 var(--tw-shadow-color, #ff36a0cc);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[40px_24px_94px_3px_rgba\(141\,89\,255\,0\.24\)\] {
    --tw-shadow: 40px 24px 94px 3px var(--tw-shadow-color, #ff36a03d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--button-shadow\)\] {
    --tw-shadow: var(--button-shadow);
    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-\[8px\] {
    --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-4 {
    --tw-ring-color: var(--color-background-4);
  }

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

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

  .saturate-50 {
    --tw-saturate: saturate(50%);
    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-\[5\.5px\] {
    --tw-backdrop-blur: blur(5.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-\[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-\[20px\] {
    --tw-backdrop-blur: blur(20px);
    -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-\[28px\] {
    --tw-backdrop-blur: blur(28px);
    -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-\[32px\] {
    --tw-backdrop-blur: blur(32px);
    -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));
  }

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

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[border\:calc\(0\.125rem\)_solid_transparent\] {
    border: .125rem solid #0000;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  @media (hover: hover) {
    .group-hover\:top-5:is(:where(.group):hover *) {
      top: calc(var(--spacing) * 5);
    }

    .group-hover\:left-5:is(:where(.group):hover *) {
      left: calc(var(--spacing) * 5);
    }

    .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-2:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 2);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-3:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 3);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-6:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 6);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-x-\[2px\]:is(:where(.group):hover *) {
      --tw-translate-x: 2px;
      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\:scale-75:is(:where(.group):hover *) {
      --tw-scale-x: 75%;
      --tw-scale-y: 75%;
      --tw-scale-z: 75%;
      scale: var(--tw-scale-x) var(--tw-scale-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-104:is(:where(.group):hover *) {
      --tw-scale-x: 104%;
      --tw-scale-y: 104%;
      --tw-scale-z: 104%;
      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\:scale-140:is(:where(.group):hover *) {
      --tw-scale-x: 140%;
      --tw-scale-y: 140%;
      --tw-scale-z: 140%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:rotate-0:is(:where(.group):hover *) {
      rotate: none;
    }

    .group-hover\:rotate-1:is(:where(.group):hover *) {
      rotate: 1deg;
    }

    .group-hover\:rotate-10:is(:where(.group):hover *) {
      rotate: 10deg;
    }

    .group-hover\:border-stroke-3\/40:is(:where(.group):hover *) {
      border-color: #7c8ea566;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-stroke-3\/40:is(:where(.group):hover *) {
        border-color: color-mix(in oklab, var(--color-stroke-3) 40%, transparent);
      }
    }

    .group-hover\:bg-background-2\/10:is(:where(.group):hover *) {
      background-color: #323a441a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-background-2\/10:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-background-2) 10%, transparent);
      }
    }

    .group-hover\:bg-background-3:is(:where(.group):hover *) {
      background-color: var(--color-background-3);
    }

    .group-hover\:stroke-white:is(:where(.group):hover *) {
      stroke: var(--color-white);
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\:saturate-100:is(:where(.group):hover *) {
      --tw-saturate: saturate(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, );
    }

    .group-hover\/nav-item\:w-42:is(:where(.group\/nav-item):hover *) {
      width: calc(var(--spacing) * 42);
    }

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

    .group-hover\/nav-item\:opacity-80:is(:where(.group\/nav-item):hover *) {
      opacity: .8;
    }
  }

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

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

  .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\:bottom-\[-25\%\]:before {
    content: var(--tw-content);
    bottom: -25%;
  }

  .before\:left-1\/2:before {
    content: var(--tw-content);
    left: 50%;
  }

  .before\:left-\[26\%\]:before {
    content: var(--tw-content);
    left: 26%;
  }

  .before\:-z-10:before {
    content: var(--tw-content);
    z-index: calc(10 * -1);
  }

  .before\:block:before {
    content: var(--tw-content);
    display: block;
  }

  .before\:h-2\/5:before {
    content: var(--tw-content);
    height: 40%;
  }

  .before\:h-\[1px\]:before {
    content: var(--tw-content);
    height: 1px;
  }

  .before\:w-4\/5:before {
    content: var(--tw-content);
    width: 80%;
  }

  .before\:w-\[43px\]:before {
    content: var(--tw-content);
    width: 43px;
  }

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

  .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\:bg-background-13\/90:before {
    content: var(--tw-content);
    background-color: #0d0d12e6;
  }

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

  .before\:bg-\[linear-gradient\(90deg\,\#ff36a0\,\#ff36a0\,\#ff9238\,\#ff5350\,\#ff6f00\,\#ff36a0\,\#ff36a0\,\#ff9238\,\#ff5350\,\#ff6f00\,\#ff36a0\)\]:before {
    content: var(--tw-content);
    background-image: linear-gradient(90deg, #ff36a0, #ff36a0, #ff9238, #ff5350, #ff6f00, #ff36a0, #ff36a0, #ff9238, #ff5350, #ff6f00, #ff36a0);
  }

  .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\:bg-\[length\:400\%\]:before {
    content: var(--tw-content);
    background-size: 400%;
  }

  .before\:\[filter\:blur\(0\.9rem\)\]:before {
    content: var(--tw-content);
    filter: blur(.9rem);
  }

  .before\:transition-all:before {
    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));
  }

  .before\:duration-500:before {
    content: var(--tw-content);
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .before\:ease-in-out:before {
    content: var(--tw-content);
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .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\:h-\[1px\]: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-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

  .after\:bg-background-13\/90:after {
    content: var(--tw-content);
    background-color: #0d0d12e6;
  }

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

  .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-\[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\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .peer-checked\:after\:opacity-100:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    opacity: 1;
  }

  @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\:rotate-180:hover {
      rotate: 180deg;
    }

    .hover\:border-background-4:hover {
      border-color: var(--color-background-4);
    }

    .hover\:border-stroke-3:hover {
      border-color: var(--color-stroke-3);
    }

    .hover\:border-white:hover {
      border-color: var(--color-white);
    }

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

    .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-white:hover {
      background-color: var(--color-white);
    }

    .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-4:hover {
      color: var(--color-background-4);
    }

    .hover\:text-background-5:hover {
      color: var(--color-background-5);
    }

    .hover\:text-background-13:hover {
      color: var(--color-background-13);
    }

    .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\:before\:filter-\[blur\(0\.7rem\)\]:hover:before {
      content: var(--tw-content);
      filter: blur(.7rem);
    }
  }

  .focus\:border-stroke-1:focus {
    border-color: var(--color-stroke-1);
  }

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

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

  .focus\:ring-\[0\.5px\]:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(.5px + 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);
  }

  .focus\:ring-stroke-3\/50:focus {
    --tw-ring-color: #7c8ea580;
  }

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

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

  .focus\:outline-stroke-3:focus {
    outline-color: var(--color-stroke-3);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-\[1px\]:focus-visible {
    --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);
  }

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

  .disabled\:opacity-100:disabled {
    opacity: 1;
  }

  @media not all and (min-width: 800px) {
    .max-\[800px\]\:flex-col {
      flex-direction: column;
    }
  }

  @media not all and (min-width: 400px) {
    .max-\[400px\]\:-top-4 {
      top: calc(var(--spacing) * -4);
    }

    .max-\[400px\]\:-right-4 {
      right: calc(var(--spacing) * -4);
    }

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

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

    .max-\[400px\]\:rounded-2xl {
      border-radius: var(--radius-2xl);
    }

    .max-\[400px\]\:rounded-lg {
      border-radius: var(--radius-lg);
    }
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:h-\[280px\] {
      height: 280px;
    }

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

  @media not all and (min-width: 48rem) {
    .max-md\:mx-auto {
      margin-inline: auto;
    }

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

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

    .max-md\:w-\[90\%\] {
      width: 90%;
    }

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

    .max-md\:items-center {
      align-items: center;
    }

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

    .max-md\:object-cover {
      object-fit: cover;
    }

    .max-md\:text-left {
      text-align: left;
    }

    .max-md\:leading-\[110\%\] {
      --tw-leading: 110%;
      line-height: 110%;
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:w-\[85\%\] {
      width: 85%;
    }
  }

  @media (min-width: 500px) {
    .min-\[500px\]\:text-background-13\/50 {
      color: #0d0d1280;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .min-\[500px\]\:text-background-13\/50 {
        color: color-mix(in oklab, var(--color-background-13) 50%, transparent);
      }
    }

    .min-\[500px\]\:text-background-13\/90 {
      color: #0d0d12e6;
    }

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

  @media (min-width: 550px) {
    .min-\[550px\]\:-bottom-119 {
      bottom: calc(var(--spacing) * -119);
    }
  }

  @media (min-width: 800px) {
    .min-\[800px\]\:gap-x-2 {
      column-gap: calc(var(--spacing) * 2);
    }
  }

  @media (min-width: 1050px) {
    .min-\[1050px\]\:\!p-4\.5 {
      padding: calc(var(--spacing) * 4.5) !important;
    }
  }

  @media (min-width: 1100px) {
    .min-\[1100px\]\:\!p-5 {
      padding: calc(var(--spacing) * 5) !important;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:\!p-10\.5 {
      padding: calc(var(--spacing) * 10.5) !important;
    }
  }

  @media (min-width: 1920px) {
    .min-\[1920px\]\:-bottom-5 {
      bottom: calc(var(--spacing) * -5);
    }
  }

  @media (min-width: 1930px) {
    .min-\[1930px\]\:\!bottom-64 {
      bottom: calc(var(--spacing) * 64) !important;
    }

    .min-\[1930px\]\:\!bottom-84 {
      bottom: calc(var(--spacing) * 84) !important;
    }
  }

  @media (min-width: 40rem) {
    .sm\:-right-\[21\%\] {
      right: -21%;
    }

    .sm\:-bottom-\[28\%\] {
      bottom: -28%;
    }

    .sm\:left-\[100px\] {
      left: 100px;
    }

    .sm\:col-span-4 {
      grid-column: span 4 / span 4;
    }

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

    .sm\:block {
      display: block;
    }

    .sm\:hidden {
      display: none;
    }

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

    .sm\:w-1\/2 {
      width: 50%;
    }

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

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

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

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

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

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

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

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

    .sm\:pt-36 {
      padding-top: calc(var(--spacing) * 36);
    }

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

    .sm\:text-sora-heading-4, .sm\:text-sora-heading-5 {
      font-family: var(--font-sora);
    }

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

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

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

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

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

    .sm\:leading-\[180px\] {
      --tw-leading: 180px;
      line-height: 180px;
    }

    .sm\:tracking-\[27\.48px\] {
      --tw-tracking: 27.48px;
      letter-spacing: 27.48px;
    }

    .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\:-bottom-97 {
      bottom: calc(var(--spacing) * -97);
    }

    .md\:-bottom-\[24\%\] {
      bottom: -24%;
    }

    .md\:bottom-10\.5 {
      bottom: calc(var(--spacing) * 10.5);
    }

    .md\:-left-1 {
      left: calc(var(--spacing) * -1);
    }

    .md\:-left-\[100px\] {
      left: -100px;
    }

    .md\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .md\:col-start-4 {
      grid-column-start: 4;
    }

    .md\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

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

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

    .md\:mt-24 {
      margin-top: calc(var(--spacing) * 24);
    }

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

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

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

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

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

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

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

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

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

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

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

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

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

    .md\:w-auto {
      width: auto;
    }

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

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

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

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

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

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

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

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

    .md\:basis-1\/2 {
      flex-basis: 50%;
    }

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

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

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

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

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

    :where(.md\: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(.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-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-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-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-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(.md\:space-y-19\.5 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 19.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 19.5) * calc(1 - var(--tw-space-y-reverse)));
    }

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

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

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

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

    .md\:gap-y-0 {
      row-gap: calc(var(--spacing) * 0);
    }

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

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

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

    .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\:to-\[80\.05\%\] {
      --tw-gradient-to-position: 80.05%;
    }

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

    .md\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

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

    .md\:p-11 {
      padding: calc(var(--spacing) * 11);
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

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

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

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

    .md\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .md\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

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

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

    .md\:pt-\[80px\] {
      padding-top: 80px;
    }

    .md\:pr-8 {
      padding-right: calc(var(--spacing) * 8);
    }

    .md\:pb-0 {
      padding-bottom: calc(var(--spacing) * 0);
    }

    .md\:pb-28 {
      padding-bottom: calc(var(--spacing) * 28);
    }

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

    .md\:text-sora-heading-2, .md\:text-sora-heading-3, .md\:text-sora-heading-4, .md\:text-sora-heading-5 {
      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-sora-heading-4 {
      font-size: var(--text-sora-heading-4);
      line-height: var(--tw-leading, var(--text-sora-heading-4--line-height));
    }

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

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

    .md\:tracking-\[45\.48px\] {
      --tw-tracking: 45.48px;
      letter-spacing: 45.48px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:-top-2 {
      top: calc(var(--spacing) * -2);
    }

    .lg\:-top-4 {
      top: calc(var(--spacing) * -4);
    }

    .lg\:top-\[120px\] {
      top: 120px;
    }

    .lg\:-right-\[14\%\] {
      right: -14%;
    }

    .lg\:right-5 {
      right: calc(var(--spacing) * 5);
    }

    .lg\:right-40 {
      right: calc(var(--spacing) * 40);
    }

    .lg\:right-100 {
      right: calc(var(--spacing) * 100);
    }

    .lg\:right-\[52px\] {
      right: 52px;
    }

    .lg\:-bottom-22 {
      bottom: calc(var(--spacing) * -22);
    }

    .lg\:-bottom-72 {
      bottom: calc(var(--spacing) * -72);
    }

    .lg\:-bottom-75 {
      bottom: calc(var(--spacing) * -75);
    }

    .lg\:-bottom-\[27\%\] {
      bottom: -27%;
    }

    .lg\:-left-5 {
      left: calc(var(--spacing) * -5);
    }

    .lg\:left-12 {
      left: calc(var(--spacing) * 12);
    }

    .lg\:left-\[120px\] {
      left: 120px;
    }

    .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\:col-start-5 {
      grid-column-start: 5;
    }

    .lg\:col-start-auto {
      grid-column-start: auto;
    }

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

    .lg\:my-14 {
      margin-block: calc(var(--spacing) * 14);
    }

    .lg\:mt-18 {
      margin-top: calc(var(--spacing) * 18);
    }

    .lg\:mt-28 {
      margin-top: calc(var(--spacing) * 28);
    }

    .lg\:mt-39 {
      margin-top: calc(var(--spacing) * 39);
    }

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

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

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

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

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:size-18 {
      width: calc(var(--spacing) * 18);
      height: calc(var(--spacing) * 18);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .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-12 {
      gap: calc(var(--spacing) * 12);
    }

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

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

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

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

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

    .lg\:gap-x-15 {
      column-gap: calc(var(--spacing) * 15);
    }

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

    .lg\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .lg\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .lg\:p-14 {
      padding: calc(var(--spacing) * 14);
    }

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

    .lg\:p-20 {
      padding: calc(var(--spacing) * 20);
    }

    .lg\:p-\[42px\] {
      padding: 42px;
    }

    .lg\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

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

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

    .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-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .lg\:py-30 {
      padding-block: calc(var(--spacing) * 30);
    }

    .lg\:py-36 {
      padding-block: calc(var(--spacing) * 36);
    }

    .lg\:py-39 {
      padding-block: calc(var(--spacing) * 39);
    }

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

    .lg\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }

    .lg\:pt-50 {
      padding-top: calc(var(--spacing) * 50);
    }

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

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

    .lg\:pb-39 {
      padding-bottom: calc(var(--spacing) * 39);
    }

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

    .lg\:pl-5 {
      padding-left: calc(var(--spacing) * 5);
    }

    .lg\:pl-6 {
      padding-left: calc(var(--spacing) * 6);
    }

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

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

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

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

    .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-sora-heading-5 {
      font-size: var(--text-sora-heading-5);
      line-height: var(--tw-leading, var(--text-sora-heading-5--line-height));
    }

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

    .lg\:tracking-\[64\.48px\] {
      --tw-tracking: 64.48px;
      letter-spacing: 64.48px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:absolute {
      position: absolute;
    }

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

    .xl\:top-\[105px\] {
      top: 105px;
    }

    .xl\:-right-\[34\%\] {
      right: -34%;
    }

    .xl\:right-25 {
      right: calc(var(--spacing) * 25);
    }

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

    .xl\:right-\[69px\] {
      right: 69px;
    }

    .xl\:-bottom-17 {
      bottom: calc(var(--spacing) * -17);
    }

    .xl\:-bottom-47 {
      bottom: calc(var(--spacing) * -47);
    }

    .xl\:-bottom-\[94\%\] {
      bottom: -94%;
    }

    .xl\:left-4 {
      left: calc(var(--spacing) * 4);
    }

    .xl\:left-\[65px\] {
      left: 65px;
    }

    .xl\:left-\[233px\] {
      left: 233px;
    }

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

    .xl\:col-span-6 {
      grid-column: span 6 / span 6;
    }

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

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

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

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

    .xl\:block {
      display: block;
    }

    .xl\:flex {
      display: flex;
    }

    .xl\:hidden {
      display: none;
    }

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

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

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

    .xl\:h-full {
      height: 100%;
    }

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

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

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

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

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

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

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

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

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

    .xl\:basis-\[408px\] {
      flex-basis: 408px;
    }

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

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

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

    :where(.xl\: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(.xl\: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)));
    }

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

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

    .xl\:gap-x-\[100px\] {
      column-gap: 100px;
    }

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

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

    .xl\:p-14 {
      padding: calc(var(--spacing) * 14);
    }

    .xl\:p-18 {
      padding: calc(var(--spacing) * 18);
    }

    .xl\:p-20 {
      padding: calc(var(--spacing) * 20);
    }

    .xl\:p-28 {
      padding: calc(var(--spacing) * 28);
    }

    .xl\:p-\[100px\] {
      padding: 100px;
    }

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

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

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

    .xl\:py-28 {
      padding-block: calc(var(--spacing) * 28);
    }

    .xl\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

    .xl\:py-34 {
      padding-block: calc(var(--spacing) * 34);
    }

    .xl\:py-39 {
      padding-block: calc(var(--spacing) * 39);
    }

    .xl\:py-40 {
      padding-block: calc(var(--spacing) * 40);
    }

    .xl\:py-44 {
      padding-block: calc(var(--spacing) * 44);
    }

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

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

    .xl\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }

    .xl\:pt-50 {
      padding-top: calc(var(--spacing) * 50);
    }

    .xl\:pb-0 {
      padding-bottom: calc(var(--spacing) * 0);
    }

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

    .xl\:pb-34 {
      padding-bottom: calc(var(--spacing) * 34);
    }

    .xl\:pb-44 {
      padding-bottom: calc(var(--spacing) * 44);
    }

    .xl\:pl-10 {
      padding-left: calc(var(--spacing) * 10);
    }

    .xl\:text-sora-heading-2, .xl\:text-sora-heading-3 {
      font-family: var(--font-sora);
    }

    .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\:leading-\[240px\] {
      --tw-leading: 240px;
      line-height: 240px;
    }

    .xl\:tracking-\[-10px\] {
      --tw-tracking: -10px;
      letter-spacing: -10px;
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:-top-12 {
      top: calc(var(--spacing) * -12);
    }

    .\32 xl\:-bottom-7 {
      bottom: calc(var(--spacing) * -7);
    }

    .\32 xl\:bottom-18 {
      bottom: calc(var(--spacing) * 18);
    }

    .\32 xl\:mt-39 {
      margin-top: calc(var(--spacing) * 39);
    }

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

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

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

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

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

    .\32 xl\:gap-x-18 {
      column-gap: calc(var(--spacing) * 18);
    }

    .\32 xl\:gap-x-25 {
      column-gap: calc(var(--spacing) * 25);
    }

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

    .\32 xl\:p-25 {
      padding: calc(var(--spacing) * 25);
    }

    .\32 xl\:p-39 {
      padding: calc(var(--spacing) * 39);
    }

    .\32 xl\:py-39 {
      padding-block: calc(var(--spacing) * 39);
    }

    .\32 xl\:py-44 {
      padding-block: calc(var(--spacing) * 44);
    }

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

    .\32 xl\:pt-44 {
      padding-top: calc(var(--spacing) * 44);
    }

    .\32 xl\:pt-50 {
      padding-top: calc(var(--spacing) * 50);
    }

    .\32 xl\:pb-44 {
      padding-bottom: calc(var(--spacing) * 44);
    }

    .\32 xl\:tracking-\[75\.48px\] {
      --tw-tracking: 75.48px;
      letter-spacing: 75.48px;
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:bg-background-5 {
      background-color: var(--color-background-5);
    }

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

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-2\.5 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }
}

.nav-item {
  position: relative;
}

.nav-item .nav-arrow {
  transition: transform .3s;
}

.nav-item.active .nav-arrow, .nav-item.menu-active .nav-arrow {
  transform: rotate(180deg);
}

.nav-item.active .nav-item-line, .nav-item.menu-active .nav-item-line {
  width: 10.5rem;
}

.nav-item.active .nav-item-gradient, .nav-item.menu-active .nav-item-gradient {
  opacity: .8;
}

.nav-item.active .nav-item-text, .nav-item.menu-active .nav-item-text {
  color: #fff;
}

.nav-item.active .nav-arrow-path, .nav-item.menu-active .nav-arrow-path {
  stroke: #fff;
}

header nav ul li.current-page .nav-item-line {
  width: 10.5rem;
}

header nav ul li.current-page .nav-item-gradient {
  opacity: .8;
}

header nav ul li.current-page .nav-item-text {
  color: #fff;
}

header nav ul li.current-page .nav-arrow-path {
  stroke: #fff;
}

.mega-menu, .dropdown-menu, .customer-dropdown-menu {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all .3s;
  transform: translateY(10px);
}

.mega-menu.active, .dropdown-menu.active, .customer-dropdown-menu.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu-bridge, .dropdown-menu-bridge {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.nav-item.active .mega-menu-bridge, .nav-item.active .dropdown-menu-bridge {
  opacity: 1;
  pointer-events: auto;
}

.mega-menu.active, .dropdown-menu.active {
  transform: translateY(0);
}

.mega-menu, .dropdown-menu, .customer-dropdown-menu {
  transition: opacity .3s, transform .3s, pointer-events 0s .3s;
}

.mega-menu.active, .dropdown-menu.active, .customer-dropdown-menu.active {
  transition: opacity .3s, transform .3s, pointer-events;
}

.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
}

.mega-menu, .dropdown-menu, .customer-dropdown-menu {
  z-index: 50;
}

@media (max-width: 1279px) {
  .mega-menu, .dropdown-menu {
    display: none !important;
  }
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

@keyframes menuSlideOut {
  from {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(10px)scale(.98);
  }
}

.mega-menu.active, .dropdown-menu.active {
  animation: .3s forwards menuSlideIn;
}

.nav-item:focus-within .nav-arrow {
  transform: rotate(180deg);
}

.nav-item:focus-within .mega-menu, .nav-item:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.accordion-item.active {
  background-color: var(--activeBg);
  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: none;
}

@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: none;
}

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


[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), #4d338b66, 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), #4d338bb3, 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), #ff36a080, 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), #ff36a0cc, 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));
  }
}

@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}

:root {
  --swiper-theme-color: #4d338b;
}

:host {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.swiper {
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  z-index: 1;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
  display: flex;
  position: relative;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
  display: block;
  position: relative;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}

.swiper-css-mode > .swiper-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: auto;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  pointer-events: none;
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-3d .swiper-slide-shadow {
  background: #00000026;
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, #00000080, #0000);
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, #00000080, #0000);
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, #00000080, #0000);
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(#00000080, #0000);
}

.swiper-lazy-preloader {
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-top-color: #0000;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: 1s linear infinite swiper-preloader-spin;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next, .swiper-button-prev {
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-button-next svg, .swiper-button-prev svg {
  object-fit: contain;
  transform-origin: center;
  width: 100%;
  height: 100%;
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  text-transform: none !important;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-pagination {
  text-align: center;
  z-index: 10;
  transition: opacity .3s;
  position: absolute;
  transform: translate3d(0, 0, 0);
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  width: 100%;
  left: 0;
}

.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  transform: scale(.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  display: inline-block;
}

button.swiper-pagination-bullet {
  box-shadow: none;
  appearance: none;
  border: none;
  margin: 0;
  padding: 0;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  width: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, top .2s;
  display: inline-block;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, left .2s;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, right .2s;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, #00000040);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0);
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: 100% 0;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  top: 0;
  left: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  top: 0;
  left: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, #0000001a);
  position: relative;
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  position: absolute;
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  position: absolute;
}

.swiper-scrollbar-drag {
  background: var(--swiper-scrollbar-drag-bg-color, #00000080);
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification {
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
  position: absolute;
  top: 0;
  left: 0;
}

.swiper-free-mode > .swiper-wrapper {
  margin: 0 auto;
  transition-timing-function: ease-out;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-flow: column wrap;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  opacity: .6;
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  filter: blur(50px);
  background: #000;
  position: absolute;
  inset: 0;
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  transition-property: transform, opacity, height;
  overflow: hidden;
}

.swiper.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: bottom;
  backface-visibility: hidden;
  overflow: hidden;
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@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-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@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-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-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  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-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
}


/* ══════════════════════════════════════════════════════════════
   snoopstar — Anpassungen am Theme
   Bewusst am Ende und klein gehalten, damit der Theme-Aufbau
   nachvollziehbar bleibt. Jede Regel mit Begruendung.
   ══════════════════════════════════════════════════════════════ */

/* Die Navigationspille ist im Theme 818 px breit und traegt fuenf
   kurze englische Labels. Wir haben sechs deutsche — „Trusted Partner"
   allein ist so lang wie zwei Theme-Punkte. */
@media (min-width: 1024px) {
  nav.header-one { max-width: 1080px !important; }
}

/* Das snoopstar-Logo ist ein liegendes Lockup (1,41 : 1) und braucht
   56 px Hoehe, um lesbar zu bleiben — der Theme-Platz war 44 x 44 px
   quadratisch. Messung in 08_Assets/logos/LOGO.md. */
nav.header-one > a[aria-label="snoopstar Startseite"] { height: 56px; }

/* Zahlen tabellarisch setzen, damit die Ziffernrollen beim Zaehlen
   nicht in der Breite springen. */
[data-counter] { font-variant-numeric: tabular-nums; }

/* Die Sektionen 2 und 4 sind getauscht (die vier Einstiege stehen jetzt
   direkt hinter dem Hero). Das Theme gibt der ersten Sektion nach dem
   Hero ein groesseres Kopf-Padding, damit sie unter dem Blend-Uebergang
   sitzt — das wandert mit. */
@media (min-width: 1024px) {
  section[aria-labelledby="innovative-solutions-heading"] { padding-top: 200px; }
  section.our-impact-section { padding-top: 120px; }
}


/* Die vier Einstiege stehen als 2 x 2, nicht als 3 + 1. Das Theme
   legt vier Karten bei >=1024px in ein 12-Spalten-Raster mit
   col-span-4 und zentriert die vierte — gewuenscht sind zwei Reihen. */
@media (min-width: 1024px) {
  section[aria-labelledby="innovative-solutions-heading"] .grid-cols-12 > * {
    grid-column: span 6 / span 6 !important;
    grid-column-start: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   snoopstar — Feedback-Runde 03.09.2026
   ═══════════════════════════════════════════════════════════════ */

/* Logo in der Navigationspille.
   Die eigentliche Größe steht INLINE im Markup und wird von
   logo_kleiner() umgeschrieben — Inline-Styles gewinnen gegen CSS.
   Hier nur das Sicherheitsnetz und die Pillenhöhe.

   Logo 24 px in der 58-px-Pille = 17 px Luft oben und unten.
   Wichtig: die Pille bezog ihre Höhe vom 56-px-Logo. Ohne feste Höhe
   würde sie mit dem kleineren Logo auf die Höhe des CTA-Buttons
   zusammenfallen. Deshalb 58 px explizit. */
@media (min-width: 1024px) {
  nav.header-one { min-height: 58px; }
}
/* Die Marke steht MITTIG im linken Freiraum, nicht an der Kante.
   Der Slot ist 168 px breit, das Lockup 44 px — bleiben 62 px auf jeder
   Seite. Vorher klebte es mit 6 px am linken Pillenrand. */
nav.header-one a[aria-label*="Startseite"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  padding-inline: 0;
  padding-block: 0;
}
@media (max-width: 1023px) {
  nav.header-one a[aria-label*="Startseite"] { width: auto; }
}
nav.header-one a[aria-label*="Startseite"] figure,
nav.header-one a[aria-label*="Startseite"] img { display: block; }

/* Der CTA in der Navigationsleiste trägt den Verlauf.
   Verlaufsregel Platz 1: primärer CTA, Verlauf als Füllung, Schrift
   SCHWARZ. Der Rosa-Schatten des Themes fällt weg — Verlauf UND
   farbiger Schein ist einmal zu viel. */
header a[href*="demo.html"] {
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
header a[href*="demo.html"] .text-background-5,
header a[href*="demo.html"] div,
header a[href*="demo.html"] span { color: #000000 !important; }
header a[href*="demo.html"]:hover { filter: brightness(1.08); }

/* Copy über die Breite des Satzspiegels.
   Achtung, bewusste Entscheidung: bei 1250 px und 18 px Schrift sind das
   rund 135 Zeichen pro Zeile. Lesetypografisch empfohlen sind 60–75.
   Wenn es beim Ansehen zu weit läuft, ist die Alternative eine Zeile:
   max-width: 860px (rund 90 Zeichen). */
.copy-satzspiegel { max-width: none !important; }
@media (min-width: 1024px) {
  .copy-satzspiegel { max-width: 1250px !important; }
}

/* Verläufe: der Versatz von gestern ist ZURÜCKGENOMMEN.
   Jonas 04.09.2026: "das sieht jetzt leider komisch aus."
   Die Verlaufsflächen des Themes liegen wieder dort, wo das Theme sie
   vorgesehen hat — hinter den Headlines. Das ist im Original so gebaut
   und funktioniert, weil die Fläche extrem weich ausläuft. Kein
   translateY, keine Maske.
   Wenn es an einer einzelnen Stelle doch störend wirkt, ist die
   Alternative kein globaler Versatz, sondern mehr Sektionspadding an
   genau dieser Stelle. */

/* ── Die vier Einstiege als VERLAUFSBAND ────────────────────────
   Umsetzung des Artboards "Einstiege 2a - Verlaufsband.dc.html".

   Die vier Karten teilen EINEN Verlauf: background-size 400 % und
   eine wandernde background-position pro Karte. Nebeneinander lesen
   sie als eine durchgehende Flaeche Magenta -> Orange.
   Schmaler Abstand (10 px) mit Absicht - er haelt das Band zusammen.

   Schrift SCHWARZ auf dem Verlauf (Weiss faellt am orangen Ende mit
   2,79:1 durch), Button umgekehrt schwarz mit weissem Pfeilkreis. */
.einstieg-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 64px;
}
@media (max-width: 1023px) {
  .einstieg-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 599px) {
  .einstieg-band { grid-template-columns: 1fr; }
}

.einstieg-karte {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 32px;
  border-radius: 26px;
  color: #000;
  text-decoration: none;
  background-image: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
  background-size: 400% 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.einstieg-karte:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(255, 54, 160, .34) !important;
}
.einstieg-nr {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 44px; line-height: 1; letter-spacing: -2px; font-weight: 500;
}
.einstieg-bereich {
  margin-top: 22px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.einstieg-titel {
  margin: 14px 0 0;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 30px; line-height: 1.14; letter-spacing: -1.1px; font-weight: 500;
  color: #000;
}
.einstieg-copy {
  margin: 14px 0 0;
  font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .72);
}
.einstieg-btn {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  background: #000; color: #fff;
  font-size: 16px; font-weight: 500;
}
.einstieg-pfeil {
  width: 32px; height: 32px; border-radius: 999px;
  background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 auto;
}

/* Die Sektion steht auf reinem Weiss, wie im Artboard - nicht auf
   #F8F9FA. Das Band braucht den harten Weissgrund, sonst verliert der
   Verlauf an den Kanten. */
section[aria-labelledby="innovative-solutions-heading"] { background: #FFFFFF !important; }

/* Die 2x2-Regel vom 03.09. ist damit erledigt: das 12-Spalten-Raster,
   auf das sie zielte, existiert in dieser Sektion nicht mehr. */

/* ── Die animierten Boxen unter "Own the insights." ─────────────
   ALLE Boxen einheitlich in #FF496B (Jonas, 04.09.2026). Vorher trugen
   sie die Neon-Akzente des Themes: Violett, Orange, Magenta, Magenta.
   Zwischenschritt waren vier Stufen entlang des Verlaufs - zurueck-
   genommen, eine Farbe fuer alle. #FF496B ist die Mitte des Marken-
   verlaufs #FF36A0 -> #FF6F00, also weiter systemtreu.

   Nur in dieser Sektion gescopet: opai-purple steckt auf allen zwoelf
   Seiten rund fuenfzigmal, ein globales Ueberschreiben waere zu grob.

   Die Deckkraft-Varianten sind im Theme-CSS als Hex mit Alpha
   einkompiliert und lesen keine Variable - sie werden hier direkt
   ueberschrieben. Die Beschriftung bekommt die VOLLE Farbe statt
   60 %: Magenta auf #0D1017 liegt bei 6,29:1, bei 60 % Deckkraft
   waeren es rund 3:1 und damit zu schwach. */
section[aria-labelledby="empowering-business-heading"] .bg-opai-blue\/10,
section[aria-labelledby="empowering-business-heading"] .bg-opai-lemon\/10,
section[aria-labelledby="empowering-business-heading"] .bg-opai-purple\/10,
section[aria-labelledby="empowering-business-heading"] .bg-opai-green\/10 {
  background-color: color-mix(in srgb, var(--stufe) 12%, transparent) !important;
}
section[aria-labelledby="empowering-business-heading"] .stroke-opai-blue\/60,
section[aria-labelledby="empowering-business-heading"] .stroke-opai-lemon\/60,
section[aria-labelledby="empowering-business-heading"] .stroke-opai-purple\/60,
section[aria-labelledby="empowering-business-heading"] .stroke-opai-green\/60 {
  stroke: var(--stufe) !important;
}
section[aria-labelledby="empowering-business-heading"] .text-opai-blue\/60,
section[aria-labelledby="empowering-business-heading"] .text-opai-lemon\/60,
section[aria-labelledby="empowering-business-heading"] .text-opai-purple\/60,
section[aria-labelledby="empowering-business-heading"] .text-opai-green\/60 {
  color: var(--stufe) !important;
}
/* Eine Farbe fuer alle vier Boxen. */
section[aria-labelledby="empowering-business-heading"] { --stufe: #FF496B; }

/* Die fuenf Glow-Blobs hinter den Boxen. Sie trugen alle bg-opai-purple/90
   und waren per CSS nicht zu unterscheiden - jeder hat im Markup seine
   eigene Klasse bekommen. Das Effektlicht laeuft mit den Boxen: dieselbe
   eine Farbe. */
.verlauf-glow-1, .verlauf-glow-2, .verlauf-glow-3,
.verlauf-glow-4, .verlauf-glow-5 { background-color: rgba(255, 73, 107, .9); }

/* Verlauf als Textmarker — für Passagen, die hervorstechen sollen.
   Auf dem Verlauf steht Schwarz: Weiß fällt am orangen Ende mit 2,79:1 durch. */
.mark-verlauf {
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
  color: #000;
  padding: 0.08em 0.28em;
  border-radius: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Headlines einfarbig — Sicherheitsnetz, falls das Theme irgendwo
   noch eine Deckkraft in die Headline schreibt. */
h1, h1 span, h2, h2 span, h3, h3 span { color: inherit; }
.bg-background-6 h1, .bg-background-6 h2, .bg-background-6 h3,
section:not([class*="background-7"]) h1,
section:not([class*="background-7"]) h2 { color: #ffffff; }
section[class*="background-7"] h1,
section[class*="background-7"] h2,
section[class*="background-7"] h3 { color: #0d0d12; }


/* ===============================================================
   snoopstar — Seitenkopf der Unterseiten (04.09.2026)
   Umsetzung des Artboards Main.dc.html aus der Unterseiten-Leinwand.
   Bilder: images/austausch/kopf-<seite>.jpg — dort einzeln austauschbar.
   =============================================================== */

.seitenkopf { position: relative; height: 780px; overflow: hidden; background: #0D1017; }

/* Bild als Hintergrund, nicht als <img>: fehlt die Datei, bleibt der dunkle
   Grund mit Scrim stehen und sieht gewollt aus. */
.seitenkopf-bild {
  position: absolute; inset: 0;
  background-color: #0D1017;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Scrim links -> rechts, damit die Schrift auf jedem Motiv sitzt. */
.seitenkopf-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(6,7,10,.88) 0%, rgba(6,7,10,.72) 34%,
    rgba(6,7,10,.34) 62%, rgba(6,7,10,.06) 100%);
}
.seitenkopf-inhalt { position: absolute; inset: 0; display: flex; align-items: center; z-index: 10; }
.seitenkopf-inhalt > .main-container { width: 100%; }
.seitenkopf-text { max-width: 660px; }

/* Alles im Kopf auf 100 % Weiss — keine Deckkraftstufen. */
.kopf-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px; line-height: 1.55; letter-spacing: .08em;
  text-transform: uppercase; color: #ffffff; margin: 0;
}
.kopf-h1 {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 400;
  font-size: 64px; line-height: 1.2; letter-spacing: -3.2px;
  color: #ffffff; margin: 18px 0 0;
}
.kopf-lead { font-size: 18px; line-height: 1.5; color: #ffffff; margin: 26px 0 0; max-width: 620px; }
.kopf-knoepfe { display: flex; gap: 12px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.kopf-btn-grad, .kopf-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: filter .3s cubic-bezier(0.4,0,0.2,1), border-color .3s cubic-bezier(0.4,0,0.2,1);
}
.kopf-btn-grad { background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%); color: #000; }
.kopf-btn-grad:hover { filter: brightness(1.08); }
.kopf-btn-ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.kopf-btn-ghost:hover { border-color: #fff; }

/* Die Unterkante laeuft in Weiss aus. Keine Trennlinie. */
.seitenkopf-auslauf {
  position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  pointer-events: none; z-index: 20;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 58%, #ffffff 100%);
}

@media (max-width: 1023px) {
  .seitenkopf { height: 620px; }
  .kopf-h1 { font-size: 44px; letter-spacing: -2px; }
  .seitenkopf-scrim { background: linear-gradient(90deg,
    rgba(6,7,10,.92) 0%, rgba(6,7,10,.78) 55%, rgba(6,7,10,.42) 100%); }
}
@media (max-width: 639px) {
  .seitenkopf { height: 540px; }
  .kopf-h1 { font-size: 34px; letter-spacing: -1.2px; }
  .seitenkopf-text { max-width: none; }
  .kopf-lead { font-size: 16px; }
}

/* ── Danach die weisse Sektion ────────────────────────────────────
   Reines Weiss wie im Artboard. Das Theme faerbt Text ueber Klassen
   (text-white, text-white/60) auch auf divs und spans, nicht nur auf <p> —
   deshalb greifen die Regeln ueber Attributselektoren. Unsere eigenen
   Verlaufselemente sind ausgenommen. */
/* Innenabstand auf den Systemwert 112 px. Notwendig, nicht kosmetisch:
   experiences.html hatte in der Folgesektion 0 px Innenabstand, die H2
   sass damit genau in der auslaufenden Bildkante. */
section[data-sektion="hell"] {
  background: #FFFFFF !important;
  padding-top: 112px !important;
  padding-bottom: 112px !important;
}
section[data-sektion="hell"] h1, section[data-sektion="hell"] h2,
section[data-sektion="hell"] h3, section[data-sektion="hell"] h4,
section[data-sektion="hell"] h5, section[data-sektion="hell"] h6 { color: #0d0d12 !important; }
section[data-sektion="hell"] .text-white,
section[data-sektion="hell"] [class*="text-white/"] { color: #0d0d12 !important; }
section[data-sektion="hell"] p:not(.kopf-lead),
section[data-sektion="hell"] li { color: rgba(0,0,0,.72) !important; }
section[data-sektion="hell"] .mark-verlauf,
section[data-sektion="hell"] .einstieg-btn,
section[data-sektion="hell"] .kopf-btn-grad { color: #000 !important; }
section[data-sektion="hell"] [class*="border-stroke-"] { border-color: rgba(0,0,0,.10) !important; }
section[data-sektion="hell"] .bg-background-5,
section[data-sektion="hell"] .bg-background-6,
section[data-sektion="hell"] [class*="bg-background-13"] { background: #F8F9FA !important; }
section[data-sektion="hell"] [class*="stroke-background-"],
section[data-sektion="hell"] [class*="stroke-white"] { stroke: #0d0d12 !important; }


/* ===============================================================
   snoopstar — Abschnitt "One product. Different ways in." (04.09.2026)
   Drei Kaesten mit Mechanik-Animation statt drei Bildbloecken.
   =============================================================== */

.wege-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 979px) { .wege-reihe { grid-template-columns: 1fr; } }

.wege-karte {
  position: relative;
  /* Eigene Flaeche, weil der Verlauf mitten durch die Reihe endet. */
  background: #0D1017;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  padding: 32px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wege-karte:hover { transform: translateY(-4px); border-color: rgba(255, 73, 107, .55); }

/* Schein hinter der Grafik, in der Boxfarbe vom 04.09. */
/* Schein HINTER der Grafik, nicht ueber der Kartenkante. Beim Vergroessern
   der Animation lag er zur Haelfte ausserhalb der Karte und wurde von
   overflow: hidden zu einem harten Fleck beschnitten. */
.wege-karte::before {
  content: ""; position: absolute; top: 34px; left: 50%;
  width: 320px; height: 230px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 73, 107, .26), transparent 72%);
  pointer-events: none;
}

/* Jonas 04.09.: Animation groesser. Die viewBox bleibt 180x132, das SVG
   skaliert also mit — die Formen wachsen um Faktor 210/132 = 1,59. */
.wege-bild { position: relative; z-index: 1; height: 210px; margin-bottom: 20px; }
.wege-svg { width: 100%; height: 100%; overflow: visible; }

/* Titel und Copy bilden einen Block und sitzen zusammen am Fuss der Karte.
   Vorher trug die Copy margin-top: auto — dadurch klaffte die Luecke
   zwischen Headline und Copy ueber die halbe Karte. Jetzt haengt der ganze
   Block unten, der Abstand dazwischen sind 6 px. */
.wege-titel {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 400;
  font-size: 30px; line-height: 1.2; letter-spacing: -1.1px;
  color: #ffffff; margin: auto 0 6px;
}
.wege-copy {
  font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .72);
  margin: 0;
}

.wege-aktion { text-align: center; }
.wege-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
  color: #000; font-size: 16px; font-weight: 500; text-decoration: none;
  transition: filter .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wege-btn:hover { filter: brightness(1.08); }

/* ── Die drei Mechaniken ──────────────────────────────────────────
   transform-box: view-box, damit translate in SVG-Nutzereinheiten
   rechnet und nicht im Layout-Koordinatensystem. */
.wege-svg * { transform-box: view-box; }

.wg-pack {
  fill: rgba(255, 255, 255, .07);
  stroke: rgba(255, 255, 255, .38); stroke-width: 1.5;
}
.wg-ecke { fill: none; stroke: #FF496B; stroke-width: 2; stroke-linecap: round; }
.wg-phone {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(255, 255, 255, .38); stroke-width: 1.5;
}
.wg-notch { fill: rgba(255, 255, 255, .38); }

/* 01 Scan it. — die Linie laeuft ueber die Verpackung */
.wg-linie {
  fill: #FF496B;
  filter: drop-shadow(0 0 6px rgba(255, 73, 107, .9));
  animation: wg-sweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wg-sweep {
  0%   { transform: translateY(30px);  opacity: 0; }
  8%   { transform: translateY(34px);  opacity: 1; }
  58%  { transform: translateY(104px); opacity: 1; }
  72%  { transform: translateY(104px); opacity: 0; }
  100% { transform: translateY(30px);  opacity: 0; }
}
/* Das Codefeld bleibt leer — hier wird spaeter der echte DataMatrix
   gedacht, gezeichnet wird er nie. */
.wg-feld { fill: rgba(255, 255, 255, .10); stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }

/* 02 Snoop it. — Sucher zieht sich zusammen, dann Erkennungs-Puls */
.wg-sucher { animation: wg-fassen 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes wg-fassen {
  0%, 100% { transform: scale(1);    opacity: .55; }
  45%      { transform: scale(.80);  opacity: 1; }
  75%      { transform: scale(.80);  opacity: 1; }
}
.wege-karte .wg-sucher { transform-origin: 90px 67px; }
.wg-puls {
  fill: none; stroke: #FF496B; stroke-width: 1.5;
  animation: wg-puls 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 90px 67px;
}
@keyframes wg-puls {
  0%, 44% { transform: scale(.6); opacity: 0; }
  56%     { transform: scale(1);  opacity: .9; }
  86%     { transform: scale(1.9); opacity: 0; }
  100%    { transform: scale(.6); opacity: 0; }
}

/* 03 Integrate it. — Karten fahren ins Telefon ein */
.wg-karte { fill: rgba(255, 73, 107, .85); }
.wg-karte-1 { animation: wg-dock 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.wg-karte-2 { animation: wg-dock 3.4s cubic-bezier(0.4, 0, 0.2, 1) .28s infinite; }
.wg-karte-3 { animation: wg-dock 3.4s cubic-bezier(0.4, 0, 0.2, 1) .56s infinite; }
@keyframes wg-dock {
  /* Zielposition x 46-82, das Telefon steht bei 34-92. */
  0%   { transform: translateX(44px);  opacity: 0; }
  18%  { transform: translateX(0);     opacity: 1; }
  52%  { transform: translateX(-66px); opacity: 1; }
  68%  { transform: translateX(-66px); opacity: 0; }
  100% { transform: translateX(44px);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-linie, .wg-sucher, .wg-puls, .wg-karte { animation: none !important; }
  .wg-linie { transform: translateY(66px); }
  .wg-sucher { opacity: 1; }
  .wg-puls { opacity: .5; }
  .wg-karte { opacity: 1; }
  .wege-karte:hover { transform: none; }
}


/* ===============================================================
   snoopstar — Abschnitt "Own the insights." (04.09.2026)
   Drei Absaetze statt einem, Button unter dem Abschnitt.
   =============================================================== */

/* Der Abschnitt liegt auf dem hellen Verlauf — alles schwarz, wie die
   Headline. Grau bei 60 % Deckkraft traegt dort nicht (unter 3:1). */
.ins-lead {
  color: #000000 !important;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
}
.ins-lead-1 { font-size: 20px; line-height: 1.45; margin-top: 14px; }
.ins-lead-2 { font-size: 18px; line-height: 1.5;  margin-top: 14px; }
.ins-lead-3 { font-size: 18px; line-height: 1.5;  margin-top: 14px; }
@media (max-width: 639px) {
  .ins-lead-1 { font-size: 18px; }
  .ins-lead-2, .ins-lead-3 { font-size: 16px; }
}

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

/* Der Verlaufs-Button des Projekts. Gleiche Werte wie .wege-btn aus
   _teil12.py — beide sollten spaeter in EINE Designsystem-Klasse
   zusammenfallen, solange stehen sie doppelt und identisch. */
.snoop-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
  color: #000; font-size: 16px; font-weight: 500; text-decoration: none;
  transition: filter .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.snoop-btn:hover { filter: brightness(1.08); }

/* Ausnahme, und zwar eine notwendige: an dieser Stelle liegt der Button auf
   dem unteren Verlauf (opai-2.png). Pink-orange auf pink-orange trennt
   nicht — der Button verschwindet in der Flaeche. Jonas' Vorgabe aus der
   Feedback-Runde deckt das ab: "Verlauf in Buttons setzen. Falls optisch
   nicht ansprechend anderen weg finden buttons zu highlighten."
   Schwarz auf dem Verlauf liegt bei 6,3:1 bis 7,5:1 und ist ausserdem die
   Buttonform aus Jonas' eigenem Artboard "Einstiege 2a - Verlaufsband". */
.snoop-btn-auf-verlauf {
  background: #000000;
  color: #ffffff;
}
.snoop-btn-auf-verlauf:hover { filter: none; background: #12161F; }


/* ===============================================================
   snoopstar — Award-Abschnitt (04.09.2026)
   Kopftext unter der Headline, darunter der Theme-Marquee mit
   Logoplatzhaltern. Logoflaeche 140 x 56 px — echte Logos in dieser
   Groesse liefern, dann aendert sich am Layout nichts.
   =============================================================== */

/* Der Abschnitt steht auf #0d1017, ohne Verlauf. Weiss statt Schwarz. */
.award-lead {
  color: #ffffff;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
  max-width: 860px;
}
.award-lead-1 { font-size: 20px; line-height: 1.45; margin-top: 14px; }
.award-lead-2 {
  font-size: 18px; line-height: 1.5; margin-top: 12px;
  color: rgba(255, 255, 255, .72);
}
@media (max-width: 639px) {
  .award-lead-1 { font-size: 18px; }
  .award-lead-2 { font-size: 16px; }
}

.award-kachel {
  flex: 0 0 auto;
  width: 332px;
  min-height: 220px;
  padding: 32px;
  border-radius: 28px;
  background: #12161F;
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* mittig, sonst sammelt sich die Restluft unten in der Karte und die
     Kachel sieht unfertig aus */
  justify-content: center;
  text-align: center;
}

/* Die Flaeche fuer das echte Logo. Gestrichelt, damit auf einen Blick
   erkennbar ist, dass hier noch etwas fehlt. */
.award-logo {
  width: 140px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: 8px;
  margin-bottom: 22px;
}
.award-logo span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .40);
}

.award-name {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 400;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.6px;
  color: #ffffff; margin: 0 0 8px;
}
.award-notiz {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.5; letter-spacing: .04em;
  color: rgba(255, 255, 255, .50); margin: 0;
}

@media (max-width: 479px) { .award-kachel { width: 280px; padding: 26px; } }


/* ===============================================================
   snoopstar — Rechtstextseiten (04.09.2026)
   Impressum und Datenschutz. Schlichter Kopf ohne Bild, Text auf Weiss.
   =============================================================== */

/* Kein Bild, kein Scrim — ein Rechtstext braucht kein Motiv. */
.seitenkopf-schlicht { height: 420px; background: #0D1017; }
/* Der 180-px-Auslauf des Bildkopfes frisst bei 420 px Hoehe fast die Haelfte.
   Hier kuerzer, damit der dunkle Kopf als Kopf lesbar bleibt. */
.seitenkopf-schlicht .seitenkopf-auslauf { height: 130px; }
@media (max-width: 1023px) {
  .seitenkopf-schlicht { height: 340px; }
  .seitenkopf-schlicht .seitenkopf-auslauf { height: 100px; }
}

.rechtstext-sektion { background: #FFFFFF; padding: 24px 0 112px; }
.rechtstext {
  max-width: 820px;
  color: rgba(0, 0, 0, .78);
  font-size: 16px;
  line-height: 1.65;
}
.rechtstext .rt-h1 {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 400;
  font-size: 34px; line-height: 1.2; letter-spacing: -1.4px;
  color: #0d0d12; margin: 56px 0 18px;
}
.rechtstext .rt-h1:first-child { margin-top: 8px; }
.rechtstext .rt-h2 {
  font-family: 'Sora', system-ui, sans-serif; font-weight: 400;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.6px;
  color: #0d0d12; margin: 34px 0 10px;
}
.rechtstext .rt-h3 {
  font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 500;
  font-size: 17px; line-height: 1.4;
  color: #0d0d12; margin: 22px 0 6px;
}
.rechtstext .rt-p { margin: 0 0 14px; }
.rechtstext .rt-liste { margin: 0 0 14px; padding-left: 22px; }
.rechtstext .rt-liste li { margin-bottom: 8px; }
.rechtstext a { color: #C4247A; text-decoration: underline; word-break: break-word; }
.rechtstext a:hover { color: #FF36A0; }

@media (max-width: 639px) {
  .rechtstext { font-size: 15px; }
  .rechtstext .rt-h1 { font-size: 27px; letter-spacing: -1px; }
  .rechtstext .rt-h2 { font-size: 20px; }
}


/* ===============================================================
   snoopstar — Feinschliff 04.09.2026 (Teil 17)
   =============================================================== */

/* ── Hero-Auslauf ────────────────────────────────────────────────
   Ersetzt images/blend.png (3840 x 382, 417 KB). Die Bitmap endete bei
   Alpha 252/255, dadurch schien der dunkle Hero um 1,2 % durch — das war
   die sichtbare Kante. Hier endet der Verlauf bei bottom: 0 in vollem
   #ffffff, der Hintergrundfarbe der Folgesektion. Die Stufen
   bilden die Kurve der alten Bitmap nach (Alpha 0 / 0 / 31 / 171 / 251). */
.hero-auslauf {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0)   24%,
    rgba(255, 255, 255, .12) 50%,
    rgba(255, 255, 255, .67) 76%,
    rgba(255, 255, 255, .98) 93%,
    #ffffff           100%);
}

/* ── Die zwei Hero-Zeilen ───────────────────────────────────────── */
/* war text-tagline-3 = 14 px */
.hero-kicker { font-size: 18px !important; line-height: 1.5 !important; }
/* Schrift wie der Copytext darueber (Inter Tight), bold. Der Verlauf des
   Grundes traegt hier kein Grau — die Zeile steht auf 100 % Weiss. */
.hero-claim { font-weight: 700 !important; letter-spacing: -0.1px; }
@media (max-width: 639px) { .hero-kicker { font-size: 16px !important; } }

/* ── Der Abschnittstext unter "…already in their hands." ────────── */
.hands-lead {
  color: #0d0d12 !important;
  margin: 0 auto;
  text-align: center;
  font-weight: 400;
}
.hands-lead-1 { font-size: 18px; line-height: 1.5; margin-top: 20px; }
.hands-lead-2 { font-size: 18px; line-height: 1.5; margin-top: 14px; }
.hands-lead-3 { font-size: 18px; line-height: 1.6; margin-top: 18px; font-weight: 500; }
@media (max-width: 639px) { .hands-lead { font-size: 16px; } }

/* ── Logo in der Navigation ─────────────────────────────────────── */
/* Pille 58 px, Logo 44 px, also 7 px Luft oben und unten. Der 168-px-Slot
   haelt es mittig im linken freien Bereich. Eine spaetere Regel aus der
   Feedback-Runde hatte width auf auto gesetzt und die Mittigkeit damit
   aufgehoben — hier wieder festgesetzt. */
nav.header-one a[aria-label*="Startseite"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px !important;
  padding-inline: 0;
  padding-block: 0;
}
@media (max-width: 1023px) {
  nav.header-one a[aria-label*="Startseite"] { width: auto !important; }
}


/* ===============================================================
   snoopstar — Typo-Skala und Abbinder (Teil 18)
   Die Skala steht in 07_Designsystem/01_Layout-Spec_Theme02.md, Abschnitt 2.
   Hier wird sie auf die Klassen angewandt, die ich in den Laeufen 11 bis 17
   eingefuehrt habe und die daran vorbeigelaufen sind.
   =============================================================== */

/* ── Lead / Subline: 18 px, 150 % ─────────────────────────────── */
.kopf-lead,
.ins-lead,
.hands-lead, .hands-lead-1, .hands-lead-2, .hands-lead-3,
.award-lead, .award-lead-1, .award-lead-2 {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
/* war 20 px / 145 % */
.ins-lead-1, .award-lead-1 { font-size: 18px !important; line-height: 1.5 !important; }
/* Die drei Zeilen sind jetzt EIN Absatz mit Umbruechen — keine
   Absatzabstaende mehr, die als leere Zeilen gelesen werden. */
.ins-lead { margin: 18px auto 0 !important; }
.hands-lead-1 { margin-top: 18px !important; }
.hands-lead-2, .hands-lead-3 { margin-top: 10px !important; }
.award-lead-1 { margin-top: 18px !important; }
.award-lead-2 { margin-top: 10px !important; }

/* ── Body: 16 px, 150 % ───────────────────────────────────────── */
.wege-copy,          /* war 15 px / 145 % */
.hero-claim,
.rechtstext {        /* war 165 % */
  font-size: 16px !important;
  line-height: 1.5 !important;
}
.rechtstext .rt-p, .rechtstext .rt-liste li { line-height: 1.5; }

/* ── Label / Tagline: Mono 14 px, 155 % ──────────────────────── */
.kopf-label, .wege-nr { font-size: 14px !important; line-height: 1.55 !important; }
/* Ausnahme, ausdruecklich gewuenscht: "Your product is media." sollte
   groesser sein (Auftrag vom 04.09.). Bleibt bei 18 px. */
.hero-kicker { font-size: 18px !important; line-height: 1.5 !important; }

/* ── Micro-Label: Mono 12 px, 150 % ──────────────────────────── */
.award-notiz { font-size: 12px !important; line-height: 1.5 !important; }

/* ── Headlines: einheitlicher Zeilenabstand ──────────────────── */
/* Sora-Ebenen laufen laut Skala auf 120 %. Die Groessen der
   Komponenten-Headlines stammen aus Jonas' eigenen Artboards
   (Karten 30 px, Award-Namen 22 px) und bleiben unangetastet — sie
   liegen zwischen H4 (32) und H5 (24). */
.kopf-h1 { line-height: 1.2 !important; }
.wege-titel, .award-name { line-height: 1.2 !important; }
.rechtstext .rt-h1 { font-size: 32px !important; line-height: 1.3 !important; }  /* H4 */
.rechtstext .rt-h2 { font-size: 20px !important; line-height: 1.4 !important; }  /* H6 */
.rechtstext .rt-h3 { font-size: 16px !important; line-height: 1.5 !important; font-weight: 600; }

@media (max-width: 639px) {
  .kopf-lead, .ins-lead, .hands-lead, .award-lead,
  .award-lead-1, .award-lead-2, .ins-lead-1 { font-size: 16px !important; }
  .rechtstext .rt-h1 { font-size: 26px !important; }
}


/* ===============================================================
   snoopstar — Schwarzbereich, Hero-Abstaende, CI-Farben (Teil 19)
   =============================================================== */

/* ── Grundfarben ─────────────────────────────────────────────────
   Der Schwarzbereich beginnt bei "Own the insights." und endet nach
   "One product. Different ways in.". Der Hero ist seine eigene dunkle
   Buehne. Alles danach ist weiss, der Abbinder wieder schwarz. */
section[data-grund="schwarz"] { background: #0D1017 !important; }
section[data-grund="weiss"]   { background: #FFFFFF !important; }

/* Uebergang Schwarz -> Weiss am Fuss von "One product". opai-2 ist unten
   deckend weiss, oben transparent. 260 px, damit der Wechsel weich laeuft
   und keine Kante entsteht. */
.wege-uebergang {
  position: absolute; bottom: 0; left: 0; right: 0;
  /* HINTER dem Inhalt: die Kaesten liegen in .main-container mit z-10 und
     haben ihre eigene dunkle Flaeche. Beim ersten Versuch stand der
     Uebergang mit z-index 21 DARUEBER — der Text wurde vom Verlauf
     ueberdeckt und am oberen Rand des Kastens entstand eine harte Kante. */
  height: 320px; z-index: 1; pointer-events: none; overflow: hidden;
}
.wege-uebergang img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* fill statt cover: so wird die ganze senkrechte Rampe des PNG (oben
     transparent, unten deckend weiss) auf die 320 px abgebildet. Mit cover
     war nur der deckende untere Teil sichtbar, also ein harter Streifen. */
  object-fit: fill;
}

/* ── Weisse Sektionen: Themenfarben umdrehen ─────────────────────
   Das Theme faerbt Text ueber Klassen, auch auf divs und spans, nicht nur
   auf <p>. Deshalb Attributselektoren. Unsere eigenen Verlaufselemente
   sind ausgenommen, sonst bekaemen sie schwarze Schrift ueberschrieben. */
section[data-grund="weiss"] h1, section[data-grund="weiss"] h2,
section[data-grund="weiss"] h3, section[data-grund="weiss"] h4,
section[data-grund="weiss"] h5, section[data-grund="weiss"] h6 { color: #0d0d12 !important; }
section[data-grund="weiss"] .text-white,
section[data-grund="weiss"] [class*="text-white/"],
section[data-grund="weiss"] .text-background-11 { color: #0d0d12 !important; }
section[data-grund="weiss"] p:not(.snoop-btn):not(.award-notiz),
section[data-grund="weiss"] li,
section[data-grund="weiss"] span:not(.snoopstar-verlauf):not(.mark-verlauf) { color: inherit; }
section[data-grund="weiss"] .text-tagline-2, section[data-grund="weiss"] .text-tagline-3,
section[data-grund="weiss"] .text-tagline-4 { color: rgba(0, 0, 0, .72) !important; }
section[data-grund="weiss"] .award-lead-1, section[data-grund="weiss"] .hands-lead { color: #0d0d12 !important; }
section[data-grund="weiss"] .award-lead-2 { color: rgba(0, 0, 0, .72) !important; }
section[data-grund="weiss"] .award-notiz { color: rgba(0, 0, 0, .50) !important; }
/* Flaechen */
section[data-grund="weiss"] .bg-background-5,
section[data-grund="weiss"] .bg-background-6,
section[data-grund="weiss"] [class*="bg-background-13"],
section[data-grund="weiss"] .award-kachel { background: #F8F9FA !important; }
section[data-grund="weiss"] .bg-background-7 { background: #FFFFFF !important; }
/* Raender */
section[data-grund="weiss"] [class*="border-stroke-"],
section[data-grund="weiss"] .award-kachel { border-color: rgba(0, 0, 0, .12) !important; }
section[data-grund="weiss"] .award-logo { border-color: rgba(0, 0, 0, .28) !important; }
section[data-grund="weiss"] .award-logo span { color: rgba(0, 0, 0, .45) !important; }
/* Konturen in Symbolen */
section[data-grund="weiss"] [class*="stroke-background-"],
section[data-grund="weiss"] [class*="stroke-white"] { stroke: #0d0d12 !important; }
section[data-grund="weiss"] svg [stroke="white"] { stroke: #0d0d12 !important; }
section[data-grund="weiss"] svg [fill="white"]:not([fill-opacity="0"]) { fill: #0d0d12 !important; }
/* Formularfelder */
section[data-grund="weiss"] input, section[data-grund="weiss"] textarea {
  color: #0d0d12 !important; background: #FFFFFF !important;
}
section[data-grund="weiss"] input::placeholder,
section[data-grund="weiss"] textarea::placeholder { color: rgba(0, 0, 0, .45) !important; }
/* Der weisse Theme-Button wuerde auf Weiss verschwinden — Verlauf drauf,
   wie bei allen anderen Buttons. */
section[data-grund="weiss"] .bg-background-7.rounded-full,
section[data-grund="weiss"] button.bg-background-7 {
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%) !important;
}

/* Die Kontaktbox der Q&A traegt den CI-Verlauf als Bild und bleibt dunkel.
   Sie muss aus der Umfaerbung der weissen Sektion ausgenommen werden,
   sonst stuende ihre Schrift dunkel auf dunkel. */
section[data-grund="weiss"] .faq-kontaktbox h1,
section[data-grund="weiss"] .faq-kontaktbox h2,
section[data-grund="weiss"] .faq-kontaktbox h3,
section[data-grund="weiss"] .faq-kontaktbox h4,
section[data-grund="weiss"] .faq-kontaktbox .text-white,
section[data-grund="weiss"] .faq-kontaktbox [class*="text-white/"] { color: #ffffff !important; }
section[data-grund="weiss"] .faq-kontaktbox [class*="text-tagline-"] {
  color: rgba(255, 255, 255, .80) !important;
}
/* Der Button darin liegt auf dem Verlauf — dort traegt der Verlauf nicht,
   also weiss mit schwarzer Schrift. Gleiche Ueberlegung wie beim
   Insights-Button, nur umgekehrt herum. */
section[data-grund="weiss"] .faq-kontaktbox .bg-background-7.rounded-full,
section[data-grund="weiss"] .faq-kontaktbox button.bg-background-7,
section[data-grund="weiss"] .faq-kontaktbox [class*="bg-background-7"] {
  background: #FFFFFF !important;
}
section[data-grund="weiss"] .faq-kontaktbox [class*="text-background-5"] { color: #0d0d12 !important; }

/* Der 8-px-Ring der Demo-Karte war fuer dunklen Grund gedacht und liest
   sich auf Weiss als schwerer schwarzer Rahmen. */
section[data-grund="weiss"] .ring-background-4 {
  --tw-ring-color: rgba(0, 0, 0, .06);
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .05) !important;
}

/* ── Violett raus ────────────────────────────────────────────────
   #4D338B ist im Designsystem LICHT, keine Flaeche und keine Schrift.
   Im Insights-Bereich stand es als Chip, Punkt und SVG-Kontur. Die
   Deckkraftvarianten sind im gebauten CSS als Hex mit Alpha einkompiliert
   und lesen keine Variable — deshalb Attributselektoren statt einer
   Variablenaenderung. */
[class*="bg-opai-purple"] { background-color: rgba(255, 54, 160, .12) !important; }
.bg-opai-purple:not([class*="/"]) { background-color: #FF36A0 !important; }
[class*="text-opai-purple"] { color: rgba(255, 54, 160, .75) !important; }
[class*="stroke-opai-purple"] { stroke: #FF36A0 !important; }
[class*="fill-opai-purple"] { fill: #FF36A0 !important; }

/* ── Erster Satz bei "Own the insights." ─────────────────────────
   Abhebung genau wie im Award-Abschnitt: erster Satz volle Farbe,
   der Rest auf 72 %. */
.ins-erste { color: #000000; }
.ins-rest  { color: rgba(0, 0, 0, .72); }

/* ── Hero-Abstaende ──────────────────────────────────────────────
   H1 war 64 px auf 120 %. Auf 105 %, wie gewuenscht enger.
   Kicker -> H1 sind 20 px (mb-5). Der Copytext klebte mit 0 px an der
   H1 und bekommt dieselben 20 px — oben wie unten.
   Claim: 56 px auf 24 px. */
#hero-heading { line-height: 1.05 !important; }
.hero-copy { margin-top: 20px !important; }
/* Der Abstand kam nicht aus mt-7, sondern aus space-y-14 des Elternteils
   (56 px). Tailwind v4 kompiliert space-y-* zu margin-block-start, nicht
   zu margin-top — ein margin-top mit !important greift dort nicht. */
.hero-claim { margin-top: 24px !important; margin-block-start: 24px !important; }
.hero-textblock { margin-bottom: 24px !important; }
@media (max-width: 767px) { #hero-heading { line-height: 1.1 !important; } }

/* ── SNOOPSTAR im Abbinder ───────────────────────────────────────
   War !text-opai-purple. Jetzt der Markenverlauf, ueber die Schrift
   geclippt. Fallback fuer Browser ohne background-clip: text ist
   Magenta — nie unsichtbar. */
.snoopstar-verlauf {
  color: #FF36A0;
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .snoopstar-verlauf { color: transparent; }
}


/* ===============================================================
   snoopstar — Durchgaengiges Schwarz, dunkle Karten (Teil 20)
   =============================================================== */

/* ── Karten in den weissen Sektionen bleiben dunkel ──────────────
   Die Umfaerbung aus Teil 19 wird hier zurueckgedreht. Hoehere
   Spezifitaet statt Umbau der bestehenden Regeln. */
section[data-grund] .karte-dunkel,
section[data-grund="weiss"] .award-kachel {
  background: #12161F !important;
  border-color: rgba(255, 255, 255, .14) !important;
}
section[data-grund] .karte-dunkel h1, section[data-grund] .karte-dunkel h2,
section[data-grund] .karte-dunkel h3, section[data-grund] .karte-dunkel h4,
section[data-grund] .karte-dunkel h5, section[data-grund] .karte-dunkel h6,
section[data-grund="weiss"] .award-kachel .award-name { color: #ffffff !important; }
section[data-grund] .karte-dunkel .text-white,
section[data-grund] .karte-dunkel [class*="text-white/"] { color: #ffffff !important; }
section[data-grund] .karte-dunkel p,
section[data-grund] .karte-dunkel li,
section[data-grund] .karte-dunkel [class*="text-tagline-"] {
  color: rgba(255, 255, 255, .72) !important;
}
section[data-grund="weiss"] .award-kachel .award-notiz { color: rgba(255, 255, 255, .50) !important; }
section[data-grund="weiss"] .award-kachel .award-logo { border-color: rgba(255, 255, 255, .28) !important; }
section[data-grund="weiss"] .award-kachel .award-logo span { color: rgba(255, 255, 255, .40) !important; }
section[data-grund] .karte-dunkel [class*="border-stroke-"] { border-color: rgba(255, 255, 255, .14) !important; }
section[data-grund] .karte-dunkel [class*="stroke-background-"],
section[data-grund] .karte-dunkel [class*="stroke-white"] { stroke: #ffffff !important; }
section[data-grund] .karte-dunkel svg [stroke="white"] { stroke: #ffffff !important; }
section[data-grund] .karte-dunkel .bg-background-5,
section[data-grund] .karte-dunkel .bg-background-6 { background: #0D1017 !important; }
section[data-grund] .karte-dunkel input,
section[data-grund] .karte-dunkel textarea {
  color: #ffffff !important; background: transparent !important;
}
section[data-grund] .karte-dunkel input::placeholder,
section[data-grund] .karte-dunkel textarea::placeholder {
  color: rgba(255, 255, 255, .60) !important;
}
/* Der Ring der Demo-Karte darf wieder dunkel sein */
section[data-grund] .karte-dunkel.ring-background-4 {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .05) !important;
}
/* Die drei Boxen bei "Your product" trugen bg-white im Themenmarkup */
section[data-grund] .karte-dunkel.bg-white { background: #12161F !important; }

/* In den drei Boxen liegt ein Theme-Overlay, das nach #FFF ausblendet —
   gedacht fuer weisse Karten. Auf der dunklen Karte frisst es die Kennzahl
   und die Beschriftung. Es blendet jetzt in die Kartenfarbe aus. */
section[data-grund] .karte-dunkel [class*="to-[#FFF]"] {
  background-image: linear-gradient(to bottom, rgba(18, 22, 31, 0) 10%,
                                     #12161F 88%) !important;
}

/* Die Q&A-Headline lag im hellen Uebergangsband — weisse Schrift auf
   Pink-Orange, unlesbar. Das Band bleibt, die Sektion bekommt oben so viel
   Innenabstand, dass die Headline darunter auf vollem Schwarz steht. */
section[data-grund="schwarz"]:has(.qa-uebergang) { padding-top: 360px !important; }
@media (max-width: 1023px) {
  section[data-grund="schwarz"]:has(.qa-uebergang) { padding-top: 280px !important; }
  .qa-uebergang { height: 240px; }
}

/* ── Uebergang Weiss -> Schwarz vor der Q&A ──────────────────────
   Begrenztes Band im oberen Innenabstand, damit die Headline auf vollem
   Schwarz steht und weiss bleiben kann. Hinter dem Inhalt, wie beim
   Uebergang am Fuss von "One product". */
.qa-uebergang {
  position: absolute; top: 0; left: 0; right: 0;
  height: 300px; z-index: 1; pointer-events: none; overflow: hidden;
}
.qa-uebergang img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
}

/* Die Q&A ist wieder dunkel — die Kontaktbox braucht die Ausnahme aus
   Teil 19 nicht mehr, sie schadet aber auch nicht. */
/* ── Teil 22: Lesbarkeit Own-the-insights ─────────────────────────────
   Jonas 04.09.: alle Texte muessen auf den Verlaufsbaendern gut lesbar sein. */

/* Erster Satz abgesetzt wie bei "Award-winning experiences.":
   voll weiss, der Rest auf 72 %. */
.ins-erste { color: #FFFFFF !important; }
.ins-rest  { color: rgba(255, 255, 255, .72) !important; }

/* Das Band ist das theme-eigene "Top blend mode"-Bild und war 760 px hoch —
   Ueberschrift und Text standen mitten im hellsten Teil. 340 px reichen fuer
   einen weichen Wechsel von der weissen Sektion darueber ins Schwarz. */
.ins-band { top: 0 !important; height: 340px !important; }
.ins-band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* fill, damit die ganze senkrechte Rampe des PNG auf die 340 px faellt.
     Mit cover blieb nur der deckende obere Teil stehen, also eine Kante. */
  object-fit: fill;
}

/* Und der Text beginnt darunter, auf vollem Schwarz. */
.ins-sektion { padding-top: 420px !important; }
@media (max-width: 1023px) {
  .ins-band { height: 260px !important; }
  .ins-sektion { padding-top: 320px !important; }
}
/* ── Teil 23: Header-Gewichtung Startseite ──────────────────────────────
   Feedback Oliver 04.09.: die drei Zeilen schoen gross, der Kicker raus,
   darunter der Manuskripttext zusammenhaengend. */

/* Neue Stufe "Hero-Display", NUR fuer die H1 der Startseite. Die Layout-Spec
   (07_Designsystem/01_Layout-Spec_Theme02.md §2) bleibt fuer alle anderen
   Ueberschriften unangetastet: H1 64 px. Zeilenabstand 105 %, Laufweite
   -0.05em — das ist dasselbe Verhaeltnis wie die -3.2 px bei 64 px. */
.hero-display {
  font-size: 112px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  max-width: none !important;
}
@media (max-width: 1279px) { .hero-display { font-size: 88px !important; } }
@media (max-width: 1023px) { .hero-display { font-size: 64px !important; } }
@media (max-width: 767px)  { .hero-display { font-size: 44px !important; } }
@media (max-width: 479px)  { .hero-display { font-size: 34px !important; } }

/* Der Manuskripttext als ein Block: Absatzabstand, keine Leerzeilen.
   18 px / 150 % ist die Stufe "Lead/Subline" der Layout-Spec. */
.hero-manuskript {
  margin: 28px auto 0;
  max-width: 810px;
  text-align: center;
}
.hero-satz {
  font-size: 18px;
  line-height: 1.5;
  color: #FFFFFF;          /* Regel 03.09.: im Header alles auf 100 % Weiss */
  margin: 0;
}
.hero-satz + .hero-satz { margin-top: 14px; }
.hero-satz strong { font-weight: 700; }
@media (max-width: 639px) {
  .hero-manuskript { margin-top: 20px; }
  .hero-satz { font-size: 16px; }
}

/* Der Kicker ist weg, also auch sein Abstandshaken darueber. Dafuer Luft
   nach unten, damit die Knoepfe nicht an der Claim-Zeile kleben. */
.hero-textblock { margin-bottom: 0 !important; }
.hero-manuskript { margin-bottom: 44px; }
@media (max-width: 639px) { .hero-manuskript { margin-bottom: 32px; } }
/* ── Teil 24: Reihenfolge nach Manuskript ───────────────────────────────
   Feedback Oliver 04.09.: Reihenfolge nach Manuskript, Q&A von der Home
   runter, Schriftzug raus, nach dem Kontaktfeld direkt der Abbinder. */

/* Zweite Sitemap-Zeile im CTA-Kasten. Eine Stufe kleiner als
   "Machen wir mehr daraus." (32 px = Stufe H4 der Layout-Spec), damit im
   Kasten eine Rangfolge bleibt. */
.cta-oberzeile {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
  /* !important, weil die Regel section[data-grund] .karte-dunkel p aus Lauf 20 sonst 72 %
     durchsetzt. Regel 03.09.: Headlines sind einfarbig, kein Grau-Weiss. */
  color: #FFFFFF !important;
  margin: 0 0 10px;
}
@media (max-width: 1023px) { .cta-oberzeile { font-size: 24px; } }
@media (max-width: 639px)  { .cta-oberzeile { font-size: 20px; } }

/* Weiche Kante von der letzten weissen Sektion in den schwarzen Abbinder.
   opai-1 ist oben deckend, unten durchsichtig — oben also die weisse
   Sektion, nach unten laeuft es ins Schwarz des Abbinders. */
.fuss-uebergang {
  position: absolute; top: 0; left: 0; right: 0;
  height: 240px; z-index: 1; pointer-events: none; overflow: hidden;
}
.fuss-uebergang img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill;
}

/* Der Abbinder-Inhalt liegt VOR dem Band (main-container z-10). Ohne
   zusaetzlichen Innenabstand stehen Logo, Spaltentitel und Links mitten im
   hellen Verlauf und sind nicht zu lesen. 280 px raeumen das Band frei. */
footer:has(.fuss-uebergang) { padding-top: 280px !important; }
@media (max-width: 1023px) {
  .fuss-uebergang { height: 180px; }
  footer:has(.fuss-uebergang) { padding-top: 210px !important; }
}
/* ── Teil 25: Verlaufsflaechen mit Welle ────────────────────────────────
   Jonas 06.09.: kein Schwarz mehr im Hintergrund. Verlauf nur hinter
   "Own the insights." und im Abbinder, oben und unten mit der Welle. */

/* Die Flaeche ist ein Bild, kein CSS-Verlauf: nur so ist die Farbe an der
   Nahtstelle pixelgleich mit der deckenden Kante der Welle. Beide kommen aus
   derselben Funktion in _verlaeufe.py.

   Wichtig: die Flaeche reicht NICHT unter die Wellen. Sonst scheint durch
   deren transparenten Teil der Verlauf statt der weissen Seite — die Welle
   waere unsichtbar und es entstuende genau die harte Kante, die nicht sein
   soll. Die beiden Hoehen stehen als Variablen an der Lage, damit Flaeche
   und Welle nicht auseinanderlaufen koennen. */
.verlauf-grund {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
  --welle-o: 0px;
  --welle-u: 0px;
}
.verlauf-flaeche {
  position: absolute; left: 0; right: 0;
  /* je 1 px Ueberdeckung: gegen die Haarlinie bei gebrochenen Geraetepixeln.
     Ueberdeckt wird identische Farbe, zu sehen ist also nichts. */
  top: calc(var(--welle-o) - 1px);
  bottom: calc(var(--welle-u) - 1px);
  background-image: url("../images/gradient/verlauf-flaeche.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.welle {
  position: absolute; left: 0; right: 0; width: 100%;
  display: block; object-fit: fill;
}
.welle-o { top: 0; height: var(--welle-o); }
.welle-u { bottom: 0; height: var(--welle-u); }

section[data-grund="verlauf"], footer[data-grund="verlauf"] {
  background: transparent !important;
  position: relative;
}
/* Der Inhalt liegt ueber den Lagen. */
section[data-grund="verlauf"] > .main-container,
footer[data-grund="verlauf"] > .main-container { position: relative; z-index: 10; }

/* Kein schwarzer Seitenhintergrund mehr. */
main, body { background: #FFFFFF; }

/* ── Header ──────────────────────────────────────────────────────────
   Verlauf bis unter die Navigation, unten die Welle nach Weiss. Schrift
   bleibt auf 100 % Weiss (Regel 03.09.). */
section[data-grund="verlauf"][aria-labelledby="hero-heading"] { padding-bottom: 260px; }
section[data-grund="verlauf"][aria-labelledby="hero-heading"] .verlauf-grund { --welle-u: 420px; }

/* ── Own the insights. ───────────────────────────────────────────────
   Auf Magenta/Orange traegt Schwarz besser als Weiss. Erster Satz voll,
   der Rest auf 72 % — abgesetzt wie bei "Award-winning experiences.". */
.ins-erste { color: #000000 !important; }
.ins-rest  { color: rgba(0, 0, 0, .72) !important; }
/* Innenabstand so, dass Ueberschrift und Text nicht in der Welle haengen. */
.ins-sektion { padding-top: 360px !important; padding-bottom: 360px !important; }
.ins-sektion .verlauf-grund { --welle-o: 320px; --welle-u: 320px; }

/* ── Abbinder ────────────────────────────────────────────────────────
   Welle rein, dann Verlauf bis zum Seitenende. Schrift und Linien drehen
   von Weiss auf Schwarz, sonst steht der Abbinder unlesbar auf dem Verlauf. */
footer[data-grund="verlauf"] { padding-top: 420px !important; }
footer[data-grund="verlauf"] .verlauf-grund { --welle-o: 360px; }
footer[data-grund="verlauf"] [class*="text-white/50"] { color: rgba(0, 0, 0, .70) !important; }
footer[data-grund="verlauf"] [class*="text-white/90"] { color: rgba(0, 0, 0, .82) !important; }
footer[data-grund="verlauf"] .text-white,
footer[data-grund="verlauf"] h1, footer[data-grund="verlauf"] h2,
footer[data-grund="verlauf"] h3, footer[data-grund="verlauf"] h4 { color: #000000 !important; }
footer[data-grund="verlauf"] a:hover { color: #000000 !important; }
footer[data-grund="verlauf"] [class*="border-stroke-"] { border-color: rgba(0, 0, 0, .18) !important; }
footer[data-grund="verlauf"] svg [stroke]:not([stroke="none"]) { stroke: #000000; }
footer[data-grund="verlauf"] svg [fill]:not([fill="none"]) { fill: #000000; }
footer[data-grund="verlauf"] [class*="bg-background-"] { background: transparent !important; }

/* Die drei Wege-Kaesten stehen jetzt auf einer weissen Sektion. Die
   Umkehrregeln aus Lauf 19 haben ihre Titel auf Schwarz gedreht — auf der
   dunklen Kastenflaeche also unsichtbar. Innerhalb der Kaesten gilt weiter
   die dunkle Lesart, genau wie bei section[data-grund] .karte-dunkel. */
section[data-grund="weiss"] .wege-karte .wege-titel { color: #FFFFFF !important; }
section[data-grund="weiss"] .wege-karte .wege-copy  { color: rgba(255, 255, 255, .72) !important; }
section[data-grund="weiss"] .wege-karte { background: #12161F !important; }

/* Knoepfe auf dem Verlauf: ein Verlaufsknopf auf Verlauf verschwindet.
   Auf der Verlaufsflaeche steht er schwarz mit weisser Schrift — so wie in
   Jonas' Praesentation. */
section[data-grund="verlauf"] .snoop-btn,
footer[data-grund="verlauf"] .snoop-btn {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}
section[data-grund="verlauf"] .snoop-btn:hover,
footer[data-grund="verlauf"] .snoop-btn:hover { background: #1A1A1A !important; }

/* Die Uebergangsbaender der Schwarz-Runde sind ersetzt. */
.ins-band, .qa-uebergang, .wege-uebergang, .fuss-uebergang { display: none !important; }

@media (max-width: 1023px) {
  section[data-grund="verlauf"][aria-labelledby="hero-heading"] { padding-bottom: 180px; }
  section[data-grund="verlauf"][aria-labelledby="hero-heading"] .verlauf-grund { --welle-u: 260px; }
  .ins-sektion { padding-top: 240px !important; padding-bottom: 240px !important; }
  .ins-sektion .verlauf-grund { --welle-o: 200px; --welle-u: 200px; }
  footer[data-grund="verlauf"] { padding-top: 280px !important; }
  footer[data-grund="verlauf"] .verlauf-grund { --welle-o: 240px; }
}
/* ── Teil 26: Headerbild und Satzspiegel ─────────────────────────────────
   Jonas 06.09.: Bild an den unteren Rand des Videos, Text auf den
   Satzspiegel der Navigationsleiste. */

/* 1. Kein Innenabstand mehr unten — das Bild sitzt buendig an der Unterkante
      der Sektion, und damit am unteren Rand des Videos, das ueber die ganze
      Sektion laeuft. */
section[data-grund="verlauf"][aria-labelledby="hero-heading"] { padding-bottom: 0 !important; }

/* 2. Die unteren 20 Prozent des Bildes laufen in die Transparenz aus, damit
      die Hand an der Kante nicht hart abschneidet. Ersatz fuer die
      "bottom blend"-Blenden des Themes, die nach Schwarz ausgeblendet haben
      und deshalb in Lauf 25 rausmussten. */
.hero-bild img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

/* 3. Satzspiegel wie die Navigationspille: 1080 px, mittig. Vorher lief der
      Text ueber die 1290 px des Containers, die Pille aber nur ueber 1080 —
      die Kanten lagen nicht aufeinander. */
section[data-grund="verlauf"][aria-labelledby="hero-heading"] .hero-textblock,
section[data-grund="verlauf"][aria-labelledby="hero-heading"] .hero-manuskript {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-display { max-width: 1080px !important; margin-left: auto; margin-right: auto; }

@media (max-width: 1279px) {
  section[data-grund="verlauf"][aria-labelledby="hero-heading"] .hero-textblock,
  section[data-grund="verlauf"][aria-labelledby="hero-heading"] .hero-manuskript,
  .hero-display { max-width: 100% !important; }
}
/* ── Teil 30: freigestellte Produkte im CTA-Kasten ────────────────
   Jonas hat die Packshots freigestellt: keine Kacheln mehr, die Produkte
   stehen direkt auf der Kastenflaeche. */

.cta-v2-images-wrapper figure {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  /* drop-shadow folgt der Silhouette; ein box-shadow wuerde ein leeres
     Rechteck umranden. */
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .45));
}
.cta-v2-images-wrapper figure img {
  /* Freisteller duerfen nicht beschnitten werden. */
  object-fit: contain !important;
  object-position: bottom center;
}

@media (min-width: 1280px) {
  .cta-v2-images-wrapper .cta-v2-image-1 {   /* Coloration, vorn */
    right: 100px !important; bottom: 0 !important;
    width: 171px; height: 300px;
    max-width: 171px !important; max-height: 300px !important;
    transform: rotate(0deg) !important;
  }
  .cta-v2-images-wrapper .cta-v2-image-2 {   /* Snackbeutel */
    right: 238px !important; bottom: 14px !important;
    width: 191px; height: 300px;
    max-width: 191px !important; max-height: 300px !important;
    transform: rotate(-7deg) !important;
  }
  .cta-v2-images-wrapper .cta-v2-image-3 {   /* Duschbad, hinten */
    right: 428px !important; bottom: 30px !important;
    width: 127px; height: 300px;
    max-width: 127px !important; max-height: 300px !important;
    transform: rotate(-13deg) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .cta-v2-images-wrapper .cta-v2-image-1 {
    right: 50px !important; bottom: 0 !important;
    width: 131px; height: 230px;
    max-width: 131px !important; max-height: 230px !important;
    transform: rotate(0deg) !important;
  }
  .cta-v2-images-wrapper .cta-v2-image-2 {
    right: 158px !important; bottom: 12px !important;
    width: 147px; height: 230px;
    max-width: 147px !important; max-height: 230px !important;
    transform: rotate(-7deg) !important;
  }
  .cta-v2-images-wrapper .cta-v2-image-3 {
    right: 300px !important; bottom: 24px !important;
    width: 97px; height: 230px;
    max-width: 97px !important; max-height: 230px !important;
    transform: rotate(-13deg) !important;
  }
}

/* Unter 1024 px blendet das Theme die hinteren beiden aus; das vordere
   Produkt bleibt und wird nur kleiner. */
@media (max-width: 1023px) {
  .cta-v2-images-wrapper .cta-v2-image-1 { max-height: 240px !important; }
}
/* ── Teil 31: Header auf eine Bildschirmhoehe ──────────────────────────
   Jonas 07.09.: die Seite soll so starten, dass die Hand vollstaendig zu
   sehen ist und auf dem unteren Rand des Videos sitzt. */

/* Genau eine Bildschirmhoehe. svh statt vh, damit die ein- und ausfahrende
   Adressleiste auf dem Handy nicht hineinrechnet. */
.hero-sektion {
  /* HOEHE, nicht min-height: der Header darf nie hoeher werden als der
     Bildschirm, sonst ist die Hand wieder angeschnitten. */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(84px, 10.5vh, 148px) !important;
  padding-bottom: 0 !important;
}
.hero-sektion > .main-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Text oben, Bild unten am Sektionsrand. */
.hero-sektion .hero-stapel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  gap: clamp(16px, 3vh, 55px);
}
.hero-sektion .hero-stapel > * { margin-top: 0 !important; }
.hero-sektion .hero-kopfteil { flex: 0 0 auto; }
.hero-sektion .hero-kopfteil > * { margin-top: 0 !important; }
.hero-sektion .hero-kopfteil { display: flex; flex-direction: column; gap: clamp(16px, 3.1vh, 56px); }

/* Die Trias skaliert mit der Bildschirmhoehe: auf hohen Schirmen bleiben es
   Olivers 112 px, auf flachen Laptops wird sie kleiner, damit das Bild
   vollstaendig ueber die Falz passt. */
.hero-display {
  font-size: clamp(32px, 7.6vh, 112px) !important;
  line-height: 1.05 !important;
}
.hero-manuskript { margin-top: 0 !important; margin-bottom: 0 !important; }
.hero-satz { font-size: clamp(14px, 1.95vh, 18px); line-height: 1.45; }
.hero-satz + .hero-satz { margin-top: clamp(6px, 1.1vh, 14px); }

/* Das Bild sitzt buendig am unteren Sektionsrand. */
/* Der Bildbereich nimmt auf, was uebrig bleibt, und schrumpft auf flachen
   Schirmen mit. Zusammen mit object-fit: contain ist das Produkt dadurch
   immer vollstaendig zu sehen. */
.hero-sektion .hero-bild {
  flex: 1 1 auto;
  height: auto !important;
  min-height: clamp(150px, 24vh, 300px) !important;
  max-height: 420px !important;
  margin-bottom: 0 !important;
}
.hero-sektion .hero-bild img {
  height: 100%; width: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* Nur die letzte Kante weich, damit die Hand vollstaendig zu sehen ist. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
}

/* Das Verlaufsband am Fuss faellt mit der Sektion kleiner aus. */
section[data-grund="verlauf"][aria-labelledby="hero-heading"] .verlauf-grund {
  --welle-u: clamp(150px, 30vh, 420px);
}

@media (max-width: 1023px) {
  .hero-sektion { height: auto; padding-bottom: 40px !important; }
  .hero-sektion .hero-bild { height: clamp(220px, 34vh, 340px) !important; }
}
/* ── Teil 32: Navigationsleiste nach Template-Vorbild ────────────
   Vorbild: sites.keydesign.xyz/mobile-app — Balken ueber die volle Breite,
   oben transparent, beim Scrollen dunkles Milchglas. */

nav.nav-leiste {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  /* Tailwind v4 setzt -translate-x-1/2 ueber die translate-Eigenschaft,
     nicht ueber transform. Ohne diese Zeile bleibt der Balken um die halbe
     Breite nach links verschoben. */
  translate: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  /* Inhalt im Satzspiegel der Seite: 1080 px, mittig. Auf schmalen Schirmen
     bleibt ein fester Seitenrand, sonst wuerde der Wert negativ. */
  padding: 18px max(20px, calc((100% - 1080px) / 2)) !important;
  min-height: 80px !important;
  transition: background-color .2s cubic-bezier(.455, .03, .515, .955),
              border-color .2s cubic-bezier(.455, .03, .515, .955),
              -webkit-backdrop-filter .2s cubic-bezier(.455, .03, .515, .955),
              backdrop-filter .2s cubic-bezier(.455, .03, .515, .955) !important;
}

/* Beim Scrollen: dunkles Milchglas. Begruendung im Kopf von _teil32.py. */
nav.nav-leiste.nav-gescrollt {
  background: rgba(13, 16, 23, .72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(115%);
          backdrop-filter: blur(20px) saturate(115%);
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}

/* Menuepunkte exakt in der Mitte des Balkens — unabhaengig davon, wie breit
   Logo und Knopf sind. Unsere Schrift bleibt: Sora, 16 px. */
@media (min-width: 1024px) {
  nav.nav-leiste > ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
}
@media (max-width: 1023px) {
  nav.nav-leiste { padding: 14px 20px !important; min-height: 68px !important; }
}

/* Der Knopf: weiss mit schwarzer Schrift, wie im Template. Auf dem
   transparenten Balken ueber dem Verlaufsheader wuerde ein Verlaufsknopf
   verschwinden. */
nav.nav-leiste .button-split-text-wrapper > a {
  background: #FFFFFF !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
nav.nav-leiste .button-split-text-wrapper > a:hover {
  background: #F1F2F4 !important;
}
nav.nav-leiste .button-split-upper-text,
nav.nav-leiste .button-split-lower-text { color: #0D1017 !important; }
/* ── Teil 33: Logo groesser, Unterlaengen frei, Bild maximal ──────────
   Jonas 07.09.: Logo sichtbarer, das g in "Own the insights." nicht mehr
   angeschnitten, Headerbild so gross wie der Platz es zulaesst. */

/* ---- 1  Logo -------------------------------------------------------- */
/* 60 px Zeichenhoehe in einer 88 px hohen Leiste: die Plus-Marke behaelt
   oben und unten 14 px Luft. Die Groesse steht zusaetzlich im HTML, damit
   das Zeichen auch ohne dieses Stylesheet richtig sitzt. */
nav.nav-leiste {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  min-height: 88px !important;
}
nav.nav-leiste > a[aria-label],
nav.nav-leiste > a[aria-label] > figure { height: 60px !important; }
nav.nav-leiste > a[aria-label] img { height: 60px !important; width: 109px !important; }

/* Und das Zeichen sitzt jetzt AUF dem Satzspiegel. Aus der Zeit der
   schwebenden Pille stand es mittig in einem 168 px breiten Slot, damit es
   nicht an der Pillenkante klebte — gemessen waren das 30 px Einzug. Beim
   Balken ist genau das falsch: Headertext und Knopf liegen auf 1080 px,
   das Zeichen muss auf derselben Kante beginnen. */
nav.nav-leiste > a[aria-label] {
  width: auto !important;
  justify-content: flex-start !important;
}

@media (max-width: 1023px) {
  /* Auf dem Handy waere eine 88 px hohe Leiste zu viel. */
  nav.nav-leiste { padding: 14px 20px !important; min-height: 74px !important; }
  nav.nav-leiste > a[aria-label],
  nav.nav-leiste > a[aria-label] > figure { height: 46px !important; }
  nav.nav-leiste > a[aria-label] img { height: 46px !important; width: 83px !important; }
}

/* ---- 2  Unterlaengen der Headline ----------------------------------- */
/* splitTextReveal (assets/main.js) legt jede Zeile in einen Container mit
   `overflow: hidden`. Der ist genau so hoch wie die Zeilenschachtel, und
   die ist bei line-height 1.05 kleiner als die Schrift — deshalb war das g
   abgeschnitten. overflow schneidet an der Padding-Kante, also vergroessert
   ein Innenabstand den Sichtbereich; der negative Aussenabstand nimmt die
   Hoehe wieder heraus, damit der Zeilenabstand unveraendert bleibt. */
.hero-display div {
  padding-bottom: .26em;
  margin-bottom: -.26em;
}

/* ---- 3  Headerbild maximal ------------------------------------------ */
.hero-sektion { padding-top: clamp(102px, 9.6vh, 136px) !important; }

/* Alle Abstaende im Header laufen ueber gap. Tailwind v4 haengt space-y-*
   als margin-block-END an alle Kinder AUSSER dem letzten — deshalb hat
   margin-top aus Teil 31 nicht gegriffen. */
.hero-sektion .hero-stapel > *,
.hero-sektion .hero-kopfteil > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.hero-sektion .hero-kopfteil { gap: clamp(22px, 4.1vh, 52px) !important; }
.hero-sektion .hero-stapel { gap: clamp(12px, 1.8vh, 28px) !important; }

/* Der Bildbereich nimmt den ganzen Rest zwischen Knopf und Videokante.
   Die Deckelung aus Teil 31 (420 px) faellt weg. */
.hero-sektion .hero-bild {
  max-height: none !important;
  min-height: clamp(170px, 30vh, 380px) !important;
}
/* Weiche Unterkante erst ab 95 %, damit von der Hand moeglichst wenig
   weggeblendet wird. */
.hero-sektion .hero-bild img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 95%, transparent 100%);
}
/* ── Teil 34: Copy-Block im Header ────────────────────────────────
   Jonas 07.09.: Luft ueber der Copy, Block ruhiger gesetzt — Headline und
   Bild bleiben unangetastet. Die Rechnung steht in _teil34.py. */

/* Das Maskenpolster aus Teil 33 wird echt. Der negative Aussenabstand
   faellt weg, damit die Copy nicht mehr in die Unterlaengen der Headline
   hineinragt (gemessen vorher -1 bis -3 px, jetzt +12 bis +25 px). */
.hero-display div { margin-bottom: 0 !important; }

/* Gegenfinanziert ueber die Absatzabstaende, auf dieselbe Groesse gerechnet:
   Bedarf 0.26em x 7.6vh = 1.976vh, Deckung 3 x 1.1vh - 1.38vh = 1.92vh.
   Knopf und Bild bewegen sich dadurch um maximal 1 px. */
.hero-satz + .hero-satz { margin-top: clamp(2px, 0.30vh, 3px) !important; }
/* Vor der Claim-Zeile bleibt es 2.6-fach — der Block behaelt eine
   Gliederung: Lead, zwei Absaetze, Claim. */
.hero-satz + .hero-satz:last-child { margin-top: clamp(5px, 0.78vh, 8px) !important; }

/* Keine Waisen mehr: die Zeilen eines Absatzes werden gleichmaessig
   umbrochen statt "eine volle Zeile plus Restwort". Die Zeilenzahl bleibt
   gleich (an sieben Fenstern nachgemessen), das Layout also auch.
   Aeltere Browser ignorieren die Zeile. */
.hero-satz { text-wrap: balance; }

@media (max-width: 1023px) {
  /* Unter 1024 px ist der Header nicht auf eine Bildschirmhoehe begrenzt,
     dort ist Platz fuer richtige Absatzabstaende. */
  .hero-satz + .hero-satz { margin-top: 8px !important; }
  .hero-satz + .hero-satz:last-child { margin-top: 14px !important; }
}
/* ── Teil 35: Case-Kacheln ────────────────────────────────────────
   Jonas 07.09.: die drei echten Case-Bilder. Sie sind 16:9, die Theme-
   Kachel war 2,58:1 — mit object-cover waere oben und unten je 15 Prozent
   weggeschnitten worden. Die Kachel bekommt deshalb das Verhaeltnis der
   Bilder, damit nichts beschnitten wird. */

.case-bild {
  aspect-ratio: 2688 / 1520;
  height: auto !important;
  max-height: none !important;
}
.case-bild img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
/* ── Teil 36: Buttonschrift, Weiss auf Verlauf, Fusszeile ─────────────────
   Jonas 07.09.: alle Buttons und die Navigation in Inter Tight, Text in
   Verlaufsbuttons weiss, "Address" und "Contact" im Abbinder schwarz.
   Begruendung und die Kontrastzahlen stehen in _teil36.py. */

/* ---- 1  Inter Tight in allen Buttons und in der Navigation --------- */
/* Kein nackter button-Selektor: die Aufklapper der Q&A sind auch <button>. */
.button-split-upper-text,
.button-split-lower-text,
nav.nav-leiste .font-ibm-plex-mono,
aside .font-ibm-plex-mono,
.snoop-btn, .wege-btn, .kopf-btn-grad, .kopf-btn-ghost,
input[type="submit"], input[type="button"] {
  font-family: "Inter Tight", sans-serif !important;
}

/* Menuepunkte auf die Groesse des Knopfes: text-tagline-3 war 14 px,
   text-tagline-2 (der Knopf) ist 16 px. */
nav.nav-leiste .font-ibm-plex-mono,
nav.nav-leiste .text-tagline-3,
aside .nav-link-item .text-tagline-3 {
  font-size: 1rem !important;
  line-height: 150% !important;
}

/* ---- 2  Verlaufsbuttons: Schrift weiss ---------------------------- */
/* Weiss liegt auf dem Verlauf bei 2,79:1 bis 3,34:1 und damit unter der
   WCAG-Anforderung. Abgemildert ueber Schnitt und einen sehr flachen
   Schatten, ohne die Farbe anzutasten. */
.kopf-btn-grad, .wege-btn, .snoop-btn {
  color: #FFFFFF !important;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
/* Der schwarze Knopf auf dem Verlaufsband ist kein Verlaufsbutton. */
.snoop-btn-auf-verlauf { text-shadow: none; }
/* Pfeile und Konturen in diesen Buttons mit. */
.kopf-btn-grad svg [stroke]:not([stroke="none"]),
.wege-btn svg [stroke]:not([stroke="none"]),
.snoop-btn svg [stroke]:not([stroke="none"]) { stroke: #FFFFFF; }

/* Der umgefaerbte Theme-Button in den weissen Sektionen traegt seit
   Teil 19 den Verlauf. Seine Beschriftung liegt in den split-text-Divs und
   wurde von .text-tagline-2 auf 72 Prozent Schwarz gesetzt. */
section[data-grund="weiss"] .bg-background-7.rounded-full .button-split-upper-text,
section[data-grund="weiss"] .bg-background-7.rounded-full .button-split-lower-text,
section[data-grund="weiss"] button.bg-background-7 .button-split-upper-text,
section[data-grund="weiss"] button.bg-background-7 .button-split-lower-text {
  color: #FFFFFF !important;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

/* ---- 3  Fusszeile: "Address" und "Contact" ------------------------ */
/* #dbe2e6 aus dem Theme, von der Umfaerbung in Teil 25 nicht erfasst. */
footer[data-grund="verlauf"] .text-background-11 { color: #000000 !important; }
/* ── Teil 37: Infografik Produkt bis Insight ─────────────────────────
   Jonas 07.09.: aus der Zeile "Produkt -> Experience -> Interaktion ->
   Insight" wird eine Infografik ueber die Breite des Satzspiegels.
   Die Farbwerte sind aus dem CI-Verlauf an der jeweiligen Position
   abgegriffen, damit Linie, Marke und Pfeil nicht springen.
   Rechnung und Begruendung in _teil37.py. */

.fluss { margin: 52px auto 0; }

.fluss-bahn {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative;
}

/* Die Bahn laeuft von der Mitte der ersten bis zur Mitte der letzten
   Marke, also von 12,5 auf 87,5 Prozent. */
.fluss-bahn::before {
  content: ""; position: absolute; z-index: 0;
  left: 12.5%; right: 12.5%; top: 35px; height: 2px;
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
}

.fluss-stufe {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  --ton: #FF36A0;
}
.fluss-stufe:nth-child(2) { --ton: #FF496B; }
.fluss-stufe:nth-child(3) { --ton: #FF5C35; }
.fluss-stufe:nth-child(4) { --ton: #FF6F00; }

.fluss-marke {
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--ton);
  padding: 2px;                 /* das ist der Ring */
  display: block; flex: 0 0 auto;
}
.fluss-marke-innen {
  display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: 999px;
  background: #FFFFFF;
}
.fluss-marke svg { width: 30px; height: 30px; stroke: var(--ton); }

.fluss-titel {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 20px; line-height: 1.2; letter-spacing: -0.2px;
  color: #0d0d12 !important;    /* die weisse Sektion setzt Spans auf inherit */
}

/* Pfeilspitzen zwischen den Stationen, Farbe an ihrer Position abgegriffen */
.fluss-pfeil {
  position: absolute; z-index: 1; top: 36px;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translate(-50%, -50%);
}
.fluss-pfeil-1 { left: 25%; border-left: 8px solid #FF4085; }
.fluss-pfeil-2 { left: 50%; border-left: 8px solid #FF5350; }
.fluss-pfeil-3 { left: 75%; border-left: 8px solid #FF651B; }

@media (max-width: 1023px) {
  .fluss-titel { font-size: 18px; }
  .fluss-marke { width: 64px; height: 64px; }
  .fluss-marke svg { width: 27px; height: 27px; }
  .fluss-bahn::before, .fluss-pfeil { top: 31px; }
  .fluss-pfeil { top: 32px; }
}

/* Unter 768 px in die Senkrechte: vier Stationen nebeneinander waeren auf
   dem Handy je 90 px breit. */
@media (max-width: 767px) {
  .fluss { margin-top: 38px; }
  .fluss-bahn { grid-template-columns: 1fr; gap: 20px; }
  .fluss-bahn::before {
    left: 27px; right: auto; top: 27px; bottom: 27px;
    width: 2px; height: auto;
    background: linear-gradient(180deg, #FF36A0 0%, #FF6F00 100%);
  }
  .fluss-stufe { flex-direction: row; align-items: center; gap: 16px; }
  .fluss-marke { width: 56px; height: 56px; }
  .fluss-marke svg { width: 24px; height: 24px; }
  .fluss-titel { font-size: 17px; text-align: left; }
  .fluss-pfeil { display: none; }
}
/* ── Teil 38: Weissauslauf an der Unterkante des Headervideos ────
   Jonas 07.09.: der Weissauslauf des Templates zurueck, aber genau auf der
   Unterkante des Videos statt darunter. Kurve aus blend.png abgegriffen,
   in reinem Weiss statt im Theme-Grauweiss #F8F9FA.
   Messwerte und Begruendung in _teil38.py. */

.hero-sektion .hero-auslauf {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;                 /* an der Unterkante des Videos */
  height: clamp(140px, 20vh, 260px);
  /* z-index 3: ueber dem Video (2), unter dem Inhalt (4) und unter dem
     Headerbild (10). Die Hand bleibt dadurch scharf. */
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0)    30%,
    rgba(255, 255, 255, .03) 41%,
    rgba(255, 255, 255, .11) 49%,
    rgba(255, 255, 255, .24) 57%,
    rgba(255, 255, 255, .42) 65%,
    rgba(255, 255, 255, .63) 73%,
    rgba(255, 255, 255, .81) 81%,
    rgba(255, 255, 255, .93) 89%,
    #FFFFFF                 100%);
}
/* ── Teil 39: Your product auf Verlauf, Texte auf Verlauf negativ ────
   Jonas 07.09.: die Sektion traegt den Verlauf, alle Texte auf Verlauf
   werden negativ — auch im Abbinder. Kontrastzahlen in _teil39.py. */

/* ---- 1  Wellen und Innenabstand der neuen Verlaufssektion --------- */
.our-impact-section .verlauf-grund { --welle-o: 260px; --welle-u: 260px; }
section[data-grund="verlauf"].our-impact-section {
  padding-top: 300px !important;
  padding-bottom: 300px !important;
}
@media (max-width: 1023px) {
  .our-impact-section .verlauf-grund { --welle-o: 170px; --welle-u: 170px; }
  section[data-grund="verlauf"].our-impact-section {
    padding-top: 200px !important;
    padding-bottom: 200px !important;
  }
}

/* ---- 2  Texte auf Verlauf: negativ -------------------------------- */
/* Ueberschrift und Copy der neuen Sektion */
section[data-grund="verlauf"].our-impact-section h2,
section[data-grund="verlauf"].our-impact-section h2 span,
section[data-grund="verlauf"].our-impact-section .hands-lead {
  color: #FFFFFF !important;
}

/* Own the insights. */
.ins-erste { color: #FFFFFF !important; }
.ins-rest  { color: rgba(255, 255, 255, .78) !important; }

/* Abbinder — dreht die Umfaerbung aus Teil 25 und Teil 36 zurueck. */
footer[data-grund="verlauf"] [class*="text-white/50"] { color: rgba(255, 255, 255, .72) !important; }
footer[data-grund="verlauf"] [class*="text-white/90"] { color: rgba(255, 255, 255, .90) !important; }
footer[data-grund="verlauf"] .text-white,
footer[data-grund="verlauf"] .text-background-11,
footer[data-grund="verlauf"] h1, footer[data-grund="verlauf"] h2,
footer[data-grund="verlauf"] h3, footer[data-grund="verlauf"] h4 { color: #FFFFFF !important; }
footer[data-grund="verlauf"] a { color: inherit; }
footer[data-grund="verlauf"] a:hover { color: #FFFFFF !important; }
footer[data-grund="verlauf"] [class*="border-stroke-"] { border-color: rgba(255, 255, 255, .22) !important; }
footer[data-grund="verlauf"] svg [stroke]:not([stroke="none"]) { stroke: #FFFFFF; }
footer[data-grund="verlauf"] svg [fill]:not([fill="none"]) { fill: #FFFFFF; }

/* ---- 3  Die Infografik auf dem Verlauf ---------------------------- */
/* Die Stationsfarben sind aus dem Verlauf abgegriffen — auf dem Verlauf
   selbst wuerden sie verschwinden. Also alles in Weiss, und der Ring bleibt
   ein Ring: innen durchscheinend statt weiss gefuellt. */
section[data-grund="verlauf"] .fluss-stufe { --ton: #FFFFFF; }
/* Der Ring entstand bisher aus 2 px Innenabstand plus weiss gefuellter
   Mitte. Auf dem Verlauf ist die Fuellung transparent — dann scheint aber
   die weisse Flaeche der Marke durch und es wird eine volle Scheibe.
   Deshalb hier ein echter Rahmen statt der Polstertechnik. */
section[data-grund="verlauf"] .fluss-marke {
  background: transparent;
  padding: 0;
  border: 2px solid #FFFFFF;
}
section[data-grund="verlauf"] .fluss-marke-innen { background: transparent; }
section[data-grund="verlauf"] .fluss-bahn::before { background: #FFFFFF; }
section[data-grund="verlauf"] .fluss-pfeil-1,
section[data-grund="verlauf"] .fluss-pfeil-2,
section[data-grund="verlauf"] .fluss-pfeil-3 { border-left-color: #FFFFFF; }
section[data-grund="verlauf"] .fluss-titel { color: #FFFFFF !important; }
/* ── Teil 40: Ein Radius fuer alle Kaesten ────────────────────────────────
   Jonas 07.09.: ein Radius fuer alles. Wert aus der Design-Spec,
   Karten (Standard) = 28 px. Inventur und Ausnahmen in _teil40.py. */

/* Alle Kastenformen — Theme-Klassen und eigene Bauteile */
[class~="rounded"],
[class*="rounded-sm"], [class*="rounded-md"], [class*="rounded-lg"],
[class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"],
[class*="rounded-["],
.einstieg-karte, .award-kachel, .award-logo, .karte-dunkel,
.case-bild, .faq-kontaktbox, .seitenkopf, .wege-karte {
  border-radius: 8px !important;
}

/* Nur oben gerundet bleibt nur oben gerundet */
[class*="rounded-t-"] { border-radius: 8px 8px 0 0 !important; }
[class*="rounded-b-"] { border-radius: 0 0 8px 8px !important; }

/* Kapselformen sind keine Kaesten: Knoepfe, Punkte, Avatare, Marken der
   Infografik. Diese Regel steht bewusst zuletzt. */
[class*="rounded-full"] { border-radius: 999px !important; }
.snoop-btn, .wege-btn, .kopf-btn-grad, .kopf-btn-ghost,
.fluss-marke, .fluss-marke-innen { border-radius: 999px !important; }
/* ── Teil 41: Navileiste deckend, Hover-Kaestchen der Cases ─────────
   Jonas 07.09.: Leiste beim Scrollen voll deckend schwarz, Hover-Kaestchen
   der Cases dunkel-transparent. Begruendung in _teil41.py. */

nav.nav-leiste.nav-gescrollt {
  background: #000000 !important;
  /* Weichzeichner faellt weg: hinter einer deckenden Flaeche wirkungslos. */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .10) !important;
}

/* Das Kaestchen mit dem Pfeil auf den Case-Bildern. Muss dunkel-transparent
   bleiben, sonst verschwindet der weisse Pfeil darauf. */
.case-hover,
section[data-grund="weiss"] .case-hover,
section[data-grund="verlauf"] .case-hover {
  background: rgba(0, 0, 0, .55) !important;
}
/* ── Teil 42: Ein Pfeil in allen Buttons ────────────────────────────────
   Jonas 07.09.: ueberall derselbe Winkel, immer in der Schriftfarbe.
   Inventur in _teil42.py. */

/* Eigene Bauformen: der Winkel erbt die Schriftfarbe ueber currentColor. */
.btn-winkel { display: inline-flex; align-items: center; flex: 0 0 auto; }
.btn-winkel svg { display: block; }
/* Der Textpfeil war ein Zeichen in der Zeile, der Winkel ist ein Element —
   ohne diese Zeile klebt er an der Schrift. */
.snoop-btn .btn-winkel, .wege-btn .btn-winkel,
.kopf-btn-grad .btn-winkel, .kopf-btn-ghost .btn-winkel { margin-left: 2px; }

/* Knopf in der Navileiste: Abstand zwischen Schrift und Winkel, und der
   Winkel in der Schriftfarbe (#0D1017, gesetzt in Teil 32). */
nav.nav-leiste a[href*="demo.html"] { gap: 8px; }
nav.nav-leiste a[href*="demo.html"] [class*="stroke-background-"],
nav.nav-leiste .button-split-text-wrapper [class*="stroke-background-"] {
  stroke: #0D1017 !important;
}

/* Verlaufsknoepfe in den weissen Sektionen: Schrift ist weiss (Teil 36),
   der Winkel zieht nach. */
section[data-grund="weiss"] .bg-background-7.rounded-full [class*="stroke-background-"],
section[data-grund="weiss"] button.bg-background-7 [class*="stroke-background-"],
section[data-grund="weiss"] .bg-background-7.rounded-full [class*="stroke-white"],
section[data-grund="weiss"] button.bg-background-7 [class*="stroke-white"] {
  stroke: #FFFFFF !important;
}
/* ── Teil 43: Kaesten auf weissen Sektionen hell ────────────────────────
   Jonas 07.09.: die dunklen Kaesten auf weissen Sektionen werden hell,
   die drei Animationen in "One product" auf dunkle Konturen umgestellt,
   Text mittig, Zeichenflaeche groesser.
   ZURUECK: in _teil43.py HELL = False setzen und neu laufen lassen.
   Alle Messwerte und die Herleitung stehen dort. */

/* ---- 1  Flaechen ---------------------------------------------------- */
section[data-grund="weiss"] .karte-dunkel,
section[data-grund="weiss"] .karte-dunkel.bg-white,
section[data-grund="weiss"] .karte-dunkel.bg-background-5,
section[data-grund="weiss"] .karte-dunkel.bg-background-6,
section[data-grund="weiss"] .award-kachel,
section[data-grund="weiss"] .wege-karte {
  background: #F8F9FA !important;
  border-color: rgba(0, 0, 0, .12) !important;
  /* Der eine flache Schatten aus der Design-Spec. Ohne ihn hat die Kachel
     auf Weiss keine Kante mehr. */
  box-shadow: 0 1px 4px rgba(16, 24, 40, .10) !important;
}
/* Kaesten IM Kasten (Kontaktfelder, Formularfelder) gehen auf Weiss. */
section[data-grund="weiss"] .karte-dunkel .bg-background-5,
section[data-grund="weiss"] .karte-dunkel .bg-background-6 { background: #FFFFFF !important; }
section[data-grund="weiss"] .karte-dunkel.ring-background-4 {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .04) !important;
}
section[data-grund="weiss"] .wege-karte:hover {
  border-color: rgba(255, 73, 107, .55) !important;
}

/* ---- 2  Schrift ----------------------------------------------------- */
section[data-grund="weiss"] .karte-dunkel h1, section[data-grund="weiss"] .karte-dunkel h2,
section[data-grund="weiss"] .karte-dunkel h3, section[data-grund="weiss"] .karte-dunkel h4,
section[data-grund="weiss"] .karte-dunkel h5, section[data-grund="weiss"] .karte-dunkel h6,
section[data-grund="weiss"] .karte-dunkel .text-white,
section[data-grund="weiss"] .karte-dunkel [class*="text-white/"],
section[data-grund="weiss"] .cta-oberzeile,
section[data-grund="weiss"] .award-kachel .award-name,
section[data-grund="weiss"] .wege-karte .wege-titel { color: #0d0d12 !important; }

section[data-grund="weiss"] .karte-dunkel p,
section[data-grund="weiss"] .karte-dunkel li,
section[data-grund="weiss"] .karte-dunkel [class*="text-tagline-"],
section[data-grund="weiss"] .award-kachel .award-notiz,
section[data-grund="weiss"] .wege-karte .wege-copy,
section[data-grund="weiss"] .wege-karte .wege-nr { color: rgba(0, 0, 0, .72) !important; }

/* ---- 3  Raender, Konturen, Felder ----------------------------------- */
section[data-grund="weiss"] .karte-dunkel [class*="border-stroke-"],
section[data-grund="weiss"] .wege-karte [class*="border-stroke-"] {
  border-color: rgba(0, 0, 0, .12) !important;
}
section[data-grund="weiss"] .karte-dunkel [class*="stroke-background-"],
section[data-grund="weiss"] .karte-dunkel [class*="stroke-white"],
section[data-grund="weiss"] .karte-dunkel svg [stroke="white"] { stroke: #0d0d12 !important; }
section[data-grund="weiss"] .award-kachel .award-logo { border-color: rgba(0, 0, 0, .28) !important; }
section[data-grund="weiss"] .award-kachel .award-logo span { color: rgba(0, 0, 0, .45) !important; }
section[data-grund="weiss"] .karte-dunkel input,
section[data-grund="weiss"] .karte-dunkel textarea {
  color: #0d0d12 !important; background: #FFFFFF !important;
}
section[data-grund="weiss"] .karte-dunkel input::placeholder,
section[data-grund="weiss"] .karte-dunkel textarea::placeholder {
  color: rgba(0, 0, 0, .45) !important;
}

/* ---- 4  Die drei Animationen auf hellen Grund ----------------------- */
/* Die CI-Teile (.wg-ecke, .wg-linie, .wg-puls, .wg-karte) bleiben #FF496B —
   die tragen auf Hellgrau genauso. Nur die hellen Hilfslinien drehen. */
section[data-grund="weiss"] .wg-pack {
  fill: rgba(0, 0, 0, .05) !important;
  stroke: rgba(0, 0, 0, .45) !important;
}
section[data-grund="weiss"] .wg-phone {
  fill: rgba(0, 0, 0, .04) !important;
  stroke: rgba(0, 0, 0, .45) !important;
}
section[data-grund="weiss"] .wg-notch { fill: rgba(0, 0, 0, .38) !important; }
section[data-grund="weiss"] .wg-feld {
  fill: rgba(0, 0, 0, .06) !important;
  stroke: rgba(0, 0, 0, .42) !important;
}
/* Der Glow der Scanlinie wirkt auf Hellgrau schnell wie ein Fleck. */
section[data-grund="weiss"] .wg-linie {
  filter: drop-shadow(0 0 5px rgba(255, 73, 107, .55)) !important;
}
/* Der Schein hinter der Grafik ueberstrahlt sonst die duennen Konturen. */
section[data-grund="weiss"] .wege-karte::before {
  background: radial-gradient(closest-side, rgba(255, 73, 107, .14), transparent 72%) !important;
  width: 360px !important; height: 268px !important;
}

/* ---- 5  Mittig und groesser ---------------------------------------- */
section[data-grund="weiss"] .wege-karte { text-align: center !important; }
section[data-grund="weiss"] .wege-karte .wege-titel,
section[data-grund="weiss"] .wege-karte .wege-copy,
section[data-grund="weiss"] .wege-karte .wege-nr { text-align: center !important; }
/* 258 px: bei viewBox 180 x 132 fuellt die Zeichnung damit die volle
   Innenbreite der Karte aus. Mehr geht ohne Beschnitt nicht. */
section[data-grund="weiss"] .wege-bild {
  height: 258px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 979px) {
  section[data-grund="weiss"] .wege-bild { height: 230px !important; }
}
/* ── Teil 46: Case-Kacheln, Platzhalter oder Bild ───────────────────────
   Farbige Platzhalter. Die drei Flaechen tragen zusammen einen
   durchlaufenden CI-Verlauf, die Werte sind an derselben Stelle
   abgegriffen wie bei der Infografik. Zurueck auf Bild: in _teil46.py
   BILDER = True setzen. */

.case-bild { position: relative; }
/* Das Bild bleibt im Markup, wird aber nicht angezeigt und deshalb vom
   Browser auch nicht geladen. */
.case-bild img { display: none !important; }

.case-bild::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, #FF36A0 0%, #FF4A6B 100%);
}
/* Kachel 2 und 3 setzen den Verlauf fort. */
.grid > div:nth-of-type(2) .case-bild::before {
  background: linear-gradient(120deg, #FF4A6B 0%, #FF5C35 100%);
}
.grid > div:nth-of-type(3) .case-bild::before {
  background: linear-gradient(120deg, #FF5C35 0%, #FF6F00 100%);
}

.case-hinweis {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter Tight", sans-serif;
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  /* !important, weil die weisse Sektion alle Spans auf color: inherit
     setzt (0-4-1) und damit jede einfache Klassenregel schlaegt. */
  color: rgba(255, 255, 255, .78) !important;
  text-align: center; padding: 0 24px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .case-hinweis { font-size: 11px; letter-spacing: .12em; }
}

/* ===============================================================
   Teil 47 - Texte nach Viviens Sitemap vom 07.09.2026
   =============================================================== */

/* Die Einstiegskarten haben jetzt vier Textebenen statt drei:
   Bereich, Zeile, Begruendungssatz, Stichwortzeile. Damit die Karte
   nicht ausbricht, ruecken Zeile und Stichwortzeile eine Stufe
   zurueck; der Satz bekommt die Lesegroesse. */
.einstieg-karte { min-height: 440px !important; }
.einstieg-titel { font-size: 26px !important; letter-spacing: -0.9px !important; }
.einstieg-text {
  margin: 14px 0 0;
  font-family: "Inter Tight", sans-serif;
  font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .82);
}
.einstieg-copy {
  margin-top: 14px !important;
  font-size: 13px !important; line-height: 1.55 !important;
  color: rgba(0, 0, 0, .66) !important;
}
/* Die laengste Beschriftung ist "Marketing & Brand Experience entdecken".
   Sie darf umbrechen, ohne die Pille zu sprengen. */
.einstieg-btn { font-size: 15px !important; align-items: center !important; }
.einstieg-label { display: block; line-height: 1.25; }
@media (max-width: 1023px) {
  .einstieg-karte { min-height: 0 !important; }
}

/* "From Paid Media to Owned Media." - Zwischenzeile im Verlaufsabschnitt */
.hands-zwischen {
  margin: 26px auto 0;
  text-align: center;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.6px; font-weight: 500;
  color: #FFFFFF !important;
}
@media (max-width: 639px) { .hands-zwischen { font-size: 19px; margin-top: 20px; } }

/* Der vierte Absatz erbt die Regeln der ersten drei. */
.hands-lead-4 { font-size: 18px; line-height: 1.6; font-weight: 500; }
.hands-lead-4 { margin-top: 10px !important; }
section[data-grund="weiss"] .hands-lead-4 { color: #0d0d12 !important; }
section[data-grund="verlauf"].our-impact-section .hands-lead-4 { color: #FFFFFF !important; }
@media (max-width: 639px) { .hands-lead-4 { font-size: 16px !important; } }

/* Infografik mit fuenf Stationen. Die Bahn laeuft von der Mitte der
   ersten bis zur Mitte der letzten Marke, bei fuenf Spalten also von
   10 auf 90 Prozent. Die Pfeile sitzen auf 20/40/60/80 Prozent, ihre
   Toene sind an genau diesen Stellen auf dem Verlauf abgegriffen. */
.fluss-fuenf .fluss-bahn { grid-template-columns: repeat(5, 1fr); }
.fluss-fuenf .fluss-bahn::before { left: 10%; right: 10%; }
.fluss-fuenf .fluss-stufe:nth-child(1) { --ton: #FF36A0; }
.fluss-fuenf .fluss-stufe:nth-child(2) { --ton: #FF4478; }
.fluss-fuenf .fluss-stufe:nth-child(3) { --ton: #FF5250; }
.fluss-fuenf .fluss-stufe:nth-child(4) { --ton: #FF6128; }
.fluss-fuenf .fluss-stufe:nth-child(5) { --ton: #FF6F00; }
.fluss-fuenf .fluss-pfeil-1 { left: 20%; border-left: 8px solid #FF3D8C; }
.fluss-fuenf .fluss-pfeil-2 { left: 40%; border-left: 8px solid #FF4B64; }
.fluss-fuenf .fluss-pfeil-3 { left: 60%; border-left: 8px solid #FF5A3C; }
.fluss-fuenf .fluss-pfeil-4 { left: 80%; border-left: 8px solid #FF6814; }
/* Fuenf Titel in einer Reihe brauchen etwas weniger Grad. */
.fluss-fuenf .fluss-titel { font-size: 18px; }
@media (max-width: 1279px) {
  .fluss-fuenf .fluss-marke { width: 64px; height: 64px; }
  .fluss-fuenf .fluss-titel { font-size: 16px; }
  .fluss-fuenf .fluss-bahn::before, .fluss-fuenf .fluss-pfeil { top: 31px; }
}
@media (max-width: 767px) {
  .fluss-fuenf .fluss-bahn { grid-template-columns: 1fr; }
  .fluss-fuenf .fluss-bahn::before { left: 27px; right: auto; }
  .fluss-fuenf .fluss-titel { font-size: 17px; }
}
/* Auf dem Verlauf bleibt alles negativ, auch der neue vierte Pfeil.
   Wichtig: die fuenf nth-child-Toene oben sind spezifischer (0-3-0) als
   die Regel aus Teil 39 (section[data-grund="verlauf"] .fluss-stufe,
   0-2-0). Ohne diese Zeile blieben die Piktogramme auf dem Verlauf
   pink und waren praktisch unsichtbar - genau so gerendert. */
section[data-grund="verlauf"] .fluss-fuenf .fluss-stufe { --ton: #FFFFFF !important; }
section[data-grund="verlauf"] .fluss-pfeil-4 { border-left-color: #FFFFFF !important; }

/* Kette Measure -> Understand -> Learn -> Act.
   Bewusst typografisch, keine zweite Infografik im selben Blickfeld. */
.kette {
  margin: 44px auto 24px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px 14px;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  color: #FFFFFF !important;
}
.kette span { color: inherit !important; }
.kette-pfeil { opacity: .6; letter-spacing: 0; }
section[data-grund="weiss"] .kette, section[data-grund="weiss"] .kette span {
  color: #0d0d12 !important;
}
@media (max-width: 639px) { .kette { font-size: 13px; gap: 8px 10px; } }

/* Portfolio-Copy: erste Zeile als Aussage, Rest als Erlaeuterung.
   Gleiche Logik wie .ins-erste / .ins-rest, damit die Seite ein
   einheitliches Muster hat. */
.port-erste { color: #000000 !important; font-weight: 500; }
.port-rest  { color: rgba(0, 0, 0, .72) !important; }

/* ===============================================================
   Teil 48 - echte Award-Logos
   =============================================================== */

/* Aus der gestrichelten Platzhalterflaeche wird eine reine Buehne:
   kein Rahmen, keine Fuellung, feste Hoehe, damit die drei Kacheln
   trotz unterschiedlicher Logohoehen auf einer Grundlinie sitzen. */
.award-logo {
  width: auto !important;
  height: 64px !important;
  max-width: 100%;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
}
.award-logo span { display: none !important; }

.award-bild {
  display: block;
  max-width: 100%;
  height: auto;
  /* Die Logos sind Wort-Bild-Marken. Keine Filter, kein Einfaerben,
     keine Verzerrung - nur Skalierung. */
}
/* Optisch gleich schwer gerechnet, nicht gleich hoch:
   Tintenflaeche gemessen und auf einen gemeinsamen Wert gebracht. */
.award-bild-gba   { width:  99px; }
.award-bild-effie { width: 192px; }
.award-bild-gs1   { width: 243px; }

@media (max-width: 479px) {
  /* Kachel 280 px minus 2 x 26 px Innenrand = 228 px nutzbar */
  .award-bild-gba   { width:  92px; }
  .award-bild-effie { width: 178px; }
  .award-bild-gs1   { width: 225px; }
  .award-logo { height: 58px !important; }
}

/* Die Logos sind schwarz auf transparent. Das passt auf den hellen
   Kachelgrund (#F8F9FA) aus Teil 43. Wuerde die Kachel wieder dunkel
   werden, braeuchten wir die offiziellen Negativfassungen von den
   Auslobern - ein invert() waere eine Veraenderung der Marke und
   kommt hier nicht in Frage. */

/* ===============================================================
   Teil 49 - Award-Kacheln: nur Logo, Naht geschlossen
   =============================================================== */

/* Das Logo ist der einzige Inhalt und sitzt in beiden Achsen mittig.
   Der Absatz von 22 px unter dem Logo war fuer die Namenszeile da und
   haette die Marke jetzt nach oben aus der Mitte geschoben. */
.award-logo { margin-bottom: 0 !important; }
.award-kachel {
  justify-content: center !important;
  align-items: center !important;
}
.award-name, .award-notiz { display: none !important; }

/* Die Naht zwischen den Marquee-Kopien.
   Das gap-8 der Reihe (32 px) wirkt nur innerhalb einer Reihe, an der
   Naht standen die Kacheln auf Stoss. Deshalb: gap raus, statt dessen
   16 px Rand an jeder Kachel. 16 + 16 ergibt ueberall dieselben 32 px -
   innerhalb der Reihe, an der Naht und zwischen den inner-Ebenen.
   Vorteil gegenueber einem gap auf den Elternebenen: die Laufweite der
   Animation bleibt unberuehrt, es entsteht kein Sprung im Umlauf. */
.award-reihe { gap: 0 !important; }
.award-kachel { margin-inline: 16px !important; }

/* ===============================================================
   Teil 53 - Einstiegskarten: Text auf dem Verlauf ist weiss
   =============================================================== */

/* Volles Weiss auf allen vier Ebenen - Bereich, Zeile, Satz,
   Stichwortzeile. Erst hatte ich sie ueber Deckkraft abgestuft (.86 /
   .94 / .80), wie es auf dunklem Grund ueblich ist. Gemessen kostet das
   auf diesem Verlauf zu viel: die Stichwortzeile lag bei 80 % Deckkraft
   nur noch bei 2,26:1 auf Orange, mit vollem Weiss bei 2,79:1. Die
   Hierarchie tragen hier Groesse, Schnitt und Laufweite - 12 px Mono
   gesperrt, 26 px Sora, 15 px, 13 px - das reicht ohne Deckkraft. */
.einstieg-karte { color: #FFFFFF; }
.einstieg-bereich { color: #FFFFFF; }
.einstieg-text { color: #FFFFFF; }

/* Die Zeile braucht den Sektionspraefix. Das Theme hat in Zeile 8916
   die Regel section[class*="background-7"] h3 { color: #0d0d12 } - das
   ist Spezifitaet 0-1-1 (Attribut + Element) und schlaegt eine nackte
   Klasse mit 0-1-0, egal wie weit hinten sie steht. Mit dem Praefix
   stehen hier 0-2-0 und die Zeile wird weiss. Beim ersten Lauf war sie
   deshalb noch dunkel - gemessen, nicht vermutet. */
section[class*="background-7"] .einstieg-titel { color: #FFFFFF; }

/* Hier ist !important noetig: Teil 47 hat die Farbe der Stichwortzeile
   selbst mit !important gesetzt (rgba(0,0,0,.66)). Ohne !important
   gewinnt die alte Regel, egal wie weit hinten diese hier steht. */
.einstieg-copy { color: #FFFFFF !important; }

/* Die Pille bleibt schwarz mit weisser Schrift. Sie steht nicht auf
   dem Verlauf, sondern auf ihrem eigenen Grund - da war nichts zu
   aendern, und schwarz auf Verlauf ist hier der noetige Anker. */

/* ===============================================================
   Teil 54 - echte Case-Bilder statt Platzhalter
   =============================================================== */

/* Teil 42 hatte das Bild versteckt (display:none) und statt dessen
   einen Verlauf ueber ::before gelegt, weil die Motive fehlten. Beides
   wird hier zurueckgenommen. !important ist noetig, weil Teil 42 es
   selbst mit !important gesetzt hat. */
.case-bild img { display: block !important; }
.case-bild::before { content: none !important; }

/* Falls irgendwo noch eine Hinweiszeile im Markup steht: sie hat jetzt
   keinen Grund mehr, sichtbar zu sein. */
.case-hinweis { display: none !important; }

/* ===============================================================
   Teil 55 - nachgetragene Abschnitte aus Viviens Word
   =============================================================== */

/* Die Farben stehen als style-Attribut am Element, nicht hier. Grund:
   section[data-grund="weiss"] p:not(.snoop-btn):not(.award-notiz) setzt
   Absaetze auf color:inherit und hat mit 0-3-1 mehr Gewicht als jede
   eigene Klasse. Inline gewinnt - genau so macht es die Sektion
   "See what your product can become." schon. */
.t55-claim {
  margin: 34px auto 0;
  max-width: 1080px;
  text-align: center;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 30px; line-height: 1.22; letter-spacing: -1.1px; font-weight: 400;
}
.t55-trio, .t55-fliess {
  margin: 30px auto 0;
  max-width: 1080px;
  text-align: center;
  font-size: 19px; line-height: 1.7;
}
.t55-abbinder {
  margin: 40px auto 0;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
@media (max-width: 639px) {
  .t55-claim { font-size: 23px; letter-spacing: -.7px; }
  .t55-trio, .t55-fliess { font-size: 17px; }
}


/* ── Teil 57: Ablaufgrafiken wie auf den Unterseiten ────────────────
   Ein SVG, das mit der Spalte skaliert. Auf dem Handy laesst sich der
   Streifen seitlich schieben, statt die Beschriftung unlesbar klein zu
   rechnen - dieselbe Regel wie auf den Unterseiten. */
/* Nur das aeussere SVG skaliert. Die Piktogramme sind verschachtelte
   SVG-Elemente - eine Regel auf ".ablauf svg" haette auch sie auf die
   volle Breite gezogen (einmal gebaut, einmal gesehen, korrigiert). */
.ablauf { max-width: 1250px; margin: 44px auto 10px; }
.ablauf > svg { display: block; width: 100%; height: auto; }
/* v4: Verhalten auf kleinen Bildschirmen siehe Abschnitt "v4: Ablauf- und Kettengrafiken" am Dateiende. */

/* ── Teil 58: Bildband und Kapitelmarke in den beiden Textsektionen ──
   Das Band liegt auf dem Satzspiegel der Startseite (1250) und ist auf
   16:9 beschnitten - ein 3:2-Motiv waere hier 830 px hoch und haette den
   Abschnitt in zwei Haelften zerlegt. Die Kante ist dasselbe Zeichen wie
   auf den Unterseiten, nur mittig, weil diese Sektionen mittig stehen. */
.sek-bild { max-width: 1250px; margin: 48px auto 44px; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 8px; background: #F8F9FA; }
.sek-bild img { display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center; }
.sek-kante { display: block; width: 132px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #FF36A0 0%, #FF6F00 100%);
  /* 44 px Luft nach oben: ohne sie klebt die Kante an der letzten
     Textzeile darueber (einmal gebaut, gesehen, korrigiert). */
  margin: 44px auto 22px; }
@media (max-width: 1023px) {
  .sek-bild { margin: 32px auto 30px; border-radius: 6px; }
}

/* ── Teil 59: durchlaufender Fliesstext, buendiger Abbinder ─────────
   Enges Mass fuer durchlaufenden Text: 860 px sind rund 95 Zeichen pro
   Zeile. Auf dem 1250er Satzspiegel waeren es 160 - das liest niemand
   gern, mittig gesetzt noch weniger. text-wrap:pretty laesst den
   Browser den Flattersatz gleichmaessiger brechen. */
.fliess-mitte { max-width: 860px !important; margin-left: auto;
  margin-right: auto; text-wrap: pretty; }

/* Die untere Abbinderleiste ohne eigenen Innenabstand: so steht das
   Copyright auf derselben Kante wie die Sozial-Icons darueber. */
.abbinder-schluss { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 639px) {
  .abbinder-schluss { align-items: flex-start !important; }
}

/* ── Teil 61: der Fliesstext in "Your product is already in their hands."
   Die drei Absaetze davor sind zu einem geworden; hier bleibt der
   Abstand zum Claim zu setzen, damit der Absatz nicht an ihm klebt. */
.hands-fliess { margin-top: 18px !important; }
.hands-zwischen + .hands-fliess { margin-top: 14px !important; }
/* Eigenes Mass, das .fliess-mitte schlaegt: bei 920 px faellt der
   Umbruch so, dass "snoop it! verlaengert" zusammenbleibt - bei 860
   stand der Markenname als letztes Wort einer Zeile, sein Verb allein
   auf der naechsten (gemessen am 27.09. ueber 700-1000 px). */
p.hands-fliess { max-width: 920px !important; }
/* Ein einziger gesetzter Umbruch: der zweite Absatz endet sonst mit
   "Consumer Insights." allein auf der letzten Zeile, waehrend die erste
   mitten im Satz aufhoert. So enden beide Zeilen auf einem Punkt. Unter
   768 px ist die Spalte zu schmal dafuer - dort bricht der Browser um. */
.umbruch-breit { display: inline; }
@media (max-width: 767px) { .hands-fliess .umbruch-breit { display: none; } }

/* ── Teil 62: Lauftext in "From first scan to connected product." ───
   Dasselbe Mass wie in den anderen Fliesstexten der Startseite, damit
   die Seite ein Mass hat und nicht drei. */
.t55-lauf { margin: 26px auto 0; max-width: 920px; text-align: center;
  font-size: 19px; line-height: 1.7; }
.t55-lauf + .t55-lauf { margin-top: 20px; }
.t55-lauf strong { font-weight: 600; }
.t55-lauf + .sek-bild { margin-top: 48px; }
@media (max-width: 639px) { .t55-lauf { font-size: 17px; } }

/* Awards ohne Slider: die Reihe steht still und mittig. Falls das
   Theme-Skript doch einmal klont, bleibt nur die erste Reihe sichtbar. */
.award-reihe-fest { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 32px 56px; }
.award-reihe-fest + * { display: none !important; }
@media (max-width: 639px) { .award-reihe-fest { gap: 24px 32px; } }

/* Die Oberzeile des Abschlusskastens bleibt in einer Zeile. Gemessen
   am 27.09.: bei 834 px fehlten 2 px, bei 390 px 41 px. */
.cta-oberzeile { white-space: nowrap; }
@media (max-width: 1023px) { .cta-oberzeile { font-size: 22px; } }
/* Auf kleinen Geraeten waechst die Zeile mit dem Schirm mit: bei
   320 px reichen 16 px nicht (44 px zu breit), 4,1 vw passen ueberall
   zwischen 320 und 390 px. */
@media (max-width: 639px)  { .cta-oberzeile { font-size: min(16px, 4.1vw); } }

/* ── Teil 63: gleicher Zeilenabstand in der Hero-Headline ───────────
   Gemessen am 28.09.: erste zu zweiter Zeile 100 px, zweite zu dritter
   79 px. Ursache ist die Zeilenanimation des Themes: sie legt um jede
   Zeilengruppe einen Maskenkasten mit overflow:hidden und gibt ihm
   0,26 em Innenabstand nach unten, damit Unterlaengen beim Einblenden
   nicht abgeschnitten werden. Genau diese 0,26 em (19,76 px bei 76 px
   Schrift) standen zusaetzlich zwischen erster und zweiter Zeile.
   Der negative Aussenabstand nimmt sie aus dem Umbruch wieder heraus -
   die Maske bleibt hoch genug, nur der Fluss rechnet sie nicht mehr
   mit. Das !important ist noetig, weil das Theme div-Aussenabstaende
   mit !important auf null setzt. Der letzte Kasten behaelt seinen
   Abstand, damit der Text darunter nicht naeherrueckt. */
#hero-heading > div:not(:last-child) { margin-bottom: -0.26em !important; }

/* ── Teil 64: ein Satzspiegel fuer alles ────────────────────────────
   Das Mass der Navigationspille: 1080 px, mittig, darunter 20 px Rand.
   Logo und Knopf sitzen auf genau diesen Kanten. */
:root { --satzspiegel: 1080px; --satz-rand: 20px; }

.main-container,
.us-container {
  width: min(var(--satzspiegel), 100% - 2 * var(--satz-rand)) !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bloecke, die bisher ein eigenes, breiteres Mass hatten, laufen jetzt
   auf den Satzspiegel. Sie stehen damit Kante an Kante mit Logo und
   Knopf. */
.copy-satzspiegel,
.ablauf,
.sek-bild,
.t55-claim,
.t55-trio,
.t55-fliess,
#hero-heading {
  max-width: var(--satzspiegel) !important;
}

/* Die Ausnahme: durchlaufender Copytext bleibt lesbar schmal und steht
   mittig im Rahmen (Entscheidung Jonas, 29.09.). */
p.hands-fliess,
.fliess-mitte,
.t55-lauf {
  max-width: 920px !important;
}

/* Unter 1024 px ist der Rand bereits im Mass enthalten - die alten
   Innenabstaende der Container wuerden ihn verdoppeln. */
@media (max-width: 1023px) {
  .us-container { padding: 0 !important; }
}

/* ── Teil 65: Satzspiegel 1200 px, Navileiste zieht mit ─────────────
   Grund: bei 1080 brauchten drei der vier Einstiegs-Buttons drei Zeilen.
   Die Schwelle liegt bei 1195 (in 5-px-Schritten gemessen), 1200 gibt
   etwas Luft. Formel, Rand und die Ausnahme fuer Lauftext bleiben wie
   in Teil 64. */
:root { --satzspiegel: 1200px; }

/* Die Navileiste ist ein durchgehender Balken, kein schwebender Kasten:
   Logo und Knopf sitzen auf ihrem Innenabstand. Der wird daher aus
   demselben Mass gerechnet - so bleiben die beiden Kanten identisch,
   was auch immer im Mass steht. Nur ab 1024 px; darunter gilt der
   feste Rand von 20 px aus der Regel weiter oben. */
@media (min-width: 1024px) {
  nav.nav-leiste {
    padding-left: max(20px, calc((100% - var(--satzspiegel)) / 2)) !important;
    padding-right: max(20px, calc((100% - var(--satzspiegel)) / 2)) !important;
  }
}

/* ── Teil 66: Innenmass des Abschlusskastens ────────────────────────
   Ein Wert fuer beide Seiten: der Text beginnt darauf, das vorderste
   Produkt endet darauf. Die beiden hinteren Produkte halten ihren
   Abstand zum vordersten und rutschen mit. */
.cta-kasten { --cta-rand: 56px; }
@media (min-width: 1280px) {
  .cta-kasten { padding: 72px var(--cta-rand) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-1 {
    right: var(--cta-rand) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-2 {
    right: calc(var(--cta-rand) + 138px) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-3 {
    right: calc(var(--cta-rand) + 328px) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cta-kasten { --cta-rand: 48px; padding: 64px var(--cta-rand) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-1 {
    right: var(--cta-rand) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-2 {
    right: calc(var(--cta-rand) + 108px) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-3 {
    right: calc(var(--cta-rand) + 250px) !important; }
}

/* 1024-1279: der Textblock darf nur so breit werden, dass er vor dem
   hintersten Produkt endet - sonst steht seine letzte Zeile unter dem
   Bild (gemessen: Kasten 984, Bilder beginnen bei 584). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cta-kasten > div:not(.cta-v2-images-wrapper) { max-width: 480px !important; }
}

/* 768-1023: Reihe bleibt, aber die Packungen werden kleiner und der
   Textblock schmaler. Vorher standen dort die vollen Theme-Groessen
   (bis 250 px breit, 406 px hoch) - die Packungen ragten oben aus dem
   Kasten und ruecken der Copy auf die Pelle. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-kasten { padding: 48px 40px !important; }
  .cta-kasten > div:not(.cta-v2-images-wrapper) { max-width: 400px !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-1 {
    right: 40px !important; bottom: 0 !important;
    width: 120px; height: 210px;
    max-width: 120px !important; max-height: 210px !important;
    transform: rotate(0deg) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-2 {
    right: 126px !important; bottom: 10px !important;
    width: 134px; height: 210px;
    max-width: 134px !important; max-height: 210px !important;
    transform: rotate(-7deg) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-3 { display: none !important; }
}

/* Unter 768 px stapeln: Text oben, ein Produkt darunter. Vorher lagen
   die drei Packungen als absolute Ebene ueber dem Text - auf 390 px lief
   die Copy sichtbar in die Colorationspackung hinein ("und au", "einen
   e", "messbaren"). Gestapelt kann das nicht mehr passieren, und drei
   Packshots hinter vier Textzeilen waeren auf dem Handy ohnehin zu viel.
   Das vorderste Produkt bleibt, die beiden hinteren treten ab. */
@media (max-width: 767px) {
  .cta-kasten { flex-direction: column !important; align-items: stretch !important;
    padding: 32px 28px 0 !important; }
  .cta-kasten .cta-v2-images-wrapper { position: relative !important;
    height: 230px; margin-top: 26px; }
  /* Zwei Packungen statt einer, sonst steht links vom Produkt eine
     leere Flaeche - auf 700 px ist der Kasten dafuer zu breit. Sie
     stehen mittig, weil es unter dem Text keine rechte Kante gibt, auf
     die sie sich beziehen koennten. */
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-1 {
    left: 50% !important; right: auto !important; bottom: 0 !important;
    margin-left: 10px;
    width: 120px; height: 210px;
    max-width: 120px !important; max-height: 210px !important;
    transform: rotate(0deg) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-2 {
    left: 50% !important; right: auto !important; bottom: 10px !important;
    margin-left: -124px;
    width: 134px; height: 210px;
    max-width: 134px !important; max-height: 210px !important;
    transform: rotate(-7deg) !important; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-3 { display: none !important; }
}
/* Unter 640 px blendet das Theme die zweite Packung ohnehin aus - die
   verbleibende steht dann allein in der Mitte. */
@media (max-width: 639px) {
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-1 { margin-left: -60px; }
  .cta-kasten .cta-v2-images-wrapper .cta-v2-image-2 { display: none !important; }
}

/* ── Teil 69: Oberzeile im Abschlusskasten ──────────────────────────
   Kleiner und dichter an der Headline - Vorlauf statt zweiter Headline.
   Die Groessen stehen hier vollstaendig, damit sie nicht aus drei
   verschiedenen Teilen zusammengesucht werden muessen. */
.cta-oberzeile { font-size: 24px !important; margin: 0 0 2px !important; }
@media (max-width: 1023px) { .cta-oberzeile { font-size: 18px !important; } }
@media (max-width: 639px)  { .cta-oberzeile { font-size: min(15px, 3.9vw) !important; } }

/* ── Teil 72: Lesbarkeit und die neue Grafik in "Own the insights." ──
   Das Theme setzt Beschriftungen auf text-white/20. Auf dem Grund
   #0D1017 sind das rund 1,6:1 Kontrast - unter der Schwelle von 4,5:1,
   ab der kleine Schrift lesbar ist. Die Klassen bleiben im HTML stehen
   und werden hier nur fuer diesen einen Abschnitt ueberschrieben; so
   bleibt das Theme anderswo unberuehrt. */
.ins-sektion .text-white\/20 { color: rgba(255,255,255,.74) !important; }
.ins-sektion .text-white\/30 { color: rgba(255,255,255,.68) !important; }
.ins-sektion .text-white\/50 { color: rgba(255,255,255,.70) !important; }
.ins-sektion .text-white\/60 { color: rgba(255,255,255,.88) !important; }
/* Die farbigen Schrittmarken der linken Karte standen auf 60 % ihrer
   ohnehin dunklen Farbe. */
.ins-sektion .text-opai-blue\/60,
.ins-sektion .text-opai-purple\/60 { opacity: 1 !important; }

/* Die Wege-Grafik steht an der Stelle des alten Platzhalterbildes:
   rechte Haelfte der Karte, mit Luft nach unten, damit sie nicht an der
   Kartenkante klebt. */
   Das alte Theme-Bild lief um 59 px ueber die rechte Kartenkante hinaus
   - bei einem Foto Absicht, bei einer beschrifteten Grafik waere es ein
   Fehler: die Zeile "Digitaler Produktpass" wuerde angeschnitten.
   Deshalb ein Mass, das in die Karte passt. */
   Ursache ist die Aufteilung der Karte: der Textblock links traegt
   w-full und schiebt die Grafik nach rechts aus der Karte heraus. Er
   bekommt daher eine mitwachsende statt einer vollen Breite, die Grafik
   eine feste Hoechstbreite, und die Karte rechts etwas Rand. */
   Ursache ist die Aufteilung der Karte: der Textblock links traegt
   w-full und schiebt die Grafik nach rechts aus der Karte heraus. Er
   bekommt daher eine mitwachsende statt einer vollen Breite, die Grafik
   eine feste Hoechstbreite. */
.ins-wege { width: 100%; max-width: 100%; align-self: center; }
.ins-wege svg { width: 100%; height: auto; display: block; }
@media (min-width: 1024px) {
  .ins-wege { max-width: 380px; flex: 0 1 380px; }
  .ins-sektion [aria-labelledby="ai-chatbot-heading"] > div.w-full {
    width: auto; flex: 1 1 auto; min-width: 0;
  }
}

/* Unter 1024 px stapeln sich Ueberschrift und Grafik in der Karte. Die
   feste Hoehe des Themes (344 px) reicht dafuer nicht mehr, weil die
   Grafik hoeher baut als das alte Bild. Beide unteren Karten wachsen
   dort jetzt mit ihrem Inhalt. */
@media (max-width: 1023px) {
  .ins-sektion [aria-labelledby="ai-chatbot-heading"],
  .ins-sektion [aria-labelledby="data-analytics-heading"] {
    height: auto !important;
    padding-bottom: 28px;
  }
}

/* Die grosse linke Karte: das Theme legt einen 426 px hohen Schleier
   ueber die untere Kartenhaelfte, damit die Ueberschrift auf der Liste
   stehen kann. Der vierte Schritt ("Insight") lag vollstaendig darunter
   und darin - unlesbar, und mit der Ueberschrift auf derselben Zeile.
   Gemessen bei 1512 px: die Schrittfolge ist 539 px hoch, sie stand
   mittig bei 82..621, die Ueberschrift beginnt bei 585.
   Der Innenabstand unten schiebt die mittig gesetzte Folge nach oben -
   um die Haelfte des Zuwachses. 162 statt 42 px verschieben sie um
   60 px auf 22..561 und lassen 24 px Luft zur Ueberschrift. Der
   Schleier reicht nur noch hinter die Ueberschrift. */
.ins-sektion [aria-labelledby="intelligent-automation-heading"] {
  padding-bottom: 162px;
}
.ins-sektion .ins-schleier { height: 160px !important; }

/* ── Teil 74: Rollensystem Startseite ───────────────────────────────
   Elf Rollen statt 49 Einzelstile. Zwei Dinge vorweg:

   1. Alle Rollen sind auch einzeln benutzbar (.st-buehne, .st-kapitel
      und so weiter). Wer neue Bausteine schreibt, haengt sie direkt an
      diese Klassen - dann muss hier nichts nachgezogen werden.

   2. Die Zuweisung an den Bestand steht unter `body.st-rollen`. Faellt
      die Klasse weg, sieht die Seite wieder aus wie vorher. Das ist
      der Rueckweg, um den Jonas gebeten hat.

   Die Unterseiten tragen `us-*` und werden hier nirgends beruehrt. */

:root {
  /* Buehne */
  --st-buehne: 68px;        --st-buehne-zab: 1.05;  --st-buehne-lw: -3px;
  --st-buehne-text: 20px;
  /* Kapitel */
  --st-vorlauf: 13px;
  --st-kapitel: 48px;       --st-kapitel-zab: 1.15; --st-kapitel-lw: -2px;
  --st-lead: 20px;          --st-lead-zab: 1.55;
  --st-claim: 30px;         --st-claim-zab: 1.22;   --st-claim-lw: -1.1px;
  /* Text */
  --st-fliess: 18px;        --st-fliess-zab: 1.62;
  /* Kacheln */
  --st-kachel-titel: 24px;  --st-kachel-titel-lw: -0.7px;
  --st-kachel-text: 16px;
  /* Kleinteile */
  --st-meta: 14px;          --st-knopf: 16px;
}
@media (max-width: 1279px) {
  :root { --st-buehne: 60px; --st-kapitel: 42px; --st-kachel-titel: 22px; }
}
@media (max-width: 1023px) {
  :root { --st-buehne: 48px; --st-buehne-text: 19px; --st-kapitel: 36px;
          --st-lead: 19px; --st-kachel-titel: 21px; }
}
@media (max-width: 767px) {
  :root { --st-buehne-text: 18px; --st-vorlauf: 12px; --st-kapitel: 30px;
          --st-lead: 18px; --st-fliess: 17px; --st-kachel-titel: 20px;
          --st-kachel-text: 15px; }
}
@media (max-width: 639px) {
  :root { --st-buehne: 34px; --st-buehne-text: 17px; --st-lead: 17px;
          --st-fliess: 16px; --st-claim: 22px; --st-meta: 13px;
          --st-knopf: 15px; }
}

/* ── Die elf Rollen ──────────────────────────────────────────────── */
.st-buehne { font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: var(--st-buehne); line-height: var(--st-buehne-zab);
  letter-spacing: var(--st-buehne-lw); }
.st-buehne-text { font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 400; font-size: var(--st-buehne-text); line-height: 1.5; }
.st-vorlauf { font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400; font-size: var(--st-vorlauf); line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; }
.st-kapitel { font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: var(--st-kapitel); line-height: var(--st-kapitel-zab);
  letter-spacing: var(--st-kapitel-lw); }
.st-lead { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 400;
  font-size: var(--st-lead); line-height: var(--st-lead-zab); }
.st-claim { font-family: "Sora", system-ui, sans-serif; font-weight: 400;
  font-size: var(--st-claim); line-height: var(--st-claim-zab);
  letter-spacing: var(--st-claim-lw); }
.st-fliess { font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 400; font-size: var(--st-fliess);
  line-height: var(--st-fliess-zab); }
.st-fliess strong { font-weight: 600; }
.st-kachel-titel { font-family: "Sora", system-ui, sans-serif;
  font-weight: 400; font-size: var(--st-kachel-titel); line-height: 1.2;
  letter-spacing: var(--st-kachel-titel-lw); }
.st-kachel-text { font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 400; font-size: var(--st-kachel-text); line-height: 1.5; }
.st-meta { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 400;
  font-size: var(--st-meta); line-height: 1.45; }
.st-knopf { font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 500; font-size: var(--st-knopf); line-height: 1.25; }

/* ── Zuweisung an den Bestand. Nur unter body.st-rollen. ──────────── */

/* Buehne. Das Theme setzt hier drei Stufen per Tailwind, die alle auf
   denselben Wert hinauslaufen - deshalb !important und die Spans mit. */
body.st-rollen #hero-heading,
body.st-rollen #hero-heading span {
  font-size: var(--st-buehne) !important;
  line-height: var(--st-buehne-zab) !important;
  letter-spacing: var(--st-buehne-lw) !important;
}
body.st-rollen .hero-manuskript .hero-satz {
  font-size: var(--st-buehne-text) !important; line-height: 1.5 !important;
}

/* Kapitel: jede Sektions-Ueberschrift. Die Hero-Zeile ist ein h1 und
   bleibt davon unberuehrt. */
body.st-rollen section h2 {
  font-size: var(--st-kapitel) !important;
  line-height: var(--st-kapitel-zab) !important;
  letter-spacing: var(--st-kapitel-lw) !important;
}
body.st-rollen .einstieg-bereich {
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: var(--st-vorlauf) !important; line-height: 1.4 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
}

/* Lead. Gilt fuer die Vorspaenne der Kapitel. */
body.st-rollen p.copy-satzspiegel,
body.st-rollen .ins-lead,
body.st-rollen .award-lead,
body.st-rollen .t55-lead-satz {
  font-size: var(--st-lead) !important;
  line-height: var(--st-lead-zab) !important;
}

/* Fliesstext. Steht NACH dem Lead, damit er dort gewinnt, wo beide
   Klassen am selben Absatz haengen (die "hands"-Absaetze tragen
   copy-satzspiegel und hands-fliess gleichzeitig). */
body.st-rollen .t55-lauf,
body.st-rollen p.hands-fliess {
  font-size: var(--st-fliess) !important;
  line-height: var(--st-fliess-zab) !important;
}
body.st-rollen .t55-claim {
  font-size: var(--st-claim) !important;
  line-height: var(--st-claim-zab) !important;
  letter-spacing: var(--st-claim-lw) !important;
}

/* Kacheln: ein Titelmass fuer Wege-Karten, Einstiegs-Kacheln,
   Insights-Karten und Case-Kacheln. */
body.st-rollen .wege-titel,
body.st-rollen .einstieg-titel,
body.st-rollen h3.text-sora-heading-5,
body.st-rollen h3.text-sora-heading-6 {
  font-size: var(--st-kachel-titel) !important; line-height: 1.2 !important;
  letter-spacing: var(--st-kachel-titel-lw) !important;
}
body.st-rollen .wege-copy,
body.st-rollen .einstieg-text,
body.st-rollen .glowing-card-v2 p.text-tagline-2,
body.st-rollen a > div > p.text-tagline-2 {
  font-size: var(--st-kachel-text) !important; line-height: 1.5 !important;
}

/* Kleinteile. Die Stichwortzeile der Einstiegs-Kacheln ("Owned Media ·
   Storytelling · ...") ist eine Aufzaehlung, kein Fliesstext - sie
   gehoert zu Meta, nicht zu Kacheltext. Auf 16 px gesetzt schob sie
   den Knopf aus der Kachel. */
body.st-rollen .t55-abbinder,
body.st-rollen .abbinder-schluss p,
body.st-rollen .einstieg-copy {
  font-size: var(--st-meta) !important; line-height: 1.45 !important;
}
body.st-rollen .snoop-btn,
body.st-rollen .wege-btn,
body.st-rollen .button-split-upper-text,
body.st-rollen .button-split-lower-text {
  font-size: var(--st-knopf) !important; font-weight: 500 !important;
  line-height: 1.25 !important;
}
/* Ausnahme, gemessen in Teil 65: die Knopfschrift in den vier
   Einstiegs-Kacheln bleibt bei 15 px. Bei 16 px braucht
   "Marketing & Brand Experience entdecken" drei Zeilen statt zwei -
   genau der Grund, aus dem der Satzspiegel auf 1200 px ging. */
body.st-rollen .einstieg-label {
  font-size: 15px !important; font-weight: 500 !important;
  line-height: 1.25 !important;
}

/* ── Farbregel. Liegt bereit, ist aber ausgeschaltet. ──────────────
   Drei Stufen je Grund statt acht Weissabstufungen. Einschalten mit
   der zusaetzlichen Klasse `st-farben` am body. Bewusst getrennt: so
   springen Groessen und Farben nicht im selben Schritt. */
body.st-farben .ins-sektion .st-lead,
body.st-farben .ins-sektion .ins-lead,
body.st-farben .ins-sektion p.hands-fliess,
body.st-farben .hero-sektion .hero-satz,
body.st-farben .ins-sektion .ins-erste,
body.st-farben .ins-sektion .ins-rest { color: #FFFFFF !important; }
body.st-farben .ins-sektion .text-white\/50,
body.st-farben .ins-sektion .text-white\/20,
body.st-farben .ins-sektion .text-white\/30 {
  color: rgba(255,255,255,.72) !important;
}

/* ── Teil 75: ein Mass fuer allen Lauftext ──────────────────────────
   Korrektur an Teil 74. Dort standen Vorspann (20 px) und Lauftext
   (18 px) auf zwei Werten - eine Trennung nach Position, die diese
   Seite nicht traegt: ihre Vorspaenne sind selbst Lauftexte. Zwei
   Punkt Unterschied bei gleicher Satzbreite lesen sich als Fehler,
   nicht als Stufe.

   Ab hier gibt es eine Rolle: .st-lauf. Die Namen st-lead und
   st-fliess bleiben als Synonyme bestehen, damit vorhandene Bausteine
   weiterlaufen - sie zeigen jetzt beide auf dasselbe Mass. */
:root { --st-lauf: 19px; --st-lauf-zab: 1.62; --st-lauf-mass: 920px; }
@media (max-width: 767px) { :root { --st-lauf: 18px; } }
@media (max-width: 639px) { :root { --st-lauf: 17px; --st-lauf-zab: 1.6; } }

.st-lauf, .st-lead, .st-fliess {
  font-family: "Inter Tight", system-ui, sans-serif; font-weight: 400;
  font-size: var(--st-lauf); line-height: var(--st-lauf-zab);
}
.st-lauf strong, .st-lead strong, .st-fliess strong { font-weight: 600; }

/* Zuweisung: alles, was auf der Startseite laeuft. Steht hinter den
   Regeln aus Teil 74 und schlaegt sie damit. */
body.st-rollen p.copy-satzspiegel,
body.st-rollen .ins-lead,
body.st-rollen .award-lead,
body.st-rollen .t55-lead-satz,
body.st-rollen .t55-lauf,
body.st-rollen p.hands-fliess {
  font-size: var(--st-lauf) !important;
  line-height: var(--st-lauf-zab) !important;
}

/* Ein Mass fuer alle. Der Vorspann in "Own the insights." lief ueber
   1172 px, weil ihm die enge Breite fehlte - gemessen bei 1512 px. */
body.st-rollen .ins-lead {
  max-width: var(--st-lauf-mass) !important;
  margin-left: auto !important; margin-right: auto !important;
}



/* ── Teil 76: eine Textfarbe je Grund (nur Lauftext) ────────────────
   Der Zeilenabstand war nie das Problem - er steht ueberall auf
   19/30,78. Unterschiedlich war der Ton: 72 % gegen 78 % Schwarz auf
   Hell, 78 % gegen 100 % Weiss auf Dunkel. Hellere Schrift laesst
   mehr Weissraum stehen, dieselbe Zeile wirkt luftiger. */

/* Heller Grund. */
body.st-rollen p.copy-satzspiegel,
body.st-rollen p.copy-satzspiegel span,
body.st-rollen .award-lead,
body.st-rollen .award-lead span,
body.st-rollen .t55-lauf,
body.st-rollen .t55-lauf span:not(strong) {
  color: rgba(0,0,0,.78) !important;
}
/* Hervorhebung im Lauftext steht auf voller Tinte - ein Wert, nicht
   drei. Bisher war strong teils 78 %, teils #0d0d12, teils schwarz.
   Der Vorlaufsatz muss dabei genauer getroffen werden als die
   Grundregel darueber: `body.st-rollen p.copy-satzspiegel span` bringt
   drei Elemente mit, `body.st-rollen .port-erste` nur eines - die
   Grundregel haette sonst gewonnen und ihn mit eingefaerbt. */
body.st-rollen p.copy-satzspiegel strong,
body.st-rollen .award-lead strong,
body.st-rollen .t55-lauf strong,
body.st-rollen p.copy-satzspiegel span.port-erste {
  color: #0d0d12 !important;
}

/* Dunkler Grund: Lauftext voll weiss. Regel vom 03.09. ("im Header
   steht alles auf 100 % Weiss"), hier auf die uebrigen dunklen
   Flaechen ausgedehnt. */
body.st-rollen .ins-sektion .ins-lead,
body.st-rollen .ins-sektion .ins-lead span,
body.st-rollen .ins-sektion .ins-lead strong,
body.st-rollen p.hands-fliess,
body.st-rollen p.hands-fliess strong {
  color: #FFFFFF !important;
}

/* ── Teil 81: keine Fettungen im Kapitelfliesstext ─────────────
   Jonas 30.09.: "Bitte keine fettungen in den kapitelfliesstexten."
   Elf <strong> in laufendem Text, davon drei ganze Saetze. Der Header
   ist ausgenommen (.hero-satz), die Unterseiten haben ohnehin keine. */

body.st-rollen p.copy-satzspiegel strong,
body.st-rollen p.copy-satzspiegel b,
body.st-rollen .ins-lead strong,
body.st-rollen .ins-lead b,
body.st-rollen .award-lead strong,
body.st-rollen .award-lead b,
body.st-rollen .t55-lead-satz strong,
body.st-rollen .t55-lauf strong,
body.st-rollen .t55-lauf b,
body.st-rollen p.hands-fliess strong,
body.st-rollen p.hands-fliess b,
body.st-rollen .st-lauf strong,
body.st-rollen .st-lead strong,
body.st-rollen .st-fliess strong {
  font-weight: 400 !important;
}

/* Der Vorlaufsatz stand auf 500 - eine halbe Fettung, die im HTML
   nicht als solche auftaucht. */
body.st-rollen p.copy-satzspiegel span.port-erste,
body.st-rollen span.port-erste {
  font-weight: 400 !important;
}

/* Und die Farbe mit: eine Passage, die nur dunkler ist als ihre
   Umgebung, liest sich als Fleck, nicht als Betonung. Begruendung im
   Kopf von _teil81.py. Fuer echtes Hervorheben gibt es den Verlauf
   als Textmarker (Regel vom 03.09.). */
body.st-rollen p.copy-satzspiegel strong,
body.st-rollen .award-lead strong,
body.st-rollen .t55-lauf strong,
body.st-rollen .t55-lead-satz strong,
body.st-rollen p.copy-satzspiegel span.port-erste {
  color: rgba(0,0,0,.78) !important;
}
body.st-rollen .ins-sektion .ins-lead strong,
body.st-rollen p.hands-fliess strong {
  color: #FFFFFF !important;
}
/* ── Ende Teil 81 ── */

/* ── Teil 85: Inhalte in den Infografiken unter "Own the insights." ──
   Jonas 30.09.: die schwarzen animierten Boxen bekommen die Inhalte aus
   seinen beiden Vorlagen. Die Animation bleibt unveraendert - getauscht
   wird nur, was innerhalb der bestehenden data-opai-animate-Knoten steht. */

.t85-kurve { display: block; width: 100%; height: auto; }
.t85-kurve-text { fill: #FFFFFF; font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 19px; font-weight: 400; }

.t85-board { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.t85-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.t85-kachel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 14px 16px 10px; display: flex; flex-direction: column; }
.t85-kachel-titel { font-family: "Inter Tight", system-ui, sans-serif; font-size: 14px;
  color: rgba(255,255,255,.72); }
.t85-kachel-wert { font-family: "Sora", system-ui, sans-serif; font-size: 30px;
  line-height: 1.15; color: #FFFFFF; margin-top: 2px; }
.t85-kachel-delta { font-family: "Inter Tight", system-ui, sans-serif; font-size: 13px;
  color: rgba(255,255,255,.62); margin-bottom: 6px; }
.t85-kachel-grafik { display: block; width: 100%; height: auto; margin-top: auto; }

.t85-unten { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.t85-liste, .t85-regionen { background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; }
.t85-block-titel { display: block; font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 14px; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.t85-zeile { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.t85-balken { height: 6px; border-radius: 999px; background: #FF36A0; flex: none; }
.t85-zeile-name { font-family: "Inter Tight", system-ui, sans-serif; font-size: 15px;
  color: #FFFFFF; }
.t85-zeile-wert { margin-left: auto; font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 15px; color: rgba(255,255,255,.78); }
.t85-regionen { display: flex; flex-direction: column; }
.t85-karte-svg { display: block; margin: auto; height: 132px; width: auto; }

@media (max-width: 767px) {
  .t85-kacheln { grid-template-columns: 1fr; }
  .t85-unten { grid-template-columns: 1fr; }
  .t85-kurve-text { font-size: 26px; }
}

/* ── Teil 86: Karten buendig, Regionen mit Umriss ─────────────────
   Jonas 30.09.: "Sorg dafuer dass diese wieder genau so schoen wie vorher
   miteinander abschliessen." Die Kurve sitzt wieder unten in ihrer Karte
   und darf ueber den Innenabstand hinauslaufen; damit behaelt die Karte
   ihre 344 px und die rechte Spalte trifft die linke Karte wieder:
   344 + 32 + 344 = 720 gegen 719. */

.t85-huelle-kurve { position: absolute; right: 0; bottom: 0; left: 0;
  padding: 0 18px 14px; }
.t85-huelle-kurve .t85-kurve { width: 100%; height: auto; }

.t85-karte-svg { height: 138px; }
.t85-umriss { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.45);
  stroke-width: 1.4; stroke-linejoin: round; }

@media (max-width: 767px) {
  .t85-huelle-kurve { position: static; padding: 18px 0 0; }
}
/* ── Ende Teil 86 ── */

/* ── Teil 87: Luft vor dem Knopf "Consumer Insights entdecken" ─────
   Jonas 30.09.: groesserer Abstand zwischen der Ablaufgrafik und dem
   Knopf. Die Theme-Klasse space-y-* am Elternknoten gilt fuer alle
   Kinder der Spalte und bleibt unberuehrt; nur der Knopfblock bekommt
   zusaetzliche Luft. */

.ins-sektion .main-container .ins-aktion { margin-top: 34px; }

@media (min-width: 768px) {
  .ins-sektion .main-container .ins-aktion { margin-top: 50px; }
}
@media (min-width: 1024px) {
  .ins-sektion .main-container .ins-aktion { margin-top: 72px; }
}
/* ── Ende Teil 87 ── */

/* ── Teil 94: GF-Feedback 30.09. ── */
/* Awards: Kategorie und Rang unter dem Originallogo */
.award-kachel .award-zeile { display: block !important; margin: 18px 0 0; max-width: 260px;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 15px; line-height: 1.45;
  font-weight: 400; color: #0d0d12 !important; text-align: center; }
.award-kachel .award-rang { display: block !important; margin: 8px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(0,0,0,.62) !important; }
.award-kachel-gba .award-logo { margin-bottom: 0 !important; }
/* 3 Wege: Kanal ueber der Animation */
.wege-kanal { margin: 0 0 6px; text-align: center; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #0d0d12 !important; }
/* Footer: auf dem Verlauf 100 % Weiss, lesbare Grade */
footer .text-white\/50, footer .text-white\/90, footer .text-background-11 { color: #FFFFFF !important; }
footer .text-tagline-3 { font-size: 16px !important; line-height: 1.55 !important; }
footer .text-tagline-2 { font-size: 18px !important; line-height: 1.4 !important; }
footer .footer-link:hover, footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1440px) {
  footer .text-tagline-3 { font-size: 18px !important; }
  footer .text-tagline-2 { font-size: 20px !important; }
}
/* ── Ende Teil 94 ── */

/* ── Teil 97: Award-Kacheln auf einer Linie ── */
.award-reihe-fest { gap: 24px !important; align-items: stretch !important; justify-content: center !important; }
.award-reihe-fest .award-kachel { min-height: 250px; }
.award-kachel .award-zeile { min-height: calc(3 * 1.45em); display: flex !important;
  align-items: center; justify-content: center; }
/* ── Ende Teil 97 ── */

/* ── Teil 100: Einstiegskacheln auf einer Linie ── */
@media (min-width: 1024px) {
  .einstieg-band { grid-template-rows: auto auto 1fr auto; row-gap: 0 !important; }
  .einstieg-karte { display: grid !important; grid-row: span 4; grid-template-rows: subgrid;
    min-height: 0 !important; }
  .einstieg-karte .einstieg-bereich,
  .einstieg-karte .einstieg-titel,
  .einstieg-karte .einstieg-text { align-self: start; }
  .einstieg-karte .einstieg-btn { margin-top: 28px !important; align-self: stretch; }
}
/* ── Ende Teil 100 ── */

/* ── Teil 101: Einstiegstitel zweizeilig ── */
@media (min-width: 1024px) {
  body.st-rollen .einstieg-titel, .einstieg-titel { font-size: clamp(17px, 1.7vw, 22px) !important; }
}
/* ── Ende Teil 101 ── */

/* ── Teil 102: Header ohne Fettung ── */
.hero-satz, .hero-satz strong { font-weight: 400 !important; }
/* ── Ende Teil 102 ── */

/* ── Teil 103: KI-Hinweis und Formular ── */
.ki-hinweis { position: absolute; left: 12px; bottom: 12px; z-index: 7;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 12px; line-height: 1;
  font-weight: 500; letter-spacing: .02em; color: #FFFFFF; background: rgba(13,13,18,.62);
  padding: 6px 9px; border-radius: 999px; pointer-events: none; }
@media (max-width: 767px) { .ki-hinweis { font-size: 11px; left: 8px; bottom: 8px; } }
.sek-bild, .hero-sektion .hero-bild { position: relative; }  /* Teil 122: .cta-v2-images-wrapper figure gestrichen - die Figuren sind absolut */
.hero-sektion .hero-bild .ki-hinweis { left: 50%; transform: translateX(-50%); bottom: 4px; }
.formular-einwilligung { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font-family: "Inter Tight", system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: #0d0d12; }
.formular-einwilligung input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  accent-color: #FF36A0; cursor: pointer; }
.formular-einwilligung a, .formular-pflicht a { text-decoration: underline; }
.formular-pflicht { font-family: "Inter Tight", system-ui, sans-serif; font-size: 14px; color: rgba(0,0,0,.6); }
/* ── Ende Teil 103 ── */

/* ── Teil 123: Awards als Laufband ── */
.award-band { position: relative; overflow: hidden; padding: 6px 0;
  -webkit-mask: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
          mask: linear-gradient(90deg, #0000, #000 8% 92%, #0000); }
.award-spur { display: flex; width: max-content; align-items: stretch;
  animation: award-lauf 45s linear infinite; }
.award-band:hover .award-spur { animation-play-state: paused; }
@keyframes award-lauf { to { transform: translateX(-50%); } }
.award-spur .award-kachel { width: 300px; min-height: 220px; margin-inline: 12px !important; }
.award-kachel .award-rang { margin: 18px 0 0 !important;
  font-family: "Inter Tight", system-ui, sans-serif !important; font-size: 15px !important;
  line-height: 1.45 !important; letter-spacing: 0 !important; text-transform: none !important;
  font-weight: 400 !important; color: #0d0d12 !important; }
@media (max-width: 639px) { .award-spur .award-kachel { width: 240px; min-height: 180px; padding: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .award-band { overflow-x: auto; -webkit-mask: none; mask: none; }
  .award-spur { animation: none; }
  .award-spur [aria-hidden="true"] { display: none; }
}
/* ── Ende Teil 123 ── */

/* ── Teil 127: Abstand Knopf unter der Kette im Kapitel 2D-Code ── */
section[data-teil55="code"] .ablauf + .ins-aktion { margin-top: 64px !important; }
@media (max-width: 767px) {
  section[data-teil55="code"] .ablauf + .ins-aktion { margin-top: 44px !important; }
}
/* ── Ende Teil 127 ── */

/* ── Teil 128: Drei Wege - Sora-Kanal, kleinere Kaesten, gleiche Animation ── */
.wege-kanal { font-family: "Sora", system-ui, sans-serif !important; font-size: 26px !important;
  font-weight: 400 !important; letter-spacing: -.6px !important; text-transform: none !important;
  line-height: 1.2 !important; margin: 0 0 10px !important; color: #0d0d12 !important; }
@media (min-width: 980px) {
  .wege-reihe { max-width: 1080px; margin-inline: auto; gap: 20px; }
  section[data-grund="weiss"] .wege-karte { padding: 26px 24px 28px !important; min-height: 0 !important; }
  section[data-grund="weiss"] .wege-bild { width: 323px !important; flex: none; align-self: center;
    height: 258px !important; }
}
/* ── Ende Teil 128 ── */

/* ── Teil 129: Digital Champions Award ── */
.award-kachel .award-logo-dca { height: auto !important; }
.award-bild-dca { width: 112px; height: auto; }
/* ── Ende Teil 129 ── */

/* ── Teil 132: Drei Wege - quadratische Kaesten (ab 1200 px; darunter reicht die Breite nicht fuer Quadrat + volle Animation) ── */
@media (min-width: 1200px) {
  .wege-reihe { max-width: 1210px !important; gap: 20px !important; }
  section[data-grund="weiss"] .wege-karte { aspect-ratio: 1 / 1; min-height: 0 !important;
    padding: 22px 24px 24px !important; justify-content: space-between; }
  section[data-grund="weiss"] .wege-bild { height: 237px !important; margin-bottom: 6px !important; }
  .wege-kanal { margin: 0 0 4px !important; }
  section[data-grund="weiss"] .wege-karte .wege-titel { margin-top: 0 !important; }
}
/* ── Ende Teil 132 ── */

/* ── Teil 133: Awards als Raster 3 x 2 ── */
.award-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  max-width: 1080px; margin-inline: auto; }
.award-raster .award-kachel { width: auto !important; min-height: 220px; margin: 0 !important; }
@media (max-width: 979px) { .award-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 599px) { .award-raster { grid-template-columns: 1fr; }
  .award-raster .award-kachel { min-height: 170px; } }
/* ── Ende Teil 133 ── */

/* ── Teil 134: zurueck auf den Satzspiegel ── */
.award-raster { max-width: none !important; }
.wege-reihe { max-width: none !important; }
/* ── Ende Teil 134 ── */

/* ── Teil 137: Header-Saetze enger ── */
body.st-rollen .hero-manuskript .hero-satz,
.hero-sektion .hero-satz { line-height: 1.35 !important; }
.hero-sektion .hero-satz + .hero-satz,
.hero-sektion .hero-satz + .hero-satz:last-child { margin-top: 0 !important; }
@media (max-width: 1023px) {
  .hero-sektion .hero-satz + .hero-satz,
  .hero-sektion .hero-satz + .hero-satz:last-child { margin-top: 6px !important; }
}
/* ── Ende Teil 137 ── */

/* ── Teil 145: Beduerfnis-Grafik nur Icons + Text ── */
.ins-wege[data-teil145] { max-width: 380px; }
@media (max-width: 1023px) { .ins-wege[data-teil145] { margin: 0 auto; } }
/* ── Ende Teil 145 ── */

/* ── Teil 159: Absatzfolge in Kapiteln, die vorher ein Block waren ── */
p[data-t159-folge] { margin-top: 18px !important; }
/* ── Ende Teil 159 ── */

/* ── Teil 162: Feedback Oliver 02.10. ── */
/* Karte "Welche Produkte werden aktiviert?": Headline oben, Kette darunter */
[aria-labelledby="intelligent-automation-heading"] { justify-content: flex-start !important; padding-top: 156px !important; }
[aria-labelledby="intelligent-automation-heading"] svg[height="43"] { height: 30px !important; }
[aria-labelledby="intelligent-automation-heading"] > .absolute.z-30 { top: 42px !important; bottom: auto !important; }
[aria-labelledby="intelligent-automation-heading"] .ins-schleier { top: -1px !important; bottom: auto !important;
  transform: translateX(-50%) rotate(180deg) !important; }
/* Begriffe groesser, alle Zeilen der Kette in einer Groesse */
[aria-labelledby="intelligent-automation-heading"] .text-tagline-4 { font-size: 15px !important; line-height: 1.3 !important; }
[aria-labelledby="intelligent-automation-heading"] .max-w-\[117px\] { max-width: none !important; padding: 6px 12px !important; }
[aria-labelledby="intelligent-automation-heading"] .size-5 { width: 22px !important; height: 22px !important; }
[aria-labelledby="intelligent-automation-heading"] .text-center p, [aria-labelledby="intelligent-automation-heading"] p.text-tagline-3 { font-size: 15px !important; line-height: 1.45 !important; }
/* Abstand Headline -> Copytext einheitlich */
h2[data-t162-h] { margin-bottom: 0 !important; }
p[data-t162-abstand] { margin-top: 24px !important; }
/* Sprungziel Kontaktformular unter der festen Navigation */
#kontakt { scroll-margin-top: 90px; }
/* ── Ende Teil 162 ── */

/* ── Teil 163: Feedback Stefan 05.10. ── */
[aria-labelledby="intelligent-automation-heading"] > .absolute.z-30 { left: 42px !important; right: 42px !important; max-width: none !important; }
[aria-labelledby="intelligent-automation-heading"] [data-t163-ikon] svg { width: 100%; height: 100%; }
/* ── Ende Teil 163 ── */

/* ── Teil 164: KI-Hinweise ── */
.ki-hinweis { color: #FFFFFF !important; }
.cta-v2-images-wrapper .ki-hinweis-produkte { left: 0; right: auto; bottom: 14px; z-index: 8; }
@media (min-width: 768px) {
  .cta-v2-images-wrapper .ki-hinweis-produkte { left: auto; right: 284px; } }
@media (min-width: 1024px) {
  .cta-v2-images-wrapper .ki-hinweis-produkte { right: 432px; } }
@media (min-width: 1280px) {
  .cta-v2-images-wrapper .ki-hinweis-produkte { right: 555px; } }
/* ── Ende Teil 164 ── */

/* ── Teil 182: Sprachumschalter DE / EN ── */
.sprachwahl { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ibm-plex-mono); font-size: 14px; line-height: 1;
  letter-spacing: .02em; color: #FFFFFF; }
.sprachwahl a { color: #FFFFFF; text-decoration: none; padding: 4px 1px;
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.sprachwahl a[aria-current="true"], .sprachwahl a:hover { border-bottom-color: #FFFFFF; }
.sprachwahl span { color: #FFFFFF; }
.sprachwahl-desktop { display: none; }
.sprachwahl-mobil { margin-left: auto; margin-right: 18px; }
@media (min-width: 1024px) {
  .sprachwahl-desktop { display: inline-flex; vertical-align: middle; margin-right: 22px; }
  .sprachwahl-mobil { display: none; } }
/* ── Ende Teil 182 ── */

/* ====================================================================
   v3: Ehemals inline im HTML (<style>-Bloecke und style-Attribute).
   Die is-Klassen ersetzen die style-Attribute 1:1; !important bildet
   den Vorrang des frueheren Inline-Styles nach.
   ==================================================================== */
/* Teil 107: Kapitel Customer Journey. Unterzeile dicht unter der H2,
   Kante mittig ueber dem Schlussclaim. */
section[data-teil107] .journey-unterzeile { margin-top: 18px; margin-bottom: 10px; }
section[data-teil107] .ablauf { margin-top: 48px; margin-bottom: 8px; }
section[data-teil107] p.t55-lauf + p.t55-lauf { margin-top: 18px; }
.is-064780 { aspect-ratio:1000 / 1765 !important; --rand:8% !important; }
.is-17765c { color:#FFFFFF !important; }
.is-1b7757 { background-position:100% 0 !important; box-shadow:0 8px 20px rgba(255,111,0,.22) !important; }
.is-22fab1 { --vb:9 !important; --vh:16 !important; }
.is-335304 { object-position:50% 45% !important; }
.is-342efe { width:30px !important; }
.is-3f7fe3 { aspect-ratio:947 / 1162 !important; --rand:8% !important; }
.is-468aac { background-position:66.66% 0 !important; box-shadow:0 8px 20px rgba(255,120,70,.22) !important; }
.is-53896a { margin-top:0 !important; }
.is-5df85b { background-position:0% 0 !important; box-shadow:0 8px 20px rgba(255,54,160,.22) !important; }
.is-5eb959 { --spalten:2 !important; }
.is-626e9c { aspect-ratio:1 / 1 !important; --rand:14% !important; }
.is-70fe42 { object-position:50% 50% !important; }
.is-7aa7cb { width:42px !important; }
.is-7e2142 { object-position:50% 40% !important; }
.is-876d58 { box-shadow:0 3px 18px 0 rgba(255,84,128,0.55) !important; }
.is-8bc849 { color:#0d0d12 !important; }
.is-8d07eb { --spalten:4 !important; }
.is-8dbc4f { width:56px !important; }
.is-8fddec { display:block !important; width:100% !important; height:auto !important; }
.is-a4f3a3 { width:36px !important; }
.is-a5025d { --spalten:3 !important; }
.is-ae08fe { background-position:33.33% 0 !important; box-shadow:0 8px 20px rgba(255,90,120,.22) !important; }
.is-b45a96 { width:26px !important; }
.is-c03acd { height:60px !important; }
.is-c0af79 { --vb:37 !important; --vh:80 !important; }
.is-c451fd { position:relative !important; }
.is-c8a3c8 { font-size:clamp(20px,2.2vw,27.5px) !important; }
.is-cb63e9 { margin-top:56px !important; }
.is-ce6e7d { object-position:50% 42% !important; }
.is-d56b74 { height:60px !important; width:109px !important; display:block !important; }
.is-de0d86 { height:40px !important; width:73px !important; }
.is-e803e6 { aspect-ratio:1000 / 622 !important; --rand:8% !important; }
.is-ec93c1 { color:#000000 !important; }
.is-f72613 { color:rgba(0,0,0,.78) !important; }

/* ── v4: Ablauf- und Kettengrafiken (Startseite .ablauf, Unterseiten .us-kette) ──
   Einheitlich fuer alle: Die Grafik skaliert mit der Spalte, bis sie
   860 px breit ist. Darunter wird sie nicht weiter verkleinert (sonst
   waere die Beschriftung unter 11 px), sondern laesst sich seitlich
   schieben. Vorher: Unterseiten sprangen unter 1024 px auf feste 860 px,
   die Startseite wurde bis auf 5 px Schrift verkleinert. */
.ablauf, .us-kette { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ablauf .kette-grafik, .us-kette .kette-grafik { margin: 0; min-width: 860px; }
.ablauf .kette-grafik > svg, .us-kette .kette-grafik > svg { width: 100% !important; max-width: none !important; height: auto !important; }