/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
code[class*=language-], pre[class*=language-] {
  color: #f8f8f2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, "Andale Mono", monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*=language-], pre[class*=language-] {
  background: var(--color-code-background);
}

:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #f8f8f2;
}

.namespace {
  opacity: 0.7;
}

.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
  color: #f92672;
}

.token.boolean, .token.number {
  color: #ae81ff;
}

.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
  color: #a6e22e;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
  color: #f8f8f2;
}

.token.atrule, .token.attr-value, .token.function {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex, .token.important {
  color: #fd971f;
}

.token.important, .token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/poppins-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/poppins-v20-latin-italic.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/poppins-v20-latin-700.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("/fonts/poppins-v20-latin-700italic.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins-Fallback";
  size-adjust: 97.38%;
  ascent-override: 99%;
  src: local("Trebuchet MS");
}
:root {
  --shadow-elevation-low:
    0px 0.6px 0.7px hsl(var(--color-shadow) / 0.06),
    0px 0.9px 1px -1.3px hsl(var(--color-shadow) / 0.06),
    0px 1.9px 2.1px -2.7px hsl(var(--color-shadow) / 0.06);
  --shadow-elevation-medium:
    0px 0.6px 0.7px hsl(var(--color-shadow) / 0.07),
    0px 1.6px 1.8px -0.9px hsl(var(--color-shadow) / 0.07),
    0px 4px 4.4px -1.8px hsl(var(--color-shadow) / 0.06),
    0px 9.6px 10.5px -2.7px hsl(var(--color-shadow) / 0.06);
  --color-shadow: 0deg 0% 0%;
  --color-light: hsl(212, 68%, 96%);
  --color-lighter: hsl(0, 0%, 100%);
  --color-light-dim-75: hsla(212, 68%, 96%, 75%);
  --color-dark: hsl(270, 2%, 25%);
  --color-darker: hsl(270, 2%, 5%);
  --color-dark-dim-75: hsla(270, 2%, 25%, 75%);
  --color-brandBlue: hsl(211, 52%, 50%);
  --color-brandBlue-lighter: hsl(211, 52%, 60%);
  --color-brandBlue-lightest: hsl(211, 52%, 80%);
  --color-brandBlue-darker: hsl(211, 52%, 40%);
  --color-brandBlue-darkest: hsl(211, 52%, 40%);
  --color-brandBlue-transparent: hsla(211, 52%, 60%, 0%);
  --color-brandBlue-dim-25: hsla(211, 52%, 60%, 25%);
  --color-brandBlue-dim-75: hsla(211, 52%, 60%, 75%);
  --color-pricingCard-background: hsl(211, 52%, 40%);
  --color-pricingCard-border: hsl(211, 52%, 30%);
  --color-pricingCard-2-background: hsl(211, 51%, 35%);
  --color-pricingCard-2-border: hsl(211, 51%, 25%);
  --color-pricingCard-3-background: hsl(210, 52%, 25%);
  --color-pricingCard-3-border: hsl(210, 52%, 20%);
  --color-pricingCard-custom-background: hsl(211, 11%, 50%);
  --color-pricingCard-custom-border: hsl(211, 11%, 40%);
  --color-pricingCard-custom-button: hsl(211, 11%, 30%);
  --color-pricingCard-custom-hover: hsl(211, 11%, 35%);
  --color-footer-layer1: hsl(211, 52%, 50%);
  --color-footer-layer2: hsl(211, 52%, 60%);
  --color-footer-text: hsl(0, 0%, 100%);
  --color-button: hsl(211, 52%, 60%);
  --color-button-hover: hsl(211, 52%, 65%);
  --color-code-background: hsl(70, 8%, 15%);
  --color-code-text: hsl(0, 0%, 100%);
}

@media (prefers-color-scheme: light) {
  :root {
    --color-shadow: 0deg 0% 0%;
    --color-light: hsl(212, 68%, 96%);
    --color-lighter: hsl(0, 0%, 100%);
    --color-light-dim-75: hsla(212, 68%, 96%, 75%);
    --color-dark: hsl(270, 2%, 25%);
    --color-darker: hsl(270, 2%, 5%);
    --color-dark-dim-75: hsla(270, 2%, 25%, 75%);
    --color-brandBlue: hsl(211, 52%, 50%);
    --color-brandBlue-lighter: hsl(211, 52%, 60%);
    --color-brandBlue-lightest: hsl(211, 52%, 80%);
    --color-brandBlue-darker: hsl(211, 52%, 40%);
    --color-brandBlue-darkest: hsl(211, 52%, 40%);
    --color-brandBlue-transparent: hsla(211, 52%, 60%, 0%);
    --color-brandBlue-dim-25: hsla(211, 52%, 60%, 25%);
    --color-brandBlue-dim-75: hsla(211, 52%, 60%, 75%);
    --color-pricingCard-background: hsl(211, 52%, 40%);
    --color-pricingCard-border: hsl(211, 52%, 30%);
    --color-pricingCard-2-background: hsl(211, 51%, 35%);
    --color-pricingCard-2-border: hsl(211, 51%, 25%);
    --color-pricingCard-3-background: hsl(210, 52%, 25%);
    --color-pricingCard-3-border: hsl(210, 52%, 20%);
    --color-pricingCard-custom-background: hsl(211, 11%, 50%);
    --color-pricingCard-custom-border: hsl(211, 11%, 40%);
    --color-pricingCard-custom-button: hsl(211, 11%, 30%);
    --color-pricingCard-custom-hover: hsl(211, 11%, 35%);
    --color-footer-layer1: hsl(211, 52%, 50%);
    --color-footer-layer2: hsl(211, 52%, 60%);
    --color-footer-text: hsl(0, 0%, 100%);
    --color-button: hsl(211, 52%, 60%);
    --color-button-hover: hsl(211, 52%, 65%);
    --color-code-background: hsl(70, 8%, 15%);
    --color-code-text: hsl(0, 0%, 100%);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-shadow: 207deg 32% 50%;
    --color-light: hsl(207, 16%, 16%);
    --color-lighter: hsl(207, 16%, 12%);
    --color-light-dim-75: hsla(207, 16%, 16%, 75%);
    --color-dark: hsl(0, 0%, 92%);
    --color-darker: hsl(0, 0%, 83%);
    --color-dark-dim-75: hsla(0, 0%, 92%, 75%);
    --color-brandBlue: hsl(207, 52%, 60%);
    --color-brandBlue-lighter: hsl(207, 32%, 30%);
    --color-brandBlue-lightest: hsl(207, 32%, 20%);
    --color-brandBlue-darker: hsl(207, 32%, 60%);
    --color-brandBlue-darkest: hsl(207, 32%, 70%);
    --color-brandBlue-transparent: hsla(207, 32%, 30%, 0%);
    --color-brandBlue-dim-25: hsla(207, 32%, 35%, 25%);
    --color-brandBlue-dim-75: hsla(207, 32%, 35%, 75%);
    --color-pricingCard-background: hsl(211, 52%, 40%);
    --color-pricingCard-border: hsl(211, 52%, 30%);
    --color-pricingCard-2-background: hsl(210, 52%, 28%);
    --color-pricingCard-2-border: hsl(210, 52%, 18%);
    --color-pricingCard-3-background: hsl(210, 52%, 20%);
    --color-pricingCard-3-border: hsl(210, 52%, 15%);
    --color-pricingCard-custom-background: hsl(200, 6%, 40%);
    --color-pricingCard-custom-border: hsl(200, 6%, 30%);
    --color-pricingCard-custom-button: hsl(200, 6%, 50%);
    --color-pricingCard-custom-hover: hsl(200, 6%, 55%);
    --color-footer-layer1: hsl(207, 32%, 30%);
    --color-footer-layer2: hsl(207, 32%, 20%);
    --color-footer-text: hsl(0, 0%, 100%);
    --color-button: hsl(207, 40%, 60%);
    --color-button-hover: hsl(207, 40%, 55%);
    --color-code-background: hsl(70, 8%, 5%);
    --color-code-text: hsl(0, 0%, 100%);
  }
}
html {
  height: 100%;
  overflow-y: auto;
  background: var(--color-light);
  color: var(--color-dark);
}

body {
  position: relative;
  height: 100%;
  min-height: 100%;
  max-width: 100%;
  font-family: "Poppins", "Poppins-Fallback", sans-serif;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

h1 {
  font-size: clamp(2.33rem, 2.08rem + 1.25vw, 3.05rem);
  line-height: 110%;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.94rem, 1.77rem + 0.87vw, 2.44rem);
  margin-bottom: 0.5em;
  max-width: 40ch;
  line-height: 100%;
}

h3 {
  font-size: clamp(1.62rem, 1.5rem + 0.58vw, 1.95rem);
  line-height: 100%;
  margin-bottom: 0.5em;
}

h4 {
  font-size: clamp(1.35rem, 1.28rem + 0.37vw, 1.56rem);
  line-height: 100%;
  margin-bottom: 0.5em;
}

p {
  font-size: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4em;
  max-width: 65ch;
  word-wrap: break-word;
}

small {
  font-weight: 400;
  max-width: 65ch;
}

a {
  color: var(--color-dark);
  text-decoration-thickness: 3px;
  text-decoration-color: var(--color-brandBlue);
  text-underline-offset: 3px;
  transition: color 0.3s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
a:hover {
  color: var(--color-brandBlue-darker);
}

ul {
  margin-bottom: 0.25em;
}
ul li {
  font-size: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
  margin-bottom: 0.25em;
}
ul li::marker {
  color: var(--color-brandBlue);
}

hr {
  border: unset;
  border-top: solid 0.2em var(--color-brandBlue);
  margin: 3em -4em;
}

code {
  background: var(--color-code-background);
  color: var(--color-code-text);
  padding: 0.25em 0.5em;
  border-radius: 0.3em;
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  display: inline-block;
  position: relative;
  line-height: 1.2;
  max-width: 100%;
  white-space: break-spaces;
  vertical-align: middle;
  word-break: break-word;
}

article {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
article p {
  margin-bottom: 1em;
  line-height: 1.65em;
  max-width: 60ch;
}
article h1, article h2, article h3, article h4 {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}
article h1:first-child,
article h2:first-child,
article h3:first-child,
article h4:first-child {
  margin-top: unset;
}
article blockquote {
  padding: 1em;
  border-left: solid 3px var(--color-brandBlue);
  margin-bottom: 0.5em;
}
article blockquote p {
  margin: unset;
}
article pre {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}
article ul {
  margin: 2em 0em;
}
article ul ul {
  margin: unset;
  margin-bottom: 1em;
}
article ol {
  font-size: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
}
article img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.wrapper {
  max-width: 1040px;
  margin: 0 auto;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
}

.imageShadow {
  filter: drop-shadow(0px 1px 3px var(--color-dark-dim-75));
  width: auto;
}

.inactive {
  opacity: 20%;
  pointer-events: none;
}

.center {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.flexCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 2em;
}

.small {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}

.smaller {
  font-size: clamp(0.78rem, 0.77rem + 0.03vw, 0.8rem);
}

.pad {
  padding: 1em;
}

.button {
  background: var(--color-button);
  border: none;
  padding: 0.5em 1em;
  border-radius: 0.2em;
  color: white;
  font-weight: 700;
  position: relative;
  display: inline-block;
  width: fit-content;
  margin: 1em 0em;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-elevation-medium);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate(0 0 0);
  transition: background 0.1s ease-in-out;
  color: white;
}
.button:hover {
  box-shadow: var(--shadow-elevation-low);
  transform: translateY(2px);
  color: white;
  background: var(--color-button-hover);
}

.breakout {
  background: var(--color-brandBlue-lighter);
  position: relative;
  right: 50%;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  min-width: 100vw;
  width: 100vw;
}
.breakout h2 {
  max-width: 1040px;
  padding: 0em 1em;
  margin: 1em auto 0em auto;
  color: white;
}
.breakout svg {
  position: absolute;
  height: 8vh;
  width: 100%;
  fill: var(--color-light);
  z-index: 11;
  transform: translateY(1px);
}
.breakout svg:first-of-type {
  position: relative;
  rotate: 180deg;
}
.breakout svg:last-of-type {
  bottom: 0;
}

.statusAlert {
  position: relative;
  background: var(--color-brandBlue-lighter);
  width: 100%;
  padding: 1em;
}
.statusAlert .content {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.statusAlert .content p {
  font-weight: 600;
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}
.statusAlert .content svg {
  position: absolute;
  right: 0%;
  max-width: 64px;
  max-height: 64px;
  rotate: 10deg;
  opacity: 10%;
  z-index: 0;
}

nav {
  position: sticky;
  top: 0;
  display: flex;
  z-index: 100;
  padding: 0.5em 2em;
  background: var(--color-light);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-shadow: var(--shadow-elevation-medium);
}
@media (max-width: 480px) {
  nav {
    position: relative;
    padding: 1em;
  }
}
nav .content {
  max-width: 1040px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
}
@media (max-width: 480px) {
  nav .content {
    justify-content: center;
    margin: 0em auto;
  }
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-inline-start: unset;
  gap: 1em 2em;
  margin: unset;
}
nav ul li {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  color: var(--color-darkest);
}
nav ul a {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  text-transform: uppercase;
}
nav .active {
  border-bottom: solid 3px var(--color-brandBlue);
}
nav svg .logoMascot {
  fill: var(--color-brandBlue);
}
nav svg .logoMasto {
  fill: var(--color-brandBlue);
}
nav svg .logoHost {
  fill: var(--color-dark);
}

main {
  flex-grow: 1;
  padding: 0em 2em;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin-bottom: 10em;
}

.homeSplash {
  background: var(--color-lighter);
  margin-bottom: 5em;
  position: relative;
}
.homeSplash .homeSplashContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  position: relative;
  padding: 1em;
  text-align: center;
  max-width: 1040px;
  margin: 5em auto 0em auto;
}
.homeSplash .homeSplashContent span {
  color: var(--color-brandBlue);
}
.homeSplash .homeSplashContent picture {
  max-width: unset;
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}
.homeSplash .homeSplashContent img {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 1040px;
  object-fit: contain;
  z-index: 1;
}
.homeSplash .homeSplashContent .button {
  font-size: clamp(1.35rem, 1.28rem + 0.37vw, 1.56rem);
  margin: unset;
}

.headerSVG {
  position: absolute;
  bottom: 0;
  fill: var(--color-light);
  transform: translateY(1px);
  height: 15vh;
  width: 100%;
  z-index: 0;
}

header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
}
header .content {
  max-width: 1040px;
  margin: 4em auto 4em auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  padding: 0em 2em;
  z-index: 1;
}
header .content h1 {
  text-transform: capitalize;
}
header .clamped {
  max-width: 700px;
  padding: unset;
}
@media (max-width: 700px) {
  header .clamped {
    padding: 0em 2em;
  }
}
header .clamped .blogPostMeta p {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}

section {
  position: relative;
  width: 100%;
}
section:not(:first-of-type) {
  margin-top: 6em;
}
section h2 {
  position: relative;
  z-index: 10;
}

.split, .postSplit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  gap: 1em;
  align-items: start;
  justify-items: center;
  position: relative;
}
.splitdiv:last-of-type {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 1em;
}
.split > div picture, .postSplit > div picture {
  justify-self: center;
  align-self: center;
  display: flex;
}
.split > div picture img, .postSplit > div picture img {
  align-self: end;
  justify-self: center;
  height: auto;
  max-height: 280px;
}

