/*! New UI | http://new-ui.com */
@import "https://unpkg.com/open-props/easings.min.css";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.spacer-17 {
  display: block;
  height: var(--spacing-17);
}

.spacer-13 {
  display: block;
  height: var(--spacing-13);
}

.spacer-15 {
  display: block;
  height: var(--spacing-15);
}

.spacer-11 {
  display: block;
  height: var(--spacing-11);
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--text-primary);
}

img {
  max-width: 100%;
}

footer nav.text--on-color a {
  color: var(--text-on-color);
  text-decoration: none;
}
footer .sub-footer-text {
  max-width: 512px;
  color: var(--text-secondary-alt);
  line-height: var(--lh-body-sm);
}

.container {
  max-width: 944px;
  margin-inline: auto;
  padding-inline: var(--spacing-06);
  box-sizing: content-box;
}
.container--fluid {
  max-width: 100%;
}
@media screen and (max-width: 600px) {
  .container {
    max-width: 100%;
    padding-inline: 20px;
  }
}

.flex {
  display: flex;
}

@media (--breakpoint-sm) {
  .sm-flex {
    display: flex;
  }
}
@media (--breakpoint-md) {
  .md-flex {
    display: flex;
  }
}
@media (--breakpoint-lg) {
  .lg-flex {
    display: flex;
  }
}
.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
  flex: 1 1 auto;
  min-width: 0;
  /* 1 */
  min-height: 0;
  /* 1 */
}

