:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-demo-border-gradient-colors:transparent 33%,#e9cbe8,#ddcef4,#d0d3f2,#cbd4f5;
  --pico-card-box-shadow:var(--pico-box-shadow);
  --pico-card-component-outline-width:.0625rem;
  --pico-card-component-outline-color:transparent;
  --pico-mark-gradient:linear-gradient(to right, #84266d, #6f3985, #5d409a, #43489d);
  --pico-stats-color:#2a628a;
  --pico-features-icon-color:#934daf;
  --pico-comparison-gradient-valid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #7bb2c6, #5aa6a4, #649b66);
  --pico-comparison-gradient-invalid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #d0a164, #cf7e6d, #d46c63);
  --pico-badge-html-background-color:rgba(168, 52, 16, .125);
  --pico-badge-html-color:#a83410;
  --pico-badge-react-background-color:rgba(35, 114, 143, .125);
  --pico-badge-react-color:#23728f;
  --pico-badge-sass-background-color:rgba(150, 45, 124, .125);
  --pico-badge-sass-color:#962d7c;
  --pico-badge-javascript-background-color:rgba(130, 84, 0, .125);
  --pico-badge-javascript-color:#825400;
  --pico-badge-css-background-color:rgba(29, 89, 208, .125);
  --pico-badge-css-color:#1d59d0;
}
@media only screen and (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --pico-demo-border-gradient-colors:transparent 33%,#4a1544,#3b2156,#2d2565,#1a2b6b;
    --pico-card-box-shadow:none;
    --pico-card-background-color:#161922;
    --pico-card-component-outline-width:.0625rem;
    --pico-card-component-outline-color:#1c212c;
    --pico-card-border-color:var(--pico-card-component-outline-color);
    --pico-mark-gradient:linear-gradient(to right, #d78dd2, #b999ee, #9da5e9, #8fa9f0);
    --pico-stats-color:#79b0e3;
    --pico-features-icon-color:#b999ee;
    --pico-comparison-gradient-valid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #4f7c94, #3a7174, #3f6643);
    --pico-comparison-gradient-invalid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #8b6e4d, #994e3f, #983734);
    --pico-badge-html-background-color:rgba(225, 150, 128, .125);
    --pico-badge-html-color:#e19680;
    --pico-badge-react-background-color:rgba(79, 168, 195, .125);
    --pico-badge-react-color:#4fa8c3;
    --pico-badge-sass-background-color:rgba(205, 152, 199, .125);
    --pico-badge-sass-color:#cd98c7;
    --pico-badge-javascript-background-color:rgba(188, 167, 100, .125);
    --pico-badge-javascript-color:#bca764;
    --pico-badge-css-background-color:rgba(156, 167, 250, .125);
    --pico-badge-css-color:#9ca7fa
  }
}
[data-theme=dark] {
  --pico-demo-border-gradient-colors:transparent 33%,#4a1544,#3b2156,#2d2565,#1a2b6b;
  --pico-card-box-shadow:none;
  --pico-card-background-color:#161922;
  --pico-card-component-outline-width:.0625rem;
  --pico-card-component-outline-color:#1c212c;
  --pico-card-border-color:var(--pico-card-component-outline-color);
  --pico-mark-gradient:linear-gradient(to right, #d78dd2, #b999ee, #9da5e9, #8fa9f0);
  --pico-stats-color:#79b0e3;
  --pico-features-icon-color:#b999ee;
  --pico-comparison-gradient-valid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #4f7c94, #3a7174, #3f6643);
  --pico-comparison-gradient-invalid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), #8b6e4d, #994e3f, #983734);
  --pico-badge-html-background-color:rgba(225, 150, 128, .125);
  --pico-badge-html-color:#e19680;
  --pico-badge-react-background-color:rgba(79, 168, 195, .125);
  --pico-badge-react-color:#4fa8c3;
  --pico-badge-sass-background-color:rgba(205, 152, 199, .125);
  --pico-badge-sass-color:#cd98c7;
  --pico-badge-javascript-background-color:rgba(188, 167, 100, .125);
  --pico-badge-javascript-color:#bca764;
  --pico-badge-css-background-color:rgba(156, 167, 250, .125);
  --pico-badge-css-color:#9ca7fa
}
body>main {
  --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 5);
  --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 3.5);
  padding:0
}
@media (min-width:576px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 6);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 4)
  }
}
@media (min-width:768px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 7);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 4.5)
  }
}
@media (min-width:1024px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 8);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 4)
  }
}
@media (min-width:1280px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 9);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 5.5)
  }
}
@media (min-width:1536px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 10);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 6)
  }
}
body>main.is-loading {
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-name:page-loading;
  opacity:.5
}
@keyframes page-loading {
  0% {
    opacity:1
  }
}
section {
  margin-block:var(--pico-homepage-spacing-vertical)
}
.hero {
  display:grid;
  grid-template-columns:1fr;
  -moz-column-gap:var(--pico-homepage-spacing-horizontal);
  column-gap:var(--pico-homepage-spacing-horizontal);
  row-gap:calc(var(--pico-homepage-spacing-vertical)/ 4);
  justify-items:center;
  margin-top:calc(var(--pico-homepage-spacing-vertical)/ 4);
  margin-bottom:0
}
.hero .hook {
  width:100%;
  min-width:0
}
.hero .hook {
  z-index:1;
  position:relative;
}
@media (min-width:1024px) {
  .hero .hook {
    max-width:700px
  }
}
@media (min-width:1280px) {
  .hero .hook {
    max-width:950px
  }
}
.hero .hook h1,
.hero .hook p {
  text-wrap:balance;
}
@media (min-width:576px) {
  .hero .hook h1,
  .hero .hook p {
    text-align:center
  }
}
.hero .hook h1 {
  margin-bottom:calc(var(--pico-spacing) * 2);
}
.hero .hook .grid.ctas {
  --pico-form-element-spacing-horizontal:2rem;
  margin-top:calc(var(--pico-spacing) * 4);
  margin-bottom:calc(var(--pico-spacing) * .5)
}
@media (min-width:576px) {
  .hero .hook .grid.ctas {
    display:flex;
    justify-content:center
  }
}
.hero .hook .grid.ctas a[role=button] svg {
  width:auto;
  height:1rem;
  margin-left:calc(var(--pico-spacing) * .25)
}