.postSplit {
  gap: 2em 4em;
}
.postSplit div {
  margin: 2em 0em;
}

.scroller {
  display: flex;
  gap: 1em;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-top: 4em;
  padding-bottom: 2em;
  margin-bottom: 6em;
  padding-left: 5em;
  padding-right: 5em;
}
.scroller::-webkit-scrollbar {
  height: 0.75em;
}
.scroller::-webkit-scrollbar-track {
  background: var(--color-dark-dim-75);
}
.scroller::-webkit-scrollbar-thumb {
  background: var(--color-brandBlue);
}
.scroller .fadeEdge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  background-image: linear-gradient(270deg, var(--color-brandBlue-transparent) calc(100% - 5em), var(--color-brandBlue-lighter)), linear-gradient(270deg, var(--color-brandBlue-lighter), var(--color-brandBlue-transparent) 5em);
  pointer-events: none;
  z-index: 9;
}
@media (max-width: 480px) {
  .scroller .fadeEdge {
    background-image: linear-gradient(270deg, var(--color-brandBlue-transparent) calc(100% - 1em), var(--color-brandBlue-lighter)), linear-gradient(270deg, var(--color-brandBlue-lighter), var(--color-brandBlue-transparent) 1em);
  }
}
.scroller .card, .scroller .pricingGrid .customCard, .pricingGrid .scroller .customCard {
  scroll-snap-align: center;
  border-radius: 0.5em;
  min-width: 400px;
  background: var(--color-light);
  padding: 1em 1em 2em 1em;
  flex-direction: column;
  gap: 1em;
  display: flex;
  box-shadow: var(--shadow-elevation-medium);
}
@media (max-width: 480px) {
  .scroller .card, .scroller .pricingGrid .customCard, .pricingGrid .scroller .customCard {
    min-width: unset;
    min-width: calc(100vw - 4em);
  }
}
.scroller .card img, .scroller .pricingGrid .customCard img, .pricingGrid .scroller .customCard img {
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 100%;
  margin: 0 auto;
  margin-top: -2em;
}
.scroller .card p, .scroller .pricingGrid .customCard p, .pricingGrid .scroller .customCard p {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  text-align: left;
  flex-grow: 1;
}
.scroller .card a, .scroller .pricingGrid .customCard a, .pricingGrid .scroller .customCard a {
  overflow: auto;
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  text-align: center;
}