.flex-none {
  flex: none;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-last {
  order: 99999;
}

:root {
  --breakpoint-sm: (screen and min-width: 40em);
  --breakpoint-md: (screen and min-width: 52em);
  --breakpoint-lg: (screen and min-width: 64em);
}

.col-4 {
  flex: 4;
  flex-grow: 100%;
}

.col-8 {
  flex: 8;
  flex: 100%;
}

.gap-5 {
  gap: var(--spacing-06);
}

:root {
  --sh-dialog-strong: 0px 16px 48px rgba(0, 0, 0, 0.24);
  --sh-dialog: 0px 4px 8px rgba(0, 0, 0, 0.12);
  --sh-content: 0px 2px 4px rgba(0, 0, 0, 0.08);
  --sh-canvas: 0px 0px 0px rgba(0, 0, 0, 0);
  --sh-default: 0px 0px 0px 2px var(--blue5);
  --sh-accent: 0px 0px 0px 2px var(--blue8);
  --sh-inverse: 0px 0px 0px 2px var(--white);
}

.sh-dialog-strong {
  box-shadow: var(--sh-dialog-strong);
}

.sh-dialog {
  box-shadow: var(--sh-dialog);
}

.sh-content {
  box-shadow: var(--sh-content);
}

.sh-canvas {
  box-shadow: var(--sh-canvas);
}

.sh-default {
  box-shadow: var(--sh-default);
}

.sh-accent {
  box-shadow: var(--sh-accent);
}

.sh-inverse {
  box-shadow: var(--sh-inverse);
}

/* Type Scale */
:root {
  --fs-heading-01: 3.375rem;
  --fs-heading-02: 2.625rem;
  --fs-heading-03: 2rem;
  --fs-heading-04: 1.75rem;
  --fs-heading-05: 1.25rem;
  --fs-heading-06: 1.125rem;
  --tracking-heading-01: -0.075rem;
  --tracking-heading-02: -0.05rem;
  --tracking-heading-03: -0.025rem;
  --fs-body-xl: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-helper-text: 0.75rem;
  --fs-code: 0.875rem;
  --lh-heading-01: 4rem;
  --lh-heading-02: 3.125rem;
  --lh-heading-03: 2.5rem;
  --lh-heading-04: 2.25rem;
  --lh-heading-05: 1.75rem;
  --lh-heading-06: 1.625rem;
  --lh-body-xl: 1.625rem;
  --lh-body: 1.5rem;
  --lh-body-sm: 1.25rem;
  --lh-caption: 1rem;
  --lh-helper-text: 1rem;
  --lh-code: 1.25rem;
}

@media screen and (max-width: 600px) {
  :root {
    --fs-heading-01: 2rem;
    --fs-heading-02: 1.75rem;
    --fs-heading-03: 1.5rem;
    --fs-heading-04: 1.25rem;
    --fs-heading-05: 1.125rem;
    --fs-heading-06: 1rem;
    --tracking-heading-01: -0.05rem;
    --tracking-heading-02: -0.025rem;
    --tracking-heading-03: -0.025rem;
    --fs-body-xl: 1rem;
    --fs-body: 0.875rem;
    --fs-body-sm: 0.75rem;
    --lh-heading-01: 2.5rem;
    --lh-heading-02: 2.25rem;
    --lh-heading-03: 1.875rem;
    --lh-heading-04: 1.75rem;
    --lh-heading-05: 1.625rem;
    --lh-heading-06: 1.5rem;
    --lh-body-xl: 1.5rem;
    --lh-body: 1.25rem;
    --lh-body-sm: 1rem;
  }
}
.fw-bold {
  font-weight: 700;
}

.fw-semi-bold, .caption {
  font-weight: 500;
}

.fw-normal {
  font-weight: 400;
}

.text-uppercase, .caption {
  text-transform: uppercase;
}

.text-underline {
  text-decoration: underline;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.serif {
  font-family: "ITCC", serif;
}

.sans-serif {
  font-family: "Yep", sans-serif;
}

.code {
  font-family: "JetBrains Mono", monospace;
}

.lh-body-xl {
  line-height: var(--lh-body-xl);
}

.lh-body {
  line-height: var(--lh-body);
}

.lh-body-sm {
  line-height: var(--lh-body-sm);
}

.h1 {
  font-size: var(--fs-heading-01);
  line-height: var(--lh-heading-01);
  letter-spacing: var(--tracking-heading-02);
}

.h2 {
  font-size: var(--fs-heading-02);
  line-height: var(--lh-heading-02);
  letter-spacing: var(--tracking-heading-02);
}

.h3 {
  font-size: var(--fs-heading-03);
  line-height: var(--lh-heading-03);
  letter-spacing: var(--tracking-heading-03);
}

.h4 {
  font-size: var(--fs-heading-04);
  line-height: var(--lh-heading-04);
}

.h5 {
  font-size: var(--fs-heading-05);
  line-height: var(--lh-heading-05);
}

.h6 {
  font-size: var(--fs-heading-06);
  line-height: var(--lh-heading-06);
}

.fs-lead {
  font-size: var(--fs-body-xl);
}

.fs-normal {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.fs-small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-xl);
}
@media screen and (max-width: 600px) {
  .fs-small {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
  }
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.helper-text {
  font-size: var(--fs-helper-text);
  line-height: var(--lh-helper-text);
}

.code {
  font-size: var(--fs-code);
  line-height: var(--lh-code);
}

@font-face {
  font-family: "ITCC";
  src: url("/assets/fonts/itcc.woff2") format("woff2"), url("/assets/fonts/itcc.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Yep";
  src: url("/assets/fonts/Yep-Regular.woff2") format("woff2"), url("/assets/fonts/Yep-Regular.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Yep";
  src: url("/assets/fonts/Yep-Medium.woff2") format("woff2"), url("/assets/fonts/Yep-Medium.otf") format("otf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Yep";
  src: url("/assets/fonts/Yep-Bold.woff2") format("woff2"), url("/assets/fonts/Yep-Bold.otf") format("otf");
  font-weight: 700;
  font-style: normal;
}
:root {
  --accent-primary: var(--blue5);
  --accent-primary-hover: var(--blue6);
  --accent-primary-active: var(--blue7);
  --accent-primary-focus: var(--blue5);
  --accent-primary-focus--border: var(--blue8);
  --accent-primary-disabled: var(--grey4);
}

.btn-group {
  display: flex;
  gap: var(--spacing-04);
}

.btn {
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  outline: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.btn.btn--sm {
  padding: 0.25rem 1rem;
}
.btn.btn--lg {
  padding: 0.75rem 1.5rem;
}
.btn.btn--accent-primary {
  color: var(--text-on-color);
  background-color: var(--button);
  box-shadow: var(--sh-content);
}
.btn.btn--accent-primary:hover {
  background-color: var(--button-hover);
  box-shadow: var(--sh-content);
}
.btn.btn--accent-primary:active {
  background-color: var(--button-active);
  box-shadow: none;
}
.btn.btn--accent-primary.disabled {
  background-color: var(--button-disabled);
  box-shadow: var(--sh-content);
  pointer-events: none;
}
.btn.btn--accent-primary:focus {
  background-color: var(--button);
  outline: 1px solid var(--blue8);
  box-shadow: var(--sh-content);
}
.btn.btn--secondary {
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background-color: var(--background);
  box-shadow: var(--sh-content);
}
.btn.btn--secondary:hover {
  border: 1px solid var(--border-strong);
  background-color: var(--background);
  color: var(--text-primary);
}
.btn.btn--secondary:active {
  background-color: var(--background-hover);
  border: 1px solid var(--border-muted);
  box-shadow: none;
  color: var(--text-secondary);
}
.btn.btn--secondary.disabled {
  background-color: var(--background);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  pointer-events: none;
}
.btn.btn--secondary:focus {
  background-color: var(--background);
  outline: 1px solid var(--link);
  color: var(--text-secondary);
}
.btn.btn--ghost {
  color: var(--text-secondary);
  background-color: var(--background);
  box-shadow: none;
}
.btn.btn--ghost:hover {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}
.btn.btn--ghost:active {
  background-color: var(--background);
  color: var(--text-secondary);
}
.btn.btn--ghost.disabled {
  background-color: var(--background);
  color: var(--icon-secondary);
  pointer-events: none;
}
.btn.btn--ghost:focus {
  background-color: var(--background);
  outline: 1px solid var(--button);
  color: var(--icon-secondary);
}

.bg {
  background-color: var(--white);
}

.bg-secondary {
  background-color: var(--background-secondary);
}

.bg-hover {
  background-color: var(--background-hover);
}

.bg-selected {
  background-color: var(--background-selected);
}

.bg-selected-hover {
  background-color: var(--background-selected-hover);
}

.bg-red {
  background-color: var(--red1);
}

.bg-orange {
  background-color: var(--orange1);
}

.bg-yellow {
  background-color: var(--yellow1);
}

.bg-green {
  background-color: var(--green);
}

.bg-mint {
  background-color: var(--mint);
}

.bg-teal {
  background-color: var(--teal1);
}

.bg-cyan {
  background-color: var(--cyan1);
}

.bg-blue {
  background-color: var(--blue1);
}

.bg-indigo {
  background-color: var(--indigo1);
}

.bg-purple {
  background-color: var(--purple1);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-brown {
  background-color: var(--brown);
}

.b--muted {
  border-color: var(--border-muted);
}

.b {
  border-color: var(--border);
}

.b--strong {
  border-color: var(--border-strong);
}

.btn--primary {
  background-color: var(--button);
}

.btn--primary:hover {
  background-color: var(--button-hover);
}

.btn--primary:active {
  background-color: var(--button-active);
}

.btn--disabled {
  background-color: var(--button-disabled);
}

.icon--primary {
  color: var(--grey9);
}

.icon--secondary {
  color: var(--grey7);
}

.icon--disabled {
  color: var(--grey4);
}

.icon--on-color {
  color: var(--white);
}

.link {
  color: var(--link);
}

.link:hover {
  color: var(--link-hover);
}

.link--subtle {
  color: var(--link-subtle);
}

.link--subtle-alt {
  color: var(--link-subtle);
}

.link:visited {
  color: var(--link-visted);
}

.support-error {
  color: var(--red5);
}

.support-warning {
  color: var(--yellow5);
}

.support-success {
  color: var(--green5);
}

.support-info {
  color: var(--blue5);
}

.text--primary {
  color: var(--text-primary);
}

.text--primary-alt {
  color: var(--text-primary);
}

.text--secondary {
  color: var(--text-secondary);
}

.text--secondary-alt {
  color: var(--text-secondary-alt);
}

.text-placeholder::placeholder,
.text-placeholder::webkit-input-placeholder,
.text-placeholder:ms-input-placeholder {
  color: var(--grey4);
}

.text--on-color {
  color: var(--white);
}

.text-error {
  color: var(--red6);
}

.text-success {
  color: var(--green6);
}

.text-red1 {
  color: var(--red1);
}

.text-red2 {
  color: var(--red2);
}

.text-red3 {
  color: var(--red3);
}

.text-red4 {
  color: var(--red4);
}

.text-red5 {
  color: var(--red5);
}

.text-red6 {
  color: var(--red6);
}

.text-red7 {
  color: var(--red7);
}

.text-red8 {
  color: var(--red8);
}

.text-orange1 {
  color: var(--orange1);
}

.text-orange2 {
  color: var(--orange2);
}

.text-orange3 {
  color: var(--orange3);
}

.text-orange4 {
  color: var(--orange4);
}

.text-orange5 {
  color: var(--orange5);
}

.text-orange6 {
  color: var(--orange6);
}

.text-orange7 {
  color: var(--orange7);
}

.text-orange8 {
  color: var(--orange8);
}

.text-yellow1 {
  color: var(--yellow1);
}

.text-yellow2 {
  color: var(--yellow2);
}

.text-yellow3 {
  color: var(--yellow3);
}

.text-yellow4 {
  color: var(--yellow4);
}

.text-yellow5 {
  color: var(--yellow5);
}

.text-yellow6 {
  color: var(--yellow6);
}

.text-yellow7 {
  color: var(--yellow7);
}

.text-yellow8 {
  color: var(--yellow8);
}

.text-green1 {
  color: var(--green1);
}

.text-green2 {
  color: var(--green2);
}

.text-green3 {
  color: var(--green3);
}

.text-green4 {
  color: var(--green4);
}

.text-green5 {
  color: var(--green5);
}

.text-green6 {
  color: var(--green6);
}

.text-green7 {
  color: var(--green7);
}

.text-green8 {
  color: var(--green8);
}

.text-mint1 {
  color: var(--mint1);
}

.text-mint2 {
  color: var(--mint2);
}

.text-mint3 {
  color: var(--mint3);
}

.text-mint4 {
  color: var(--mint4);
}

.text-mint5 {
  color: var(--mint5);
}

.text-mint6 {
  color: var(--mint6);
}

.text-mint7 {
  color: var(--mint7);
}

.text-mint8 {
  color: var(--mint8);
}

.text-teal1 {
  color: var(--teal1);
}

.text-teal2 {
  color: var(--teal2);
}

.text-teal3 {
  color: var(--teal3);
}

.text-teal4 {
  color: var(--teal4);
}

.text-teal5 {
  color: var(--teal5);
}

.text-teal6 {
  color: var(--teal6);
}

.text-teal7 {
  color: var(--teal7);
}

.text-teal8 {
  color: var(--teal8);
}

.text-cyan1 {
  color: var(--cyan1);
}

.text-cyan2 {
  color: var(--cyan2);
}

.text-cyan3 {
  color: var(--cyan3);
}

.text-cyan4 {
  color: var(--cyan4);
}

.text-cyan5 {
  color: var(--cyan5);
}

.text-cyan6 {
  color: var(--cyan6);
}

.text-cyan7 {
  color: var(--cyan7);
}

.text-cyan8 {
  color: var(--cyan8);
}

.text-blue1 {
  color: var(--blue1);
}

.text-blue2 {
  color: var(--blue2);
}

.text-blue3 {
  color: var(--blue3);
}

.text-blue4 {
  color: var(--blue4);
}

.text-blue5 {
  color: var(--blue5);
}

.text-blue6 {
  color: var(--blue6);
}

.text-blue7 {
  color: var(--blue7);
}

.text-blue8 {
  color: var(--blue8);
}

.text-indigo1 {
  color: var(--indigo1);
}

.text-indigo2 {
  color: var(--indigo2);
}

.text-indigo3 {
  color: var(--indigo3);
}

.text-indigo4 {
  color: var(--indigo4);
}

.text-indigo5 {
  color: var(--indigo5);
}

.text-indigo6 {
  color: var(--indigo6);
}

.text-indigo7 {
  color: var(--indigo7);
}

.text-indigo8 {
  color: var(--indigo8);
}

.text-purple1 {
  color: var(--purple1);
}

.text-purple2 {
  color: var(--purple2);
}

.text-purple3 {
  color: var(--purple3);
}

.text-purple4 {
  color: var(--purple4);
}

.text-purple5 {
  color: var(--purple5);
}

.text-purple6 {
  color: var(--purple6);
}

.text-purple7 {
  color: var(--purple7);
}

.text-purple8 {
  color: var(--purple8);
}

.text-pink1 {
  color: var(--pink1);
}

.text-pink2 {
  color: var(--pink2);
}

.text-pink3 {
  color: var(--pink3);
}

.text-pink4 {
  color: var(--pink4);
}

.text-pink5 {
  color: var(--pink5);
}

.text-pink6 {
  color: var(--pink6);
}

.text-pink7 {
  color: var(--pink7);
}

.text-pink8 {
  color: var(--pink8);
}

.text-brown1 {
  color: var(--brown1);
}

.text-brown2 {
  color: var(--brown2);
}

.text-brown3 {
  color: var(--brown3);
}

.text-brown4 {
  color: var(--brown4);
}

.text-brown5 {
  color: var(--brown5);
}

.text-brown6 {
  color: var(--brown6);
}

.text-brown7 {
  color: var(--brown7);
}

.text-brown8 {
  color: var(--brown8);
}

.text-grey1 {
  color: var(--grey1);
}

.text-grey2 {
  color: var(--grey2);
}

.text-grey3 {
  color: var(--grey3);
}

.text-grey4 {
  color: var(--grey4);
}

.text-grey5 {
  color: var(--grey5);
}

.text-grey6 {
  color: var(--grey6);
}

.text-grey7 {
  color: var(--grey7);
}

.text-grey8 {
  color: var(--grey8);
}

.text-grey9 {
  color: var(--grey9);
}

.text-grey10 {
  color: var(--grey10);
}

.text-black {
  color: var(--black);
}

.text-white {
  color: var(--white);
}

.bg-red1 {
  background-color: var(--red1);
}

.bg-red2 {
  background-color: var(--red2);
}

.bg-red3 {
  background-color: var(--red3);
}

.bg-red4 {
  background-color: var(--red4);
}

.bg-red5 {
  background-color: var(--red5);
}

.bg-red6 {
  background-color: var(--red6);
}

.bg-red7 {
  background-color: var(--red7);
}

.bg-red8 {
  background-color: var(--red8);
}

.bg-orange1 {
  background-color: var(--orange1);
}

.bg-orange2 {
  background-color: var(--orange2);
}

.bg-orange3 {
  background-color: var(--orange3);
}

.bg-orange4 {
  background-color: var(--orange4);
}

.bg-orange5 {
  background-color: var(--orange5);
}

.bg-orange6 {
  background-color: var(--orange6);
}

.bg-orange7 {
  background-color: var(--orange7);
}

.bg-orange8 {
  background-color: var(--orange8);
}

.bg-yellow1 {
  background-color: var(--yellow1);
}

.bg-yellow2 {
  background-color: var(--yellow2);
}

.bg-yellow3 {
  background-color: var(--yellow3);
}

.bg-yellow4 {
  background-color: var(--yellow4);
}

.bg-yellow5 {
  background-color: var(--yellow5);
}

.bg-yellow6 {
  background-color: var(--yellow6);
}

.bg-yellow7 {
  background-color: var(--yellow7);
}

.bg-yellow8 {
  background-color: var(--yellow8);
}

.bg-green1 {
  background-color: var(--green1);
}

.bg-green2 {
  background-color: var(--green2);
}

.bg-green3 {
  background-color: var(--green3);
}

.bg-green4 {
  background-color: var(--green4);
}

.bg-green5 {
  background-color: var(--green5);
}

.bg-green6 {
  background-color: var(--green6);
}

.bg-green7 {
  background-color: var(--green7);
}

.bg-green8 {
  background-color: var(--green8);
}

.bg-mint1 {
  background-color: var(--mint1);
}

.bg-mint2 {
  background-color: var(--mint2);
}

.bg-mint3 {
  background-color: var(--mint3);
}

.bg-mint4 {
  background-color: var(--mint4);
}

.bg-mint5 {
  background-color: var(--mint5);
}

.bg-mint6 {
  background-color: var(--mint6);
}

.bg-mint7 {
  background-color: var(--mint7);
}

.bg-mint8 {
  background-color: var(--mint8);
}

.bg-teal1 {
  background-color: var(--teal1);
}

.bg-teal2 {
  background-color: var(--teal2);
}

.bg-teal3 {
  background-color: var(--teal3);
}

.bg-teal4 {
  background-color: var(--teal4);
}

.bg-teal5 {
  background-color: var(--teal5);
}

.bg-teal6 {
  background-color: var(--teal6);
}

.bg-teal7 {
  background-color: var(--teal7);
}

.bg-teal8 {
  background-color: var(--teal8);
}

.bg-cyan1 {
  background-color: var(--cyan1);
}

.bg-cyan2 {
  background-color: var(--cyan2);
}

.bg-cyan3 {
  background-color: var(--cyan3);
}

.bg-cyan4 {
  background-color: var(--cyan4);
}

.bg-cyan5 {
  background-color: var(--cyan5);
}

.bg-cyan6 {
  background-color: var(--cyan6);
}

.bg-cyan7 {
  background-color: var(--cyan7);
}

.bg-cyan8 {
  background-color: var(--cyan8);
}

.bg-blue1 {
  background-color: var(--blue1);
}

.bg-blue2 {
  background-color: var(--blue2);
}

.bg-blue3 {
  background-color: var(--blue3);
}

.bg-blue4 {
  background-color: var(--blue4);
}

.bg-blue5 {
  background-color: var(--blue5);
}

.bg-blue6 {
  background-color: var(--blue6);
}

.bg-blue7 {
  background-color: var(--blue7);
}

.bg-blue8 {
  background-color: var(--blue8);
}

.bg-indigo1 {
  background-color: var(--indigo1);
}

.bg-indigo2 {
  background-color: var(--indigo2);
}

.bg-indigo3 {
  background-color: var(--indigo3);
}

.bg-indigo4 {
  background-color: var(--indigo4);
}

.bg-indigo5 {
  background-color: var(--indigo5);
}

.bg-indigo6 {
  background-color: var(--indigo6);
}

.bg-indigo7 {
  background-color: var(--indigo7);
}

.bg-indigo8 {
  background-color: var(--indigo8);
}

.bg-purple1 {
  background-color: var(--purple1);
}

.bg-purple2 {
  background-color: var(--purple2);
}

.bg-purple3 {
  background-color: var(--purple3);
}

.bg-purple4 {
  background-color: var(--purple4);
}

.bg-purple5 {
  background-color: var(--purple5);
}

.bg-purple6 {
  background-color: var(--purple6);
}

.bg-purple7 {
  background-color: var(--purple7);
}

.bg-purple8 {
  background-color: var(--purple8);
}

.bg-pink1 {
  background-color: var(--pink1);
}

.bg-pink2 {
  background-color: var(--pink2);
}

.bg-pink3 {
  background-color: var(--pink3);
}

.bg-pink4 {
  background-color: var(--pink4);
}

.bg-pink5 {
  background-color: var(--pink5);
}

.bg-pink6 {
  background-color: var(--pink6);
}

.bg-pink7 {
  background-color: var(--pink7);
}

.bg-pink8 {
  background-color: var(--pink8);
}

.bg-brown1 {
  background-color: var(--brown1);
}

.bg-brown2 {
  background-color: var(--brown2);
}

.bg-brown3 {
  background-color: var(--brown3);
}

.bg-brown4 {
  background-color: var(--brown4);
}

.bg-brown5 {
  background-color: var(--brown5);
}

.bg-brown6 {
  background-color: var(--brown6);
}

.bg-brown7 {
  background-color: var(--brown7);
}

.bg-brown8 {
  background-color: var(--brown8);
}

.bg-grey1 {
  background-color: var(--grey1);
}

.bg-grey2 {
  background-color: var(--grey2);
}

.bg-grey3 {
  background-color: var(--grey3);
}

.bg-grey4 {
  background-color: var(--grey4);
}

.bg-grey5 {
  background-color: var(--grey5);
}

.bg-grey6 {
  background-color: var(--grey6);
}

.bg-grey7 {
  background-color: var(--grey7);
}

.bg-grey8 {
  background-color: var(--grey8);
}

.bg-grey9 {
  background-color: var(--grey9);
}

.bg-grey10 {
  background-color: var(--grey10);
}

.bg-black {
  background-color: var(--black);
}

.bg-white {
  background-color: var(--white);
}

#site-logo-wrapper {
  width: 2rem;
  height: 2rem;
}

svg#site-logo {
  width: 2rem;
  height: 2rem;
}
svg#site-logo rect {
  width: 2rem;
  height: 2rem;
  fill: var(--black);
}
svg#site-logo path {
  fill: var(--white);
}

.theme-toggle {
  --size: var(--fs-body-xl);
  background: none;
  border: none;
  outline: none;
  padding: 0;
  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
}
.theme-toggle > svg {
  inline-size: 100%;
  block-size: 100%;
  stroke-linecap: round;
}
@media (hover: none) {
  .theme-toggle {
    --size: 3rem;
  }
}

.theme-toggle {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.theme-toggle .moon,
.theme-toggle .sun {
  transform-origin: center;
  transition: transform 0.5s var(--ease-elastic-4), opacity 0.1s var(--ease-3);
  grid-row: 1/2;
  grid-column: 1/2;
}

[data-new-ui-theme=dark] .theme-toggle .sun {
  opacity: 0;
  transform: translateY(-5px);
}

[data-new-ui-theme=light] .theme-toggle .moon {
  opacity: 0;
  transform: translateY(5px);
}

@media (prefers-reduced-motion: no-preference) {
  .theme-toggle > .sun {
    transition: transform 0.2s var(--ease-elastic-3);
  }
  .theme-toggle > .moon {
    transition: transform 0.2s var(--ease-elastic-3);
  }
}
#site-header {
  position: absolute;
  top: 0;
  inset-inline: 0;
  background-color: var(--background);
  z-index: 10000000;
}
#site-header #site-logo-wrapper, #site-header .version-wrapper, #site-header .btn-group {
  z-index: 1000;
}
#site-header .btn {
  font-size: var(--fs-body-sm);
  padding: 4px 12px;
}
#site-header.fixed {
  position: fixed;
  top: 0;
  animation-name: slideDownNavigation;
  animation-duration: 100ms;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  box-shadow: var(--sh-content);
}
#site-header.fixed nav {
  padding-block: var(--spacing-05);
}
#site-header.fixed nav .nav-cta {
  display: inline-block;
}
#site-header nav {
  display: flex;
  padding-block: var(--spacing-06);
  padding-inline: var(--spacing-06);
  align-items: center;
}
#site-header nav .flush-end-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-06);
}
@media screen and (max-width: 700px) {
  #site-header nav .flush-end-container {
    margin-inline-start: auto;
  }
}
#site-header nav .responsive-backdrop {
  display: none;
}
#site-header nav .responsive-backdrop.is-active {
  display: block;
  position: fixed;
  inset: 0;
  background-color: var(--background);
}
#site-header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-04);
}
#site-header nav ul li {
  margin-bottom: 0;
}
#site-header nav ul .nav-cta {
  display: none;
}
#site-header nav .responsive-hamburger {
  border: 0;
  outline: 0;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
