@keyframes RzLRNjq_q_f8tO5V65HZ {
  to {
    transform: rotate(360deg);
  }
}

.b2wpJUhj8PCdLklF4sZ0 {
  --size: initoal;
  --sticks: initial;
  --color: initial;

  position: relative;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  margin-left: auto;
  margin-right: auto;
  animation: RzLRNjq_q_f8tO5V65HZ 0.6s steps(var(--sticks), end) infinite;
  animation-play-state: inherit;
}

.b2wpJUhj8PCdLklF4sZ0 > div {
  --rotation: initial;
  --opacity: initial;

  --width: calc(var(--size) / 11);
  --height: calc(var(--size) / 3.5);
  width: var(--width);
  height: var(--height);
  position: absolute;
  top: 0;
  border-radius: calc(var(--width) / 2);
  left: calc(50% - (var(--width) / 2));
  transform-origin: calc(var(--width) / 2) calc(var(--height) * 1.75);
  transform: rotate(var(--rotation));
  background-color: var(--color);
  opacity: var(--opacity);
}

/* ============================================================
   PricingPage — CSS Grid layout for the 4-plan pricing table.
   Each card occupies one column and uses CSS subgrid so that
   every semantic row (badge, price, CTA, tagline, each feature
   section, seat types) aligns perfectly across all four cards.
   ============================================================ */

/* 13 named row bands:
   1  badge
   2  pricing
   3  cta
   4  tagline
   5  feature: projects
   6  feature: storage
   7  feature: import
   8  feature: export
   9  feature: generativeTools
   10 feature: collaborationDocumentation
   11 feature: supportTraining
   12 feature: securityCompliance  (children slot renders here when section is absent)
   13 seatTypes                                              */

.CKN0Mw2to4XoWZSQoNtO {
  container-type: inline-size;
  container-name: pricing-page;
  width: 100%;
  margin-inline: auto;
}

.zVAgg6RRyoG9sb7UnDmN {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(13, auto);
  border: 1px solid var(--separator-opaque);
  border-radius: 8px;
  overflow: hidden;
  font-family: inherit;
  font-weight: 400;
  color: var(--text-primary-label);
  box-sizing: border-box;
  /* Fill the parent regardless of its align-items setting */
  width: 100%;
}

/* ---- Cards ---- */

.aSa5EOXU_efbFLLoGgSi {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 13;
  padding: var(--spacing-3x) var(--spacing-4x) var(--spacing-4x);
  box-sizing: border-box;
  background: var(--page-primary-background);
  border-right: 1px solid var(--separator-opaque);
}

.aSa5EOXU_efbFLLoGgSi:last-child {
  border-right: none;
}

.nbytnjaz6tvvNf9fQ9mV {
  box-shadow: inset 0 0 0 4px var(--control-accent-background);
  position: relative;
  z-index: 1;
}

.yQR4UAkeIW0lrgb8i2_Y {
  background: var(--page-secondary-background);
}

/* ---- Row 1: Badge ---- */

.xKw2kw3f1SW5DjMlEEIO {
  padding-bottom: var(--spacing-1x);
}

.FsikjgCvBfl3_Xdhvcuu {
  display: inline-block;
  padding: 3px var(--spacing-1x);
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--fraktion-mono, inherit);
  width: fit-content;
}

.FsikjgCvBfl3_Xdhvcuu.xBNiSAPZvsQd9wNpHJq5 {
  background: var(--information-background);
  color: var(--text-secondary-label);
}

.FsikjgCvBfl3_Xdhvcuu.JEhno1r9nby7b3fMSdNz {
  background: var(--text-primary-label);
  color: var(--page-primary-background);
}

.FsikjgCvBfl3_Xdhvcuu.QOvQGyP4VWmxuMa9HAwd {
  background: var(--control-accent-background);
  color: var(--text-on-accent-primary-label);
}

/* ---- Row 2: Pricing ---- */

.r_q9W2x8O38ZfMO_6vFA {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05x);
  padding: var(--spacing-1x) 0;
}

.EM0d3JH7kUZ06RBLdXBg {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
}

.M9iKH4N5o762e8YIOdgO {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary-label);
  align-self: flex-start;
}

.yMy50yVnsKDtFwuDFPsr {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: var(--fraktion-sans, inherit);
}

.UHdKgi54AxrBqADFZpf5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary-label);
  font-family: var(--fraktion-sans, inherit);
}

.YV1BUMi380UyU4M_QzOz {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary-label);
}

.NJfCGUmy8dQ0EVdDKK0Y {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-tertiary-label);
}

/* ---- Row 3: CTA ---- */