.pricingGrid {
  margin: 4em auto 8em auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3em 2em;
  flex-wrap: wrap;
  max-width: 1040px;
}
.pricingGrid:last-of-type {
  margin: 4em auto 4em auto;
}
.pricingGrid .card, .pricingGrid .customCard {
  border-radius: 0.5em;
  min-width: 256px;
  width: 300px;
  max-width: 300px;
  background: var(--color-pricingCard-background);
  border: solid 2px var(--color-pricingCard-border);
  color: white;
  position: relative;
  align-self: stretch;
}
.pricingGrid .card h3, .pricingGrid .customCard h3 {
  font-size: clamp(1.94rem, 1.77rem + 0.87vw, 2.44rem);
  margin-top: -0.7em;
  margin-bottom: -0.3em;
  text-align: center;
  text-shadow: -2px -2px 0 var(--color-pricingCard-border), 0 -2px 0 var(--color-pricingCard-border), 2px -2px 0 var(--color-pricingCard-border), 2px 0 0 var(--color-pricingCard-border), 2px 2px 0 var(--color-pricingCard-border), 0 2px 0 var(--color-pricingCard-border), -2px 2px 0 var(--color-pricingCard-border), -2px 0 0 var(--color-pricingCard-border);
}
.pricingGrid .card .cardContent, .pricingGrid .customCard .cardContent {
  position: relative;
  overflow: hidden;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 1em 1em;
}
.pricingGrid .card .cardContent .price, .pricingGrid .customCard .cardContent .price {
  text-align: center;
  position: relative;
  margin: 1em 0em;
}
.pricingGrid .card .cardContent .price span, .pricingGrid .customCard .cardContent .price span {
  font-size: clamp(1.62rem, 1.5rem + 0.58vw, 1.95rem);
  font-weight: 700;
}
.pricingGrid .card .cardContent .price .smaller, .pricingGrid .customCard .cardContent .price .smaller {
  margin-top: -0.5em;
}
.pricingGrid .card .cardContent p, .pricingGrid .customCard .cardContent p {
  flex-grow: 1;
}
.pricingGrid .card .cardContent .custom, .pricingGrid .customCard .cardContent .custom {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  padding: 1em;
}
.pricingGrid .card .cardContent ul, .pricingGrid .customCard .cardContent ul {
  list-style: none;
  padding-inline-start: unset;
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex-grow: 1;
}
.pricingGrid .card .cardContent ul li, .pricingGrid .customCard .cardContent ul li {
  position: relative;
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  display: flex;
  gap: 0.5em;
  align-items: center;
  line-height: 1.2;
  margin: unset;
}
.pricingGrid .card .cardContent ul li svg, .pricingGrid .customCard .cardContent ul li svg {
  align-self: flex-start;
  position: relative;
  fill: white;
  display: inline-block;
  height: 20px;
  width: 20px;
}
.pricingGrid .card .cardContent > *, .pricingGrid .customCard .cardContent > * {
  z-index: 1;
}
.pricingGrid .card .cardContent .button, .pricingGrid .customCard .cardContent .button {
  background: var(--color-button);
}
.pricingGrid .card .cardContent .button:hover, .pricingGrid .customCard .cardContent .button:hover {
  background: var(--color-button-hover);
}
.pricingGrid .card .cardContent img, .pricingGrid .customCard .cardContent img {
  position: absolute;
  bottom: -10%;
  right: -10%;
  filter: brightness(20%);
  rotate: 10deg;
  opacity: 10%;
  z-index: 0;
}
.pricingGrid .card:nth-child(2), .pricingGrid .customCard:nth-child(2) {
  background: var(--color-pricingCard-2-background);
  border: solid 2px var(--color-pricingCard-2-border);
}
.pricingGrid .card:nth-child(2) h3, .pricingGrid .customCard:nth-child(2) h3 {
  text-shadow: -2px -2px 0 var(--color-pricingCard-2-border), 0 -2px 0 var(--color-pricingCard-2-border), 2px -2px 0 var(--color-pricingCard-2-border), 2px 0 0 var(--color-pricingCard-2-border), 2px 2px 0 var(--color-pricingCard-2-border), 0 2px 0 var(--color-pricingCard-2-border), -2px 2px 0 var(--color-pricingCard-2-border), -2px 0 0 var(--color-pricingCard-2-border);
}
.pricingGrid .card:nth-child(2) .cardContent img, .pricingGrid .customCard:nth-child(2) .cardContent img {
  filter: brightness(10%);
}
.pricingGrid .card:nth-child(3), .pricingGrid .customCard:nth-child(3) {
  background: var(--color-pricingCard-3-background);
  border: solid 2px var(--color-pricingCard-3-border);
}
.pricingGrid .card:nth-child(3) h3, .pricingGrid .customCard:nth-child(3) h3 {
  text-shadow: -2px -2px 0 var(--color-pricingCard-3-border), 0 -2px 0 var(--color-pricingCard-3-border), 2px -2px 0 var(--color-pricingCard-3-border), 2px 0 0 var(--color-pricingCard-3-border), 2px 2px 0 var(--color-pricingCard-3-border), 0 2px 0 var(--color-pricingCard-3-border), -2px 2px 0 var(--color-pricingCard-3-border), -2px 0 0 var(--color-pricingCard-3-border);
}
.pricingGrid .card:nth-child(3) .cardContent img, .pricingGrid .customCard:nth-child(3) .cardContent img {
  filter: brightness(5%);
}
.pricingGrid .customCard:nth-child(n) {
  background: var(--color-pricingCard-custom-background);
  border: solid 2px var(--color-pricingCard-custom-border);
}
.pricingGrid .customCard:nth-child(n) h3 {
  text-shadow: -2px -2px 0 var(--color-pricingCard-custom-border), 0 -2px 0 var(--color-pricingCard-custom-border), 2px -2px 0 var(--color-pricingCard-custom-border), 2px 0 0 var(--color-pricingCard-custom-border), 2px 2px 0 var(--color-pricingCard-custom-border), 0 2px 0 var(--color-pricingCard-custom-border), -2px 2px 0 var(--color-pricingCard-custom-border), -2px 0 0 var(--color-pricingCard-custom-border);
}
.pricingGrid .customCard:nth-child(n) .button {
  background: var(--color-pricingCard-custom-button);
}
.pricingGrid .customCard:nth-child(n) .button:hover {
  background: var(--color-pricingCard-custom-hover);
}