@media screen and (min-width: 701px) {
  #site-header nav .responsive-hamburger {
    display: none;
  }
}
#site-header nav .responsive-hamburger .line-one, #site-header nav .responsive-hamburger .line-two {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--icon-primary);
  border-radius: 1.5px;
  transform-origin: 20% 50%;
  transition: all 200ms ease-in-out;
}
#site-header nav .responsive-hamburger .line-one {
  margin-bottom: 6px;
}
#site-header nav .responsive-hamburger.is-active .line-one {
  transform: rotate(45deg);
}
#site-header nav .responsive-hamburger.is-active .line-two {
  transform: rotate(-45deg);
}
#site-header nav .responsive-navigation {
  display: none;
}
@media screen and (min-width: 701px) {
  #site-header nav .navigation {
    margin-left: auto;
    gap: var(--spacing-01);
  }
  #site-header nav .navigation:last-child li:last-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 700px) {
  #site-header nav {
    padding-block: var(--spacing-05);
    padding-inline: 20px;
  }
  #site-header nav .navigation, #site-header nav .version-wrapper {
    display: none;
  }
}
#site-header .responsive-navigation {
  display: none;
}
@media screen and (max-width: 700px) {
  #site-header .responsive-navigation {
    position: relative;
    padding-inline: 20px;
    margin-top: var(--spacing-08);
  }
  #site-header .responsive-navigation a {
    display: block;
    text-decoration: none;
  }
  #site-header .responsive-navigation a.disabled {
    color: var(--grey7);
    pointer-events: none;
  }
  #site-header .responsive-navigation a:not(.nav-cta) {
    color: var(--text-secondary);
    padding-block: var(--spacing-04);
    border-bottom: 1px solid var(--border-muted);
  }
  #site-header .responsive-navigation a.nav-cta {
    margin-top: var(--spacing-07);
    padding-block: var(--spacing-04);
    text-align: center;
  }
}
@media screen and (min-width: 701px) {
  #site-header .responsive-navigation {
    display: none;
  }
}
#site-header .responsive-navigation a {
  opacity: 0;
}
#site-header .responsive-navigation.is-active {
  display: block;
}
@media screen and (min-width: 701px) {
  #site-header .responsive-navigation.is-active {
    display: none;
  }
}
#site-header .responsive-navigation.is-active a {
  animation-name: displayNav;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
}
#site-header .responsive-navigation.is-active a:nth-child(1) {
  animation-delay: 80ms;
}
#site-header .responsive-navigation.is-active a:nth-child(2) {
  animation-delay: 120ms;
}
#site-header .responsive-navigation.is-active a:nth-child(3) {
  animation-delay: 160ms;
}
#site-header .responsive-navigation.is-active a:nth-child(4) {
  animation-delay: 200ms;
}
#site-header .responsive-navigation.is-active a:nth-child(5) {
  animation-delay: 240ms;
}

