:host {
  --neutral-white-raw: 255 255 255; /* #FFFFFF */
  --neutral-50-raw: 247 247 247; /* #F7F7F7 */
  --neutral-100-raw: 242 242 242; /* #F2F2F2 */
  --neutral-150-raw: 237 237 237; /* #EDEDED */
  --neutral-200-raw: 217 217 217; /* #D9D9D9 */
  --neutral-300-raw: 189 189 189; /* #BDBDBD */
  --neutral-400-raw: 159 159 159; /* #9F9F9F */
  --neutral-500-raw: 133 133 133; /* #858585 */
  --neutral-550-raw: 99 99 99; /* #636363 */
  --neutral-600-raw: 80 80 80; /* #505050 */
  --neutral-700-raw: 51 51 51; /* #333333 */
  --neutral-800-raw: 26 26 26; /* #1A1A1A */
  --neutral-900-raw: 13 13 13; /* #0D0D0D */
  --neutral-black-raw: 0 0 0; /* #000000 */

  --mint-100-raw: 198 239 254; /* #C6EFFE */
  --mint-200-raw: 153 210 255; /* #80DBF6 */

  --blueprint-100-raw: 153 190 255; /* #99BEFF */
  --blueprint-200-raw: 110 161 255; /* #6EA1FF */
  --blueprint-300-raw: 72 132 255; /* #4884FF */
  --blueprint-400-raw: 46 104 255; /* #2E68FF */
  --blueprint-500-raw: 29 78 255; /* #1D4EFF */
  --blueprint-600-raw: 10 48 211; /* #0A30D3 */
  --blueprint-700-raw: 0 25 153; /* #001999 */

  --yellow-100-raw: 255 204 145; /* #FFCC91 */
  --yellow-200-raw: 255 186 107; /* #FFBA6B */
  --yellow-300-raw: 250 168 75; /* #FAA84B */
  --yellow-400-raw: 242 151 24; /* #F29718 */
  --yellow-500-raw: 191 115 0; /* #BF7300 */
  --yellow-600-raw: 128 77 26; /* #804D1A */
  --yellow-700-raw: 89 56 22; /* #593816 */

  --red-100-raw: 253 182 192; /* #FDB6C0 */
  --red-200-raw: 253 144 159; /* #FD909F */
  --red-300-raw: 250 108 127; /* #FA6C7F */
  --red-400-raw: 232 72 93; /* #E8485D */
  --red-500-raw: 202 25 48; /* #CA1930 */
  --red-600-raw: 140 20 36; /* #8C1424 */
  --red-700-raw: 106 14 27; /* #6A0E1B */

  --peach-100-raw: 253 176 138; /* #FDB08A */
  --peach-200-raw: 255 152 102; /* #FF9866 */

  --green-100-raw: 236 255 235; /* #ECFFEB */
  --green-200-raw: 202 233 205; /* #CAE9CD */
  --green-300-raw: 158 203 171; /* #9ECBAB */
  --green-400-raw: 120 182 138; /* #78B68A */
  --green-500-raw: 69 146 93; /* #45925D */
  --green-600-raw: 23 98 50; /* #176232 */
  --green-700-raw: 0 51 21; /* #003315 */

  --neutral-white: rgb(var(--neutral-white-raw));
  --neutral-white-filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(0%)
    hue-rotate(50deg) brightness(101%) contrast(104%);
  --neutral-50: rgb(var(--neutral-50-raw));
  --neutral-100: rgb(var(--neutral-100-raw));
  --neutral-150: rgb(var(--neutral-150-raw));
  --neutral-200: rgb(var(--neutral-200-raw));
  --neutral-300: rgb(var(--neutral-300-raw));
  --neutral-400: rgb(var(--neutral-400-raw));
  --neutral-500: rgb(var(--neutral-500-raw));
  --neutral-550: rgb(var(--neutral-550-raw));
  --neutral-600: rgb(var(--neutral-600-raw));
  --neutral-700: rgb(var(--neutral-700-raw));
  --neutral-700-filter: brightness(0) saturate(100%) invert(33%) sepia(0%) saturate(37%)
    hue-rotate(138deg) brightness(89%) contrast(89%);
  --neutral-800: rgb(var(--neutral-800-raw));
  --neutral-900: rgb(var(--neutral-900-raw));
  --neutral-black: rgb(var(--neutral-black-raw));

  --mint-100: rgb(var(--mint-100-raw));
  --mint-200: rgb(var(--mint-200-raw));

  --blueprint-100: rgb(var(--blueprint-100-raw));
  --blueprint-200: rgb(var(--blueprint-200-raw));
  --blueprint-300: rgb(var(--blueprint-300-raw));
  --blueprint-400: rgb(var(--blueprint-400-raw));
  --blueprint-400-filter: brightness(0) saturate(100%) invert(26%) sepia(92%) saturate(1900%)
    hue-rotate(217deg) brightness(107%) contrast(101%);

  --blueprint-500: rgb(var(--blueprint-500-raw));
  --blueprint-500-filter: brightness(0) saturate(100%) invert(21%) sepia(63%) saturate(5886%)
    hue-rotate(230deg) brightness(101%) contrast(101%);
  --blueprint-600: rgb(var(--blueprint-600-raw));
  --blueprint-700: rgb(var(--blueprint-700-raw));

  --yellow-100: rgb(var(--yellow-100-raw));
  --yellow-200: rgb(var(--yellow-200-raw));
  --yellow-300: rgb(var(--yellow-300-raw));
  --yellow-400: rgb(var(--yellow-400-raw));
  --yellow-500: rgb(var(--yellow-500-raw));
  --yellow-600: rgb(var(--yellow-600-raw));
  --yellow-700: rgb(var(--yellow-700-raw));

  --red-100: rgb(var(--red-100-raw));
  --red-200: rgb(var(--red-200-raw));
  --red-300: rgb(var(--red-300-raw));
  --red-400: rgb(var(--red-400-raw));
  --red-500: rgb(var(--red-500-raw));
  --red-600: rgb(var(--red-600-raw));
  --red-700: rgb(var(--red-700-raw));

  --green-100: rgb(var(--green-100-raw));
  --green-200: rgb(var(--green-200-raw));
  --green-300: rgb(var(--green-300-raw));
  --green-400: rgb(var(--green-400-raw));
  --green-500: rgb(var(--green-500-raw));
  --green-600: rgb(var(--green-600-raw));
  --green-700: rgb(var(--green-700-raw));

  --material-glass-background: rgb(var(--neutral-100-raw) / 0.9);
  --material-glass-filter: blur(14px);

  --text-header-label: initial;
  --text-primary-label: initial;
  --text-primary-label-filter: initial;
  --text-primary-label-disabled: initial;
  --text-secondary-label: initial;
  --text-tertiary-label: initial;
  --text-accent-primary-label: initial;
  --text-accent-primary-label-filter: initial;
  --text-accent-secondary-label: initial;
  --text-on-accent-primary-label: initial;
  --text-on-avatar: initial;
  --text-on-tooltip: initial;
  --warning-text-fill-color: initial;
  --error-text-fill-color: initial;
  --success-text-fill-color: initial;

  --control-background: initial;
  --control-hover-background: initial;
  --control-pressed-background: initial;
  --control-background-secondary: initial;
  --control-background-secondary-hover: initial;
  --control-border: initial;
  --control-accent-background: initial;
  --control-attention-background: initial;
  --control-accent-hover-background: initial;
  --control-accent-pressed-background: initial;
  --control-focus-highlight-stroke-color: initial;
  --control-error-highlight-stroke-color: initial;

  --attention-icon-fill-color: initial;
  --success-icon-fill-color: initial;
  --warning-icon-fill-color: initial;
  --error-icon-fill-color: initial;
  --primary-icon-fill-color: initial;
  --primary-background: initial;
  --logo-fill-color: initial;

  --page-primary-background: initial;
  --page-secondary-background: initial;
  --page-tertiary-background: initial;
  --dialog-background: initial;
  --popover-background: initial;
  --avatar-background-gray: initial;
  --avatar-background-mint: initial;
  --avatar-background-yellow: initial;
  --avatar-background-peach: initial;
  --avatar-background-green: initial;
  --information-background: initial;
  --attention-background: initial;
  --warning-background: initial;
  --critical-background: initial;
  --success-background: initial;
  --field-background: initial;
  --field-hover-background: initial;
  --segmented-control-background: initial;
  --snackbar-background: initial;
  --tooltip-background: initial;

  --separator-opaque: initial;
  --separator: initial;

  --backdrop: initial;

  --field-stroke: initial;

  --shadow-xs-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05), 0 1px 2px 0 rgb(var(--neutral-black-raw) / 0.1);
  --shadow-sm-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05),
    0 4px 12px -4px rgb(var(--neutral-black-raw) / 0.2);
  --shadow-md-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05),
    0 8px 24px -4px rgb(var(--neutral-black-raw) / 0.2);
  --shadow-lg-light:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.05),
    0 16px 32px -4px rgb(var(--neutral-black-raw) / 0.2);

  --shadow-xs-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2), 0 1px 4px 0 rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;
  --shadow-sm-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2),
    0 4px 12px -2px rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;
  --shadow-md-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2),
    0 8px 16px -4px rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;
  --shadow-lg-dark:
    0 0 0 1px rgb(var(--neutral-black-raw) / 0.2),
    0 12px 24px -2px rgb(var(--neutral-black-raw) / 0.4),
    0 0 0 1px rgb(var(--neutral-white-raw) / 0.1) inset;

  --shadow-xs: initial;
  --shadow-sm: initial;
  --shadow-md: initial;
  --shadow-lg: initial;

  --forms-width: 320px;
  --popover-width: 240px;
  --float-header-height: 44px;
  --sidebar-width: 320px;
  --breadcrumbs-width: 200px;

  --font-size: 14px;
  --line-height: calc(20 / 14);

  --layer-base: 100;
  --layer-overlay: 200;
  --layer-sidebar: 300;
  --layer-fullscreen-card: 400;
  --layer-header: 500;
  --layer-modal: 600;
  --layer-video: 10000; /* Wistia built in z-index, this line act as a documentation, we don't need to set this manually */

  --sublayer-menu: 100;
  --sublayer-tooltip: 200;

  --spacing-05x: 4px;
  --spacing-1x: 8px;
  --spacing-2x: 16px;
  --spacing-3x: 24px;
  --spacing-4x: 32px;
  --spacing-5x: 40px;
  --spacing-6x: 48px;
  --spacing-7x: 56px;
  --spacing-8x: 64px;
  --spacing-9x: 72px;
  --spacing-10x: 80px;

  --radius: var(--spacing-05x);
  --radius-control: var(--spacing-1x);
  --radius-list-item: var(--spacing-05x);
  --radius-menu-list-item: var(--spacing-05x);
  --radius-context-menu-container: var(--spacing-1x);
  --radius-sidebar-list-item: var(--spacing-1x);
  --radius-info-bar-container: var(--spacing-1x);
  --radius-dialog-container: 12px;

  --size-height-large-control: var(--spacing-5x);

  --padding-sx: var(--spacing-05x);
  --padding-sm: var(--spacing-1x);
  --padding-lg: var(--spacing-2x);
  --padding-xl: var(--spacing-3x);
  --padding-xxl: var(--spacing-4x);
  --padding-3xl: var(--spacing-5x);

  --margin-sx: var(--spacing-05x);
  --margin-sm: var(--spacing-1x);
  --margin-lg: var(--spacing-2x);
  --margin-xl: var(--spacing-3x);
  --margin-xxl: var(--spacing-4x);
  --margin-3xl: var(--spacing-5x);

  --fraktion-sans: "Fraktion Sans", Arial, Helvetica Neue, Helvetica, sans-serif;
  --fraktion-mono: "Fraktion Mono", monospace;
  --inter:
    "Inter", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--inter);
  color: var(--text-primary-label);
  background: var(--dialog-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--line-height);
  font-weight: 500;
  font-size: var(--font-size);
}