.ZVbdvhzrZJWt3T8kz2k6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-1x) 0;
}

/* ---- Row 4: Tagline ---- */

.MoBdgR0lPWzfAXcIWC8E {
  padding-top: var(--spacing-3x);
  padding-bottom: var(--spacing-3x);
}

.Q8aQubohJQGPuICW6kuN {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary-label);
}

/* ---- Rows 5–12: Feature sections ---- */

.btfp0_vjiFwUdQbO0Nwd {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
  padding: var(--spacing-2x) 0;
  border-top: 1px solid var(--separator-opaque);
}

/* Empty slot — keeps the row alive for subgrid alignment */
.TcFvRWUmTYYY80AELo4Q {
  border-top: 1px solid var(--separator-opaque);
}

/* No separator above the first feature section (projects row) */
.MoBdgR0lPWzfAXcIWC8E + .btfp0_vjiFwUdQbO0Nwd,
.MoBdgR0lPWzfAXcIWC8E + .TcFvRWUmTYYY80AELo4Q {
  border-top: none;
}

.PWlXPoeQaRHEakAQhkRQ {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary-label);
}

.bnbf0wp9Tkm_MyJbJraA {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
}

.sVfmmqDFLOi8qHvKQs5D {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-1x);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-primary-label);
}

.FflfQyOzntK6iVw3OqCB {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-secondary-label);
}

.QjmPj0Yt2K07YGK_qLwp {
  color: var(--control-accent-background);
}

.xj5AAXUdbaco8dhmsAYg {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05x);
}

.L8K_SV4YxMdAMXsPDr26 {
  list-style: disc;
  margin: 0 0 0 var(--spacing-05x);
  padding-left: var(--spacing-2x);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.FJZubO5tzh44sBQx15zX {
  font-size: 0.8125rem;
  color: var(--text-secondary-label);
  line-height: 1.4;
}

/* ---- Row 13: Seat types ---- */

.vgBGKKZerN0qgEKZVciK {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1x);
  padding-top: var(--spacing-2x);
  border-top: 1px solid var(--separator-opaque);
}

.ida8o5pHF9YZAwfHerz8 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05x);
}

.l5eporX2_pUlQirQ8ehQ {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary-label);
}

.bOEyLl2gEGNCjYHD7znw > mark {
  color: var(--text-primary-label);
  display: inline-block;
  padding: 0 2px;
  font-weight: 600;
}

.n8zQeiscl1ZpFRcEyFXb > mark {
  background: var(--mint-100);
}

.oyWE_ymOY0a0QuZ62W88 > mark {
  background: var(--yellow-200);
}

/* ================================================================
   Responsive — 2 columns
   Free + Solo share rows 1–13, Studio + Enterprise rows 14–26.
   ================================================================ */

@container pricing-page (max-width: 899px) {
  .zVAgg6RRyoG9sb7UnDmN {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(26, auto);
  }

  .aggRTtOv3jTNMQX6uIqI {
    grid-column: 1;
    grid-row: 1 / 14;
    border-bottom: 1px solid var(--separator-opaque);
  }

  .Xc2vU5QQRDBrlZyxhi6R {
    grid-column: 2;
    grid-row: 1 / 14;
    border-right: none;
    border-bottom: 1px solid var(--separator-opaque);
  }

  .q4fIAsdgmQfFEen0YVhI {
    grid-column: 1;
    grid-row: 14 / 27;
  }

  .yQR4UAkeIW0lrgb8i2_Y {
    grid-column: 2;
    grid-row: 14 / 27;
    border-right: none;
  }
}

/* ================================================================
   Responsive — 1 column (mobile)
   Cards stack as individual flex columns; subgrid disabled.
   Empty feature sections are hidden so there are no blank rows.
   ================================================================ */

@container pricing-page (max-width: 499px) {
  .zVAgg6RRyoG9sb7UnDmN {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  /* Reset grid placement and switch to flex for all card variants */
  .aSa5EOXU_efbFLLoGgSi,
  .aggRTtOv3jTNMQX6uIqI,
  .Xc2vU5QQRDBrlZyxhi6R,
  .q4fIAsdgmQfFEen0YVhI,
  .yQR4UAkeIW0lrgb8i2_Y {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-column: auto;
    border-right: none;
    border-bottom: 1px solid var(--separator-opaque);
  }

  .yQR4UAkeIW0lrgb8i2_Y {
    border-bottom: none;
  }

  .TcFvRWUmTYYY80AELo4Q {
    display: none;
  }
}

@import-normalize;

: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: 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;

  --information-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-background-secondary: 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;
}