:root {
  --rgb-black: 0, 0, 0;
  --rgb-white: 255, 255, 255;

  --rgb-green: 0, 177, 50;
  --rgb-green-dark: 0, 159, 18;

  --rgb-neutral-50: 250, 250, 250;

  --rgb-grey: 52, 70, 86;
  --rgb-grey-dark: 15, 33, 50;
  --rgb-grey-light: 100, 127, 148;
  --rgb-grey-lighter: 244, 246, 247;

  --color-grey: rgb(var(--rgb-grey));
  --color-grey-dark: rgb(var(--rgb-grey-dark));
  --color-grey-light: rgb(var(--rgb-grey-light));
  --color-grey-lighter: rgb(var(--rgb-grey-lighter));

  --rgb-gray-100: 243, 244, 246;
  --rgb-gray-200: 229, 231, 235;
  --rgb-gray-300: 209, 213, 219;
  --rgb-gray-400: 156, 163, 175;
  --rgb-gray-500: 107, 114, 128;
  --rgb-gray-600: 75, 85, 99;
  --rgb-gray-800: 31, 41, 55;

  --rgb-orange-400: 251, 146, 60;
  --rgb-orange-500: 249, 115, 22;
  --rgb-orange-600: 234, 88, 12;
  --rgb-orange-700: 194, 65, 12;
  --rgb-orange-800: 154, 52, 18;

  --rgb-yellow-50: 254, 252, 232;
  --rgb-yellow-100: 254, 249, 195;
  --rgb-yellow-200: 253, 230, 138;

  --oklch-yellow-50: 98.7% 0.026 102.212;
  --oklch-yellow-100: 97.3% 0.071 103.193;
  --oklch-yellow-200: 94.5% 0.129 101.54;

  --oklch-green-600: 62.7% 0.194 149.214;

  --rgb-blue-600: 37, 99, 235;

  --color-black: rgb(var(--rgb-black));
  --color-white: rgb(var(--rgb-white));

  --color-green: rgb(var(--rgb-green));
  --color-green-dark: rgb(var(--rgb-green-dark));

  --color-neutral-50: rgb(var(--rgb-neutral-50));

  --color-gray-100: rgb(var(--rgb-gray-100));
  --color-gray-200: rgb(var(--rgb-gray-200));
  --color-gray-300: rgb(var(--rgb-gray-300));
  --color-gray-400: rgb(var(--rgb-gray-400));
  --color-gray-500: rgb(var(--rgb-gray-500));
  --color-gray-600: rgb(var(--rgb-gray-600));
  --color-gray-800: rgb(var(--rgb-gray-800));

  --color-orange-400: rgb(var(--rgb-orange-400));
  --color-orange-500: rgb(var(--rgb-orange-500));
  --color-orange-600: rgb(var(--rgb-orange-600));
  --color-orange-700: rgb(var(--rgb-orange-700));
  --color-orange-800: rgb(var(--rgb-orange-800));

  --color-yellow-50: oklch(var(--oklch-yellow-50));
  --color-yellow-100: oklch(var(--oklch-yellow-100));
  --color-yellow-200: oklch(var(--oklch-yellow-200));

  --color-green-600: oklch(var(--oklch-green-600));

  --color-blue-600: rgb(var(--rgb-blue-600));

  --font-size: clamp(1.375rem, 2.225vw, 2rem);
  --letter-spacing: -0.0015em;
  --line-height: 1.3;
  --transition: 0.15s cubic-bezier(0.33, 1, 0.68, 1);

  --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-mono: "Cascadia Code", Menlo, Monaco, Consolas, "Courier New",
    Monospace;
}

html {
  background: var(--color-neutral-200);
  font-size: 16px;
  min-height: -webkit-fill-available;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--font-size) * 3.4);
}

html.zoom-active {
  overflow: hidden;
}