.version {
  background-color: var(--background-selected);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.landing-page-intro .h1 {
  max-inline-size: 728px;
  color: var(--text-primary);
}
.landing-page-intro .fs-lead {
  max-inline-size: 800px;
  color: var(--text-secondary);
}
.landing-page-intro img {
  max-width: 414px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
.landing-page-intro .cols {
  display: flex;
  gap: var(--spacing-05);
}
.landing-page-intro .cols > .col {
  flex: 1;
  flex-grow: 1;
}
@media screen and (max-width: 600px) {
  .landing-page-intro .cols {
    flex-direction: column;
  }
  .landing-page-intro .cols .col {
    margin-bottom: 24px;
  }
  .landing-page-intro .cols .spacer-15 {
    height: 40px;
  }
}

.section-two .caption {
  color: var(--text-secondary);
}
.section-two .h4 {
  font-weight: normal;
  max-inline-size: 784px;
  text-align: center;
  margin-inline: auto;
  display: block;
  color: var(--text-primary);
  margin-bottom: 48px;
}
.section-two .browser-cover img {
  max-width: 100%;
  box-shadow: var(--sh-dialog);
}
.section-two .clients-frame {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-09);
}

.section-three .cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-08);
}
.section-three .cols .col {
  flex: 1 1 calc(33.333% - var(--spacing-08));
  box-sizing: border-box;
}
@media screen and (max-width: 994px) {
  .section-three .cols .col {
    flex: 1 1 calc(50% - var(--spacing-08));
  }
}
@media screen and (max-width: 600px) {
  .section-three .cols .col {
    flex: 1 1 100%;
  }
}
.section-three .card {
  width: 100%;
}
.section-three .card__icon {
  display: flex;
}
.section-three .link {
  text-decoration: none;
  padding-left: var(--spacing-06);
}
.section-three .link .link__label {
  line-height: var(--lh-body-xl);
}
.section-three .link .link__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-four h2.desktop {
  display: none;
}
@media screen and (min-width: 600px) {
  .section-four h2.desktop {
    display: block;
  }
}
.section-four h2.mobile {
  display: block;
}
@media screen and (min-width: 600px) {
  .section-four h2.mobile {
    display: none;
  }
}
.section-four .foundations {
  display: flex;
  gap: var(--spacing-06);
  padding-bottom: 112px;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 600px) {
  .section-four .foundations {
    text-align: center;
  }
}
.section-four .foundations .foundation {
  max-width: 216px;
}
.section-four .foundations .foundation img {
  box-shadow: var(--sh-content);
  max-width: 100%;
}
.section-four .foundations .foundation p.text--secondary {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.section-five .more-themes {
  max-width: 784px;
  margin-inline: auto;
}
.section-five .more-themes .cols {
  margin-inline: calc(var(--spacing-03) * -1);
  overflow-x: auto;
}
.section-five .more-themes .cols .col {
  margin-inline: var(--spacing-03);
}
.section-five .more-themes .cols .col .theme-card {
  width: 144px;
  height: 192px;
  box-sizing: border-box;
}
.section-five .img-cover {
  max-width: 624px;
  box-shadow: var(--sh-content);
  border: 1px solid var(--border-muted);
  height: 298px;
  padding: 24px;
  margin-inline: auto;
}
.section-five .img-cover .footer {
  margin-top: auto;
}
.section-five .img-cover .footer a {
  text-decoration: none;
}

.section-six .pricing-card {
  padding-block: 64px;
  max-width: 376px;
  margin-inline: auto;
  box-shadow: var(--sh-content);
  border: 1px solid var(--border-muted);
  padding-inline: var(--spacing-11);
  box-sizing: border-box;
}

.changelogs .cols {
  display: flex;
}
.changelogs .cols .col-4 {
  flex: 4;
  flex-grow: 100%;
}
.changelogs .cols .col-8 {
  flex: 8;
  flex-grow: 100%;
}
@media screen and (max-width: 600px) {
  .changelogs .cols {
    flex-direction: column;
    gap: 0;
  }
}
.changelogs .content > div.text--secondary > *:not(:last-child) {
  margin-bottom: var(--spacing-03);
}
.changelogs ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: var(--spacing-03);
}