.grid {
  display: grid;
  gap: 2em;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  grid-template-rows: 1fr;
  position: relative;
}
.grid a {
  text-decoration: none;
}
.grid > picture {
  justify-self: center;
  display: flex;
}
.grid > picture img {
  align-self: end;
  height: auto;
  max-height: 180px;
}
.grid .helpCard {
  position: relative;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-elevation-medium);
  transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 1em;
  gap: 1em;
  border-radius: 0.5em;
  border: solid 2px var(--color-brandBlue-dim-75);
  padding: 1em;
  background: var(--color-lighter);
}
.grid .helpCard h3 {
  margin: unset;
}
.grid .helpCard p {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  flex-grow: 1;
}
.grid .helpCard > div {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.grid .helpCard .button {
  margin: unset;
}
.grid .helpCard svg {
  position: absolute;
  top: -5%;
  right: -5%;
  fill: var(--color-darker);
  max-width: 128px;
  max-height: 128px;
  rotate: 10deg;
  opacity: 10%;
  z-index: 0;
}

.list ul {
  list-style: none;
  padding: 2em 0em;
  display: flex;
  flex-direction: column;
}
.list ul li {
  margin-bottom: unset;
}
.list ul li a {
  display: flex;
  justify-content: space-between;
  gap: 0.5em 1em;
  padding: 0.75em 0.5em;
  border-radius: 0.25em;
  align-items: center;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease-in-out;
}
@media (max-width: 480px) {
  .list ul li a {
    flex-direction: column;
    align-items: start;
  }
}
.list ul li a p {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--color-brandBlue);
  text-underline-offset: 3px;
}
.list ul li a time {
  white-space: nowrap;
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}
.list a:hover {
  background: var(--color-brandBlue-dim-25);
  color: unset;
}

