/* resources/styles/_variables.css */
:root {
  --color-scale-black: #1b1f24;
  --color-scale-white: #ffffff;
  --color-scale-gray-0: #f6f8fa;
  --color-scale-gray-1: #eaeef2;
  --color-scale-gray-2: #d0d7de;
  --color-scale-gray-3: #afb8c1;
  --color-scale-gray-4: #8c959f;
  --color-scale-gray-5: #6e7781;
  --color-scale-gray-6: #57606a;
  --color-scale-gray-7: #424a53;
  --color-scale-gray-8: #32383f;
  --color-scale-gray-9: #24292f;
  --color-scale-blue-0: #ddf4ff;
  --color-scale-blue-1: #b6e3ff;
  --color-scale-blue-2: #80ccff;
  --color-scale-blue-3: #54aeff;
  --color-scale-blue-4: #218bff;
  --color-scale-blue-5: #0969da;
  --color-scale-blue-6: #0550ae;
  --color-scale-blue-7: #033d8b;
  --color-scale-blue-8: #0a3069;
  --color-scale-blue-9: #002155;
  --color-scale-green-0: #dafbe1;
  --color-scale-green-1: #aceebb;
  --color-scale-green-2: #6fdd8b;
  --color-scale-green-3: #4ac26b;
  --color-scale-green-4: #2da44e;
  --color-scale-green-5: #1a7f37;
  --color-scale-green-6: #116329;
  --color-scale-green-7: #044f1e;
  --color-scale-green-8: #003d16;
  --color-scale-green-9: #002d11;
  --color-scale-yellow-0: #fff8c5;
  --color-scale-yellow-1: #fae17d;
  --color-scale-yellow-2: #eac54f;
  --color-scale-yellow-3: #d4a72c;
  --color-scale-yellow-4: #bf8700;
  --color-scale-yellow-5: #9a6700;
  --color-scale-yellow-6: #7d4e00;
  --color-scale-yellow-7: #633c01;
  --color-scale-yellow-8: #4d2d00;
  --color-scale-yellow-9: #3b2300;
  --color-scale-orange-0: #fff1e5;
  --color-scale-orange-1: #ffd8b5;
  --color-scale-orange-2: #ffb77c;
  --color-scale-orange-3: #fb8f44;
  --color-scale-orange-4: #e16f24;
  --color-scale-orange-5: #bc4c00;
  --color-scale-orange-6: #953800;
  --color-scale-orange-7: #762c00;
  --color-scale-orange-8: #5c2200;
  --color-scale-orange-9: #471700;
  --color-scale-red-0: #ffebe9;
  --color-scale-red-1: #ffcecb;
  --color-scale-red-2: #ffaba8;
  --color-scale-red-3: #ff8182;
  --color-scale-red-4: #fa4549;
  --color-scale-red-5: #cf222e;
  --color-scale-red-6: #a40e26;
  --color-scale-red-7: #82071e;
  --color-scale-red-8: #660018;
  --color-scale-red-9: #4c0014;
  --color-scale-purple-0: #fbefff;
  --color-scale-purple-1: #ecd8ff;
  --color-scale-purple-2: #d8b9ff;
  --color-scale-purple-3: #c297ff;
  --color-scale-purple-4: #a475f9;
  --color-scale-purple-5: #8250df;
  --color-scale-purple-6: #6639ba;
  --color-scale-purple-7: #512a97;
  --color-scale-purple-8: #3e1f79;
  --color-scale-purple-9: #2e1461;
  --color-scale-pink-0: #ffeff7;
  --color-scale-pink-1: #ffd3eb;
  --color-scale-pink-2: #ffadda;
  --color-scale-pink-3: #ff80c8;
  --color-scale-pink-4: #e85aad;
  --color-scale-pink-5: #bf3989;
  --color-scale-pink-6: #99286e;
  --color-scale-pink-7: #772057;
  --color-scale-pink-8: #611347;
  --color-scale-pink-9: #4d0336;
  --color-scale-coral-0: #fff0eb;
  --color-scale-coral-1: #ffd6cc;
  --color-scale-coral-2: #ffb4a1;
  --color-scale-coral-3: #fd8c73;
  --color-scale-coral-4: #ec6547;
  --color-scale-coral-5: #c4432b;
  --color-scale-coral-6: #9e2f1c;
  --color-scale-coral-7: #801f0f;
  --color-scale-coral-8: #691105;
  --color-scale-coral-9: #510901;
  --color-scale-primary-0: var(--color-scale-blue-0);
  --color-scale-primary-1: var(--color-scale-blue-1);
  --color-scale-primary-2: var(--color-scale-blue-2);
  --color-scale-primary-3: var(--color-scale-blue-3);
  --color-scale-primary-4: var(--color-scale-blue-4);
  --color-scale-primary-5: var(--color-scale-blue-5);
  --color-scale-primary-6: var(--color-scale-blue-6);
  --color-scale-primary-7: var(--color-scale-blue-7);
  --color-scale-primary-8: var(--color-scale-blue-8);
  --color-scale-primary-9: var(--color-scale-blue-9);
  --color-scale-accent-0: var(--color-scale-green-0);
  --color-scale-accent-1: var(--color-scale-green-1);
  --color-scale-accent-2: var(--color-scale-green-2);
  --color-scale-accent-3: var(--color-scale-green-3);
  --color-scale-accent-4: var(--color-scale-green-4);
  --color-scale-accent-5: var(--color-scale-green-5);
  --color-scale-accent-6: var(--color-scale-green-6);
  --color-scale-accent-7: var(--color-scale-green-7);
  --color-scale-accent-8: var(--color-scale-green-8);
  --color-scale-accent-9: var(--color-scale-green-9);
  --color-scale-success-0: var(--color-scale-green-0);
  --color-scale-success-1: var(--color-scale-green-1);
  --color-scale-success-2: var(--color-scale-green-2);
  --color-scale-success-3: var(--color-scale-green-3);
  --color-scale-success-4: var(--color-scale-green-4);
  --color-scale-success-5: var(--color-scale-green-5);
  --color-scale-success-6: var(--color-scale-green-6);
  --color-scale-success-7: var(--color-scale-green-7);
  --color-scale-success-8: var(--color-scale-green-8);
  --color-scale-success-9: var(--color-scale-green-9);
  --color-scale-warning-0: var(--color-scale-orange-0);
  --color-scale-warning-1: var(--color-scale-orange-1);
  --color-scale-warning-2: var(--color-scale-orange-2);
  --color-scale-warning-3: var(--color-scale-orange-3);
  --color-scale-warning-4: var(--color-scale-orange-4);
  --color-scale-warning-5: var(--color-scale-orange-5);
  --color-scale-warning-6: var(--color-scale-orange-6);
  --color-scale-warning-7: var(--color-scale-orange-7);
  --color-scale-warning-8: var(--color-scale-orange-8);
  --color-scale-warning-9: var(--color-scale-orange-9);
  --color-scale-error-0: var(--color-scale-red-0);
  --color-scale-error-1: var(--color-scale-red-1);
  --color-scale-error-2: var(--color-scale-red-2);
  --color-scale-error-3: var(--color-scale-red-3);
  --color-scale-error-4: var(--color-scale-red-4);
  --color-scale-error-5: var(--color-scale-red-5);
  --color-scale-error-6: var(--color-scale-red-6);
  --color-scale-error-7: var(--color-scale-red-7);
  --color-scale-error-8: var(--color-scale-red-8);
  --color-scale-error-9: var(--color-scale-red-9);
  --spacing-scale-0: 4px;
  --spacing-scale-1: 8px;
  --spacing-scale-2: 12px;
  --spacing-scale-3: 16px;
  --spacing-scale-4: 24px;
  --spacing-scale-5: 32px;
  --spacing-scale-6: 48px;
  --spacing-scale-7: 64px;
  --spacing-scale-8: 80px;
  --border-radius-0: 4px;
  --border-radius-1: 8px;
  --border-radius-2: 12px;
  --border-radius-3: 16px;
  --border-radius-4: 24px;
  --border-radius-5: 32px;
  --border-radius-6: 48px;
  --border-radius-7: 64px;
  --border-radius-8: 80px;
}