body {
  background: var(--color-neutral-50);
  color: var(--color-gray-800);
  display: flex;
  flex-direction: column;
  font-family: var(--system-font);
  font-size: var(--font-size);
  font-style: normal;
  font-weight: 300;
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

a {
  color: var(--color-black);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.0625em;
}

b,
strong {
  color: var(--color-black);
  font-weight: 700;
  letter-spacing: normal;
}

i,
em {
  font-style: italic;
}

img,
source,
video {
  height: auto;
  max-width: 100%;
  width: 100%;
}

video::cue {
  font-size: 80%;
  font-weight: 600;
  line-height: 1;
}

table {
  background: rgba(var(--rgb-gray-200), 0.05);
  border-collapse: collapse;
  color: var(--color-black);

  font-weight: 400;
  line-height: 1.5;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table thead tr,
table tbody tr:nth-of-type(even) {
  background: rgba(var(--rgb-gray-500), 0.05);
}

table th,
table td {
  border: 2px solid var(--color-neutral-50);
  font-size: 55%;
  padding: 0.9em 0.7em;
}

table th {
  font-weight: 700;
  vertical-align: middle;
}

code {
  background: rgba(var(--rgb-neutral-50), 0.2);
  border-radius: 0.1em;
  color: var(--color-black);
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 85%;
  line-height: 1.1;
  padding: 0.2em 0.3em 0.15em 0.3em;
}

mark {
  background: var(--color-yellow-200);
  border-radius: 0.1em;
  color: var(--color-black);
  font-weight: 700;
}

.uppercase {
  letter-spacing: normal;
}

.button {
  background: var(--color-blue-600);
  border-radius: 1em;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  line-height: 1em;
  padding: 0.25em 1.3em;
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}

.buy {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  margin-inline: auto;
  pointer-events: auto;
  width: min(100%, 20em);
}

.buy__tab {
  background: var(--color-white);
  border-radius: 0.4em;
  box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.1em 2.8em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.2em 3.2em -1.2em rgba(var(--rgb-black), 0.2),
    0 0.4em 2em -1.2em rgba(var(--rgb-black), 0.3),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.4),
    0 0.8em 2.8em -2em rgba(var(--rgb-black), 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.buy__header {
  align-items: center;
  background: var(--color-white);
  box-shadow: 0 1px 0 0 rgb(var(--rgb-gray-200));
  display: flex;
  gap: 0.3em;
  height: 2.4em;
  margin-bottom: 0.8em;
  overflow: hidden;
  padding-left: 0.9em;
  padding-right: 0.9em;
}

.buy__header figure {
  width: 1.3em;
}

.buy__header dl {
  align-items: center;
  color: var(--color-black);
  display: flex;
  flex: 1;

  font-size: 70%;
  font-weight: 700;
  justify-content: space-between;
  line-height: 1;
}

.buy__content {
  color: var(--color-black);

  font-weight: 400;
  line-height: 1.5;
  margin: -0.16em 1.1em -0.185em 1.1em;
}

.buy__content h2 {
  font-size: 55%;
  font-weight: 700;
}

.buy__content h2 + * {
  --spacing: 0.425em;
}

.buy__content p {
  font-size: 50%;
}

.buy__content ul {
  display: flex;
  flex-direction: column;
  font-size: 50%;
  gap: 0.3em;
}

.buy__content ul li.icon {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 1.2em;
  padding-left: 2em;
}

.buy__content ul li.icon--code {
  background-image: url(../images/heroicons/outline/code-bracket.svg);
}

.buy__content ul li.icon--video {
  background-image: url(../images/heroicons/outline/video-camera.svg);
}

.buy__content ul li.icon--updates {
  background-size: 1.2em;
  background-position: left center;
  background-image: url(../images/heroicons/outline/arrow-path.svg);
}

.buy__content ul li.icon--support {
  background-image: url(../images/heroicons/outline/chat-bubble-left-right.svg);
}

.buy__content a {
  color: var(--color-blue-600);
  text-decoration: none;
}
.buy__content b,
.buy__content strong {
  color: var(--color-black);
  letter-spacing: inherit;
}
.buy__content > * + * {
  margin-top: var(--spacing, 1.3em);
}

.buy__button {
  display: flex;
  flex-direction: column;
  margin: 1em 0.3em 0.3em 0.3em;
}
.buy__button a {
  background: linear-gradient(
    0deg,
    var(--color-green-dark) 0,
    var(--color-green) 100%
  );
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 1px rgba(var(--rgb-black), 0.05),
    inset 0 2px 0 0 rgba(var(--rgb-white), 0.15),
    inset 0 0 0 0 rgba(var(--rgb-white), 0);
  cursor: pointer;
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.buy__button a span {
  color: var(--color-white);
  font-size: 65%;
  font-weight: 700;
  line-height: 1em;
  padding: 1.175em;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(var(--rgb-black), 0.05);
}
.buy__notes {
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: -0.1675em;
  margin-top: -0.1925em;
  text-align: center;
}
.buy__notes p {
  font-size: 50%;
}

.buy__notes a {
  text-decoration: none;
}

.buy__notes span {
  display: inline-block;
}

@media (hover: hover) {
  .buy__content a:focus,
  .buy__content a:hover,
  .buy__notes a:focus,
  .buy__notes a:hover {
    text-decoration: underline;
  }
  .buy__button a {
    transition: box-shadow var(--transition);
  }

  .buy__button a span {
    transition: text-shadow var(--transition);
  }

  .buy__button a:focus,
  .buy__button a:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--rgb-black), 0.1),
      inset 0 2px 0 0 rgba(var(--rgb-white), 0.15),
      inset 0 0.6em 1.3em -0.9em rgba(var(--rgb-white), 0.25);
  }
  .buy__button a:focus span,
  .buy__button a:hover span {
    text-shadow: 0 1px 0 rgba(var(--rgb-black), 0.15);
  }
}
@media (min-width: 64em) {
  .buy {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 101;
  }
  .buy__tab {
    border-radius: 0 0 0.4em 0.4em;
  }
}
.docs {
  display: flex;
  flex-direction: column;
  gap: 3.25em;
  margin-top: -2.1em;
}
.docs section {
  border-top: 1px solid rgba(var(--rgb-gray-200), 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.125em;
  padding-bottom: 0.075em;
  padding-top: 1.2em;
}
.docs section header {
  align-items: baseline;
  display: flex;
  gap: 1em;
  justify-content: space-between;
  width: 100%;
}
.docs section header h2 {
  color: var(--color-black);
  font-weight: 700;
}
.docs section header time {
  color: var(--color-black);
  font-size: 50%;
  font-weight: 700;
}
.docs section header a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.docs section article {
  font-size: 75%;
  letter-spacing: var(--letter-spacing);
}
.docs section article h1,
.docs section article h2,
.docs section article h3,
.docs section article h4,
.docs section article h5,
.docs section article h6 {
  --spacing: 1.725em;
  color: var(--color-black);
  font-weight: 700;
}
.docs section article h1 a,
.docs section article h2 a,
.docs section article h3 a,
.docs section article h4 a,
.docs section article h5 a,
.docs section article h6 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.docs section article h1 + *,
.docs section article h2 + *,
.docs section article h3 + *,
.docs section article h4 + *,
.docs section article h5 + *,
.docs section article h6 + * {
  --spacing: 0.775em;
}
.docs section article h3 {
  font-size: 85%;
}

.docs section article h3 + * {
  --spacing: 0.55em;
}

.docs section article ul {
  list-style: disc;
  padding-left: 1.3em;
}
.docs section article ul li {
  --spacing: 0.5em;
}

.docs section article ul li ul {
  margin-top: 0.5em;
}

.docs section article ul li + li {
  margin-top: var(--spacing, 0.5em);
}

.docs section article a {
  color: var(--color-black);
}

.docs section article > * + * {
  margin-top: var(--spacing, 1.3em);
}

@media (hover: hover) {
  .docs section header a:focus,
  .docs section header a:hover,
  .docs section article a:focus,
  .docs section article a:hover {
    text-decoration: underline;
  }
}
.image {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.image + .image {
  --spacing: 1.175em;
}

.image figure,
.video figure {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  justify-content: center;
  margin-bottom: 0.3125em;
  margin-top: 0.3125em;
}
.image figure img {
  border-radius: 0.2em;
  box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.1em 2.8em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.2em 3.2em -1.2em rgba(var(--rgb-black), 0.2),
    0 0.4em 2em -1.2em rgba(var(--rgb-black), 0.3),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.4),
    0 0.8em 2.8em -2em rgba(var(--rgb-black), 0.5);
  overflow: hidden;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.image figure img:hover {
  cursor: zoom-in;
}

.image--no-zoom figure img {
  cursor: initial !important;
}

.image figure figcaption,
.video figure figcaption {
  color: var(--color-gray-800);
}
.image figure figcaption p,
.video figure figcaption p {
  font-size: 50%;
  letter-spacing: normal;
  margin-bottom: -0.2475em;
}
.image--no-border-no-shadow figure img {
  border-radius: initial;
  box-shadow: none;
}
.image--no-border figure img {
  border-radius: initial;
  box-shadow: none;
  filter: drop-shadow(0 0.5em 0.7em rgba(var(--rgb-black), 0.3));
}
.image.image-zoom-active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 102;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.telebugs .image.image-zoom-active {
  background: rgba(var(--rgb-grey-lighter), 0.96);
}

.image.image-zoom-active figure {
  margin: 0.5em;
  max-width: 45em;
}
.image.image-zoom-active figure img:hover {
  cursor: zoom-out;
}

.image.image-zoom-active figure figcaption {
  display: none;
}

@media (min-width: 64em) {
  .image figure {
    margin-left: -2em;
    margin-right: -2em;
  }
  .image.image-zoom-active figure {
    margin: 0 1.5em;
  }
}
.legal {
  display: flex;
  flex-direction: column;
  margin-bottom: 3.55em;
  margin-inline: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
  width: min(100%, 34.5em);
}
.legal > * + * {
  margin-top: 1em;
}
.legal p {
  font-size: 50%;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: -0.325em;
}
.legal p a,
.legal p b {
  color: var(--color-black);
  font-weight: 700;
  text-decoration: none;
}
.legal p .icon {
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
}
.legal p .icon svg {
  height: 1.15em;
  max-height: 1.15em;
  width: auto;
  vertical-align: middle;
}
.legal p .icon span {
  margin-left: 0.25em;
}

.legal br {
  display: none;
}

.legal--product {
  margin-bottom: 0;
  margin-inline: initial;
  margin-top: -0.175em;
  padding-left: 0;
  padding-right: 0;
  width: auto;
}
@media (hover: hover) {
  .legal a:focus,
  .legal a:hover {
    text-decoration: underline;
  }
}
@media (min-width: 48em) {
  .legal span {
    display: inline-block;
  }
}
@media (min-width: 64em) {
  .legal {
    padding-left: 2em;
    padding-right: 2em;
  }
  .legal p {
    font-size: 40%;
  }

  .legal br {
    display: inline;
  }

  .legal--product {
    padding-left: 0;
    padding-right: 0;
  }
}
.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-bottom: 3.075em;
  margin-inline: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
  width: min(100%, 34.5em);
}
.main--index {
  margin-bottom: 6.1em;
}

.main--product {
  margin-bottom: 3.55em;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
@media (min-width: 64em) {
  .main {
    padding-left: 2em;
    padding-right: 2em;
  }
  .main--product {
    padding-left: 0;
    padding-right: 0;
  }
}
.nav-active {
  display: none;
}

.nav-active:checked ~ .nav-underlay,
.nav-active:checked ~ .nav .nav__links dd {
  display: flex;
}
@media (min-width: 64em) {
  .nav-active:checked ~ .nav-underlay {
    display: none;
  }
}
.nav-underlay {
  background: rgba(var(--rgb-white), 0.92);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
@media (min-width: 64em) {
  .nav-underlay {
    display: none;
  }
}
.nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 3.55em;
  margin-top: 3.55em;
}
.nav__main {
  display: flex;
  flex: 1;
  gap: 1em;
  margin-inline: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
  width: min(100%, 34.5em);
}
.nav__body {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5125em;
  margin-top: 0.5125em;
  width: 100%;
}
.nav__logo {
  display: flex;
}

.nav__logo a {
  align-items: center;
  color: var(--color-black);
  display: flex;
  gap: 0.225em;
  height: 1.375em;
  text-decoration: none;
}
.nav__logo a svg {
  height: 1.375em;
  max-height: 1.375em;
  width: auto;
}
.nav__logo a span {
  color: var(--color-black);
  display: block;
  font-feature-settings: "case", "cpsp", "ss03";
  font-size: 50%;
  font-weight: 700;
  letter-spacing: 0.0225em;
  line-height: 1;
  white-space: nowrap;
}
.nav__logo img {
  &:hover {
    filter: saturate(2);
  }
  &:active {
    filter: saturate(1);
  }
}
.nav__links {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.375em;
  white-space: nowrap;
}
.nav__links dt,
.nav__links dd {
  display: flex;
  font-size: 50%;
}
.nav__links dt a,
.nav__links dd a {
  text-decoration: none;
}
.nav__links dt {
  font-weight: 700;
}

.nav__links dt a {
  color: var(--color-blue-600);
}

.nav__links dt:before {
  color: rgb(var(--rgb-gray-500));
  content: "/";
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  width: 1.375em;
}
.nav__links dd {
  display: none;
}

.nav__links dd a {
  color: rgba(var(--rgb-gray-600), 0.85);
  cursor: pointer;
  flex: 1;
  font-weight: 400;
  margin-left: 1.375em;
}
.nav__links dd.selected a {
  color: var(--color-black);
  font-weight: 500;
}

.nav__toggle {
  display: flex;
  height: 1.375em;
  line-height: 1.375em;
  -webkit-user-select: none;
  user-select: none;
}
.nav__toggle label {
  color: var(--color-black);
  cursor: pointer;
  font-feature-settings: "case", "cpsp", "ss03";
  font-size: 50%;
  font-weight: 700;
  letter-spacing: 0.0225em;
  margin-right: -1em;
  padding-left: 1em;
  padding-right: 1em;
}
.nav--product {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(var(--rgb-white), 0.3);
  box-shadow: 0 1px 0 0 rgba(var(--rgb-gray-200), 0.075);
  left: 0;
  margin: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.nav--product .nav__main {
  padding-left: 1em;
  padding-right: 1em;
  width: min(100%, 29em);
}
@media (hover: hover) {
  .nav__links dt a:focus,
  .nav__links dt a:hover,
  .nav__links dd:not(.selected) a:focus,
  .nav__links dd:not(.selected) a:hover,
  .nav__links dd label:focus,
  .nav__links dd label:hover,
  .nav__toggle label:focus,
  .nav__toggle label:hover {
    text-decoration: underline;
  }
}
@media (min-width: 64em) {
  .nav__main {
    padding-left: 2em;
    padding-right: 2em;
  }
  .nav__body {
    flex: 1;
    margin-right: 3.25em;
    width: auto;
  }
  .nav__links {
    flex-direction: row;
    gap: 0.725em;
    justify-content: flex-end;
    line-height: 1.375em;
    margin-right: -2em;
  }
  .nav__links dt {
    margin-right: auto;
  }

  .nav__links dd {
    display: flex;
  }

  .nav__links dd a {
    margin-left: 0;
  }

  .nav__toggle {
    display: none;
  }

  .nav--product .nav__main {
    gap: 0;
    padding-left: 3em;
    padding-right: 3em;
    width: min(100%, 46em);
  }
  .nav--product .nav__main:after {
    content: "";
    width: 12em;
  }
}
.page {
  display: flex;
  flex-direction: column;
  gap: 3.25em;
}
.page__header {
  margin-top: -0.3em;
}

.page__header h1,
.page__header h2 {
  color: var(--color-black);
  letter-spacing: normal;
}
.page__header h1 {
  font-size: 175%;
  font-weight: 800;
  line-height: 1;
}
.page__header h2 {
  --spacing: 0.575em;
  font-size: 140%;
  font-weight: 500;
  line-height: 1.2;
}
.page__header a {
  color: var(--color-black);
  text-decoration-thickness: from-font;
}
.page__header > * + * {
  margin-top: var(--spacing, 0.9em);
}

.page__content {
  margin-top: -0.3em;
}

.page__content h3,
.page__content h4 {
  color: var(--color-black);
  letter-spacing: normal;
}
.page__content h3 a,
.page__content h4 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.page__content h3 {
  --spacing: 2.7em;
  font-size: 110%;
  font-weight: 700;
}
.page__content h3 + * {
  --spacing: 0.5875em;
}

.page__content h3 + h4 {
  --spacing: 0.925em;
}

.page__content h4 {
  --spacing: 1.475em;
  font-size: 75%;
  font-weight: 600;
}
.page__content h4 + * {
  --spacing: 0.325em;
}

.page__content ol,
.page__content ul {
  display: flex;
  flex-direction: column;
  gap: 0.575em;
}
.page__content ol li,
.page__content ul li {
  position: relative;
  padding-left: 1.8em;
}
.page__content ol li ol,
.page__content ol li ul,
.page__content ul li ol,
.page__content ul li ul {
  margin-top: 0.575em;
}
.page__content ol {
  counter-reset: counter;
}

.page__content ol li {
  counter-increment: counter;
}

.page__content ul.dashed {
  gap: 0.325em;
}

.page__content ul.dashed li {
  padding-left: 0.9em;
}

.page__content > * + * {
  margin-top: var(--spacing, 1.3em);
}

@media (min-width: 64em) {
  .page__content ol li,
  .page__content ul li {
    padding-left: 0;
  }
  .page__content ol li ol,
  .page__content ol li ul,
  .page__content ul li ol,
  .page__content ul li ul {
    padding-left: 1.8em;
  }
}
.product {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3.25em;
  margin-inline: auto;
  margin-top: 3.4em;
  padding-left: 1em;
  padding-right: 1em;
  width: min(100%, 29em);
}
.product__body {
  display: flex;
  flex-direction: column;
  gap: 3.25em;
  order: 1;
}
.product__header {
  margin-top: -0.375em;
}

.product__header--changelog {
  display: flex;
  justify-content: space-between;
}

.product__atom {
  width: 1em;
  height: 1em;
  padding: 0.1em;
  background-color: #fb923c;
  color: #fff;
  border-radius: 5px;
}

.product__header h1 {
  font-size: 80%;
  color: var(--color-gray-600);
  font-weight: 500;
}

.product__back {
  font-size: 60%;
  margin-bottom: 1rem;
}

.m-0,
.product-name {
  margin: 0;
}

.product__header .product-name,
.product__header h2 {
  color: var(--color-gray-800);
  letter-spacing: normal;
}
.product__header .product-name {
  align-items: flex-start;
  display: flex;
  font-size: 190%;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.product__header .product-description {
  font-size: 100%;
  font-weight: 500;
  line-height: 1.2;
}
.product__header h2 {
  --spacing: 0.575em;

  font-size: 70%;
  font-weight: 500;
  line-height: 1.2;
}
.product__header a {
  color: var(--color-black);
  text-decoration-thickness: from-font;
}
.product__header > * + * {
  margin-top: var(--spacing, 0.9em);
}

.product__content {
  flex: 1;
  margin-top: -0.3em;
  overflow-x: visible;
}
.product__content h2,
.product__content h3 {
  color: var(--color-gray-800);
  font-weight: 700;
  letter-spacing: normal;
}
.product__content h2 a,
.product__content h3 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.product__content h2 {
  font-size: 120%;
}

.product__content h2 + * {
  --spacing: 0.5875em;
}

.product__content h3 {
  --spacing: 1.475em;
  font-size: 75%;
}
.product__content h3 + * {
  --spacing: 0.325em;
}

.product__content ol,
.product__content ul {
  display: flex;
  flex-direction: column;
  gap: 0.575em;
  padding-left: 1em;
}
.product__content ol li,
.product__content ul li {
  position: relative;
}

.product__content ol {
  counter-reset: counter;
}

.product__content ol li {
  counter-increment: counter;
}

.product__content .image + .image {
  --spacing: 0.5em;
}

.product__content > * + * {
  margin-top: var(--spacing, 0.975em);
}

.product__content pre:has(code) {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
}

.product__content p {
  text-wrap: pretty;
}

.product__aside {
  order: 0;
}

.product__subtitle {
  --spacing: 1.475em;
  margin-top: 2em;
  font-size: 65%;
  color: var(--color-green-600);
  font-weight: 700;
  letter-spacing: normal;
  font-style: italic;
}

@media (min-width: 64em) {
  .product {
    flex-direction: row;
    gap: 0;
    margin-top: 0;
    padding-left: 3em;
    padding-right: 3em;
    justify-content: space-between;
    width: min(100%, 46em);
  }
  .product__body {
    flex: 1;
    margin-top: 4.95em;
    margin-right: 3.25em;
    order: 0;
  }
  .product__content ol,
  .product__content ul {
    padding-left: 1em;
  }
  .product__aside {
    margin-top: 0;
    order: 1;
    width: 12em;
  }
  .product__aside--condensed .buy__header {
    margin-bottom: 0;
  }

  .product__aside--condensed .buy__content,
  .product__aside--condensed .buy__notes {
    display: none;
  }
  .product__aside--condensed .buy__button {
    margin-top: 0.3em;
  }

  .product--full-width {
    position: relative;
  }

  .product--full-width .product__body {
    margin-right: 0;
  }

  .product--full-width .product__aside {
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 3em;
    top: 0;
    z-index: 101;
  }
}
.signature {
  --spacing: 1.4em;
}

.signature figure {
  margin-left: -0.5em;
  width: 6.6em;
}
.signature dl {
  color: var(--color-black);
  font-feature-settings: "case";
  font-size: 90%;
  margin-top: 0.7em;
}
.signature dl dt {
  font-weight: 700;
}

.testimonials__testimonial {
  margin-top: 1em;
  display: inline-flex;
}
.testimonials__testimonial blockquote {
  background: linear-gradient(
    135deg,
    rgba(var(--rgb-yellow-50), 0.125) 0,
    rgba(var(--rgb-yellow-200), 0.095) 100%
  );
  border-radius: 0.3em;
  box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05),
    0 0.2em 0.4em -0.4em rgba(var(--rgb-black), 0.15),
    0 0.4em 0.8em -0.8em rgba(var(--rgb-black), 0.25),
    0 0.6em 1.2em -1.2em rgba(var(--rgb-black), 0.35),
    0 0.8em 1.6em -1.6em rgba(var(--rgb-black), 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 1em 1.5em 1.5em 1.5em;
}
.testimonials__testimonial blockquote q {
  font-size: 75%;
  letter-spacing: var(--letter-spacing);
  position: relative;
  text-wrap: pretty;
}

.testimonials__testimonial blockquote q:before {
  color: rgba(var(--rgb-gray-500), 0.9);
  content: "“";
  font-size: 150%;
  font-weight: 500;
  position: absolute;
  right: calc(100% + 0.075em);
  top: -0.25em;
}

.testimonials__testimonial blockquote q:after {
  content: "”";
}

.testimonials__testimonial blockquote cite {
  align-items: center;
  display: flex;
  gap: 0.4em;
}

.testimonials__testimonial blockquote cite img {
  border-radius: 100%;
  overflow: hidden;
  width: 2em;
}

.testimonials__testimonial blockquote cite dl {
  display: flex;
  flex-direction: column;
  font-size: 60%;
  font-weight: 700;
  gap: 0.4em;
  line-height: 1;
}

.testimonials__testimonial blockquote cite dl dt {
  color: var(--color-black);
}

.testimonials__testimonial blockquote cite dl dd {
  font-size: 90%;
  font-weight: 400;
}

@media (min-width: 64em) {
  .testimonials {
    column-count: 3;
    column-gap: 1em;
    display: block;
  }

  .testimonials--col-2 {
    column-count: 2;
  }

  .testimonials__testimonial {
    margin-top: 1em;
    break-inside: avoid-column;
  }
}

.video {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.video__source {
  border-radius: 0.3em;
  box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.1),
    0 0.1em 2.8em -0.8em rgba(var(--rgb-black), 0.1),
    0 0.2em 3.2em -1.2em rgba(var(--rgb-black), 0.2),
    0 0.4em 2em -1.2em rgba(var(--rgb-black), 0.3),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.4),
    0 0.8em 2.8em -2em rgba(var(--rgb-black), 0.5);
  display: flex;
  margin-bottom: 0.3125em;
  margin-top: 0.3125em;
  overflow: hidden;
  position: relative;
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.video__source button {
  background: linear-gradient(
    135deg,
    rgba(var(--rgb-gray-400), 0.6) 0,
    rgba(var(--rgb-gray-400), 0) 100%
  );
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.video__source button:after {
  background: url(/https/telebugs.com/assets/images/heroicons/micro/play.svg) center center/0.9em
    0.9em no-repeat var(--color-black);
  border-radius: 100%;
  box-shadow: 0 0.2em 0.8em -0.2em rgba(var(--rgb-black), 0.1),
    0 0.4em 1.2em -0.4em rgba(var(--rgb-black), 0.2),
    0 0.6em 1.6em -0.6em rgba(var(--rgb-black), 0.3);
  content: "";
  height: 2.2em;
  left: calc(50% - 1.1em);
  pointer-events: none;
  position: absolute;
  top: calc(50% - 1.1em);
  width: 2.2em;
}
.video__timestamps {
  line-height: 1.5;
  margin-top: 1em;
  width: 100%;
}
.video__timestamps ul {
  display: flex;

  flex-direction: column;
  font-size: 75%;
  gap: 0.2em;
  list-style: none;
  padding-left: 0;
}
.video__timestamps ul li {
  align-items: baseline;
  display: inline-flex;
  gap: 0.6em;
}
.video__timestamps ul li span {
  font-feature-settings: "case", "tnum";
  font-size: 72.5%;
  font-weight: 500;
  opacity: 0.8;
}
.video__timestamps ul li button {
  color: var(--color-black);
  cursor: pointer;
  font-weight: 700;
}
.video__timestamps ul li:before {
  display: none;
}

.video.video-zoom-active {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 100%;
  left: 0;
  margin: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 102;
}
.video.video-zoom-active .video__source {
  margin: 0.5em;
  max-width: 45em;
}
.video.video-zoom-active .video__source button {
  display: none;
}

.video.video-zoom-active .video__timestamps {
  display: none;
}

@media (hover: hover) {
  .video__timestamps ul li button:focus,
  .video__timestamps ul li button:hover {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.0825em;
  }
}
@media (min-width: 64em) {
  .video__source {
    margin-left: -2em;
    margin-right: -2em;
  }
  .video--inline .video__source {
    margin-left: -1em;
    margin-right: -1em;
  }
  .video.video-zoom-active .video__source {
    margin: 0 1.5em;
  }
}
html.telebugs {
  background: var(--color-grey-lighter);
}

html.telebugs body {
  background: var(--color-grey-lighter);
  color: var(--color-grey);
}
html.telebugs a,
html.telebugs b,
html.telebugs strong {
  color: var(--color-grey-dark);
}
html.telebugs code {
  background: rgba(var(--rgb-grey-dark), 0.075);
  color: var(--color-grey-dark);
}
html.telebugs .nav-underlay {
  background: rgba(var(--rgb-grey-lighter), 0.92);
}

html.telebugs .nav__logo a {
  color: var(--color-grey-dark);
}

html.telebugs .nav__logo a span {
  color: var(--color-grey-dark);
}

html.telebugs .nav__links dt a {
  color: var(--color-grey-dark);
}

html.telebugs .nav__links dt:before {
  color: rgba(var(--rgb-grey-dark), 0.2);
}

html.telebugs .nav__links dd a {
  color: rgba(var(--rgb-grey-dark), 0.65);
}

html.telebugs .nav__links dd.selected a {
  color: var(--color-grey-dark);
}

html.telebugs .nav__toggle label {
  color: var(--color-grey-dark);
}

html.telebugs .nav--product {
  background: rgba(var(--rgb-white), 0.75);
  box-shadow: 0 1px 0 0 rgba(var(--rgb-grey), 0.075);
}
@media (hover: hover) {
  html.telebugs .nav__links dt a:focus,
  html.telebugs .nav__links dt a:hover,
  html.telebugs .nav__links dd:not(.selected) a:focus,
  html.telebugs .nav__links dd:not(.selected) a:hover,
  html.telebugs .nav__links dd label:focus,
  html.telebugs .nav__links dd label:hover,
  html.telebugs .nav__toggle label:focus,
  html.telebugs .nav__toggle label:hover {
    color: var(--color-grey-dark);
  }
}
html.telebugs .product__header .product-name,
html.telebugs .product__header h1 {
  color: var(--color-grey-dark);
}
html.telebugs .buy__tab {
  background: var(--color-black);
  box-shadow: 0 0 0 1px rgba(var(--rgb-grey-dark), 0.05),
    0 0.1em 2.8em -0.8em rgba(var(--rgb-grey-dark), 0.1),
    0 0.2em 3.2em -1.2em rgba(var(--rgb-grey-dark), 0.2),
    0 0.4em 2em -1.2em rgba(var(--rgb-grey-dark), 0.3),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-grey-dark), 0.4),
    0 0.8em 2.8em -2em rgba(var(--rgb-grey-dark), 0.5);
}
html.telebugs .buy__header {
  background: rgba(var(--rgb-grey-lighter), 0.25);
  box-shadow: 0 1px 0 0 rgba(var(--rgb-grey), 0.075);
}
html.telebugs .buy__header dl {
  color: var(--color-grey-dark);
}

html.telebugs .buy__content {
  color: var(--color-grey);
}

html.telebugs .buy__content h4,
html.telebugs .buy__content b,
html.telebugs .buy__content strong {
  color: var(--color-grey-dark);
}
html.telebugs .version a,
html.telebugs .version sup {
  border-color: var(--color-gray-800);
  color: var(--color-grey-dark);
}
@media (hover: hover) {
  html.telebugs .version:focus a,
  html.telebugs .version:hover a {
    background: var(--color-gray-800);
    color: var(--color-gray-800);
  }
}
html.telebugs .legal p a,
html.telebugs .legal p b {
  color: var(--color-grey-dark);
}
html.telebugs .docs section {
  border-color: rgba(var(--rgb-grey-light), 0.2);
}

html.telebugs .docs section header h2,
html.telebugs .docs section header time {
  color: var(--color-grey-dark);
}
html.telebugs .docs section article h1,
html.telebugs .docs section article h2,
html.telebugs .docs section article h3,
html.telebugs .docs section article h4,
html.telebugs .docs section article h5,
html.telebugs .docs section article h6,
html.telebugs .docs section article a {
  color: var(--color-grey-dark);
}
html.telebugs .video__source button {
  background: linear-gradient(
    135deg,
    rgba(var(--rgb-grey), 0.3) 0,
    rgba(var(--rgb-grey), 0) 100%
  );
}
html.telebugs .video.video-zoom-active {
  background: rgba(var(--rgb-grey-lighter), 0.96);
}

html.telebugs .image figure img {
  box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.05),
    0 0.1em 2.8em -0.8em rgba(var(--rgb-black), 0.05),
    0 0.2em 3.2em -1.2em rgba(var(--rgb-black), 0.15),
    0 0.4em 2em -1.2em rgba(var(--rgb-black), 0.25),
    0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.35),
    0 0.8em 2.8em -2em rgba(var(--rgb-black), 0.45);
}
html.telebugs .image figure figcaption {
  color: var(--color-grey);
}

html.telebugs .image--no-border figure img {
  border-radius: initial;
  box-shadow: none;
  filter: drop-shadow(0 0.5em 0.7em rgba(var(--rgb-black), 0.3));
}
html.telebugs .image.image-zoom-active {
  background: rgba(var(--rgb-grey-lighter), 0.96);
}

.checkout-container {
  padding: 1rem 1rem;
}

.checkout-grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .checkout-grid {
    display: grid;
    gap: 4rem;
    grid-template-columns: 1fr 1fr;
    max-width: 1024px;
    margin: 0 auto;
  }
}
.checkout-content {
  max-width: 643px;
  margin: 0 auto;
}
.checkout-logo {
  max-width: 1024px;
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
  img {
    width: 120px;
    height: 28px;
    &:hover {
      filter: saturate(2);
    }
    &:active {
      filter: saturate(1);
    }
  }
}
@media (min-width: 1024px) {
  .checkout-logo {
    margin-top: 4rem;
  }
}
.checkout-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.checkout-title__h1 {
  font-size: 1rem;
  font-weight: 700;
}
.checkout-title__label {
  font-size: 0.8rem;
  color: var(--color-gray-600);
  background-color: var(--color-gray-200);
  padding: 0.2rem 0.5rem;
  border-radius: 3.40282e38px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 500;
}
.checkout-price {
  margin: 2rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.checkout-price__usd {
  font-size: 2.5rem;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .checkout-price__usd {
    font-size: 3.5rem;
  }
}
.checkout-price__details {
  line-height: 1.5;
}

.checkout-price__title {
  font-size: 0.875rem;
  font-weight: 700;
}
.checkout-price__description {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}
.checkout-description {
  font-size: 1rem;
  color: var(--color-gray-600);
  line-height: 1.5;
}
.checkout-summary {
  margin-top: 2.5rem;

  font-size: 0.875rem;
  line-height: 1.75;
}
.checkout-summary > div:not(:first-child) {
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.checkout-summary__row {
  display: flex;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media (min-width: 1024px) {
  .checkout-summary__row {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
.checkout-summary__row--total {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  font-weight: 600;
}
.checkout-summary__tabular-nums {
  font-variant-numeric: tabular-nums;
}

.view-toggle {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.view-toggle label {
  cursor: pointer;
  font-size: 0.8em;
  margin-bottom: 10px;
}
@media (min-width: 40em) {
  .view-toggle input[type="radio"] {
    transform: scale(1.5);
    margin-right: 8px;
  }
}
#errors-value {
  font-weight: 500;
  color: var(--color-black);
}
input[type="range"] {
  width: 100%;
  margin: 20px auto;
  display: block;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  width: 180px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card.highlight {
  background-color: #e6ffe6;
  border-color: #28a745;
}
.card p {
  margin: 10px 0;
}
.card__title {
  display: flex;
  gap: 0.5em;
  align-items: center;
  font-size: 0.6em;
}
.card__icon {
  width: 16px;
  height: 16px;
}
.card__cost {
  font-size: 0.7em;
  font-weight: 500;
}

.buy-cost {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
}

.buy-cost__before {
  font-size: 85%;
  color: #707070;
  text-decoration: line-through;
}

.buy-cost__currency {
  font-size: 70%;
  color: #707070;
}

.discount {
  margin-top: 0.25rem;
  font-size: 50%;
  text-align: center;
}

.discount__currency {
  color: #438d24;
  font-weight: 700;
}

@media (max-width: 480px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .card {
    width: auto;
    padding: 10px;
  }
  .card__title {
    font-size: 0.5em;
  }
  .card__cost {
    font-size: 0.6em;
  }
}

#savings {
  font-size: 0.8em;
  margin-top: 20px;
}
.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 1.1em;
}
.cta-button:hover {
  background-color: #218838;
}
@media (max-width: 768px) {
  .card {
    width: 140px;
  }
}

.pricing-calculator {
  border: 3px solid var(--color-gray-200);
  border-radius: 0.3em;
  padding: 1.5rem;
  background-color: var(--color-gray-100);
}

.card__per-year {
  display: block;
  color: var(--color-gray-500);
}

.pricing-footnote {
  font-size: 0.4em;
  color: var(--color-gray-500);
  margin-top: 20px;
}

.txt-small {
  font-size: 80%;
}

.txt-large {
  font-size: 120% !important;
}

.m-0 {
  margin: 0;
}

.relative {
  position: relative;
}

.prominent-h2 {
  text-align: center;
  color: var(--color-green-600) !important;
  display: block;
  line-height: 1.5;
  font-style: italic;
}

.scribbled-underline {
  text-decoration: underline wavy !important;
  text-decoration-thickness: 2px !important;
}

.posts__container {
  display: flex;
  flex-direction: column;
  font-size: 100%;
  gap: 3.25em;
  letter-spacing: normal;
}

.posts__post {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.posts__post time {
  font-size: 70%;
  line-height: 1;
  margin-bottom: -0.15em;
}

.product__header time {
  font-size: 70%;
  line-height: 1;
}

.posts__post h2 {
  font-size: 120%;
  font-weight: 700;
  line-height: 1.2;
}

.page__author {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  font-size: 75%;
  gap: 0.2em 1.4em;
  letter-spacing: normal;
}

.page__author span {
  align-items: center;
  display: flex;
  gap: 0.8em;
  text-decoration: none;
}

.page__author img {
  border-radius: 100%;
  overflow: hidden;
  width: 2.5em;
}

.page__author dl {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  line-height: 1;
}

.page__author dl dt {
  color: var(--color-gray-700);
  font-weight: 500;
}

.page__author dl dd {
  color: var(--color-gray-600);
}

hr {
  border: none;
  border-bottom: 1px solid var(--color-gray-200);
}

.social-links {
  margin-top: 0.5em;
}

.social-links ul {
  display: flex;
  gap: 0.5em;
  list-style: none;
  padding: 0;
}

.social-links ul li {
  display: inline-flex;
}

.social-links svg {
  width: 0.5em;
  height: 0.5em;
}

.social-links a:hover {
  color: var(--color-blue-600);
}

.gdpr-ready {
  margin: 0 auto;
  margin-top: 1em;
  width: 160px;
  height: 120px;
}

.list-decimal {
  list-style: decimal;
  padding-left: 1em;
}
.list-disc {
  list-style: disc;
  padding-left: 1em;
}

.testimonials-container {
  max-width: 1024px;
  margin: 0 auto;
  margin-bottom: 5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.affiliates {
  color: #438d24 !important;
}

.whats-new,
.whats-new a,
.whats-new time {
  font-size: 70%;
}

.code {
  font-size: 60%;
}

.peekaboo {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
}

@media (min-width: 1025px) {
  .peekaboo {
    display: none;
  }
}

.peekaboo__button {
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}

.translate-y-0 {
  transform: translate(-50%, 0);
}

.translate-y-32 {
  transform: translate(-50%, 8rem);
}

.on-the-fence {
  margin-top: 1rem;
  font-style: italic;
  font-size: 60%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 37px;
  line-height: 21px;

  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;

  padding: 0.5rem 1rem;
  border-radius: 9999px;

  transition: background-color 0.2s, box-shadow 0.1s;
  cursor: pointer;

  &:active {
    transform: scale(0.99) translate(0, 1px);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:hover {
    text-decoration: none !important;
  }
}

.btn--secondary {
  color: var(--color-blue-600);
  background-color: var(--color-white);
  box-shadow: 0 53px 32px #00000005, 0 6px 13px #0000000a, 0 1px 3px #8f8f8f33,
    0 0 0 1px #eaeaea, inset 0 -2.4px #3d3d3d0a;

  &:hover {
    background-color: var(--color-gray-50);
  }

  &:active {
    color: var(--color-blue-600);
    background-color: var(--color-gray-100);
    box-shadow: 0 53px 32px #00000005, 0 6px 13px #0000000a, 0 1px 3px #8f8f8f33,
      0 0 0 1px #eaeaea, inset 0 -1px #3d3d3d0a;
  }

  &:focus {
    background-color: var(--color-gray-100);
  }
}

.banner {
  display: block;
  background-color: #0264e6;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  text-decoration: none;
}

.banner:hover {
  background-color: #0270f0;
}

.banner__title {
  margin: 0;
  color: white !important;
  text-transform: uppercase;
}

.banner__description {
  margin: 10px 0;
  color: #c2f6ff;
  font-size: 80%;
  font-weight: 300;
}

.banner__cta {
  color: white;
  font-size: 80%;
  font-weight: 500;
}

.btn--modal-primary {
  color: var(--color-white);
  background-color: var(--color-orange-600);
  box-shadow: inset 0 2px 2px #ffffff40, inset 0 -2px #ff8c00a8,
    0 0 0 1px var(--color-orange-700), 0 0 6px #00000005, 0 2px 4px #00000014;
  &:not(:disabled) {
    &:hover {
      background-color: var(--color-orange-700);
      position: relative;
    }
    &:hover:before {
      content: "";
      border-radius: inherit;
      opacity: 1;
      pointer-events: none;
      background: linear-gradient(#ffffff61, #ffffff1a 35%, #fff0 55%);
      position: absolute;
      inset: 0;
    }
    &:active {
      background-color: var(--color-orange-800);
      box-shadow: inset 0 2px 2px #ffffff40, inset 0 -1px #ff8c00a8,
        0 0 0 1px var(--color-orange-700), 0 0 6px #00000005,
        0 1px 2px #00000014;
    }
    &:focus {
      outline-color: var(--color-orange-400);
      background-color: var(--color-orange-500);
    }
  }
}