.iconList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(max(50% - 1em, 300px), 100%), 1fr));
  gap: 2em 1em;
  margin: 2em 0em;
}
.iconList .item {
  display: grid;
  grid-template-areas: "icon title" "icon description";
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  position: relative;
}
.iconList .item svg {
  grid-area: icon;
  margin: 0em 1em;
  fill: var(--color-brandBlue);
  display: inline-block;
  width: 2.5em;
  height: auto;
}
.iconList .item h3 {
  grid-area: title;
}
.iconList .item p {
  width: 100%;
  grid-area: description;
  justify-self: start;
}
.iconList > picture {
  justify-self: center;
  display: flex;
}
.iconList > picture img {
  align-self: end;
  height: auto;
  max-height: 180px;
}

.fullWidthList {
  grid-template-columns: 1fr;
  gap: 2em;
}
.fullWidthList .item {
  gap: 0em 1em;
}
.fullWidthList .item h3 {
  margin-bottom: 0.25em;
}
.fullWidthList .item svg {
  margin: 0 0.5em;
  max-width: 4em;
}
.fullWidthList .item ul {
  padding-inline-start: 1em;
  margin-block-start: unset;
}
.fullWidthList .item ul li {
  padding-top: 0.25em;
}
.accordion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(max(50% - 1em, 300px), 100%), 1fr));
  gap: 1em;
  margin: 2em 0em;
}
.accordion div {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.accordion div details {
  scroll-margin-top: 1em;
}
.accordion div details[open] summary {
  background: var(--color-brandBlue-lightest);
  outline: solid 1px var(--color-brandBlue-lighter);
}
.accordion div details summary {
  font-size: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
  background: var(--color-lighter);
  padding: 0.5em 1em;
  border-radius: 0.5em;
  box-shadow: var(--shadow-elevation-medium);
  cursor: pointer;
  outline: solid 2px var(--color-brandBlue-dim-25);
  transition: outline 0.3s ease-in-out;
}
.accordion div details summary:hover {
  outline: solid 2px var(--color-brandBlue-lighter);
}
.accordion div details summary::marker {
  content: none;
}
.accordion div details div {
  padding: 1em;
}
.accordion div details div p {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
  margin-bottom: 1em;
}
.accordion div details div li {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}

footer {
  position: relative;
  display: block;
  font-size: clamp(0.78rem, 0.77rem + 0.03vw, 0.8rem);
}
footer p {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}
footer .svgStack {
  position: relative;
  height: fit-content;
  transform: translateY(1px);
  display: grid;
  grid-template-columns: 1fr;
}
footer .svgStack svg {
  grid-row-start: 1;
  grid-column-start: 1;
  bottom: 0;
  height: 8vh;
  width: 100%;
}
footer .svgStack svg:nth-child(1) {
  fill: var(--color-footer-layer1);
  position: absolute;
  bottom: 40%;
  right: 25%;
  z-index: 3;
}
footer .svgStack svg:nth-child(2) {
  fill: var(--color-footer-layer1);
  z-index: 2;
}
footer .svgStack svg:nth-child(3) {
  fill: var(--color-footer-layer2);
  z-index: 1;
}
footer .footerContent {
  background: var(--color-footer-layer1);
  padding: 2em;
}
footer .footerContent .status {
  background: var(--color-brandBlue-dim-75);
  padding: 1em;
  border-radius: 0.5em;
  font-weight: 800;
  display: flex;
  justify-content: center;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
  margin-bottom: 2em;
}
footer .footerContent .footerBlocks {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1em;
  color: var(--color-footer-text);
  max-width: 1040px;
  margin: 0 auto;
}
footer .footerContent .footerBlocks p:first-of-type {
  font-weight: 700;
}
footer .footerContent .footerBlocks a {
  color: var(--color-footer-text);
  text-decoration-color: var(--color-brandBlue-darker);
  text-decoration-thickness: 2px;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
}
footer .footerContent .footerBlocks a:hover {
  background: var(--color-brandBlue-lighter);
}
@media (prefers-color-scheme: dark) {
  footer .footerContent .footerBlocks a:hover {
    background: var(--color-brandBlue-lightest);
  }
}
footer .footerContent .footerBlocks ul {
  display: flex;
  list-style: none;
  gap: 1em;
  flex-direction: column;
  padding-inline-start: unset;
}
footer .footerContent .footerBlocks ul li {
  font-size: clamp(0.94rem, 0.92rem + 0.11vw, 1rem);
}