/* resources/styles/_base.css */
*,
*::after,
*::before {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  box-sizing: border-box;
}
body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-scale-gray-9);
  background-color: var(--color-scale-white);
  font-display: "swap";
  font-family: "IBM Plex Sans", sans-serif;
}
main {
  overflow-x: hidden;
}
img {
  vertical-align: middle;
  max-width: 100%;
}

/* resources/styles/_typography.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Serif Display", serif;
  color: var(--color-scale-black);
  line-height: 1;
}
a {
  color: var(--color-scale-primary-5);
}
a:hover,
a:focus {
  color: var(--color-scale-primary-7);
}

/* resources/styles/_utils.css */
.rounded {
  border-radius: var(--border-radius-5);
}

/* resources/styles/components/layout.css */
.layout-space-around {
  padding: var(--spacing-scale-3);
}
@media (min-width: 480px) {
  .layout-space-around {
    padding: var(--spacing-scale-5);
  }
}
.layout-max {
  margin-left: auto;
  margin-right: auto;
  width: 1200px;
  max-width: 100%;
}

/* resources/styles/components/colorful-header.css */
.colorful-header {
  --color-header-fg: var(--color-scale-white);
  --color-header-bg: var(--color-scale-gray-9);
  color: var(--color-header-fg);
  background-color: var(--color-header-bg);
}
.colorful-header h1,
.colorful-header h2,
.colorful-header p,
.colorful-header a {
  color: inherit;
}
.colorful-header.colorful-header-primary {
  --color-header-fg: var(--color-scale-white);
  --color-header-bg: var(--color-scale-primary-5);
}