.templates-container .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--spacing-06);
  grid-template-rows: auto;
}
.templates-container .template-backdrop {
  max-width: 464px;
  height: 464px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-secondary);
}
@media screen and (max-width: 680px) {
  .templates-container .cols {
    display: block;
  }
  .templates-container .template-backdrop {
    max-width: 680px;
    height: 280px;
  }
}

.playbook-post #page-breadcrumb {
  text-decoration: none;
  display: inline-block;
  color: var(--link);
}
@media screen and (min-width: 601px) {
  .playbook-post #page-breadcrumb {
    display: none;
  }
}

.playbook-container .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, 304px);
  place-content: start;
  grid-gap: var(--spacing-06);
}
@media screen and (max-width: 992px) {
  .playbook-container .cols {
    grid-template-columns: repeat(auto-fit, 280px);
    place-content: center;
  }
}
.playbook-container .cols .playbook-card {
  display: block;
}
.playbook-container .cols .playbook-card .playbook-cover img {
  max-width: 100%;
}
@media screen and (max-width: 992px) {
  .playbook-container .section-title {
    text-align: center;
  }
}

.inspirations-container .inspirations-inner {
  display: flex;
}
.inspirations-container .inspirations-inner .inspirations-sidebar {
  width: 224px;
  flex: 1;
}
.inspirations-container .inspirations-inner .inspirations-sidebar ul li a {
  text-decoration: none;
  display: block;
}
.inspirations-container .inspirations-inner .inspirations-sidebar ul li a:hover {
  background-color: var(--background-hover);
}
.inspirations-container .inspirations-inner .inspirations-sidebar ul li a.is-active {
  color: var(--text-primary);
  font-weight: bold;
  background-color: var(--background-selected);
}
@media screen and (max-width: 980px) {
  .inspirations-container .inspirations-inner .inspirations-sidebar {
    display: none;
  }
}
.inspirations-container .inspirations-inner .inspirations-list {
  flex: 3;
}
.inspirations-container .inspirations-inner .inspirations-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-06);
}
.inspirations-container .inspirations-inner .inspirations-list ul li .inspiration-card {
  margin-bottom: var(--spacing-09);
}
.inspirations-container .inspirations-inner .inspirations-list ul li .inspiration-card .cover {
  margin-bottom: var(--spacing-06);
}
@media screen and (max-width: 600px) {
  .inspirations-container .inspirations-inner .inspirations-list ul li .inspiration-card .cover img {
    width: 280px;
    height: 225px;
  }
}