.stats {
  margin-top:calc(var(--pico-homepage-spacing-vertical) * .25)
}
.stats ul {
  display:grid;
  -moz-column-gap:calc(var(--pico-spacing) * 2);
  column-gap:calc(var(--pico-spacing) * 2);
  row-gap:calc(var(--pico-spacing) * 2);
  max-width:700px;
  margin:0 auto;
  padding:0
}
@media (min-width:576px) {
  .stats ul {
    grid-template-columns:repeat(3,1fr)
  }
}
.stats ul li {
  margin:0;
  list-style-type:none
}
@media (min-width:576px) {
  .stats ul li {
    text-align:center
  }
}
.stats ul li p {
  margin:0
}
.stats ul li p.count {
  margin-bottom:calc(var(--pico-spacing) * .25);
  color:var(--pico-stats-color);
  font-size:1.75rem;
  line-height:1.15;
  font-family:Figtree,var(--pico-font-family)
}
.stats ul li p.label a,
.stats ul li p.label *[role=link] {
  text-decoration:none
}
.stats ul li p.label a svg {
  display:inline-block;
  width:auto;
  height:1em;
  margin-right:calc(var(--pico-spacing) * .375);
  transform:translateY(-.125em)
}
@media (min-width:576px) {
  .stats ul li p.label a svg {
    display:none
  }
}
@media (min-width:768px) {
  .stats ul li p.label a svg {
    display:inline-block
  }
}
@media (min-width:576px) {
  .stats ul li p.label a span.period-prefix {
    display:none
  }
}
.stats ul li p.period-suffix {
  display:none;
  margin-bottom:0;
  color:var(--pico-secondary);
  font-size:14px
}
@media (min-width:576px) {
  .stats ul li p.period-suffix {
    display:block
  }
}
.gallery {
  --pico-homepage-spacing-vertical: 3rem;
}
.questions {
  --pico-homepage-spacing-vertical: 3rem;
}
.gallery > hgroup,
.questions > hgroup {
  max-width:950px;
  margin-bottom:calc(var(--pico-homepage-spacing-vertical) * .75);
  margin-inline:auto
}
@media (min-width:576px) {
  .gallery > hgroup,
  .questions > hgroup {
    text-align:center
  }
}
.gallery > hgroup > h2,
.questions > hgroup > h2 {
  margin-bottom:calc(var(--pico-spacing) * 1);
}
.gallery > hgroup > :not(:first-child):last-child,
.questions > hgroup > :not(:first-child):last-child {
  --pico-color:var(--pico-color);
  text-wrap:pretty
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:Figtree,var(--pico-font-family);
}
@media (min-width:576px) {
  h1 {
    --pico-font-size:2.5rem;
    --pico-line-height:1.0625
  }
  h2 {
    --pico-font-size:2rem;
    --pico-line-height:1.125
  }
  h3 {
    --pico-font-size:1.75rem;
    --pico-line-height:1.15
  }
  h4 {
    --pico-font-size:1.5rem;
    --pico-line-height:1.175
  }
  h5 {
    --pico-font-size:1.25rem;
    --pico-line-height:1.2
  }
  h6 {
    --pico-font-size:1.125rem;
    --pico-line-height:1.225
  }
}
@media (min-width:1536px) {
  h1 {
    --pico-font-size:3rem;
    --pico-line-height:1;
  }
  h2 {
    --pico-font-size:2.5rem;
    --pico-line-height:1.0625
  }
}
.fade-in {
  animation-duration:1s;
  animation-fill-mode:both;
  animation-name:fade-in
}
@keyframes fade-in {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }
}
a .icon-arrow-right {
  --icon-right-toggle-duration:.2s
}
a .icon-arrow-right g.head,
a .icon-arrow-right path.line {
  transition-duration:var(--icon-right-toggle-duration);
  transition-property:transform;
  transition-timing-function:ease-in-out
}
a .icon-arrow-right g.head {
  transform:translate(0)
}
a .icon-arrow-right path.line {
  transform:translate(0) scaleX(0);
  transform-origin:14px
}
a:hover .icon-arrow-right g.head {
  transform:translate(5px)
}
a:hover .icon-arrow-right path.line {
  transform:translate(5px) scaleX(1)
}
mark {
  padding:0;
  background:var(--pico-mark-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
header nav {
  justify-content: flex-end;
}
footer {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  text-align: center;
}
.hidden {
  display: none !important;
}
.gallery swiper-container {
  --swiper-pagination-bottom: -3px;
  --swiper-theme-color: var(--pico-primary);
  --swiper-pagination-bullet-inactive-color: var(--pico-color);
  max-width: 1000px;
  height: 100%;
}

.gallery swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--pico-background-color);
}

.gallery swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), transparent);*/
  border: 0.3rem solid var(--pico-secondary-hover-background);
  border-radius: 40px;
}