/* resources/styles/components/content-responsive-split.css */
.content-responsive-split {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.content-responsive-split img {
  width: 24em;
  height: auto;
}
@media (min-width: 760px) {
  .content-responsive-split {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }
  .content-responsive-split > * {
    width: 50%;
  }
}

/* resources/styles/components/navigation-bar.css */
.navigation-bar {
  border-radius: var(--border-radius-3);
  padding: var(--spacing-scale-3);
  background-color: var(--color-scale-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-scale-black);
  position: relative;
}
.navigation-bar .navigation-bar-logo {
  height: 2em;
  font-weight: 700;
  padding-left: var(--spacing-scale-3);
}
.navigation-bar .navigation-bar-logo img {
  width: auto;
  height: 100%;
  margin-right: var(--spacing-scale-0);
}
.navigation-bar .navigation-bar-items {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-scale-2);
  flex-direction: column;
}
@media (min-width: 760px) {
  .navigation-bar .navigation-bar-items {
    gap: var(--spacing-scale-3);
    flex-direction: row;
  }
}
@media (min-width: 1024px) {
  .navigation-bar .navigation-bar-items {
    gap: var(--spacing-scale-4);
  }
}
@media (max-width: 759px) {
  .navigation-bar-responsive .navigation-bar-items {
    display: none;
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: var(--border-radius-3);
    padding: var(--spacing-scale-3);
    background-color: var(--color-scale-white);
  }
}
.toggle-trigger:checked + .navigation-bar .navigation-bar-items {
  display: flex;
}
.toggle-trigger + .navigation-bar .toggle-trigger-button img {
  width: 2em;
  height: auto;
}
@media (min-width: 760px) {
  .toggle-trigger + .navigation-bar .toggle-trigger-button {
    display: none;
  }
}
.toggle-trigger + .navigation-bar .toggle-trigger-button .close {
  display: none;
}
.toggle-trigger:checked + .navigation-bar .toggle-trigger-button .close {
  display: block;
}
.toggle-trigger:checked + .navigation-bar .toggle-trigger-button .open {
  display: none;
}
.navigation-bar a {
  text-decoration: inherit;
  color: inherit;
  display: inline-block;
}
.navigation-bar .navigation-bar-items .navigation-bar-item {
  text-decoration: none;
}
.navigation-bar .navigation-bar-items .navigation-bar-item:hover,
.navigation-bar .navigation-bar-items .navigation-bar-item:focus,
.navigation-bar .navigation-bar-items .navigation-bar-item:focus-within {
  text-decoration: underline;
}

/* resources/styles/components/button.css */
.button,
a.button {
  --color-button-fg: var(--color-scale-gray-0);
  --color-button-border: var(--color-scale-gray-5);
  --color-button-bg: var(--color-scale-gray-5);
  cursor: pointer;
  appearance: none;
  border-radius: var(--border-radius-3);
  font: inherit;
  font-size: inherit;
  text-decoration: none;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-scale-2) var(--spacing-scale-3);
  color: var(--color-button-fg);
  border: 1px solid var(--color-button-border);
  background-color: var(--color-button-bg);
}
.button,
.button:hover,
.button:focus,
a.button:hover,
a.button:focus {
  --color-button-fg: var(--color-scale-gray-0);
  --color-button-border: var(--color-scale-gray-6);
  --color-button-bg: var(--color-scale-gray-6);
}
.button.button-primary,
a.button.button-primary {
  --color-button-fg: var(--color-scale-gray-0);
  --color-button-border: var(--color-scale-primary-5);
  --color-button-bg: var(--color-scale-primary-5);
}
.button.button-primary:hover,
.button.button-primary:focus,
a.button.button-primary:hover,
a.button.button-primary:focus {
  --color-button-fg: var(--color-scale-gray-0);
  --color-button-border: var(--color-scale-primary-6);
  --color-button-bg: var(--color-scale-primary-6);
}
.button.button-blank-light,
a.button.button-blank-light {
  --color-button-fg: var(--color-scale-white);
  --color-button-border: transparent;
  --color-button-bg: transparent;
}
.button.button-blank-light:hover,
.button.button-blank-light:focus,
a.button.button-blank-light:hover,
a.button.button-blank-light:focus {
  --color-button-fg: var(--color-scale-white);
  --color-button-border: var(--color-scale-primary-4);
  --color-button-bg: var(--color-scale-primary-4);
}
.button.button-white,
a.button.button-white {
  --color-button-fg: var(--color-scale-black);
  --color-button-border: var(--color-scale-white);
  --color-button-bg: var(--color-scale-white);
}
.button.button-white:hover,
.button.button-white:focus,
a.button.button-white:hover,
a.button.button-white:focus {
  --color-button-fg: var(--color-scale-black);
  --color-button-border: var(--color-scale-gray-1);
  --color-button-bg: var(--color-scale-gray-1);
}

/* resources/styles/components/toggle-trigger.css */
.toggle-trigger {
  position: absolute;
  appearance: none;
  opacity: 0.01;
  font-size: 1;
  width: 1px;
  height: 1px;
  border: none;
}
.toggle-trigger + .toggle-target {
  display: none;
}
.toggle-trigger:checked + .toggle-target {
  display: flex;
}

/* resources/styles/styles.css */
#features ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
#features li {
  border-radius: 1em;
  border: 2px solid #ccc;
  background-color: #fff;
}