@keyframes slideDownNavigation {
  from {
    top: -20px;
    opacity: 0.5;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes displayNav {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animated {
  visibility: hidden;
  opacity: 0;
}

@keyframes slideUpComp {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.animated {
  animation-name: slideUpComp;
  animation-duration: 600ms;
  animation-fill-mode: forwards;
}
.animated.delay-01 {
  animation-delay: 80ms;
}
.animated.delay-02 {
  animation-delay: 160ms;
}
.animated.delay-03 {
  animation-delay: 240ms;
}
.animated.delay-04 {
  animation-delay: 320ms;
}
.animated.delay-05 {
  animation-delay: 400ms;
}
.animated.delay-06 {
  animation-delay: 480ms;
}
.animated.delay-07 {
  animation-delay: 560ms;
}
.animated.delay-08 {
  animation-delay: 640ms;
}
.animated.delay-09 {
  animation-delay: 720ms;
}
.animated.delay-10 {
  animation-delay: 800ms;
}
.animated.delay-11 {
  animation-delay: 880ms;
}
.animated.delay-12 {
  animation-delay: 960ms;
}
.animated.delay-13 {
  animation-delay: 1040ms;
}
.animated.delay-14 {
  animation-delay: 1120ms;
}
.animated.delay-15 {
  animation-delay: 1200ms;
}
.animated.delay-16 {
  animation-delay: 1280ms;
}
.animated.delay-17 {
  animation-delay: 1360ms;
}
.animated.delay-18 {
  animation-delay: 1440ms;
}
.animated.delay-19 {
  animation-delay: 1520ms;
}
.animated.delay-20 {
  animation-delay: 1600ms;
}
.animated.delay-21 {
  animation-delay: 1680ms;
}

/*# sourceMappingURL=main.css.map */