:root {
  --font-heading: "Sora", sans-serif;
  --font-text: "Poppins", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --color-neutral-0: #05060f;
  --color-neutral-100: #0f112e;
  --color-neutral-200: #171945;
  --color-neutral-300: #262a73;
  --color-neutral-400: #363aa1;
  --color-neutral-500: #4f54c4;
  --color-neutral-600: #7579d1;
  --color-neutral-700: #9c9ede;
  --color-neutral-800: #c2c4eb;
  --color-neutral-900: #f7f8fc;

  --color-primary-800: #002b33;
  --color-primary-600: #008099;
  --color-primary-500: #1adaff;
  --color-primary-400: #66e6ff;
  --color-primary-200: #adf2ff;

  --color-secondary-800: #560546;
  --color-secondary-600: #ad0b8d;
  --color-secondary-500: #f33ecf;
  --color-secondary-400: #f782e0;
  --color-secondary-200: #fccff3;

  --color-sys-success: #00ee3f;
  --color-sys-warning: #ffd83c;
  --color-sys-error: #f9004b;
  --color-sys-link: #c23fff;

  --color-overlay-white-64: rgba(255, 255, 255, 0.64);
  --color-overlay-white-24: rgba(255, 255, 255, 0.24);
  --color-overlay-white-08: rgba(255, 255, 255, 0.08);
  --color-overlay-black-64: rgba(5, 6, 15, 0.64);
  --color-overlay-black-24: rgba(5, 6, 15, 0.24);
  --color-overlay-black-08: rgba(5, 6, 15, 0.08);

  --grad-g1: linear-gradient(90deg, #009dff 0%, #0a67ea 50%, #8536fe 100%);
  --grad-g2: linear-gradient(90deg, #3af8ff 0%, #ff3fa9 100%);
  --grad-g3: linear-gradient(90deg, #d0e5f0, #a14bf7 100%);
  --grad-g4: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.01) 100%
  );
}

.h1-bold {
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 600;
  line-height: 68px;
}

.h2-bold {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 600;
  line-height: 50px;
}

.h3-bold {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

@media (max-width: 768px) {
  .h1-bold {
    font-size: 40px;
    line-height: 48px;
  }
  .h2-bold {
    font-size: 38px;
    line-height: 46px;
  }
  .h3-bold {
    font-size: 22px;
    line-height: 28px;
  }
}

.p1-light {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}

.p1-bold {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.p2-light {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.p2-bold {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.p3-light {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.p3-bold {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.p4-light {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.p4-bold {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

/* The label layer: plan names, chips and spec keys. Same 12/18 metrics as .p4-*,
   set in the mono face so labels read apart from prose. */
.label-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The value layer: literal names out of the product (formats, protocols,
   integrations). Same 12/18 metrics as .label-mono, but cased and unspaced so
   product names keep their own capitalisation. */
.value-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.02em;
}

.btn-large {
  font-family: var(--font-heading);
  font-size: 16px;
  /*font-weight: 600;*/
  /*line-height: 26px;*/
}

.btn-medium {
  font-family: var(--font-heading);
  font-size: 14px;
  /*font-weight: 600;*/
  /*line-height: 20px;*/
}

.btn-small {
  font-family: var(--font-heading);
  font-size: 12px;
  /*font-weight: 600;*/
  /*line-height: 16px;*/
}