@font-face {
  font-family: Inter;
  src: url("./fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400 600;
}

@font-face {
  font-family: "Fraktion Mono";
  src:
    url("./fonts/PPFraktionMono-Regular.woff2") format("woff2"),
    url("./fonts/PPFraktionMono-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Fraktion Sans";
  src:
    url("./fonts/PPFraktionSans-Bold.woff2") format("woff2"),
    url("./fonts/PPFraktionSans-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Fraktion Sans";
  src:
    url("./fonts/PPFraktionSans-Black.woff2") format("woff2"),
    url("./fonts/PPFraktionSans-Black.ttf") format("truetype");
  font-weight: 800;
}

/* Sticky is bounded by the host's parent in the Webflow page, so the picker stays pinned only
   while the wrapper it shares with the pricing cards is on screen. It breaks if an ancestor uses
   overflow (hidden/auto/scroll), transform, or filter. The wrapper must also be display: block
   (Webflow's default Div Block) or a column flex: in a row flex or grid wrapper the host is only
   as tall as its own row, so sticky has no room to move.
   Webflow sets display: contents inline on the host, hence !important.
   --navbar-height: the site nav's height, declared by the Webflow site (it changes with the
   breakpoint). The host inherits it, so it pins right under the nav.
   --period-picker-sticky-top: optional override, define it on an ancestor in Webflow. */
:host {
  display: block !important;
  position: sticky;
  top: var(--period-picker-sticky-top, var(--navbar-height, 64px));
  z-index: 20;
}

.HDGbH1uuoz1n5CZS1LI0 {
  padding: var(--spacing-2x, 16px) 0;
  border-bottom: 1px solid transparent;
  background: var(--page-primary-background, #fff);
}

/* Set while the picker is pinned under the site nav. */
.Jwn7ILtpRTcweAPLUQPc {
  border-bottom-color: var(--separator-opaque, #e0e0e0);
}

.tCcLjboiF6RB39MZccfQ {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  font-size: 0.9375rem;
}

.tCcLjboiF6RB39MZccfQ > .go9KMjKWafr9fqhd_Qeu:first-child {
  justify-self: end;
  text-align: right;
}

.tCcLjboiF6RB39MZccfQ > .go9KMjKWafr9fqhd_Qeu:last-child {
  justify-self: start;
  text-align: left;
}

.go9KMjKWafr9fqhd_Qeu {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-tertiary-label);
  font-weight: 400;
  transition:
    color 0.2s,
    font-weight 0.2s;
}

.go9KMjKWafr9fqhd_Qeu[data-active] {
  color: var(--text-primary-label);
  font-weight: 700;
}

.MybWm8oRve5WcasaaRSs {
  color: var(--control-accent-background);
  font-weight: 700;
  margin-left: 6px;
}

.CawOPlZ4jpjuUCylO9jt {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.fqYFGXc1sbP9pSokJHs6 {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.Ff0XmNknPgrd1UFqSWSQ {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--separator-opaque);
  transition: background 0.2s;
  cursor: pointer;
}

.Ff0XmNknPgrd1UFqSWSQ[data-checked] {
  background: var(--control-accent-background);
}

.IUfMO4zSQGr35WmoB8lp {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--page-primary-background);
  box-shadow: 0 1px 3px var(--separator);
  transition: left 0.2s;
  cursor: pointer;
}

.IUfMO4zSQGr35WmoB8lp[data-checked] {
  left: 22px;
}