.card{
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

a.card{
  outline-offset: 0px;
  outline-color: #9BC9FF;
}

a.card:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card--colored{
  background-color: color-mix(in srgb, currentColor 5%, transparent);
  background-image: radial-gradient(circle at top right, color-mix(in srgb, currentColor 14%, transparent) 0%, rgba(0, 0, 0, 0) 30%);
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  box-shadow: 0 24px 48px color-mix(in srgb, currentColor 14%, transparent);
}

.card__image{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.group:hover .card__image{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cards .card{
  border-radius: 0px;
  border-width: 0px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
}

.cards .card:first-child{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.cards .card:last-child{
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-width: 0px;
}

.cards a.card:hover{
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.card--bordered{
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(155 201 255 / var(--tw-border-opacity, 1));
}

.card--preview{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card--preview > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.card--preview{
  border-radius: 1rem;
  text-align: center;
}

.card__content{
  padding: 2rem;
}

a.group:hover .card__title,
a.card:hover .card__title,
a.card:focus-visible .card__title{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.card__icon{
  display: flex;
  height: 7rem;
  width: 7rem;
  align-items: center;
  justify-content: center;
  -o-object-position: center;
     object-position: center;
  padding: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 191 48 / var(--tw-text-opacity, 1));
}

/* the modern card language keeps icons small, never the centrepiece the old 112px box made
   them - used by cards_block, whose tiles carry a title and description alongside the icon */

.card__icon--sm{
  height: 4rem;
  width: 4rem;
  padding: 0.75rem;
}

.card__icon img{
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

a.card:hover .card__icon{
  animation: card-icon-hover 0.4s ease-in-out forwards;
}

@keyframes card-icon-hover{
  0%{
    --tw-text-opacity: 1;
    color: rgb(255 191 48 / var(--tw-text-opacity, 1));
    transform: scale(1);
  }

  50%{
    --tw-text-opacity: 1;
    color: rgb(117 249 233 / var(--tw-text-opacity, 1));
    transform: scale(1.025);
  }

  100%{
    --tw-text-opacity: 1;
    color: rgb(117 249 233 / var(--tw-text-opacity, 1));
    transform: scale(1.02);
  }
}

.card__text{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.list-disc,
.list-decimal{
  padding-left: 1.25rem;
  text-align: left;
}

.list-disc--secondary li::marker{
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 191 48 / var(--tw-text-opacity, 1));
}

.raw-content > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.raw-content{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.raw-content--lead > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.raw-content--lead{
  font-size: 1rem;
  line-height: 1.5rem;
}

.raw-content h1,
.raw-content h2,
.raw-content h3,
.raw-content h4,
.raw-content h5,
.raw-content h6{
  padding-bottom: 0.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.raw-content h1{
  font-size: 1.5rem;
  line-height: 2rem;
}

.raw-content h2{
  font-size: 1.25rem;
  line-height: 2rem;
}

.raw-content h3{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.raw-content h4{
  font-size: 1rem;
  line-height: 1.5rem;
}

.raw-content h5{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.raw-content h6{
  font-size: 0.75rem;
  line-height: 1rem;
}

.raw-content ul{
  list-style-type: disc;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.25rem;
  text-align: left;
}

.raw-content ol{
  list-style-type: decimal;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.25rem;
  text-align: left;
}

.raw-content ul li,
.raw-content ol li{
  margin-bottom: 0.5rem;
}

.raw-content table{
  width: 100%;
  border-collapse: collapse;
}

.raw-content td,
.raw-content th{
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
  padding: 0.5rem;
}

.raw-content code{
  display: inline-block;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tabs--horizontal{
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

@media (min-width: 1024px){
  .tabs--horizontal{
    display: flex;
  }
}

.tabs--vertical{
  display: grid;
}

@media (min-width: 1024px){
  .tabs--vertical{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tabs__tab{
  display: flex;
  align-items: center;
  justify-content: space-between;
  --tw-border-opacity: 1;
  border-color: rgb(155 201 255 / var(--tw-border-opacity, 1));
  font-size: 1rem;
  line-height: 1.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.tabs__tab:first-child{
  margin-top: 0px;
}

@media not all and (min-width: 1024px){
  .tabs__tab{
    margin-top: 0.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgb(84 64 244 / var(--tw-text-opacity, 1));
  }

  .tabs__tab[aria-selected="true"]:not(.unselected){
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

.tabs__tab::after{
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-size: contain;
}

@media (min-width: 1024px){
  .tabs__tab::after{
    display: none;
  }
}

.tabs__tab::after{
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.7071 12.7071C14.3166 13.0976 13.6834 13.0976 13.2929 12.7071L10 9.41421L6.70711 12.7071C6.31658 13.0976 5.68342 13.0976 5.29289 12.7071C4.90237 12.3166 4.90237 11.6834 5.29289 11.2929L9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071Z' fill='%235440F4'/%3E%3C/svg%3E%0A");
}

.tabs__tab[aria-selected="true"]:not(.unselected)::after{
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media not all and (min-width: 1024px){
  .tabs--horizontal .tabs__tab{
    width: 100%;
  }
}

@media (min-width: 1024px){
  .tabs--horizontal .tabs__tab{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-width: 2px;
    border-color: transparent;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.tabs--vertical .tabs__tab{
  padding: 1rem;
}

@media (min-width: 1024px){
  .tabs--vertical .tabs__tab{
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

.tabs .tabs__tab[aria-selected="true"],
.tabs .tabs__tab:hover{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px){
  .tabs .tabs__tab[aria-selected="true"],
.tabs .tabs__tab:hover{
    --tw-border-opacity: 1;
    border-color: rgb(84 64 244 / var(--tw-border-opacity, 1));
  }
}

@media not all and (min-width: 1024px){
  .tabs .tabs__tab[aria-selected="true"]:not(.unselected){
    border-bottom-width: 0px;
  }
}

.tabs--vertical .tabs__tab[aria-selected="true"],
.tabs--vertical .tabs__tab:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.tabs__tabpanel{
  border-radius: 0.75rem;
  --tw-border-opacity: 1;
  border-color: rgb(155 201 255 / var(--tw-border-opacity, 1));
  padding-bottom: 2rem;
}

@media not all and (min-width: 1024px){
  .tabs__tabpanel{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-width: 1px;
    border-top-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
}

@media (min-width: 1024px){
  .tabs__tabpanel{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.tabs__tabpanel[aria-hidden="true"]{
  display: none;
}

@media (min-width: 1024px){
  .tabs--vertical .tabs__tabpanel{
    grid-column: span 2 / span 2;
    grid-column-start: 2;
    grid-row: span 100 / span 100;
    grid-row-start: 1;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
}

.tabs--horizontal .tabs__tabpanel{
  width: 100%;
}

@media (min-width: 1024px){
  .tabs--horizontal .tabs__tabpanel{
    order: 9999;
  }
}

.hidden-scroll::-webkit-scrollbar,
.slider::-webkit-scrollbar{
  display: none;
}

.slider__container{
  position: relative;
}

.slider{
  display: flex;
  align-items: center;
}

.slider > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.slider{
  overflow-x: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

@media not all and (min-width: 1024px){
  .slider{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media not all and (min-width: 640px){
  .slider{
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
    padding-bottom: 2rem;
  }
}

.slider__item{
  width: 280px;
  flex-shrink: 0;
}

@media not all and (min-width: 640px){
  .slider__item{
    scroll-snap-align: center;
  }
}

@media (min-width: 640px){
  .slider__item{
    width: 400px;
  }
}

.slider__button{
  position: absolute;
  bottom: 0px;
  margin: 0px !important;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.slider__button:hover{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.slider__button svg{
  height: 2.5rem;
  width: 2.5rem;
}

@media not all and (min-width: 640px){
  .slider__button svg{
    height: 1.5rem;
    width: 1.5rem;
  }
}

.slider__button:first-of-type{
  left: 2.5rem;
}

.slider__button:last-of-type{
  right: 2.5rem;
}

/* A rail that lines up with the page rather than bleeding past it: no viewport gutters
   to keep clear, just enough padding for the cards' border and shadow. Its buttons leave
   the rail's corners and sit in the section's intro row, so they stop being absolute. */

.slider--inline{
  /* the negative margin only buys room for the cards' hover shadow - the matching
       padding keeps the first and last card flush with the section's own edges. It is
       kept to the page's own mobile gutter, so the rail never widens the page. */
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.slider__button--inline{
  position: static;
}

/* Lists of short statements (technology highlights, job requirements). The column count
   follows the width of the card the list sits in, not the viewport: the same block is a
   single column in a narrow card beside a quote and three across when it owns the row.
   Without that, a block that happened to be alone stretched one column of bullets over a
   full-width card and left the rest of it empty. */

.highlight-list{
  container-type: inline-size;
}

.highlight-list__items{
  display: grid;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 1rem;
}

@container (min-width: 34rem){
  .highlight-list__items{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 58rem){
  .highlight-list__items{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.highlight-item{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.375;
}

.highlight-item__mark{
  margin-top: 0.125rem;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
}

.highlight-item__mark--check{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: rgb(117 249 233 / 0.3);
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.highlight-item__mark--check svg{
  height: 1rem;
  width: 1rem;
}

[data-controller="single-slider"]{
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  scroll-behavior: smooth;
}

[data-controller="single-slider"]::before,
[data-controller="single-slider"]::after{
  flex-shrink: 0;
}

@media (min-width: 640px){
  [data-controller="single-slider"]::before,
[data-controller="single-slider"]::after{
    width: 16.666667%;
  }
}

[data-controller="single-slider"]::before,
[data-controller="single-slider"]::after{
  content: '';
}

[data-single-slider-target="slide"]{
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

@media (min-width: 640px){
  [data-single-slider-target="slide"]{
    width: 66.666667%;
  }
}

[data-single-slider-target="slide"] .card{
  transform: scale(0.9);
  opacity: 0.6;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition: transform 0.2s ease-in-out;
}

[data-single-slider-target="slide"][aria-current="true"] .card{
  opacity: 1;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transform: scale(1);
}

.blockquote{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 1024px){
  .blockquote{
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.blockquote__text{
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

.blockquote__footer{
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-style: normal;
}

.blockquote__author{
  display: block;
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.blockquote__cite{
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.blockquote::before{
  margin-bottom: 0.5rem;
  display: block;
  height: 3.5rem;
  width: 3.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  content: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.6076 47.84H4.76758V27.488L15.3916 8.16H25.3756L15.9036 28.896H24.6076V47.84ZM50.4636 47.84H30.6236V27.488L41.2476 8.16H51.2316L41.7596 28.896H50.4636V47.84Z' fill='%2375F9E9'/%3E%3C/svg%3E%0A");
}

.avatar{
  height: 88px;
  width: 88px;
  overflow: hidden;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
}

.avatar--sm{
  height: 48px;
  width: 48px;
}

.dropdown{
  /* top/left are set inline by floating-ui on desktop; top-full is the no-JS fallback.
       No margin here — the gap comes from the offset() middleware so positioning stays exact. */
  position: absolute;
  top: 100%;
  z-index: 20;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(234 231 254 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(53 40 153 / 0.05);
  --tw-shadow: var(--tw-shadow-colored);
}

.dropdown::before{
  position: absolute;
  margin-top: -0.5rem;
  display: block;
  height: 0.5rem;
  width: 100%;
  content: '';
}

.dropdown__icon{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

[aria-expanded="true"] .dropdown__icon{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.menu__icon{
  position: relative;
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.25rem;
}

.menu__icon i,
.menu__icon:before,
.menu__icon:after{
  content: "";
  display: block;
  width: 1rem;
  border-radius: 0.125rem;
  border-width: 1px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

[aria-expanded="true"] .menu__icon i{
  opacity: 0;
}

[aria-expanded="true"] .menu__icon::before{
  transform-origin: left;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

[aria-expanded="true"] .menu__icon::after{
  transform-origin: left;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media not all and (min-width: 1024px){
  .top-nav__dropdown{
    position: static;
    margin-top: 0px;
    border-width: 0px;
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

/* Plain show/hide for non-floating menus (mobile burger panel, mobile accordion). */

@media not all and (min-width: 1024px){
  [data-dropdown-target="menu"]:not(.opened){
    display: none;
  }
}

/* Floating dropdown menus (desktop): positioned by floating-ui, revealed with a
   short fade + scale from the anchored edge (--dropdown-origin set by the controller). */

@media (min-width: 1024px){
  .dropdown[data-dropdown-target="menu"]{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transform-origin: var(--dropdown-origin, top center);
    transition:
            opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
            transform 0.15s cubic-bezier(0.4, 0, 1, 1),
            visibility 0s linear 0.15s;
  }

  .dropdown[data-dropdown-target="menu"].opened{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
            opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* no movement on this one: the shared dropdown reveal slides and scales, which on a
       panel the width of the viewport reads as a huge animation rather than a hint.
       Opacity alone. */

  .dropdown.top-nav__mega[data-dropdown-target="menu"],
    .dropdown.top-nav__mega[data-dropdown-target="menu"].opened{
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .dropdown[data-dropdown-target="menu"],
    .dropdown[data-dropdown-target="menu"].opened{
    transition-duration: 0.01ms;
  }
}

.dropdown__item{
  display: block;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dropdown .dropdown__item:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

@media not all and (min-width: 1024px){
  .top-nav__dropdown .dropdown__item:hover{
    background-color: transparent;
  }
}

/* Mega menu. The <li> is lg:static, so this panel's containing block is the header bar
   (the only positioned ancestor) rather than the nav item - that is what lets it span
   the viewport, with an inner .wrapper putting its content back on the site grid.
   Open/close runs without floating-ui, so top-full is what positions it: flush under
   the 56px bar, no offset gap, hence no need for .dropdown's hover bridge. */

@media (min-width: 1024px){
  .top-nav__mega{
    left: 0px;
    right: 0px;
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
  }
}

.top-nav__mega{
  /* the nav list is whitespace-nowrap so entries never break; inside the panel text
       has to wrap again, or the descriptions clip at the column edge */
  white-space: normal;
}

.dropdown.top-nav__mega::before{
  /* the bridge exists to span floating-ui's offset gap; this panel is flush under the
       bar, and at full width the strip would sit over the logo and the search field */
  content: none;
}

/* Frosted layer behind the mega menu: the panel is white and so is most of the page
   under it, so the two ran together. No tint - the page keeps its colours and only
   loses its detail, which is enough for the crisp panel to read as the layer in front.
   z-5 puts it below the header (z-10) and above the page, so the bar and the panel
   stay sharp. The blur lives on the open state alone: backdrop-filter forces a
   compositing layer wherever it is declared, and this pseudo-element sits on every
   page of the site. Transitioning it from none interpolates from blur(0), so the frost
   still fades both ways. Once visible the layer also takes pointer events, so a click
   on the blurred page dismisses the menu (click-outside) instead of following a link.
   Desktop only: on mobile the panel sits inside the burger menu, which already covers
   the page. */

@media (min-width: 1024px){
  body::after{
    content: '';
    pointer-events: none;
    position: fixed;
    inset: 0px;
    z-index: 5;
    opacity: 0;
    transition:
            opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
            -webkit-backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition:
            opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
            backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition:
            opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
            backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1),
            -webkit-backdrop-filter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.is-scrimmed::after{
    pointer-events: auto;
    opacity: 1;
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
  }
}

@media (prefers-reduced-motion: reduce){
  body::after{
    transition-duration: 0.01ms;
  }
}

@media (min-width: 1024px){
  .megamenu{
    display: grid;
    grid-template-columns: minmax(0,16rem) minmax(0,1fr);
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .megamenu__rail{
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
    padding-right: 1.5rem;
  }

  .megamenu__tab{
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.5rem;
  }
}

.megamenu__tab-icon{
  flex-shrink: 0;
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 1024px){
  .megamenu__tab.is-selected{
    --tw-bg-opacity: 1;
    background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(84 64 244 / var(--tw-text-opacity, 1));
  }
}

.megamenu__tab.is-selected .megamenu__tab-icon{
  opacity: 1;
}

.megamenu__all{
  /* .link only sets alignment, so the arrow needs a flex context of its own */
  margin-top: 0.5rem;
  display: inline-flex;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.megamenu__panel[aria-hidden="true"]{
  display: none;
}

.megamenu__panel-heading{
  margin-bottom: 1rem;
  display: inline-flex;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.megamenu__grid{
  display: grid;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 0.25rem;
}

@media (min-width: 1024px){
  .megamenu__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.megamenu__item{
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  display: block;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.megamenu__item:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.megamenu__item-title{
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

a.megamenu__item:hover .megamenu__item-title,
a.megamenu__item:focus-visible .megamenu__item-title{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.megamenu__item-text{
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.error-container {
  position: relative;
  text-align: center;
}

.error-code{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 4rem;
  line-height: 6rem;
  font-weight: 700;
}

.error-code__back{
  position: absolute;
  inset: 0px;
  margin-left: 0.5rem;
  margin-top: 1rem;
  --tw-text-opacity: 1;
  color: rgb(117 249 233 / var(--tw-text-opacity, 1));
}

.error-code__num{
  position: relative;
  --tw-text-opacity: 1;
  color: rgb(53 40 153 / var(--tw-text-opacity, 1));
}

.magnifier-icon__dot{
  transform-origin: center;
  --tw-scale-x: 0;
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
  transform-box: fill-box;
  animation: popout 0.5s linear forwards var(--delay);
}

.magnifier-icon__magnifier{
  transform-origin: center;
  transform-box: fill-box;
  animation: slideup 0.5s ease-in-out forwards;
}

@keyframes slideup{
  0%{
    opacity: 0;
    transform: translateY(100%);
  }

  100%{
    opacity: 100;
    transform: translateY(0);
  }
}

@keyframes popout{
  0%{
    opacity: 0;
    transform: scale(0);
  }

  50%{
    opacity: 0.5;
    transform: scale(1);
  }

  75%{
    opacity: 0.75;
    transform: scale(1.2);
  }

  100%{
    opacity: 1;
    transform: scale(1);
  }
}

.breadcrumbs,
.breadcrumb{
  display: flex;
  align-items: center;
}

.breadcrumbs > :not([hidden]) ~ :not([hidden]),
.breadcrumb > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.breadcrumbs,
.breadcrumb{
  font-size: 0.75rem;
  line-height: 1rem;
}

.breadcrumbs{
  padding-top: 1rem;
  padding-bottom: 0.25rem;
}

.breadcrumbs a:hover{
  text-decoration-line: underline;
}

.breadcrumbs svg,
.breadcrumb:first-child{
  flex-shrink: 0;
}

.breadcrumb{
  white-space: nowrap;
}

.breadcrumb:not(:last-child),
.breadcrumb:not(:last-child) a{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* collapsed middle segment on small screens: hosts an absolute dropdown, so no clipping */

.breadcrumbs .breadcrumb--menu{
  position: relative;
  overflow: visible;
}

.breadcrumbs .breadcrumb--menu > button{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-weight: 700;
}

.breadcrumbs .breadcrumb--menu > button:hover{
  text-decoration-line: underline;
}

.breadcrumbs__dropdown{
  left: 0px;
  margin-top: 0.25rem;
  min-width: 180px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.modal-card__bg{
  position: absolute;
  inset: 0px;
  cursor: pointer;
  background-color: rgb(0 0 0 / 0.2);
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.modal-card{
  transform-origin: center;
}

.modal-card__title{
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px){
  .modal-card__title{
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

.modal-card__checkbox{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.15225 5.15856C5.62088 4.68993 6.38068 4.68993 6.84931 5.15856L12.0008 10.31L17.1523 5.15856C17.6209 4.68993 18.3807 4.68993 18.8493 5.15856C19.3179 5.62718 19.3179 6.38698 18.8493 6.85561L13.6978 12.0071L18.8493 17.1586C19.3179 17.6272 19.3179 18.387 18.8493 18.8556C18.3807 19.3242 17.6209 19.3242 17.1523 18.8556L12.0008 13.7041L6.84931 18.8556C6.38068 19.3242 5.62088 19.3242 5.15225 18.8556C4.68362 18.387 4.68362 17.6272 5.15225 17.1586L10.3037 12.0071L5.15225 6.85561C4.68362 6.38698 4.68362 5.62718 5.15225 5.15856Z' fill='%23000000'/%3E%3C/svg%3E%0A");
}

html:has(.modal-card__checkbox:checked){
  overflow: hidden;
}

.modal-card:has(.modal-card__checkbox:checked){
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 50;
  height: auto !important;
  width: 91.666667%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 2rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 1024px){
  .modal-card:has(.modal-card__checkbox:checked){
    width: 800px;
  }
}

.modal-card:has(.modal-card__checkbox:checked){
  animation: modal-show 0.4s ease-in-out forwards;
}

.modal-card--xl:has(.modal-card__checkbox:checked){
  overflow-y: auto;
}

@media (min-width: 1280px){
  .modal-card--xl:has(.modal-card__checkbox:checked){
    width: 1200px;
  }
}

.modal-card--xl:has(.modal-card__checkbox:checked){
  max-height: calc(100vh - 4rem);
}

.modal-card__container:has(.modal-card__checkbox:checked){
  background-color: rgb(210 214 220 / 0.2);
}

.modal-card__container:has(.modal-card__checkbox:checked) .modal-card__title{
  order: -9999;
  margin-top: 0px !important;
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.modal-card__container:not(:has(.modal-card__checkbox:checked)) .modal-card__extra{
  margin: 0px !important;
  max-height: 0px;
  overflow: hidden;
  padding: 0px;
}

.modal-card__container:not(:has(.modal-card__checkbox:checked)){
  position: relative;
}

.modal-card__container:has(.modal-card__checkbox:checked) .modal-card__bg{
  position: fixed;
  z-index: 50;
  opacity: 1;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.modal-card__container:has(.modal-card__checkbox:checked) .modal-card__checkbox{
  display: block;
}

@keyframes modal-show {
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.6);
  }

  90%{
    transform: translateX(-50%) translateY(-50%) scale(1.05);
  }

  100%{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}

.gallery-grid{
  gap: 1.5rem;
}

@media (min-width: 640px){
  .gallery-grid{
    -moz-columns: 2;
         columns: 2;
  }
}

@media (min-width: 1024px){
  .gallery-grid{
    -moz-columns: 3;
         columns: 3;
  }
}

.gallery-grid__item{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.gallery-row__container{
  position: relative;
}

.gallery-row{
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
}

.gallery-row > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.gallery-row{
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 3rem;
}

.gallery-row__item{
  flex-shrink: 0;
  scroll-snap-align: center;
}

.gallery-row__thumbnail{
  height: 12rem;
  width: auto;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.gallery-row__thumbnail:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 640px){
  .gallery-row__thumbnail{
    height: 14rem;
  }
}

@media (min-width: 1024px){
  .gallery-row__thumbnail{
    height: 16rem;
  }
}

.footer::before{
  content: '';
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 0.125rem;
  background: linear-gradient(90deg, #75F9E9, #5440F4);
}

/* Feature cards — the light-ground relative of .spotlight-story-card.
   Same idea: the card leads with a diagram on its own ground, and the text sits
   below on white. No overflow clipping, because the border-glow layer reaches
   --glow-padding past the card and clipping here kills the outer bloom; the
   cover clips itself. */

.feature-card{
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  text-align: left;
}

.feature-card__cover{
  position: relative;
  display: flex;
  height: 10rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(155 201 255 / var(--tw-border-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  /* the card's 1rem radius less its 1px border, so the corners nest without a hairline */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  /* the night ground's dot grid at the same 26px pitch, inverted — it ties the
       light covers to the spotlight cards without taking the card dark */
  background-color: #F8FAFC;
  background-image: radial-gradient(rgba(53, 40, 153, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* transform keeps the diagram's own layout intact and only trims it to card size */

.feature-card__cover .ill{
  --ill-scale: 1;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transform: scale(var(--ill-scale));
}

.feature-card:hover .feature-card__cover .ill{
  --ill-scale: 1.03;
}

.feature-card__body{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

/* News teaser: the title link is stretched over the whole card so the card opens the
   article, while the "read more" link underneath stays its own, separate target and
   sits above the stretched area. */

.news-card{
  position: relative;
}

.news-card__link::after{
  content: '';
  position: absolute;
  inset: 0px;
}

.news-card:hover .card__title,
.news-card:focus-within .card__title{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.news-card__more{
  position: relative;
  z-index: 10;
}

/* Cover on top of a news card: a fixed 16:9 box, so the grid never jumps while the lazy
   images arrive. .card is rounded-lg (8px) less its 1px border. */

.news-card__cover{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(155 201 255 / var(--tw-border-opacity, 1));
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.news-card__cover img{
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.news-card:hover .news-card__cover img{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* a story without an image keeps the box, on the light dot grid the feature cards use */

.news-card__cover--empty{
  background-color: #F8FAFC;
  background-image: radial-gradient(rgba(53, 40, 153, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
}

.news-card__body{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
}

/* the lead spans two rows: its picture takes the height the stacked cards dictate, so the
   card reads as one big photo with a caption rather than a small picture over empty space */

.news-lead-card .news-card__body{
  gap: 1rem;
  padding: 2rem;
}

@media (min-width: 1024px){
  .news-lead-card .news-card__body{
    flex-grow: 0;
  }

  .news-lead-card .news-card__cover{
    aspect-ratio: auto;
    min-height: 280px;
    flex: 1 1 0%;
  }
}

/* quick news: one stretched-link row per item, the .news-card trick in list form */

.news-row{
  position: relative;
  padding: 1.25rem;
}

.news-row__thumb{
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 0.5rem;
}

.news-row__link::after{
  content: '';
  position: absolute;
  inset: 0px;
}

.news-row:hover .news-row__link,
.news-row:focus-within .news-row__link{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

@font-face {
  font-family: "Suisse";

  src: url('/website/fonts/Suisse/SuisseIntl-SemiBold.woff2') format('woff2'),
         url('/website/fonts/Suisse/SuisseIntl-SemiBold.otf') format('opentype');

  font-weight: 600;

  font-style: normal;

  font-display: fallback;
}

@font-face {
  font-family: "Suisse";

  src: url('/website/fonts/Suisse/SuisseIntl-Book.woff2') format('woff2'),
         url('/website/fonts/Suisse/SuisseIntl-Book.otf') format('opentype');

  font-weight: normal;

  font-style: normal;

  font-display: fallback;
}

/*
 * Metric-matched fallback so the text that paints before Suisse loads occupies
 * the same space, eliminating the font-swap reflow (CLS). The overrides are
 * derived from SuisseIntl-Book vs. Arial (unitsPerEm 1000, ascent 986,
 * descent 311, xAvgCharWidth 550; Arial xAvgCharWidth 904 @ 2048):
 *   size-adjust = (550/1000) / (904/2048)
 *   ascent/descent-override = metric / (1000 * size-adjust)
 */

@font-face {
  font-family: "Suisse Fallback";

  src: local('Arial');

  size-adjust: 124.60%;

  ascent-override: 79.13%;

  descent-override: 24.96%;

  line-gap-override: 0.00%;
}

body{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.h6{
  font-size: 1rem;
  line-height: 1.5rem;
}

.h1, .h2, .h3, h4, .h5, .h6{
  font-weight: 700;
}

.h1{
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 1024px){
  .h1{
    font-size: 1.875rem;
    line-height: 2.75rem;
  }
}

@media (min-width: 1280px){
  .h1{
    font-size: 3rem;
    line-height: 3.75rem;
  }
}

.h2{
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 1024px){
  .h2{
    font-size: 1.875rem;
    line-height: 2.75rem;
  }
}

@media (min-width: 1280px){
  .h2{
    font-size: 2.25rem;
    line-height: 3.5rem;
  }
}

.h3{
  font-size: 1.25rem;
  line-height: 2rem;
}

@media (min-width: 1024px){
  .h3{
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px){
  .h3{
    font-size: 1.875rem;
    line-height: 2.75rem;
  }
}

.h4{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 1024px){
  .h4{
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px){
  .h4{
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.h5{
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px){
  .h5{
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

/* Section labels speak in the same machine voice as the Spotlight facts and kickers -
   mono is the site's register for anything the system states rather than says. Mono sets
   wider than Suisse, so the tracking comes down from 0.14em to keep the label compact. */

.eyebrow{
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
  letter-spacing: 0.1em;
}

/* the ":" from the :dekkode wordmark, used as a section mark. Square corners, like the
   rectangles in the logotype itself - and the same two colours in every context, on
   light and on dark, so the mark reads as one fixed sign rather than a themed accent. */

.dots-mark{
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
}

.dots-mark::before,
.dots-mark::after{
  content: '';
  height: 0.375rem;
  width: 0.375rem;
}

.dots-mark::before{
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
}

.dots-mark::after{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

.dots-mark--centered{
  display: flex;
  align-items: center;
}

.eyebrow--light{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* the one background the mark cannot keep its own colours on: the .bg-waves hero is
   solid primary at its top edge, where the eyebrow sits, so the lower rectangle would
   be purple on purple. White keeps the mark two-part there. Scoped to the light eyebrow
   so a mark inside one of the white cards further down the hero stays untouched. */

.bg-waves .eyebrow--light .dots-mark::after{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .stagger-rise > * {
    opacity: 0;
    animation: rise-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .stagger-rise > *:nth-child(2) {
    animation-delay: 0.08s;
  }

  .stagger-rise > *:nth-child(3) {
    animation-delay: 0.16s;
  }

  .stagger-rise > *:nth-child(4) {
    animation-delay: 0.24s;
  }

  .rise-in {
    animation: rise-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
  }

  /* .reveal-ready is added by reveal_controller.js, so items only hide when JS runs */

  .reveal-ready [data-reveal-target~="item"] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  .reveal-ready [data-reveal-target~="item"].is-revealed {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.bg-home{
  background-size: 50% 100%;
  background-image: url("../images/backgrounds/home-9I1KZ5R.svg");
  background-position: right;
  background-repeat: no-repeat;
}

@media not all and (min-width: 1024px){
  .bg-home{
    background-image: none;
  }
}

.bg-waves{
  background-size: cover;
  background-repeat: no-repeat;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-image: url("../images/backgrounds/waves-blue-01xofgc.svg");
}

.bg-cta{
  background-position: 10% center;
  background-image: url("data:image/svg+xml,%3Csvg width='422' height='252' viewBox='0 0 422 252' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M151.073 51.6696C210.485 24.4272 271.592 -11.196 340.612 3.38189C362.012 7.90193 381.487 19.2017 394.652 35.6294C429.854 79.5566 426.991 146.839 407.866 196.286C405.37 202.739 402.254 208.997 398.243 214.761C378.832 242.662 346.122 243.977 314.572 235.91C287.872 229.083 264.217 222.061 236.636 229.002C221.36 232.846 206.556 238.13 191.337 242.151C170.615 247.627 149.252 251.346 127.672 251.723C70.5797 252.72 5.36368 225.597 0.304679 166.221C-0.0228864 162.373 -0.0809737 158.506 0.104667 154.651C1.24546 130.947 9.65676 107.209 32.9726 94.9024C56.4142 82.5296 84.2261 77.6376 109.301 68.8619C123.56 63.8717 137.395 57.9419 151.073 51.6696Z' fill='%23D6FDF8'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
}

@media (max-width: 1023px) {
  .bg-cta{
    background-position: center 10%;
    background-size: 600px;
  }
}

.bg-card{
  background-image: url("data:image/svg+xml,%3Csvg width='423' height='252' viewBox='-20 -20 463 292' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M271.776 51.721C212.305 24.4516 151.137 -11.2071 82.0486 3.38526C60.6271 7.9098 41.1329 19.2209 27.9549 35.6649C-7.28177 79.6358 -4.4165 146.985 14.7277 196.482C17.2261 202.941 20.3456 209.205 24.36 214.974C43.7908 242.904 76.5332 244.22 108.115 236.145C134.842 229.311 158.52 222.282 186.128 229.23C201.42 233.078 216.238 238.368 231.472 242.392C252.215 247.873 273.599 251.596 295.201 251.973C352.35 252.972 417.631 225.822 422.695 166.387C423.023 162.535 423.081 158.664 422.895 154.805C421.753 131.078 413.334 107.316 389.995 94.9969C366.53 82.6118 338.69 77.7149 313.59 68.9305C299.317 63.9353 285.468 57.9996 271.776 51.721Z' fill='%23D6FDF8'/%3E%3C/svg%3E");
  background-size: 440px;
  background-position: right bottom;
  background-repeat: no-repeat;
}

@media (max-width: 1023px) {
  .bg-card{
    background-position: bottom;
    background-size: 400px;
  }
}

.bg-contact{
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 520px;
  background-image: url("data:image/svg+xml,%3Csvg width='482' height='279' viewBox='0 0 482 279' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M146.629 63.8303C220.024 30.1763 295.513 -13.831 380.777 4.17784C407.214 9.76169 431.273 23.721 447.536 44.0151C491.022 98.2807 487.486 181.398 463.86 242.483C460.776 250.455 456.927 258.186 451.972 265.306C427.992 299.774 387.584 301.398 348.608 291.432C315.624 282.999 286.402 274.324 252.33 282.899C233.458 287.648 215.171 294.176 196.369 299.143C170.771 305.907 144.38 310.502 117.72 310.967C47.1911 312.199 -33.3739 278.693 -39.6236 205.343C-40.0283 200.589 -40.1 195.812 -39.8707 191.048C-38.4614 161.766 -28.0705 132.441 0.732891 117.238C29.6916 101.953 64.0492 95.9101 95.0253 85.0689C112.64 78.9043 129.731 71.5788 146.629 63.8303Z' fill='%23D6FDF8' fill-opacity='0.4'/%3E%3C/svg%3E");
}

.bg-join{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1097' height='459' viewBox='0 0 1097 459' fill='none'%3E%3Crect width='1096' height='459' transform='translate(1)' fill='white'/%3E%3Cpath d='M260.356 122.821C331.212 90.3648 404.09 47.9235 486.405 65.2915C511.927 70.6766 535.153 84.1391 550.854 103.711C592.836 156.046 589.422 236.205 566.613 295.116C563.636 302.804 559.92 310.26 555.137 317.127C531.986 350.368 492.976 351.934 455.348 342.323C423.505 334.19 395.294 325.824 362.4 334.093C344.181 338.674 326.527 344.969 308.376 349.76C283.662 356.283 258.184 360.714 232.447 361.163C164.358 362.351 86.5795 330.037 80.546 259.297C80.1553 254.713 80.086 250.106 80.3074 245.512C81.668 217.272 91.6995 188.99 119.506 174.328C147.463 159.588 180.633 153.759 210.537 143.304C227.543 137.359 244.043 130.294 260.356 122.821Z' fill='%23D6FDF8'/%3E%3Cpath d='M167.15 133.223C165.88 133.223 164.851 132.194 164.851 130.925L164.853 115.991C164.853 114.722 165.883 113.694 167.153 113.694C168.424 113.694 169.453 114.723 169.453 115.992L169.451 130.926C169.45 132.194 168.42 133.223 167.15 133.223Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M167.146 156.581C165.876 156.581 164.847 155.552 164.847 154.283L164.849 139.349C164.849 138.08 165.879 137.052 167.149 137.052C168.419 137.052 169.449 138.081 169.449 139.35L169.447 154.283C169.446 155.552 168.416 156.581 167.146 156.581Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M167.142 188.745C165.873 188.745 164.843 187.716 164.843 186.447L164.845 171.514C164.845 170.245 165.875 169.217 167.145 169.217C168.415 169.217 169.445 170.245 169.445 171.515L169.443 186.448C169.442 187.716 168.412 188.745 167.142 188.745Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M157.5 361.254L47.6528 361.238C42.1401 361.237 37.6721 356.773 37.6729 351.266L37.7047 102.407C37.7054 96.8997 42.175 92.4363 47.6876 92.437L157.535 92.4533C163.048 92.454 167.516 96.9189 167.515 102.426L167.482 351.284C167.482 356.792 163.013 361.256 157.5 361.254Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M157.781 110.161H47.4072V343.531H157.781V110.161Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M423.18 98.9442C430.473 81.9246 422.573 62.2217 405.536 54.9366C388.499 47.6514 368.775 55.5428 361.483 72.5624C354.19 89.582 362.09 109.285 379.127 116.57C396.164 123.855 415.887 115.964 423.18 98.9442Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M411.322 104.722C421.816 94.2383 421.816 77.2416 411.322 66.7584C400.828 56.2752 383.814 56.2752 373.32 66.7584C362.825 77.2417 362.825 94.2383 373.32 104.722C383.814 115.205 400.828 115.205 411.322 104.722Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M404.486 97.8923C411.204 91.1808 411.204 80.2992 404.486 73.5877C397.767 66.8761 386.875 66.8761 380.156 73.5877C373.438 80.2992 373.438 91.1808 380.156 97.8923C386.875 104.604 397.767 104.604 404.486 97.8923Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M399.195 92.6079C402.992 88.8149 402.992 82.6651 399.195 78.872C395.398 75.079 389.242 75.079 385.445 78.8721C381.648 82.6651 381.648 88.8149 385.445 92.6079C389.242 96.401 395.398 96.401 399.195 92.6079Z' fill='white'/%3E%3Cpath d='M391.51 86.5501H346.382V84.9249H391.51C391.959 84.9249 392.324 85.289 392.324 85.7375C392.324 86.186 391.96 86.5501 391.51 86.5501Z' fill='%235440F4'/%3E%3Cpath d='M342.372 79.957L342.623 80.2479L347.34 84.9185H333.228L328.179 79.957H342.372Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M328.179 91.3296L333.228 86.5361H347.34C345.503 87.9119 343.835 89.5379 342.33 91.3296H328.179Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M484.383 140.877L484.069 141.718L480.31 149.504L518.113 142.993' fill='white'/%3E%3Cpath d='M484.383 140.877L484.069 141.718L480.31 149.504L518.113 142.993' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M487.968 149.179L484.383 140.877L518.113 142.993L487.968 149.179Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M518.113 142.993L492.856 126.39L487.215 137.986L518.113 142.993Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M518.113 142.993L487.968 149.179L487.215 137.986L518.113 142.993Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M198.38 166.391C198.38 166.391 198.669 166.68 199.235 167.191' stroke='%235440F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M201.015 168.721C211.829 177.646 254.968 207.129 312.435 165.897C379.104 118.062 300.313 63.3236 257.887 70.7207C215.461 78.1178 222.624 137.788 289.293 149.131C355.249 160.352 408.263 129.582 484.079 137.517' stroke='%235440F4' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2.99 2.99'/%3E%3Cpath d='M485.315 137.65C485.725 137.695 486.136 137.741 486.547 137.788' stroke='%235440F4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M325.741 271.984L317.454 261.604L335.137 247.283L325.741 271.984Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M317.454 261.604L316.17 257.728L335.137 247.283L317.454 261.604Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M335.137 247.283L315.669 258.861L307.668 248.333L335.137 247.283Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M178.843 187.145C178.843 187.145 205.951 197.49 218.134 234.611C230.318 271.733 261.594 293.611 316.611 259.654' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='3 3'/%3E%3Cpath d='M90.1602 230.603C90.1602 230.603 93.4969 241.529 93.4969 242.64C93.4969 243.592 91.3166 252.031 91.2788 255.237' fill='white'/%3E%3Cpath d='M90.1602 230.603C90.1602 230.603 93.4969 241.529 93.4969 242.64C93.4969 243.592 91.3166 252.031 91.2788 255.237' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M56.1926 198.861L58.7019 222.182C59.2004 226.812 63.5781 230.011 68.1454 229.075C84.7477 225.674 121.822 218.686 144.505 219.054C174.423 219.54 201.469 234.635 201.469 234.635L201.192 221.034C200.763 200.016 197.544 179.146 191.618 158.974L187.696 145.625C187.696 145.625 166.745 168.833 136.195 178.524C113.197 185.819 78.9862 189.008 63.4781 190.14C59.016 190.466 55.714 194.417 56.1926 198.861Z' fill='%23D6FDF8' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M187.897 148.827L187.681 148.124C187.681 148.124 165.323 171.717 132.72 181.568C130.958 182.1 129.136 182.611 127.263 183.102' stroke='white' stroke-width='5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M124.164 184.276C118.978 185.481 113.538 186.535 108.085 187.453' stroke='white' stroke-width='5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M201.959 239.157C201.828 239.171 201.695 239.18 201.56 239.182C199.046 239.233 196.967 237.239 196.915 234.728L196.639 221.126C196.219 200.516 193.06 180.036 187.248 160.255L183.326 146.906C182.618 144.495 184 141.969 186.413 141.261C188.827 140.556 191.355 141.935 192.063 144.344L195.985 157.693C202.024 178.246 205.306 199.526 205.743 220.941L206.019 234.542C206.068 236.92 204.282 238.908 201.959 239.157Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110.19 184.591C92.2084 187.738 73.7444 189.391 63.477 190.14C59.0149 190.466 55.7137 194.417 56.1915 198.86L58.7008 222.181C59.1993 226.812 63.577 230.01 68.1443 229.074C78.4013 226.973 96.4713 223.504 114.134 221.246L110.19 184.591Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M79.7471 222.802C79.7471 222.802 87.0111 237.555 88.1446 238.913C88.5713 239.423 89.3662 239.79 90.1923 240.049C92.194 240.675 93.9157 241.972 95.0715 243.721C100.26 251.577 113.531 271.639 114.204 272.359C115.041 273.255 117.098 274.021 118.239 273.159C119.381 272.296 127.866 263.988 127.229 260.358C126.591 256.728 125.476 257.834 123.584 256.311C122.062 255.086 116.183 244.584 113.947 240.533C113.41 239.56 113.458 238.37 114.069 237.441L116.048 234.437C116.048 234.437 107.401 227.476 107.269 226.257C107.138 225.038 110.746 224.157 110.859 222.912C110.971 221.667 107.79 217.325 107.79 217.325L79.7471 222.802Z' fill='%23D6FDF8' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M110.66 229.9L117 232.233C117.247 232.324 117.34 232.624 117.187 232.839L116.047 234.438L110.66 229.9Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M94.8877 235.828L93.0586 237.242' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M107.269 226.257L96.4678 234.605' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M93.8301 201.165L86.7998 201.92L87.2808 206.389L94.3112 205.634L93.8301 201.165Z' fill='%2392E3A9' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M91.2788 255.237C91.2728 255.77 91.3254 256.159 91.4581 256.343C92.3849 257.64 94.6096 266.714 94.7948 267.64C94.98 268.566 94.7948 272.269 94.2385 275.232C93.6821 278.196 91.4581 285.788 91.4581 285.788L114.074 293.01C114.074 293.01 119.449 282.27 120.747 280.047C122.045 277.825 125.938 272.084 126.865 268.196C127.791 264.306 127.977 259.862 127.977 259.862C127.977 259.862 130.943 257.455 130.572 255.788C130.201 254.121 128.533 252.27 128.533 252.27C128.533 252.27 128.903 249.121 127.791 247.455C126.679 245.788 125.011 244.121 124.64 243.566C124.269 243.01 125.196 237.825 122.971 236.714C120.747 235.603 119.264 235.417 119.264 235.417C119.264 235.417 119.635 232.269 117.225 230.602C114.816 228.936 111.85 228.751 109.625 230.787C107.4 232.824 97.576 243.565 97.576 243.565' fill='white'/%3E%3Cpath d='M91.2788 255.237C91.2728 255.77 91.3254 256.159 91.4581 256.343C92.3849 257.64 94.6096 266.714 94.7948 267.64C94.98 268.566 94.7948 272.269 94.2385 275.232C93.6821 278.196 91.4581 285.788 91.4581 285.788L114.074 293.01C114.074 293.01 119.449 282.27 120.747 280.047C122.045 277.825 125.938 272.084 126.865 268.196C127.791 264.306 127.977 259.862 127.977 259.862C127.977 259.862 130.943 257.455 130.572 255.788C130.201 254.121 128.533 252.27 128.533 252.27C128.533 252.27 128.903 249.121 127.791 247.455C126.679 245.788 125.011 244.121 124.64 243.566C124.269 243.01 125.196 237.825 122.971 236.714C120.747 235.603 119.264 235.417 119.264 235.417C119.264 235.417 119.635 232.269 117.225 230.602C114.816 228.936 111.85 228.751 109.625 230.787C107.4 232.824 97.576 243.565 97.576 243.565' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M97.9453 246.344C97.9453 246.344 98.5017 249.122 99.0573 249.677C99.6137 250.233 97.9453 258.011 97.9453 258.011' fill='white'/%3E%3Cpath d='M97.9453 246.344C97.9453 246.344 98.5017 249.122 99.0573 249.677C99.6137 250.233 97.9453 258.011 97.9453 258.011' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M119.264 235.417L115.185 237.825L110.922 243.011' fill='white'/%3E%3Cpath d='M119.264 235.417L115.185 237.825L110.922 243.011' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M124.64 243.566L119.635 247.64' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128.533 252.27L124.27 254.862' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M106.659 248.566C106.659 248.566 105.917 250.047 106.659 252.084C107.4 254.121 107.4 254.121 107.4 254.121' fill='white'/%3E%3Cpath d='M106.659 248.566C106.659 248.566 105.917 250.047 106.659 252.084C107.4 254.121 107.4 254.121 107.4 254.121' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M116.483 252.64C116.483 252.64 114.444 254.121 115.186 255.788Z' fill='white'/%3E%3Cpath d='M116.483 252.64C116.483 252.64 114.444 254.121 115.186 255.788' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M90.4355 278.48L120.667 289.341L116.158 303.382L85.9268 289.606L90.4355 278.48Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M86.4607 286.715L120.617 300.027L111.426 341.319H66.5312L86.4607 286.715Z' fill='%235440F4' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M546.065 62.2378C533.171 62.2378 522.72 70.343 522.72 80.3424C522.72 83.5197 523.778 86.5038 525.632 89.0985L517.806 102.129L530.264 93.6654C534.422 96.6329 539.97 98.4459 546.066 98.4459C558.959 98.4459 569.41 90.3407 569.41 80.3414C569.41 70.343 558.958 62.2378 546.065 62.2378Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M541.32 79.9862C541.32 81.3241 540.233 82.4092 538.894 82.4092C537.555 82.4092 536.469 81.3241 536.469 79.9862C536.469 78.6484 537.555 77.5632 538.894 77.5632C540.233 77.5632 541.32 78.6484 541.32 79.9862Z' fill='%235440F4'/%3E%3Cpath d='M547.874 79.9862C547.874 81.3241 546.788 82.4092 545.449 82.4092C544.11 82.4092 543.023 81.3241 543.023 79.9862C543.023 78.6484 544.11 77.5632 545.449 77.5632C546.788 77.5632 547.874 78.6484 547.874 79.9862Z' fill='%235440F4'/%3E%3Cpath d='M554.429 79.9862C554.429 81.3241 553.343 82.4092 552.004 82.4092C550.664 82.4092 549.578 81.3241 549.578 79.9862C549.578 78.6484 550.664 77.5632 552.004 77.5632C553.343 77.5632 554.429 78.6484 554.429 79.9862Z' fill='%235440F4'/%3E%3Cpath d='M617.942 107.345C617.942 97.3462 607.49 89.24 594.597 89.24C581.705 89.24 571.253 97.3452 571.253 107.345C571.253 115.987 579.064 123.211 589.508 125.012L590.912 133.427L597.213 125.332C608.875 124.325 617.942 116.658 617.942 107.345Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M590.357 107.273C590.357 108.611 589.271 109.696 587.931 109.696C586.592 109.696 585.506 108.611 585.506 107.273C585.506 105.935 586.592 104.85 587.931 104.85C589.272 104.85 590.357 105.935 590.357 107.273Z' fill='%235440F4'/%3E%3Cpath d='M594.486 109.696C595.826 109.696 596.911 108.612 596.911 107.273C596.911 105.935 595.826 104.85 594.486 104.85C593.147 104.85 592.061 105.935 592.061 107.273C592.061 108.612 593.147 109.696 594.486 109.696Z' fill='%235440F4'/%3E%3Cpath d='M603.466 107.273C603.466 108.611 602.38 109.696 601.041 109.696C599.701 109.696 598.615 108.611 598.615 107.273C598.615 105.935 599.701 104.85 601.041 104.85C602.38 104.85 603.466 105.935 603.466 107.273Z' fill='%235440F4'/%3E%3Cpath d='M20.0025 116.884C30.4654 116.884 38.9482 125.357 38.9482 135.81C38.9482 141.284 36.6087 146.199 32.8909 149.656L36.554 157.561L29.4739 152.185C26.686 153.798 23.4575 154.737 20.0035 154.737C9.54055 154.737 1.05771 146.264 1.05771 135.81C1.05673 125.357 9.53862 116.884 20.0025 116.884Z' fill='white' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5703 128.619C12.6569 126.534 16.0396 126.534 18.1252 128.619L20.1658 130.657L22.2064 128.619C24.2929 126.534 27.6757 126.534 29.7613 128.619C31.8478 130.703 31.8478 134.082 29.7613 136.166L20.1971 145.721L20.1658 145.69L20.1345 145.721L10.5703 136.166C8.48382 134.081 8.48382 130.702 10.5703 128.619Z' fill='%2375F9E9' stroke='%235440F4' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

@media not all and (min-width: 768px){
  .bg-join{
    background-image: none;
  }
}

.bg-landing{
  background-image: url("../images/backgrounds/landing-V4YZ1XH.png");
  background-size: 100% auto;
  background-position: top;
  background-repeat: no-repeat;
}

@media (max-width: 767px){
  .bg-landing{
    background-size: auto;
    background-position: right top;
  }
}

.bg-base-gradient{
  background-image: url("../images/backgrounds/base-gradient-9PD9y8g.png");
  background-size: 100% auto;
  background-color: #f5f9fb;
  background-position: right top;
  background-repeat: no-repeat;
}

.bg-base-gradient .card{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-base-gradient a.card--preview,
.bg-base-gradient .card--elevated{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.9);
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(53 40 153 / 0.05);
  --tw-shadow: var(--tw-shadow-colored);
}

.bg-base-gradient a.card--preview:hover{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(53 40 153 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

input:-webkit-autofill {
  padding: 5px;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */

input[type=number] {
  -moz-appearance: textfield !important;
}

/* search fields get their own clear affordance (or none); the platform's blue cross clashes with the design */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.sulu-form__wrapper{
  margin: -0.75rem;
}

.sulu-form{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}

.sulu-form .form-row{
  flex-grow: 1;
  padding: 0.75rem;
}

.w-half{
  width: 100%;
}

@media (min-width: 1024px){
  .w-half{
    width: 50%;
  }
}

.w-one-quarter{
  width: 100%;
}

@media (min-width: 1024px){
  .w-one-quarter{
    width: 25%;
  }
}

.w-three-quarters{
  width: 100%;
}

@media (min-width: 1024px){
  .w-three-quarters{
    width: 75%;
  }
}

.w-one-third{
  width: 100%;
}

@media (min-width: 1024px){
  .w-one-third{
    width: 33.333333%;
  }
}

.w-two-thirds{
  width: 100%;
}

@media (min-width: 1024px){
  .w-two-thirds{
    width: 66.666667%;
  }
}

.w-one-sixth{
  width: 100%;
}

@media (min-width: 1024px){
  .w-one-sixth{
    width: 16.666667%;
  }
}

.w-five-sixths{
  width: 100%;
}

@media (min-width: 1024px){
  .w-five-sixths{
    width: 83.333333%;
  }
}

.form-control,
.form-checkbox,
.form-radio{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.form-group{
  flex-grow: 1;
}

.form-label{
  margin-bottom: 0.25rem;
}

.form-label,
.form-inline__label{
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.form-inline__label{
  margin-top: -0.125rem;
}

.form-control{
  display: flex;
  width: 100%;
  flex-grow: 1;
  appearance: none;
  align-items: center;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.form-control--dark{
  border-color: rgb(255 255 255 / 0.2);
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.form-control--dark input::-moz-placeholder{
  color: rgb(255 255 255 / 0.4);
}

.form-control--dark input::placeholder{
  color: rgb(255 255 255 / 0.4);
}

select.form-control{
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  background-position: right 16px center;
  background-size: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.29289 7.79289C5.68342 7.40237 6.31658 7.40237 6.70711 7.79289L10 11.0858L13.2929 7.79289C13.6834 7.40237 14.3166 7.40237 14.7071 7.79289C15.0976 8.18342 15.0976 8.81658 14.7071 9.20711L10.7071 13.2071C10.3166 13.5976 9.68342 13.5976 9.29289 13.2071L5.29289 9.20711C4.90237 8.81658 4.90237 8.18342 5.29289 7.79289Z' fill='%23060606'/%3E%3C/svg%3E");
}

.form-control:hover,
.form-control:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(148 136 248 / var(--tw-border-opacity, 1));
}

.form-control:focus-within{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 136 248 / var(--tw-ring-opacity, 1));
}

.form-control__clear{
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.form-control__clear:hover{
  --tw-text-opacity: 1;
  color: rgb(245 101 101 / var(--tw-text-opacity, 1));
}

input:-moz-placeholder-shown ~ .form-control__clear{
  display: none;
}

input:placeholder-shown ~ .form-control__clear{
  display: none;
}

.form-control:hover .form-control__icon,
.form-control:focus-within .form-control__icon{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.form-control:disabled,
.form-control[readonly]{
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.form-control:disabled:focus-within,
.form-control[readonly]:focus-within{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-control:disabled:hover,
.form-control[readonly]:hover{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
}

.form-control--error{
  --tw-border-opacity: 1;
  border-color: rgb(245 101 101 / var(--tw-border-opacity, 1));
}

.form-control__icon{
  margin-top: -0.125rem;
  margin-bottom: -0.125rem;
  display: flex;
  height: 0.75rem;
  width: 0.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  --tw-text-opacity: 1;
  color: rgb(148 136 248 / var(--tw-text-opacity, 1));
}

.form-control--error .form-control__icon{
  --tw-text-opacity: 1;
  color: rgb(245 101 101 / var(--tw-text-opacity, 1));
}

.form-control input,
.form-control .form-control,
.ts-wrapper .ts-control,
.ts-wrapper.multi.has-items .ts-control{
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
  flex-grow: 1;
  border-style: none;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.form-radio,
.form-checkbox{
  display: inline-block;
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  cursor: pointer;
  appearance: none;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(148 136 248 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.form-radio{
  border-radius: 9999px;
}

.form-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='6' width='4' height='4' rx='2' fill='white' /%3E%3C/svg%3E ");
}

.form-checkbox:checked{
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.73569 0.207011C9.80394 0.141469 9.88539 0.0894006 9.97528 0.0538547C10.0652 0.0183089 10.1617 0 10.2592 0C10.3567 0 10.4532 0.0183089 10.5431 0.0538547C10.633 0.0894006 10.7145 0.141469 10.7827 0.207011C11.0687 0.47903 11.0727 0.918591 10.7927 1.19532L4.87959 7.7746C4.81246 7.84399 4.73099 7.89976 4.64017 7.93849C4.54934 7.97723 4.45108 7.99812 4.35139 7.99988C4.25169 8.00164 4.15267 7.98424 4.06037 7.94874C3.96806 7.91324 3.88443 7.86039 3.81457 7.79343L0.216496 4.36166C0.0777306 4.22846 0 4.04935 0 3.8628C0 3.67625 0.0777306 3.49714 0.216496 3.36394C0.284744 3.2984 0.366198 3.24633 0.45609 3.21078C0.545982 3.17524 0.642504 3.15693 0.740007 3.15693C0.83751 3.15693 0.934033 3.17524 1.02392 3.21078C1.11382 3.24633 1.19527 3.2984 1.26352 3.36394L4.31558 6.2752L9.71569 0.227719C9.72191 0.220444 9.72859 0.213529 9.73569 0.207011Z' fill='white'/%3E%3C/svg%3E%0A");
}

.form-radio:checked,
.form-checkbox:checked{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

.form-radio:disabled,
.form-checkbox:disabled{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.form-checkbox:checked:disabled{
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.73569 0.207011C9.80394 0.141469 9.88539 0.0894006 9.97528 0.0538547C10.0652 0.0183089 10.1617 0 10.2592 0C10.3567 0 10.4532 0.0183089 10.5431 0.0538547C10.633 0.0894006 10.7145 0.141469 10.7827 0.207011C11.0687 0.47903 11.0727 0.918591 10.7927 1.19532L4.87959 7.7746C4.81246 7.84399 4.73099 7.89976 4.64017 7.93849C4.54934 7.97723 4.45108 7.99812 4.35139 7.99988C4.25169 8.00164 4.15267 7.98424 4.06037 7.94874C3.96806 7.91324 3.88443 7.86039 3.81457 7.79343L0.216496 4.36166C0.0777306 4.22846 0 4.04935 0 3.8628C0 3.67625 0.0777306 3.49714 0.216496 3.36394C0.284744 3.2984 0.366198 3.24633 0.45609 3.21078C0.545982 3.17524 0.642504 3.15693 0.740007 3.15693C0.83751 3.15693 0.934033 3.17524 1.02392 3.21078C1.11382 3.24633 1.19527 3.2984 1.26352 3.36394L4.31558 6.2752L9.71569 0.227719C9.72191 0.220444 9.72859 0.213529 9.73569 0.207011Z' fill='%23BCBFC2'/%3E%3C/svg%3E%0A");
}

.form-radio:checked:disabled{
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='6' width='4' height='4' rx='2' fill='%23BCBFC2' /%3E%3C/svg%3E ");
}

.form-help,
.form-error{
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-start;
}

.form-help > :not([hidden]) ~ :not([hidden]),
.form-error > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.form-help,
.form-error{
  font-size: 0.75rem;
  line-height: 1rem;
}

.form-help{
  color: rgb(0 0 0 / 0.6);
}

.form-error{
  --tw-text-opacity: 1;
  color: rgb(245 101 101 / var(--tw-text-opacity, 1));
}

.form-help__icon,
.form-error__icon{
  margin-top: -0.125rem;
  flex-shrink: 0;
}

.form-inline__container{
  display: flex;
  align-items: center;
}

.form-inline__container > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

button{
  text-align: left;
}

a.not-valid{
  pointer-events: none;
}

button, a{
  border-radius: 0.125rem;
  outline-color: #9488F8;
}

button:focus, a:focus{
  outline-style: dotted;
}

.btn, .btn-link,
.klaro div.cm-modal .cm-btn,
.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link.cn-learn-more{
  display: inline-block;
  cursor: pointer;
  align-items: center;
}

.btn > :not([hidden]) ~ :not([hidden]), .btn-link > :not([hidden]) ~ :not([hidden]),
.klaro div.cm-modal .cm-btn > :not([hidden]) ~ :not([hidden]),
.klaro div.cn-body .cm-btn > :not([hidden]) ~ :not([hidden]),
.klaro div.cn-body .cm-link.cn-learn-more > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.btn, .btn-link,
.klaro div.cm-modal .cm-btn,
.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link.cn-learn-more{
  border-radius: 0.25rem;
  border-width: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media not all and (min-width: 768px){
  .btn, .btn-link,
.klaro div.cm-modal .cm-btn,
.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link.cn-learn-more{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.link, .raw-content a{
  outline-offset: 2px;
}

.btn,
.klaro div.cm-modal .cm-btn,
.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.btn:hover,
.klaro div.cm-modal .cm-btn:hover,
.klaro div.cn-body .cm-btn:hover,
.klaro div.cn-body .cm-link:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn--sm,
.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link.cn-learn-more{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media not all and (min-width: 768px){
  .btn--sm,
.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link.cn-learn-more{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.btn--lg{
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media not all and (min-width: 768px){
  .btn--lg{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.btn--primary,
.klaro div.cm-modal .cm-btn.cm-btn-success,
.klaro div.cn-body .cm-btn.cm-btn-success{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn--primary:hover,
.btn--primary:active,
.btn--primary[aria-expanded="true"],
.klaro div.cm-modal .cm-btn.cm-btn-success:hover,
.klaro div.cn-body .cm-btn.cm-btn-success:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(105 88 245 / var(--tw-bg-opacity, 1));
}

.btn--secondary{
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  outline-color: #000000;
}

.btn--secondary:hover,
.btn--secondary:active,
.btn--secondary[aria-expanded="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn--white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.btn--white:hover,
.btn--white:active,
.btn--white[aria-expanded="true"]{
  --tw-bg-opacity: 1;
  background-color: rgb(105 88 245 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn--primary[aria-disabled="true"],
.btn--primary:disabled,
.btn--secondary[aria-disabled="true"],
.btn--secondary:disabled,
.btn--white[aria-disabled="true"],
.btn--white:disabled{
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1));
}

.btn--outline,
.klaro div.cn-body .cm-link{
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1));
}

.btn--outline, .btn-link,
.klaro div.cn-body .cm-link{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.btn--outline:hover,
.btn--outline:active,
.klaro div.cn-body .cm-link:hover{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-link:hover,
.btn-link:active{
  text-decoration-line: underline;
}

.btn[aria-disabled="true"],
.btn:disabled,
.btn-link[aria-disabled="true"],
.btn-link:disabled{
  cursor: not-allowed;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1)) !important;
}

.link,
.raw-content a{
  align-items: center;
}

.link > :not([hidden]) ~ :not([hidden]),
.raw-content a > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.link--primary, .raw-content a{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.link--gray{
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.link:hover,
.raw-content a:hover,
a:hover .link{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.link:focus-visible,
.raw-content a:focus-visible,
a:focus-visible .link{
  --tw-text-opacity: 1;
  color: rgb(105 88 245 / var(--tw-text-opacity, 1));
}

.badge{
  display: inline-block;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}

.badge--accent{
  --tw-bg-opacity: 1;
  background-color: rgb(214 253 248 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.badge--primary{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.badge--colored{
  border-radius: 0.25rem;
  border-width: 1px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border-color: color-mix(in srgb, currentColor 20%, transparent);
}

.badge--upper{
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge--lg{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

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

.top-nav > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

@media not all and (min-width: 1024px){
  .top-nav{
    width: 100%;
  }
}

@media (min-width: 1024px){
  .top-nav{
    display: flex;
  }
}

.top-nav__link{
  display: flex;
  align-items: center;
}

.top-nav__link > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.top-nav__link{
  border-radius: 0px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media not all and (min-width: 1024px){
  .top-nav__link{
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
  }
}

@media (min-width: 1024px){
  .top-nav__link{
    border-radius: 0.5rem;
  }

  .top-nav__link.active,
.top-nav__link:hover,
.top-nav__link[aria-expanded="true"],
.top-nav__link[aria-expanded="true"]~.top-nav__link{
    --tw-bg-opacity: 1;
    background-color: rgb(53 40 153 / var(--tw-bg-opacity, 1));
  }
}

/* Editor-flagged entry (nav_highlight): a pill cut *into* the header violet rather
   than laid on top of it - a fill darker than the bar, a hairline mint outline and
   the mint sparkle. The accent no longer carries the fill, so the entry reads as
   special without out-shouting the logo. Deeper than the .active fill above and
   sitting after it, so a highlight that is also "you are here" keeps its own look;
   hover/active lift the pill towards the bar instead of swapping its hue. */

.top-nav__link.top-nav__link--highlight{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
  --tw-ring-color: rgb(117 249 233 / 0.3);
  background-color: color-mix(in srgb, #352899 65%, #000000);
}

.top-nav__link.top-nav__link--highlight:hover,
.top-nav__link.top-nav__link--highlight.active{
  --tw-ring-color: rgb(117 249 233 / 0.5);
  background-color: color-mix(in srgb, #352899 85%, #000000);
}

.top-nav__highlight-icon{
  flex-shrink: 0;
}

.top-nav__link--highlight .top-nav__highlight-icon{
  color: rgb(117 249 233 / 0.8);
}

.top-nav__link--highlight:hover .top-nav__highlight-icon,
.top-nav__link--highlight.active .top-nav__highlight-icon{
  --tw-text-opacity: 1;
  color: rgb(117 249 233 / var(--tw-text-opacity, 1));
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(155 201 255 / 0.6);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

a.chip:hover,
a.chip:focus-visible{
  --tw-border-opacity: 1;
  border-color: rgb(84 64 244 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.chip__icon{
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
}

.chip__icon svg,
.chip__icon img{
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Product preview — sticky screenshot deck on the right.
   Positions (top/left/width/transform) are set inline by the
   product_preview Stimulus controller; this only styles the chrome. */

.preview-block{
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px){
  .preview-block{
    gap: 3rem;
  }
}

@media (min-width: 1024px){
  .preview-block{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px){
  .preview-block{
    gap: 6rem;
  }
}

.preview-block__container{
  position: sticky;
  top: 0px;
}

@media (min-width: 1024px){
  .preview-block__container{
    display: contents;
  }

  .preview-block__cards{
    grid-column-start: 1;
    grid-row-start: 1;
  }
}

.preview-block__stage{
  /* visible so the dots can sit in the gutter to the left; the deck below
       does its own clipping of the screenshots */
  position: sticky;
  top: 0px;
  height: 100vh;
  overflow: visible;
}

@media (min-width: 1024px){
  .preview-block__stage{
    grid-column: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 1;
    min-height: 800px;
  }
}

.preview-block__card{
  display: flex;
  align-items: center;
}

@media (min-width: 1024px){
  .preview-block__card{
    min-height: 100vh;
  }
}

.preview-block__views{
  position: absolute;
  inset: 0px;
  overflow: hidden;
}

.preview-block__view{
  position: absolute;
  border-radius: 0.5rem;
  will-change: transform,top,width;
}

.preview-block__image{
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
}

.preview-block__caption{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  opacity: 0;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.preview-block__view[data-stack]{
  cursor: pointer;
}

.preview-block__view[data-stack]:hover{
  /* beats the inline opacity:0.9 set by the controller */
  opacity: 1 !important;
}

.preview-block__view[data-stack]:hover .preview-block__image{
  /* raw transform so transition-transform above can animate it */
  transform: translateY(-20px);
}

.preview-block__view[data-stack]:hover .preview-block__caption{
  opacity: 1;
}

.preview-block__view img{
  pointer-events: none;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

@media not all and (min-width: 1024px){
  .preview-block__view img{
    border-radius: 0.25rem;
  }
}

.preview-block__dots{
  /* -left-4 = centre of the grid gutter (gap-8 = 2rem) just left of the deck */
  position: absolute;
  left: -1rem;
  top: 50%;
  z-index: 20;
  display: flex;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.preview-block__dot{
  position: relative;
  height: 0.75rem;
  width: 0.25rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.product-preview__dot::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 1.5rem;
  width: 1.5rem;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.preview-block__dot[aria-current="true"]{
  height: 1.75rem;
  background-color: currentColor;
}

/* ── Compact layout (≤1024px) ───────────────────────────────────────────────
   Same DOM, restyled: the screenshot deck pins to the top (just below the
   sticky nav) and crossfades the active screenshot, while the cards scroll
   beneath it. The controller clears its desktop inline positioning here and
   toggles [data-active] on the active screenshot. */

@media (max-width: 1023.98px){
  /* the deck column is the sticky element so it pins while the (taller)
       card column scrolls past it; opaque bg hides cards passing behind. */

  .preview-block{
    min-height: calc(var(--items) * 100vh);
  }

  .preview-block__container{
    height: 100vh;
  }

  .preview-block__stage,
    .preview-block__card{
    position: absolute;
    left: 0px;
    right: 0px;
    min-height: 0px;
    overflow: visible;
  }

  .preview-block__stage{
    top: 0px;
    display: flex;
    height: 60%;
    flex-direction: column;
    justify-content: center;
  }

  /* Appear with opacity + a slight rise/scale so the swap reads as motion
       (not a ghosted blend of two different screenshots). Screenshots and
       cards share the exact same animation — see .preview-block__view below. */

  .preview-block__card{
    top: 60%;
    height: 40%;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.42s ease-out, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .preview-block__card[aria-current="true"]{
    opacity: 1;
    transform: none;
  }

  .preview-block__card .card--colored{
    border-radius: 0px;
    border-width: 0px;
    background-color: transparent;
    background-image: none;
    padding: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .preview-block__views{
    position: relative;
    inset: auto;
    overflow: visible;
    aspect-ratio: 1848 / 868;
  }

  .preview-block__view{
    position: absolute;
    inset: 0px;
    width: auto;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.42s ease-out, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .preview-block__view[data-active]{
    transform: none;
    opacity: 1;
  }

  .preview-block__image{
    height: 100%;
    width: 100%;
    padding: 10px;
    background: linear-gradient(rgb(14, 36, 64) 0%, rgb(8, 23, 44) 100%);
  }

  .preview-block__caption{
    display: none;
  }

  .preview-block__view img{
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: top;
       object-position: top;
  }

  /* dots: a horizontal row beneath the screenshot */

  .preview-block__dots{
    position: static;
    margin-top: 4rem;
    --tw-translate-x: 0px;
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    flex-direction: row;
    justify-content: center;
    gap: 0.875rem;
  }

  .preview-block__dot{
    height: 0.625rem;
    width: 0.625rem;
  }

  .preview-block__dot[aria-current="true"]{
    height: 0.625rem;
    width: 1.75rem;
  }
}

@media (max-width: 479.98px){
  /* the deck column is the sticky element so it pins while the (taller)
       card column scrolls past it; opaque bg hides cards passing behind. */

  .preview-block__stage,
    .preview-block__card{
    position: absolute;
    left: 0px;
    right: 0px;
    min-height: 0px;
    overflow: visible;
  }

  .preview-block__stage{
    top: 0px;
    display: flex;
    height: 40%;
    flex-direction: column;
    justify-content: center;
  }

  /* Appear with opacity + a slight rise/scale so the swap reads as motion
       (not a ghosted blend of two different screenshots). Screenshots and
       cards share the exact same animation — see .preview-block__view below. */

  .preview-block__card{
    top: 40%;
    height: 60%;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.42s ease-out, transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@media (prefers-reduced-motion: reduce){
  .preview-block__view,
    .preview-block__card{
    transition: none;
  }
}

/* AI Spotlight — portfolio pages.
   Two voices: Suisse for people, mono for what the machine says
   (proposals, statuses, key figures). */

.spotlight-night{
  background-color: #130e2e;
  background-image:
        radial-gradient(1100px 540px at 80% -12%, rgba(84, 64, 244, 0.5), transparent 65%),
        radial-gradient(760px 420px at 8% 112%, rgba(53, 40, 153, 0.55), transparent 70%),
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  /* the rotated approval-card ghost pokes past the viewport edge on small screens */
  overflow-x: clip;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* The AI Spotlight and story heroes: the night sky resolves downwards into the brand
   purple, so the header ends on the exact colour the wave below is cut from. Only these
   two heroes take it - the contact hero and the teaser card keep the flat night. */

.spotlight-night--hero{
  background-color: #0D0827;
  background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, #0D0827 0%, #1D1548 40%, #3D2BD6 78%, #5440F4 100%);
  background-size: 26px 26px, auto;
}

/* The cut from that hero into the light page below (see includes/spotlight/wave). Sits
   inside the light section rather than between the two, so the water line keeps the
   section's own gradient underneath instead of a flat fill that would seam against it. */

.spotlight-wave{
  display: block;
  height: 3rem;
  width: 100%;
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px){
  .spotlight-wave{
    height: 150px;
  }
}

/* the shallow cut under a masthead hero: a third of the height, same curves */

.spotlight-wave--slim{
  height: 2rem;
}

@media (min-width: 1024px){
  .spotlight-wave--slim{
    height: 2.75rem;
  }
}

/* machine voice: small mono lines for AI output and figures */

.machine{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: -0.025em;
}

.status-chip{
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.status-chip::before{
  content: '';
  height: 0.375rem;
  width: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1));
}

.status-chip--live::before{
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
}

.status-chip--building::before{
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
}

.spotlight-night .status-chip,
.spotlight-card__cover .status-chip{
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* .raw-content code is styled for a light ground (bg-base-200, no explicit text color, so it
   inherits whatever surrounds it) — on the night hero that inherited color is white, landing
   white text on a near-white chip. Same translucent-white treatment as .status-chip above. */

.spotlight-night .raw-content code{
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* hero signature: the approval card — an AI proposal a human signs off */

.approval-card > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.approval-card{
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  background-color: rgb(255 255 255 / 0.07);
  padding: 1.25rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.approval-card--ghost{
  position: absolute;
  inset: 0px;
  display: flex;
  --tw-translate-x: 1rem;
  --tw-translate-y: -1rem;
  --tw-rotate: 2deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: flex-start;
  justify-content: flex-end;
  background-color: rgb(255 255 255 / 0.04);
  padding: 1rem;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur:  ;
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.approval-card__action{
  border-radius: 0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

/* used together with .chip in the markup */

.filter-chip{
  cursor: pointer;
}

.filter-chip[aria-pressed="true"]{
  --tw-border-opacity: 1;
  border-color: rgb(84 64 244 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* mobile: the collapsed remainder of the area filter */

.filter-chip-menu{
  left: 0px;
  margin-top: 0.25rem;
  max-height: 18rem;
  min-width: 220px;
  overflow-y: auto;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.filter-chip-menu button[aria-pressed="true"]{
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

/* Story cards lead with the illustration. It is drawn for the night ground,
   so the card carries a dark cover for it and keeps the text on white below. */

/* No overflow clipping here: the border-glow layer reaches --glow-padding beyond
   the card, and clipping it here kills the outer bloom. The cover clips itself. */

.spotlight-story-card{
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  text-align: left;
}

a.spotlight-story-card:hover,
a.spotlight-story-card:focus-visible{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(191 183 251 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(53 40 153 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.spotlight-card__cover{
  --ill-scale: 0.86;
  /* pt-9 keeps the top strip clear so the status chip never lands on the diagram */
  position: relative;
  display: flex;
  height: 13rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2.25rem;
  /* the card's 1rem radius less its 1px border, so the corners nest without a hairline */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #130e2e;
  background-image:
        radial-gradient(420px 260px at 78% -30%, rgba(84, 64, 244, 0.55), transparent 68%),
        radial-gradient(300px 200px at 4% 128%, rgba(53, 40, 153, 0.6), transparent 72%),
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
}

/* scrim under the chip, so a diagram that reaches up stays readable behind it */

.spotlight-card__cover::before{
  content: '';
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 4rem;
  background: linear-gradient(180deg, rgba(19, 14, 46, 0.92), rgba(19, 14, 46, 0));
}

/* transform keeps the diagram's own layout intact and only trims it to thumbnail size */

.spotlight-card__cover .ill{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transform: scale(var(--ill-scale));
}

a.spotlight-story-card:hover .spotlight-card__cover{
  --ill-scale: 0.89;
}

.spotlight-card__cover .status-chip{
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
}

.spotlight-card__body{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

/* The cover is opaque, so the card's mesh border cannot wash through the top half
   the way it does over the white body. The glow's violet rim has the mirrored
   problem: it reads on white and disappears on the night ground. So the card adds
   a mint companion rim on the same cursor cone — invisible against the body,
   legible against the cover, and the glow reads as one ring again. */

.spotlight-story-card.border-glow > .border-glow__light::after{
  content: '';
  pointer-events: none;
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
        inset 0 0 0 1px rgb(117 249 233 / 75%),
        inset 0 0 10px 0 rgb(117 249 233 / 30%);
}

/* On touch the ring is the whole effect rather than a cone, and it is competing
   with a bright phone screen, so the mint half is pushed to match. */

@media (hover: none) and (max-width: 767px){
  .spotlight-story-card.border-glow > .border-glow__light::after{
    box-shadow:
            inset 0 0 0 1.5px rgb(117 249 233 / 90%),
            inset 0 0 18px 0 rgb(117 249 233 / 42%);
  }

  /* Phones show one card at a time, so the lit card can carry the whole screen:
       everything else steps back rather than competing. Driven by the same
       scroll-position property as the ring, so the two move together and this
       stays free of JavaScript. Desktop keeps every card at full strength — there
       the cursor already says which card is meant. */

  @supports (animation-timeline: view()){
    /* The two content spans carry the mute, not the <a>. The glow layer is
           their sibling, so muting the card would multiply the ring by the mute
           and make it arrive late and abruptly — and the <a> also carries the
           global 200ms transition, which would sit chasing a value the scroll
           animation rewrites every frame. */

    .spotlight-story-card.border-glow > .spotlight-card__cover,
        .spotlight-story-card.border-glow > .spotlight-card__body{
      --card-rest: 0.58;
      opacity: calc(var(--card-rest) + (1 - var(--card-rest)) * var(--edge-proximity) / 100);
    }

    /* the ring is switched off there, so nothing marks the active card and
           muting would only leave every card permanently dimmed */

    @media (prefers-reduced-motion: reduce){
      .spotlight-story-card.border-glow > .spotlight-card__cover,
            .spotlight-story-card.border-glow > .spotlight-card__body{
        opacity: 1;
      }
    }
  }
}

.roster-row{
  display: grid;
  gap: 0.5rem;
  border-top-width: 1px;
  border-color: rgb(210 214 220 / 0.6);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px){
  .roster-row{
    grid-template-columns: 12rem 1fr;
    gap: 2.5rem;
  }
}

.roster-row:last-child{
  border-bottom-width: 1px;
  border-color: rgb(210 214 220 / 0.6);
}

/* --- Hero illustrations for the story pages -------------------------------
   Every story hero carries a diagram built from this kit, so 18 different
   compositions stay one visual language:
     mint   = what the machine produced
     white  = the human's material
     amber  = needs attention
   Square with a mint border = deterministic, dashed and round = probabilistic.
   Layout comes from Tailwind utilities in the templates; only the atoms and
   the two encodings live here. */

.ill{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 360px;
}

.ill-m{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.375;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ill-label{
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 9px;
  text-transform: uppercase;
  line-height: 1.25;
  color: rgb(255 255 255 / 0.45);
  letter-spacing: 0.1em;
}

.ill-rule{
  height: 1px;
  width: 100%;
  background-color: rgb(255 255 255 / 0.1);
}

.ill-card{
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  background-color: rgb(255 255 255 / 0.07);
  padding: 0.625rem;
}

.ill-card--flat{
  background-color: rgb(255 255 255 / 0.03);
}

.ill-card--accent{
  border-color: rgb(117 249 233 / 0.5);
}

.ill-card--warn{
  border-color: rgb(255 191 48 / 0.5);
}

.ill-bar{
  height: 0.25rem;
  border-radius: 0.125rem;
  background-color: rgb(255 255 255 / 0.2);
}

.ill-bar--on{
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
}

.ill-bar--warn{
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
}

/* nodes carry the determinism encoding */

.ill-node{
  border-radius: 0.375rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.05);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.ill-node--soft{
  border-radius: 0.5rem;
  border-style: dashed;
}

.ill-node--hard{
  border-radius: 0.125rem;
  border-color: rgb(117 249 233 / 0.6);
  background-color: rgb(117 249 233 / 0.1);
}

.ill-arrow{
  position: relative;
  height: 1px;
  flex: 1 1 0%;
  background-color: rgb(255 255 255 / 0.25);
}

.ill-arrow::after{
  content: '';
  position: absolute;
  right: 0px;
  top: -3px;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left: 5px solid rgba(255, 255, 255, 0.25);
}

.ill-arrow--on{
  background-color: rgb(117 249 233 / 0.7);
}

.ill-arrow--on::after{
  border-left-color: rgba(117, 249, 233, 0.7);
}

.ill-arrow--dash{
  height: 0px;
  border-top-width: 1px;
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.25);
  background-color: transparent;
}

.ill-arrow--dash::after{
  top: -4px;
}

.ill-dot{
  height: 0.375rem;
  width: 0.375rem;
  flex: none;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.4);
}

.ill-dot--on{
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
}

.ill-cell{
  aspect-ratio: 1 / 1;
  border-radius: 0.125rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  background-color: rgb(255 255 255 / 0.04);
}

.ill-cell--on{
  --tw-border-opacity: 1;
  border-color: rgb(117 249 233 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
}

.ill-cell--warn{
  --tw-border-opacity: 1;
  border-color: rgb(255 191 48 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
}

/* a real item we deliberately say nothing about — one dimness step below a plain cell,
   never a different shape, because the shape encoding means something else */

.ill-cell--off{
  border-color: rgb(255 255 255 / 0.15);
  background-color: transparent;
}

.ill-tick{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  --tw-text-opacity: 1;
  color: rgb(117 249 233 / var(--tw-text-opacity, 1));
}

/* echoes .approval-card__action, one size down */

.ill-btn{
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 9px;
  font-weight: 700;
}

.ill-btn--primary{
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(53 40 153 / var(--tw-text-opacity, 1));
}

.ill-btn--ghost{
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  color: rgb(255 255 255 / 0.7);
}

.ill-lines{
  pointer-events: none;
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.ill-lines path,
.ill-lines line{
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1;
}

.ill-lines .is-accent{
  stroke: rgba(117, 249, 233, 0.8);
}

.ill-lines .is-dashed{
  stroke-dasharray: 3 3;
}

/* Light-ground twin of the .ill-* kit in _spotlight.css.

   The spotlight kit is drawn for the night ground and encodes three roles by
   colour — mint = what the machine produced, white = the human's material,
   amber = needs attention — plus a shape encoding: square with a solid rim is
   deterministic, dashed and round is probabilistic.

   Feature cards sit on white, where mint all but disappears. So the light twin
   keeps the grammar and inverts the palette: the machine's half is carried by
   the brand violet, the human's material by neutral white-on-grey, and amber
   stays amber because it already reads on both grounds. The shape encoding is
   untouched, so a reader who learned it on a story page reads it here too.

   Put .ill--light on the root .ill element; the atoms below override the dark
   ones by specificity, so the same motif markup renders on either ground. */

.ill--light .ill-m{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.ill--light .ill-label{
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.ill--light .ill-rule{
  --tw-bg-opacity: 1;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-card{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-card--flat{
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-card--accent{
  border-color: rgb(84 64 244 / 0.5);
  background-color: rgb(234 231 254 / 0.5);
}

.ill--light .ill-card--warn{
  --tw-border-opacity: 1;
  border-color: rgb(255 191 48 / var(--tw-border-opacity, 1));
  background-color: rgb(255 191 48 / 0.1);
}

.ill--light .ill-bar{
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-bar--on{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-bar--warn{
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
}

/* nodes carry the determinism encoding — shape is inherited, only colour moves */

.ill--light .ill-node{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-node--soft{
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
}

.ill--light .ill-node--hard{
  --tw-border-opacity: 1;
  border-color: rgb(84 64 244 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(234 231 254 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-arrow{
  --tw-bg-opacity: 1;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-arrow::after{
  border-left-color: #D2D6DC;
}

.ill--light .ill-arrow--on{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-arrow--on::after{
  border-left-color: #5440F4;
}

.ill--light .ill-arrow--dash{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  background-color: transparent;
}

.ill--light .ill-dot{
  --tw-bg-opacity: 1;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-dot--on{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-cell{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-cell--on{
  --tw-border-opacity: 1;
  border-color: rgb(84 64 244 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-cell--warn{
  --tw-border-opacity: 1;
  border-color: rgb(255 191 48 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
}

.ill--light .ill-cell--off{
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
  background-color: transparent;
}

.ill--light .ill-tick{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.ill--light .ill-btn--primary{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ill--light .ill-btn--ghost{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.ill--light .ill-lines path,
.ill--light .ill-lines line{
  stroke: #D2D6DC;
}

.ill--light .ill-lines .is-accent{
  stroke: #5440F4;
}

/* Feature cards are a third the width of a story hero, so the motifs are drawn
   for a ~260px box and capped here rather than in every template. */

.ill--feature{
  margin-left: auto;
  margin-right: auto;
  max-width: 260px;
}

/* Contact page — the AI Spotlight's night ground applied to the one page whose job is a
   reply. The ways to reach us are lit tiles in the dark; the form is the single white
   panel, so the eye lands on it before it lands on anything else. */

.contact-channel{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  background-color: rgb(255 255 255 / 0.07);
  padding: 1rem;
}

a.contact-channel:hover,
a.contact-channel:focus-visible{
  border-color: rgb(117 249 233 / 0.5);
  background-color: rgb(255 255 255 / 0.12);
}

.contact-channel__icon{
  margin-top: 0.125rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(117 249 233 / var(--tw-text-opacity, 1));
}

.contact-channel__label{
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(255 255 255 / 0.65);
}

/* the address is what the tile is for, so it carries the weight — not the label above it */

.contact-channel__value{
  display: block;
  overflow-wrap: break-word;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

@media (min-width: 1024px){
  .contact-channel__value{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

a.contact-channel:hover .contact-channel__value,
a.contact-channel:focus-visible .contact-channel__value{
  --tw-text-opacity: 1;
  color: rgb(117 249 233 / var(--tw-text-opacity, 1));
}

/* The form panel. `.card`'s shadow is built for the light grounds and vanishes here, so
   the elevation is drawn against the night instead. */

.contact-panel{
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px){
  .contact-panel{
    padding: 2rem;
  }
}

.contact-panel{
  box-shadow: 0 30px 60px -25px rgb(0 0 0 / 65%);
}

/* the tick on the confirmation that replaces the form once a message is sent */

.contact-panel__mark{
  margin-bottom: 1rem;
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(214 253 248 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(53 40 153 / var(--tw-text-opacity, 1));
}

/* An editor-set header image only tints the night ground: full strength it would fight
   both the violet glows and the white panel sitting on top of it. */

.contact-hero__backdrop{
  pointer-events: none;
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 90%), transparent 80%);
          mask-image: linear-gradient(to bottom, rgb(0 0 0 / 90%), transparent 80%);
}

/* Search results: the query is the headline, hits are a hairline-divided list rather
   than cards. Everything the system states (count, index, path) is set in mono,
   everything a person reads (title, snippet) in Suisse - the Spotlight register. */

.search-form{
  position: relative;
  display: flex;
  align-items: flex-end;
  border-bottom-width: 2px;
  border-color: rgb(84 64 244 / 0.2);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.search-form:focus-within{
  --tw-border-opacity: 1;
  border-color: rgb(84 64 244 / var(--tw-border-opacity, 1));
}

.search-form__input{
  width: 100%;
  border-width: 0px;
  background-color: transparent;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 2.5rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 1024px){
  .search-form__input{
    font-size: 2.25rem;
    line-height: 3.5rem;
  }
}

.search-form__input{
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.search-form__input::-moz-placeholder{
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(210 214 220 / var(--tw-text-opacity, 1));
}

.search-form__input::placeholder{
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(210 214 220 / var(--tw-text-opacity, 1));
}

.search-form__submit{
  position: absolute;
  right: 0px;
  bottom: 0.75rem;
  padding: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(148 136 248 / var(--tw-text-opacity, 1));
}

.search-form__submit:hover{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.search-form__submit:focus-visible{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.search-hits{
  margin-top: 2.5rem;
  border-top-width: 1px;
  border-color: rgb(84 64 244 / 0.1);
}

@media (min-width: 1024px){
  .search-hits{
    margin-top: 3rem;
  }
}

.search-hits > li{
  border-bottom-width: 1px;
  border-color: rgb(84 64 244 / 0.1);
}

.search-hit{
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  display: grid;
  align-items: flex-start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  border-radius: 0.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 1024px){
  .search-hit{
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.search-hit{
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.search-hit:hover,
.search-hit:focus-visible{
  background-color: rgb(255 255 255 / 0.6);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.search-hit__index{
  padding-top: 0.375rem;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(210 214 220 / var(--tw-text-opacity, 1));
}

.search-hit__body{
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.25rem;
}

.search-hit__path{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.search-hit__sep{
  --tw-text-opacity: 1;
  color: rgb(210 214 220 / var(--tw-text-opacity, 1));
}

.search-hit__title{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  text-wrap: balance;
}

.search-hit:hover .search-hit__title,
.search-hit:focus-visible .search-hit__title{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

.search-hit__snippet{
  margin-top: 0.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.search-hit__arrow{
  margin-top: 0.375rem;
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(210 214 220 / var(--tw-text-opacity, 1));
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.search-hit:hover .search-hit__arrow,
.search-hit:focus-visible .search-hit__arrow{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
  opacity: 1;
}

/* the term itself: an accent underline in the title, an accent wash in running text,
   never a box */

.search-hit__title mark{
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #75F9E9;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.search-hit__snippet mark{
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(214 253 248 / var(--tw-bg-opacity, 1));
  color: inherit;
  /* the wash overhangs the glyphs instead of pushing them apart, so a term
       matched inside a word ("wartungsfreundlich") still reads as one word */
  padding: 0.05em 0.15em;
  margin: 0 -0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.search-empty{
  margin-top: 2.5rem;
}

.search-empty > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.search-empty{
  border-top-width: 1px;
  border-color: rgb(84 64 244 / 0.1);
  padding-top: 2rem;
}

@media (min-width: 1024px){
  .search-empty{
    margin-top: 3rem;
  }
}

/* Type-ahead menu: a white sheet hung from the input, same list grammar as the results
   page in miniature. Server-rendered (search/suggest.html.twig), positioned here. */

.search-suggest{
  position: relative;
  width: 100%;
}

.search-suggest__menu{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  z-index: 20;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-shadow-color: rgb(53 40 153 / 0.15);
  --tw-shadow: var(--tw-shadow-colored);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(84 64 244 / 0.1);
}

/* the navbar field is narrow; the sheet needs room for titles, so it grows past the input
   on desktop and sits in the flow of the mobile menu panel */

@media not all and (min-width: 1024px){
  .search-suggest__menu--header{
    position: static;
    margin-top: 0.5rem;
  }
}

@media (min-width: 1024px){
  .search-suggest__menu--header{
    left: auto;
    width: 26rem;
  }
}

.search-suggest__list{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.search-suggest__item{
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
}

.search-suggest__item.is-active,
.search-suggest__item:hover,
.search-suggest__item:focus-visible{
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.search-suggest__title{
  font-weight: 600;
  line-height: 1.375;
}

.search-suggest__title mark{
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #75F9E9;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.search-suggest__path{
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.search-suggest__all{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: rgb(84 64 244 / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 100ms;
}

.search-suggest__all.is-active,
.search-suggest__all:hover,
.search-suggest__all:focus-visible{
  --tw-bg-opacity: 1;
  background-color: rgb(234 231 254 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.search-suggest__empty{
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

/* Border glow — a card border that lights up in a cone facing the cursor
   (port of the reactbits.dev BorderGlow component). The border-glow Stimulus
   controller feeds --cursor-angle and --edge-proximity (0–100); everything
   visual lives here. Retuned for light cards on light backgrounds: brand
   colors instead of the dark mesh palette, no blend modes.

   Markup: add .border-glow + the controller to the card and
   <span class="border-glow__light" aria-hidden="true"></span> as a child, and
   .border-glow-container on an ancestor that may clip the glow horizontally. */

/* how far the outer glow may reach beyond the card — the clipping ancestor
   needs the same value, so it lives here rather than on .border-glow */

:root{
  --glow-padding: 40px;
}

/* The glow layer sticks out --glow-padding on every side, which widens the page
   whenever a card sits closer than that to the viewport edge (small screens).
   Clipping the horizontal axis kills that scrollbar; overflow-clip-margin keeps
   the glow itself visible where the browser supports it. */

.border-glow-container{
  overflow-x: clip;
  overflow-clip-margin: var(--glow-padding);
}

.border-glow{
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  /* edge proximity (%) at which the glow / the colored border fade in */
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  /* width of the visible cone around the cursor, in % of a full turn */
  --cone-spread: 25;
  position: relative;
  isolation: isolate;
}

.border-glow::before,
.border-glow > .border-glow__light{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

.border-glow:not(:hover)::before,
.border-glow:not(:hover) > .border-glow__light{
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border; the translucent padding-box layer lets the
   mesh wash faintly into the card near the lit edge */

.border-glow::before{
  content: "";
  z-index: -1;
  border: 1px solid transparent;
  background:
        linear-gradient(rgb(255 255 255 / 88%) 0 100%) padding-box,
        radial-gradient(at 80% 55%, #5440F4 0px, transparent 50%) border-box,
        radial-gradient(at 69% 34%, #75F9E9 0px, transparent 50%) border-box,
        radial-gradient(at 8% 6%, #9BC9FF 0px, transparent 50%) border-box,
        radial-gradient(at 41% 38%, #5440F4 0px, transparent 50%) border-box,
        radial-gradient(at 86% 85%, #75F9E9 0px, transparent 50%) border-box,
        radial-gradient(at 82% 18%, #9BC9FF 0px, transparent 50%) border-box,
        radial-gradient(at 51% 4%, #75F9E9 0px, transparent 50%) border-box,
        linear-gradient(#9488F8 0 100%) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%)
    );
          mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black calc(var(--cone-spread) * 1%),
        transparent calc((var(--cone-spread) + 15) * 1%),
        transparent calc((100 - var(--cone-spread) - 15) * 1%),
        black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* outer glow following the cursor; the nested ::before sits back on the card
   bounds so its box-shadows can spread into the masked overflow area */

.border-glow > .border-glow__light{
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  /* the glow layer must never receive layout margins from the card's space-y utilities */
  margin: 0 !important;
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  -webkit-mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
          mask-image: conic-gradient(
        from var(--cursor-angle) at center,
        black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
}

.border-glow > .border-glow__light::before{
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  /* primary #5440F4 at falling opacities */
  box-shadow:
        inset 0 0 0 1px rgb(84 64 244 / 55%),
        inset 0 0 3px 0 rgb(84 64 244 / 30%),
        inset 0 0 8px 0 rgb(84 64 244 / 20%),
        0 0 1px 0 rgb(84 64 244 / 45%),
        0 0 3px 0 rgb(84 64 244 / 40%),
        0 0 6px 0 rgb(84 64 244 / 30%),
        0 0 15px 0 rgb(84 64 244 / 25%),
        0 0 25px 2px rgb(84 64 244 / 18%),
        0 0 50px 2px rgb(84 64 244 / 12%);
}

/* --- touch devices --------------------------------------------------------
   There is no cursor for the cone to point at, so scroll position stands in for
   attention: the ring rises as a card crosses the viewport and falls as it
   leaves. A view() timeline drives it, so this costs no JavaScript and no
   scroll-time work — the compositor owns the whole thing.

   Registering --edge-proximity is what makes it animatable at all: an
   unregistered custom property has no type, so there is nothing to interpolate
   between. Registration also gives the pointer path a typed initial value. */

@property --edge-proximity{
  syntax: "<number>";

  inherits: true;

  initial-value: 0;
}

/* How much of the card is on screen, expressed with the two ranges a view()
   timeline already gives us: `entry` runs from the card first appearing to it
   being wholly visible, `exit` the reverse. Filled forwards and backwards, the
   smaller of the two IS the visible fraction — 0 off screen, rising while the
   card enters, 1 while it is wholly visible, falling as it leaves.

   Deriving it rather than approximating it with keyframe percentages means it
   adapts to each card's height on its own; the previous version needed a hand
   tuned plateau and a fixed pixel nudge, and still could not fit cards of
   different heights. */

@property --view-enter{
  syntax: "<number>";

  inherits: true;

  initial-value: 0;
}

@property --view-leave{
  syntax: "<number>";

  inherits: true;

  initial-value: 1;
}

@keyframes border-glow-enter{
  from{
    --view-enter: 0;
  }

  to{
    --view-enter: 1;
  }
}

@keyframes border-glow-leave{
  from{
    --view-leave: 1;
  }

  to{
    --view-leave: 0;
  }
}

/* No pointer means the cone can never light up, so the layer is pure cost —
   true on every touch device, including the tablets the phone rules below skip. */

@media (hover: none){
  .border-glow > .border-glow__light{
    display: none;
  }
}

/* Phones only. (hover: none) alone also matches tablets, where the story grid
   is two or three columns — a whole row is equally "fully visible" there, so
   every card in it would light at once. 767px is the breakpoint below which
   the grid is a single column. */

@media (hover: none) and (max-width: 767px){
  /* The ring spreads the glow over the whole perimeter where the cursor cone
       concentrates it into a quarter of it, so the same shadow reads far weaker
       here. It needs more reach — and the container clips at --glow-padding, so
       that has to grow with it. */

  :root{
    --glow-padding: 72px;
  }

  /* Browsers without scroll-driven animation keep the hidden layer above, so
       older iOS simply keeps the behaviour it has today rather than getting a
       ring stuck on at full strength. */

  @supports (animation-timeline: view()){
    .border-glow{
      /* One curve for everything. With a pointer the two thresholds stagger
               the layers on purpose, so the colour only joins once the cursor is
               close. Scrolling has no such approach: the card simply becomes the
               one on screen, and staggered starts read as the parts lighting up
               at different moments rather than one thing arriving. */
      --edge-sensitivity: 0;
      --color-sensitivity: 0;
      --edge-proximity: calc(100 * min(var(--view-enter), var(--view-leave)));
      animation: border-glow-enter linear both, border-glow-leave linear both;
      animation-timeline: view(), view();
      animation-range: entry, exit;
    }

    /* :hover never matches on touch, so the resting rules would otherwise pin
           both layers at zero; hand them back to the proximity calc */

    .border-glow:not(:hover)::before{
      opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
      transition: none;
    }

    .border-glow:not(:hover) > .border-glow__light{
      display: block;
      opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
      transition: none;
    }

    /* a cone points at a cursor; with none, light the whole edge */

    .border-glow::before,
        .border-glow > .border-glow__light{
      -webkit-mask-image: none;
              mask-image: none;
    }

    /* Fewer, wider, brighter stops than the desktop stack: only the cards in
           the viewport ever paint, so a couple of large shadows per frame is
           affordable, and spreading over the full ring needs the extra alpha. */

    .border-glow > .border-glow__light::before{
      box-shadow:
                inset 0 0 0 1.5px rgb(84 64 244 / 70%),
                inset 0 0 12px 0 rgb(84 64 244 / 32%),
                0 0 4px 0 rgb(84 64 244 / 55%),
                0 0 14px 0 rgb(84 64 244 / 45%),
                0 0 30px 2px rgb(84 64 244 / 34%),
                0 0 60px 4px rgb(84 64 244 / 22%);
    }
  }

  /* Brightness tied to scroll position is still motion, and holding it part-lit
       would leave every card glowing at once. Drop the effect instead: a plain,
       static grid is the honest answer here. */

  @media (prefers-reduced-motion: reduce){
    .border-glow{
      animation: none;
      --edge-proximity: 0;
    }
  }
}

/* Klaro consent UI, restyled to match the site.
   Mobile: notice as a bottom sheet, settings modal near full screen.
   Desktop: notice as a floating card bottom-left, modal centered.
   Klaro injects its own stylesheet at runtime, hence the !important flags. */

.klaro{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.klaro .cookie-notice,
.klaro .cm-modal{
  font-family: inherit !important;
}

/* the ":" wordmark dots next to the titles (see .dots-mark) */

.klaro .cn-body h2::before,
.klaro .cm-modal .cm-header h1.title::before{
  content: "";
  margin-right: 0.625rem;
  display: inline-block;
  height: 0.375rem;
  width: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
  box-shadow: 0 0.5rem 0 0 #5440F4;
  /* primary */
  transform: translateY(-0.3rem);
}

/* ---------- consent notice ---------- */

.klaro .cookie-notice:not(.cookie-modal-notice){
  position: fixed !important;
  overflow-y: auto !important;
  border-top-left-radius: 1.5rem !important;
  border-top-right-radius: 1.5rem !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border-width: 0px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  inset: auto 0 0 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 85vh;
  max-height: 85dvh;
  /* the first shadow dims the page behind the sheet */
  box-shadow: 0 0 0 100vmax rgb(19 14 46 / 0.45), 0 -16px 48px rgb(19 14 46 / 0.2) !important;
}

/* bottom-sheet handle */

.klaro .cookie-notice:not(.cookie-modal-notice)::before{
  content: "";
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  margin-bottom: -0.25rem;
  display: block;
  height: 0.25rem;
  width: 2.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1));
}

.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body{
  padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

.klaro .cn-body h2{
  margin: 0px !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-weight: 700 !important;
}

.klaro .cn-body p{
  margin: 0px !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  line-height: 1.625 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1)) !important;
}

.klaro .cookie-notice .cn-ok{
  margin-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

.klaro .cookie-notice .cn-buttons{
  margin: 0px !important;
  display: grid !important;
  gap: 0.5rem !important;
}

.klaro div.cn-body .cm-btn,
.klaro div.cn-body .cm-link.cn-learn-more{
  margin: 0px !important;
  width: 100% !important;
  flex-grow: 0 !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  text-align: center !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  font-weight: 700 !important;
}

/* "accept only necessary" must be exactly as prominent as "accept all"
   (DSK guidance on first-layer consent) */

.klaro div.cn-body .cm-btn.cn-decline{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.klaro div.cn-body .cm-btn.cn-decline:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(105 88 245 / var(--tw-bg-opacity, 1)) !important;
}

.klaro div.cn-body .cm-link.cn-learn-more{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1)) !important;
}

.klaro div.cn-body .cm-link.cn-learn-more:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1)) !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

@media (min-width: 768px){
  .klaro .cookie-notice:not(.cookie-modal-notice){
    inset: auto auto 1.5rem 1.5rem !important;
    width: 24rem !important;
    border-radius: 1rem !important;
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(237 242 247 / var(--tw-border-opacity, 1)) !important;
    box-shadow: 0 24px 64px rgb(19 14 46 / 0.22) !important;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice)::before{
    display: none;
  }

  .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body{
    padding: 1.5rem !important;
  }
}

/* ---------- consent modal ---------- */

.klaro .cookie-modal .cm-bg{
  background: rgb(19 14 46 / 0.55) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.klaro .cm-modal.cm-klaro{
  position: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-top-left-radius: 1.5rem !important;
  border-top-right-radius: 1.5rem !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  inset: 2.5rem 0 0 0 !important;
  inset: max(2.5rem, env(safe-area-inset-top, 0px)) 0 0 0 !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}

@media (min-width: 768px){
  .klaro .cm-modal.cm-klaro{
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 3rem) !important;
    max-width: 40rem !important;
    max-height: min(85vh, 52rem) !important;
    border-radius: 1rem !important;
  }
}

.klaro .cm-modal .cm-header{
  flex-shrink: 0 !important;
  border-bottom-width: 0px !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 1.5rem !important;
  padding-bottom: 0.5rem !important;
}

@media (min-width: 768px){
  .klaro .cm-modal .cm-header{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    padding-top: 2rem !important;
  }
}

.klaro .cm-modal .cm-header h1{
  margin: 0px !important;
  font-size: 1.25rem !important;
  line-height: 2rem !important;
  font-weight: 700 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

@media (min-width: 768px){
  .klaro .cm-modal .cm-header h1{
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
}

.klaro .cm-modal .cm-header p{
  margin-top: 0.5rem;
  margin-bottom: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

.klaro .cm-modal .hide{
  top: 1.25rem !important;
  right: 1.25rem !important;
  display: flex !important;
  height: 2.25rem !important;
  width: 2.25rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.klaro .cm-modal .hide:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1)) !important;
}

@media (min-width: 768px){
  .klaro .cm-modal .hide{
    top: 1.75rem !important;
    right: 1.75rem !important;
  }
}

.klaro .cm-modal .hide{
  transform: none !important;
}

.klaro .cm-modal .hide line{
  stroke: #000;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.klaro .cm-modal .cm-body{
  flex: 1 1 0% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

@media (min-width: 768px){
  .klaro .cm-modal .cm-body{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.klaro .cm-modal .cm-body ul.cm-services,
.klaro .cm-modal .cm-body ul.cm-purposes{
  margin: 0px !important;
  display: flex !important;
  flex-direction: column !important;
}

.klaro .cm-modal .cm-body li.cm-purpose{
  position: relative !important;
  margin: 0px !important;
  border-top-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1)) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.klaro .cm-modal .cm-body li.cm-purpose:first-child{
  border-top-width: 0px !important;
}

/* the switch is anchored to the title label; descriptions and the expanded
   services below use the full width */

.klaro .cm-modal .cm-list-label{
  position: relative !important;
  display: block !important;
  padding-left: 0px !important;
  padding-right: 4rem !important;
}

.klaro .cm-modal span.cm-list-title{
  display: block !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  font-weight: 700 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

.klaro .cm-modal .cm-required{
  margin: 0px !important;
  display: block !important;
  padding: 0px !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  font-weight: 400 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1)) !important;
}

.klaro .cm-modal p.cm-list-description{
  margin: 0px !important;
  margin-top: 0.25rem !important;
  padding-top: 0px !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  line-height: 1.625 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1)) !important;
}

.klaro .cm-modal .cm-body p.purposes{
  /* machine voice, like .machine */
  margin: 0px !important;
  margin-top: 0.375rem !important;
  padding-top: 0px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  letter-spacing: -0.025em !important;
  color: rgb(74 85 104 / 0.8) !important;
}

/* the native Klaro switch, restyled as a modern pill */

.klaro .cm-modal .cm-list-input{
  position: absolute !important;
  margin: 0px !important;
  cursor: pointer !important;
  opacity: 0 !important;
  left: auto !important;
  right: 0 !important;
  top: 0.875rem !important;
  width: 3rem !important;
  height: 1.75rem !important;
}

.klaro .cm-modal span.cm-switch{
  position: absolute !important;
  display: block !important;
  height: 1.75rem !important;
  width: 3rem !important;
  /* Klaro pins the switch to the left – ours sits right, centered on the title */
  left: auto !important;
  right: 0 !important;
  top: -0.125rem !important;
}

.klaro .cm-modal .slider{
  position: absolute !important;
  inset: 0px !important;
  display: block !important;
  border-radius: 9999px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(210 214 220 / var(--tw-bg-opacity, 1)) !important;
  padding: 0px !important;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 200ms !important;
  /* the inset does the sizing; also undo the site's carousel .slider styles,
       which collide with Klaro's toggle track class */
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.klaro .cm-modal .slider::before{
  content: "";
  position: absolute !important;
  height: 1.25rem !important;
  width: 1.25rem !important;
  border-radius: 9999px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
  transition-property: transform !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 200ms !important;
  left: 0.25rem !important;
  top: 0.25rem !important;
  bottom: auto !important;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25) !important;
  transform: none !important;
}

.klaro .cm-modal .cm-list-input:checked + .cm-list-label .slider{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1)) !important;
}

.klaro .cm-modal .cm-list-input:checked + .cm-list-label .slider::before{
  transform: translateX(1.25rem) !important;
}

.klaro .cm-modal .cm-list-input.half-checked:checked + .cm-list-label .slider{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(148 136 248 / var(--tw-bg-opacity, 1)) !important;
}

.klaro .cm-modal .cm-list-input.half-checked:checked + .cm-list-label .slider::before{
  transform: translateX(0.625rem) !important;
}

.klaro .cm-modal .cm-list-input.required:checked + .cm-list-label .slider{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(191 183 251 / var(--tw-bg-opacity, 1)) !important;
  cursor: not-allowed;
}

.klaro .cm-modal .cm-list-input:focus-visible + .cm-list-label .slider{
  outline: 2px dotted #9488F8;
  /* primary-300, matches the site focus style */
  outline-offset: 2px;
}

/* "toggle all" utility row, shown above the purposes */

.klaro .cm-modal .cm-body li.cm-purpose.cm-toggle-all{
  order: -9999 !important;
  margin-bottom: 0.75rem !important;
  border-radius: 0.75rem !important;
  border-width: 0px !important;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
  padding-left: 1rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-right: 4rem !important;
}

.klaro .cm-modal li.cm-toggle-all span.cm-list-title{
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
}

.klaro .cm-modal li.cm-toggle-all .cm-list-description{
  display: none !important;
}

.klaro .cm-modal li.cm-toggle-all .cm-list-input{
  top: 50% !important;
  right: 1rem !important;
  transform: translateY(-50%);
}

.klaro .cm-modal li.cm-toggle-all span.cm-switch{
  top: 50% !important;
  transform: translateY(-50%);
}

/* collapsible service list per purpose */

.klaro .cm-modal .cm-caret{
  margin-top: 0.5rem !important;
  text-align: left !important;
}

.klaro .cm-modal .cm-caret a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  --tw-text-opacity: 1 !important;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1)) !important;
}

.cm-caret span{
  display: none !important;
}

.cm-caret [aria-expanded]::after{
  display: inline-block;
  height: 1rem;
  width: 1rem;
  background-size: contain;
  background-position: center;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.23431 5.83429C4.54673 5.52187 5.05327 5.52187 5.36569 5.83429L8 8.4686L10.6343 5.83429C10.9467 5.52187 11.4533 5.52187 11.7657 5.83429C12.0781 6.14671 12.0781 6.65324 11.7657 6.96566L8.56569 10.1657C8.25327 10.4781 7.74673 10.4781 7.43431 10.1657L4.23431 6.96566C3.9219 6.65324 3.9219 6.14671 4.23431 5.83429Z' fill='%235440F4'/%3E%3C/svg%3E%0A");
}

.cm-caret [aria-expanded="true"]::after{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.klaro .cm-modal ul.cm-content{
  border-left-width: 2px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1)) !important;
  padding-left: 1rem !important;
  /* Klaro compensates its stock list padding with a negative margin */
  margin-left: 0 !important;
  margin-top: 0.375rem !important;
}

.klaro .cm-modal .cm-body li.cm-service{
  position: relative !important;
  margin: 0px !important;
  border-top-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1)) !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.klaro .cm-modal .cm-body li.cm-service:first-child{
  border-top-width: 0px !important;
}

.klaro .cm-modal li.cm-service .cm-list-label{
  padding-right: 3.5rem !important;
}

.klaro .cm-modal li.cm-service span.cm-list-title{
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
}

.klaro .cm-modal li.cm-service .cm-list-input{
  top: 0.625rem !important;
}

.klaro .cm-modal li.cm-service span.cm-switch{
  top: -0.25rem !important;
}

.klaro .cm-modal .cm-footer{
  flex-shrink: 0 !important;
  border-top-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1)) !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 1rem !important;
}

@media (min-width: 768px){
  .klaro .cm-modal .cm-footer{
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.klaro .cm-modal .cm-footer{
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

.klaro .cm-modal .cm-footer-buttons{
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 0.5rem !important;
}

@media (min-width: 768px){
  .klaro .cm-modal .cm-footer-buttons{
    flex-direction: row !important;
    justify-content: flex-end !important;
  }
}

.klaro div.cm-modal .cm-btn{
  margin: 0px !important;
  width: 100% !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  text-align: center !important;
}

@media (min-width: 768px){
  .klaro div.cm-modal .cm-btn{
    width: auto !important;
  }
}

.klaro div.cm-modal .cm-btn.cm-btn-accept{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1)) !important;
}

.klaro div.cm-modal .cm-btn.cm-btn-accept:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1)) !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* declining is as prominent as accepting all */

.klaro div.cm-modal .cm-btn.cm-btn-decline{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.klaro div.cm-modal .cm-btn.cm-btn-decline:hover{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(105 88 245 / var(--tw-bg-opacity, 1)) !important;
}

/* ---------- entrance ---------- */

@media (prefers-reduced-motion: no-preference){
  .klaro .cookie-notice:not(.cookie-modal-notice){
    animation: klaro-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .klaro .cookie-modal .cm-bg,
    .klaro .cm-modal.cm-klaro{
    animation: klaro-fade 0.25s ease-out;
  }
}

@keyframes klaro-rise{
  from{
    opacity: 0;
    transform: translateY(2rem);
  }
}

@keyframes klaro-fade{
  from{
    opacity: 0;
  }
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Suisse, Suisse Fallback, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

#app .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

#app .visible{
  visibility: visible;
}

#app .invisible{
  visibility: hidden;
}

#app .static{
  position: static;
}

#app .fixed{
  position: fixed;
}

#app .absolute{
  position: absolute;
}

#app .relative{
  position: relative;
}

#app .sticky{
  position: sticky;
}

#app .inset-0{
  inset: 0px;
}

#app .inset-x-0{
  left: 0px;
  right: 0px;
}

#app .inset-x-2{
  left: 0.5rem;
  right: 0.5rem;
}

#app .-bottom-20{
  bottom: -5rem;
}

#app .-bottom-7{
  bottom: -1.75rem;
}

#app .-left-px{
  left: -1px;
}

#app .-right-1{
  right: -0.25rem;
}

#app .-top-px{
  top: -1px;
}

#app .left-0{
  left: 0px;
}

#app .left-1\/2{
  left: 50%;
}

#app .left-16{
  left: 4rem;
}

#app .left-2{
  left: 0.5rem;
}

#app .left-9{
  left: 2.25rem;
}

#app .left-\[145px\]{
  left: 145px;
}

#app .left-\[190px\]{
  left: 190px;
}

#app .left-\[82px\]{
  left: 82px;
}

#app .right-1{
  right: 0.25rem;
}

#app .right-1\/2{
  right: 50%;
}

#app .top-1{
  top: 0.25rem;
}

#app .top-16{
  top: 4rem;
}

#app .top-4{
  top: 1rem;
}

#app .top-6{
  top: 1.5rem;
}

#app .top-9{
  top: 2.25rem;
}

#app .top-\[102px\]{
  top: 102px;
}

#app .top-\[106px\]{
  top: 106px;
}

#app .top-\[108px\]{
  top: 108px;
}

#app .top-\[112px\]{
  top: 112px;
}

#app .top-\[69px\]{
  top: 69px;
}

#app .top-\[72px\]{
  top: 72px;
}

#app .top-full{
  top: 100%;
}

#app .z-10{
  z-index: 10;
}

#app .-m-0\.5{
  margin: -0.125rem;
}

#app .-m-6{
  margin: -1.5rem;
}

#app .m-0\.5{
  margin: 0.125rem;
}

#app .-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

#app .-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

#app .-my-0\.5{
  margin-top: -0.125rem;
  margin-bottom: -0.125rem;
}

#app .-my-1{
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}

#app .-my-3{
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}

#app .mx-auto{
  margin-left: auto;
  margin-right: auto;
}

#app .my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#app .my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#app .mb-0{
  margin-bottom: 0px;
}

#app .mb-1{
  margin-bottom: 0.25rem;
}

#app .mb-10{
  margin-bottom: 2.5rem;
}

#app .mb-2{
  margin-bottom: 0.5rem;
}

#app .mb-3{
  margin-bottom: 0.75rem;
}

#app .mb-4{
  margin-bottom: 1rem;
}

#app .mb-6{
  margin-bottom: 1.5rem;
}

#app .mb-8{
  margin-bottom: 2rem;
}

#app .ml-auto{
  margin-left: auto;
}

#app .mt-1{
  margin-top: 0.25rem;
}

#app .mt-1\.5{
  margin-top: 0.375rem;
}

#app .mt-10{
  margin-top: 2.5rem;
}

#app .mt-2{
  margin-top: 0.5rem;
}

#app .mt-4{
  margin-top: 1rem;
}

#app .mt-5{
  margin-top: 1.25rem;
}

#app .mt-6{
  margin-top: 1.5rem;
}

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

#app .box-content{
  box-sizing: content-box;
}

#app .line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

#app .line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#app .block{
  display: block;
}

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

#app .inline{
  display: inline;
}

#app .flex{
  display: flex;
}

#app .inline-flex{
  display: inline-flex;
}

#app .table{
  display: table;
}

#app .grid{
  display: grid;
}

#app .contents{
  display: contents;
}

#app .hidden{
  display: none;
}

#app .aspect-square{
  aspect-ratio: 1 / 1;
}

#app .h-0{
  height: 0px;
}

#app .h-1\.5{
  height: 0.375rem;
}

#app .h-10{
  height: 2.5rem;
}

#app .h-12{
  height: 3rem;
}

#app .h-14{
  height: 3.5rem;
}

#app .h-16{
  height: 4rem;
}

#app .h-2{
  height: 0.5rem;
}

#app .h-20{
  height: 5rem;
}

#app .h-24{
  height: 6rem;
}

#app .h-3{
  height: 0.75rem;
}

#app .h-32{
  height: 8rem;
}

#app .h-36{
  height: 9rem;
}

#app .h-4{
  height: 1rem;
}

#app .h-5{
  height: 1.25rem;
}

#app .h-6{
  height: 1.5rem;
}

#app .h-7{
  height: 1.75rem;
}

#app .h-8{
  height: 2rem;
}

#app .h-\[112px\]{
  height: 112px;
}

#app .h-\[120px\]{
  height: 120px;
}

#app .h-\[126px\]{
  height: 126px;
}

#app .h-\[148px\]{
  height: 148px;
}

#app .h-\[160px\]{
  height: 160px;
}

#app .h-\[200px\]{
  height: 200px;
}

#app .h-\[320px\]{
  height: 320px;
}

#app .h-\[58px\]{
  height: 58px;
}

#app .h-\[72px\]{
  height: 72px;
}

#app .h-\[92px\]{
  height: 92px;
}

#app .h-auto{
  height: auto;
}

#app .h-full{
  height: 100%;
}

#app .max-h-\[280px\]{
  max-height: 280px;
}

#app .max-h-\[300px\]{
  max-height: 300px;
}

#app .max-h-\[320px\]{
  max-height: 320px;
}

#app .max-h-\[400px\]{
  max-height: 400px;
}

#app .max-h-\[70vh\]{
  max-height: 70vh;
}

#app .max-h-full{
  max-height: 100%;
}

#app .min-h-\[240px\]{
  min-height: 240px;
}

#app .min-h-\[300px\]{
  min-height: 300px;
}

#app .min-h-\[450px\]{
  min-height: 450px;
}

#app .min-h-full{
  min-height: 100%;
}

#app .min-h-screen{
  min-height: 100vh;
}

#app .w-0{
  width: 0px;
}

#app .w-1\/3{
  width: 33.333333%;
}

#app .w-1\/4{
  width: 25%;
}

#app .w-10{
  width: 2.5rem;
}

#app .w-12{
  width: 3rem;
}

#app .w-14{
  width: 3.5rem;
}

#app .w-16{
  width: 4rem;
}

#app .w-2{
  width: 0.5rem;
}

#app .w-20{
  width: 5rem;
}

#app .w-24{
  width: 6rem;
}

#app .w-3{
  width: 0.75rem;
}

#app .w-3\/5{
  width: 60%;
}

#app .w-32{
  width: 8rem;
}

#app .w-4{
  width: 1rem;
}

#app .w-4\/5{
  width: 80%;
}

#app .w-5{
  width: 1.25rem;
}

#app .w-6{
  width: 1.5rem;
}

#app .w-7{
  width: 1.75rem;
}

#app .w-\[104px\]{
  width: 104px;
}

#app .w-\[116px\]{
  width: 116px;
}

#app .w-\[120px\]{
  width: 120px;
}

#app .w-\[132px\]{
  width: 132px;
}

#app .w-\[154px\]{
  width: 154px;
}

#app .w-\[176px\]{
  width: 176px;
}

#app .w-\[18\%\]{
  width: 18%;
}

#app .w-\[190px\]{
  width: 190px;
}

#app .w-\[256px\]{
  width: 256px;
}

#app .w-\[44\%\]{
  width: 44%;
}

#app .w-\[44px\]{
  width: 44px;
}

#app .w-\[52\%\]{
  width: 52%;
}

#app .w-\[60px\]{
  width: 60px;
}

#app .w-\[64\%\]{
  width: 64%;
}

#app .w-\[70\%\]{
  width: 70%;
}

#app .w-\[74px\]{
  width: 74px;
}

#app .w-\[76px\]{
  width: 76px;
}

#app .w-\[78\%\]{
  width: 78%;
}

#app .w-\[84\%\]{
  width: 84%;
}

#app .w-\[84px\]{
  width: 84px;
}

#app .w-\[88\%\]{
  width: 88%;
}

#app .w-\[92\%\]{
  width: 92%;
}

#app .w-\[96\%\]{
  width: 96%;
}

#app .w-auto{
  width: auto;
}

#app .w-full{
  width: 100%;
}

#app .w-px{
  width: 1px;
}

#app .min-w-0{
  min-width: 0px;
}

#app .max-w-2xl{
  max-width: 42rem;
}

#app .max-w-3xl{
  max-width: 48rem;
}

#app .max-w-\[14px\]{
  max-width: 14px;
}

#app .max-w-\[22px\]{
  max-width: 22px;
}

#app .max-w-\[240px\]{
  max-width: 240px;
}

#app .max-w-\[26px\]{
  max-width: 26px;
}

#app .max-w-\[34px\]{
  max-width: 34px;
}

#app .max-w-\[85\%\]{
  max-width: 85%;
}

#app .max-w-\[92\%\]{
  max-width: 92%;
}

#app .max-w-\[960px\]{
  max-width: 960px;
}

#app .max-w-full{
  max-width: 100%;
}

#app .max-w-prose{
  max-width: 65ch;
}

#app .flex-1{
  flex: 1 1 0%;
}

#app .flex-none{
  flex: none;
}

#app .flex-shrink-0{
  flex-shrink: 0;
}

#app .flex-grow{
  flex-grow: 1;
}

#app .-translate-x-20{
  --tw-translate-x: -5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .-translate-y-1{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .-translate-y-2{
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .translate-x-2{
  --tw-translate-x: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .translate-x-2\.5{
  --tw-translate-x: 0.625rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .translate-x-20{
  --tw-translate-x: 5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .translate-y-1\.5{
  --tw-translate-y: 0.375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .rotate-2{
  --tw-rotate: 2deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .cursor-pointer{
  cursor: pointer;
}

#app .resize{
  resize: both;
}

#app .list-disc{
  list-style-type: disc;
}

#app .grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#app .grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#app .grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#app .flex-row{
  flex-direction: row;
}

#app .flex-col{
  flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

#app .gap-0\.5{
  gap: 0.125rem;
}

#app .gap-1{
  gap: 0.25rem;
}

#app .gap-1\.5{
  gap: 0.375rem;
}

#app .gap-10{
  gap: 2.5rem;
}

#app .gap-2{
  gap: 0.5rem;
}

#app .gap-2\.5{
  gap: 0.625rem;
}

#app .gap-3{
  gap: 0.75rem;
}

#app .gap-4{
  gap: 1rem;
}

#app .gap-5{
  gap: 1.25rem;
}

#app .gap-6{
  gap: 1.5rem;
}

#app .gap-8{
  gap: 2rem;
}

#app .gap-x-12{
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

#app .gap-x-14{
  -moz-column-gap: 3.5rem;
       column-gap: 3.5rem;
}

#app .gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

#app .gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

#app .gap-y-1{
  row-gap: 0.25rem;
}

#app .gap-y-3{
  row-gap: 0.75rem;
}

#app .gap-y-4{
  row-gap: 1rem;
}

#app .gap-y-6{
  row-gap: 1.5rem;
}

#app :is(.space-x-1 > :not([hidden]) ~ :not([hidden])){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

#app :is(.space-x-2 > :not([hidden]) ~ :not([hidden])){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

#app :is(.space-x-3 > :not([hidden]) ~ :not([hidden])){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

#app :is(.space-x-4 > :not([hidden]) ~ :not([hidden])){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

#app :is(.space-x-8 > :not([hidden]) ~ :not([hidden])){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

#app :is(.space-y-0\.5 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-1 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-1\.5 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-10 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-2 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-3 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-4 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-5 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-6 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-7 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

#app :is(.space-y-8 > :not([hidden]) ~ :not([hidden])){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

#app :is(.divide-y > :not([hidden]) ~ :not([hidden])){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

#app :is(.divide-base-200 > :not([hidden]) ~ :not([hidden])){
  --tw-divide-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-divide-opacity, 1));
}

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

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

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

#app .overflow-hidden{
  overflow: hidden;
}

#app .truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .whitespace-nowrap{
  white-space: nowrap;
}

#app .rounded{
  border-radius: 0.25rem;
}

#app .rounded-2xl{
  border-radius: 1rem;
}

#app .rounded-full{
  border-radius: 9999px;
}

#app .rounded-lg{
  border-radius: 0.5rem;
}

#app .rounded-none{
  border-radius: 0px;
}

#app .rounded-sm{
  border-radius: 0.125rem;
}

#app .rounded-xl{
  border-radius: 0.75rem;
}

#app .rounded-t-none{
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#app .rounded-bl-sm{
  border-bottom-left-radius: 0.125rem;
}

#app .rounded-tl-none{
  border-top-left-radius: 0px;
}

#app .border{
  border-width: 1px;
}

#app .border-0{
  border-width: 0px;
}

#app .border-b{
  border-bottom-width: 1px;
}

#app .border-t{
  border-top-width: 1px;
}

#app .border-dashed{
  border-style: dashed;
}

#app .border-accent\/60{
  border-color: rgb(117 249 233 / 0.6);
}

#app .border-accent\/80{
  border-color: rgb(117 249 233 / 0.8);
}

#app .border-accent\/85{
  border-color: rgb(117 249 233 / 0.85);
}

#app .border-base-200{
  --tw-border-opacity: 1;
  border-color: rgb(237 242 247 / var(--tw-border-opacity, 1));
}

#app .border-black\/10{
  border-color: rgb(0 0 0 / 0.1);
}

#app .border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(210 214 220 / var(--tw-border-opacity, 1));
}

#app .border-primary-300\/90{
  border-color: rgb(148 136 248 / 0.9);
}

#app .border-primary\/50{
  border-color: rgb(84 64 244 / 0.5);
}

#app .border-secondary\/80{
  border-color: rgb(255 191 48 / 0.8);
}

#app .border-secondary\/85{
  border-color: rgb(255 191 48 / 0.85);
}

#app .border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}

#app .border-white\/15{
  border-color: rgb(255 255 255 / 0.15);
}

#app .border-white\/25{
  border-color: rgb(255 255 255 / 0.25);
}

#app .border-white\/30{
  border-color: rgb(255 255 255 / 0.3);
}

#app .border-white\/40{
  border-color: rgb(255 255 255 / 0.4);
}

#app .border-white\/45{
  border-color: rgb(255 255 255 / 0.45);
}

#app .bg-accent{
  --tw-bg-opacity: 1;
  background-color: rgb(117 249 233 / var(--tw-bg-opacity, 1));
}

#app .bg-accent\/10{
  background-color: rgb(117 249 233 / 0.1);
}

#app .bg-base-100{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

#app .bg-base-100\/60{
  background-color: rgb(248 250 252 / 0.6);
}

#app .bg-base-200{
  --tw-bg-opacity: 1;
  background-color: rgb(237 242 247 / var(--tw-bg-opacity, 1));
}

#app .bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
}

#app .bg-primary-300\/15{
  background-color: rgb(148 136 248 / 0.15);
}

#app .bg-secondary{
  --tw-bg-opacity: 1;
  background-color: rgb(255 191 48 / var(--tw-bg-opacity, 1));
}

#app .bg-secondary\/10{
  background-color: rgb(255 191 48 / 0.1);
}

#app .bg-transparent{
  background-color: transparent;
}

#app .bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#app .bg-white\/20{
  background-color: rgb(255 255 255 / 0.2);
}

#app .bg-white\/\[0\.05\]{
  background-color: rgb(255 255 255 / 0.05);
}

#app .bg-white\/\[0\.08\]{
  background-color: rgb(255 255 255 / 0.08);
}

#app .bg-contain{
  background-size: contain;
}

#app .fill-current{
  fill: currentColor;
}

#app .fill-primary{
  fill: #5440F4;
}

#app .fill-white{
  fill: #ffffff;
}

#app .object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

#app .object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

#app .object-bottom{
  -o-object-position: bottom;
     object-position: bottom;
}

#app .object-center{
  -o-object-position: center;
     object-position: center;
}

#app .object-left{
  -o-object-position: left;
     object-position: left;
}

#app .p-0{
  padding: 0px;
}

#app .p-2{
  padding: 0.5rem;
}

#app .p-3{
  padding: 0.75rem;
}

#app .p-4{
  padding: 1rem;
}

#app .p-5{
  padding: 1.25rem;
}

#app .p-6{
  padding: 1.5rem;
}

#app .px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

#app .px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

#app .px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#app .px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

#app .px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

#app .px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#app .px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

#app .py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

#app .py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

#app .py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#app .py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

#app .py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

#app .py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

#app .py-14{
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

#app .py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#app .py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#app .py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#app .py-36{
  padding-top: 9rem;
  padding-bottom: 9rem;
}

#app .py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#app .py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#app .py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#app .pb-0{
  padding-bottom: 0px;
}

#app .pb-10{
  padding-bottom: 2.5rem;
}

#app .pb-12{
  padding-bottom: 3rem;
}

#app .pb-14{
  padding-bottom: 3.5rem;
}

#app .pb-16{
  padding-bottom: 4rem;
}

#app .pb-4{
  padding-bottom: 1rem;
}

#app .pb-5{
  padding-bottom: 1.25rem;
}

#app .pb-6{
  padding-bottom: 1.5rem;
}

#app .pb-8{
  padding-bottom: 2rem;
}

#app .pl-2{
  padding-left: 0.5rem;
}

#app .pl-3{
  padding-left: 0.75rem;
}

#app .pt-0{
  padding-top: 0px;
}

#app .pt-1{
  padding-top: 0.25rem;
}

#app .pt-10{
  padding-top: 2.5rem;
}

#app .pt-16{
  padding-top: 4rem;
}

#app .pt-2{
  padding-top: 0.5rem;
}

#app .pt-3{
  padding-top: 0.75rem;
}

#app .pt-3\.5{
  padding-top: 0.875rem;
}

#app .pt-4{
  padding-top: 1rem;
}

#app .pt-8{
  padding-top: 2rem;
}

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

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

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

#app .font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#app .text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

#app .text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

#app .text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#app .text-xl{
  font-size: 1.25rem;
  line-height: 2rem;
}

#app .text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

#app .font-bold{
  font-weight: 700;
}

#app .font-semibold{
  font-weight: 600;
}

#app .uppercase{
  text-transform: uppercase;
}

#app .capitalize{
  text-transform: capitalize;
}

#app .tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

#app .tracking-tight{
  letter-spacing: -0.025em;
}

#app .tracking-wide{
  letter-spacing: 0.025em;
}

#app .text-accent{
  --tw-text-opacity: 1;
  color: rgb(117 249 233 / var(--tw-text-opacity, 1));
}

#app .text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

#app .text-error{
  --tw-text-opacity: 1;
  color: rgb(245 101 101 / var(--tw-text-opacity, 1));
}

#app .text-error\/85{
  color: rgb(245 101 101 / 0.85);
}

#app .text-gray{
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}

#app .text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(210 214 220 / var(--tw-text-opacity, 1));
}

#app .text-gray\/60{
  color: rgb(74 85 104 / 0.6);
}

#app .text-preview-1{
  --tw-text-opacity: 1;
  color: rgb(53 40 153 / var(--tw-text-opacity, 1));
}

#app .text-preview-2{
  --tw-text-opacity: 1;
  color: rgb(73 157 255 / var(--tw-text-opacity, 1));
}

#app .text-preview-3{
  --tw-text-opacity: 1;
  color: rgb(245 101 101 / var(--tw-text-opacity, 1));
}

#app .text-preview-4{
  --tw-text-opacity: 1;
  color: rgb(242 167 0 / var(--tw-text-opacity, 1));
}

#app .text-preview-5{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

#app .text-primary{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

#app .text-primary-300{
  --tw-text-opacity: 1;
  color: rgb(148 136 248 / var(--tw-text-opacity, 1));
}

#app .text-primary-600{
  --tw-text-opacity: 1;
  color: rgb(53 40 153 / var(--tw-text-opacity, 1));
}

#app .text-secondary{
  --tw-text-opacity: 1;
  color: rgb(255 191 48 / var(--tw-text-opacity, 1));
}

#app .text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

#app .text-white\/45{
  color: rgb(255 255 255 / 0.45);
}

#app .text-white\/50{
  color: rgb(255 255 255 / 0.5);
}

#app .text-white\/60{
  color: rgb(255 255 255 / 0.6);
}

#app .text-white\/70{
  color: rgb(255 255 255 / 0.7);
}

#app .text-white\/80{
  color: rgb(255 255 255 / 0.8);
}

#app .text-white\/85{
  color: rgb(255 255 255 / 0.85);
}

#app .underline{
  text-decoration-line: underline;
}

#app .overline{
  text-decoration-line: overline;
}

#app .line-through{
  text-decoration-line: line-through;
}

#app .underline-offset-4{
  text-underline-offset: 4px;
}

#app .opacity-0{
  opacity: 0;
}

#app .opacity-45{
  opacity: 0.45;
}

#app .opacity-50{
  opacity: 0.5;
}

#app .opacity-70{
  opacity: 0.7;
}

#app .shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#app .shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#app .shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#app .shadow-black\/40{
  --tw-shadow-color: rgb(0 0 0 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

#app .shadow-primary-600\/20{
  --tw-shadow-color: rgb(53 40 153 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

#app .outline{
  outline-style: solid;
}

#app .ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

#app .ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

#app .ring-white\/10{
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

#app .ring-white\/20{
  --tw-ring-color: rgb(255 255 255 / 0.2);
}

#app .filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

#app .transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#app .transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#app .transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#app .duration-200{
  transition-duration: 200ms;
}

#app .\[text-wrap\:balance\]{
  text-wrap: balance;
}

button, a, input, select, textarea{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.wrapper{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1024px){
  .wrapper{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1280px){
  .wrapper{
    box-sizing: content-box;
  }
}

.wrapper--md{
  max-width: 960px;
}

@media (min-width: 1024px){
  .wrapper--md{
    box-sizing: content-box;
  }
}

.wrapper--sm{
  box-sizing: border-box;
}

@media (min-width: 1024px){
  .wrapper--sm{
    max-width: 768px;
  }
}

.wrapper--xl{
  margin-left: auto;
  margin-right: auto;
  max-width: 1536px;
  padding: 0px;
}

@media (min-width: 1024px){
  .wrapper--half{
    max-width: 640px;
  }

  .wrapper--half:first-child{
    margin-left: auto;
    margin-right: 0px;
    padding-right: 0px;
  }

  .wrapper--half:last-child{
    margin-right: auto;
    margin-left: 0px;
    padding-left: 0px;
  }
}

::view-transition-old(*) {
  inline-size: initial;
}

img,
svg{
  view-transition-class: image;
}

::view-transition-old(.image) {
  animation: none;
}

::view-transition-new(.image) {
  animation: fade-in 0.05s linear;
}

@keyframes fade-in {
  from{
    opacity: 0;
  }
}

#app .hover\:-translate-y-0\.5:hover{
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app .hover\:border-primary-200:hover{
  --tw-border-opacity: 1;
  border-color: rgb(191 183 251 / var(--tw-border-opacity, 1));
}

#app .hover\:border-white\/25:hover{
  border-color: rgb(255 255 255 / 0.25);
}

#app .hover\:bg-base-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

#app .hover\:bg-white\/10:hover{
  background-color: rgb(255 255 255 / 0.1);
}

#app .hover\:text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

#app .hover\:underline:hover{
  text-decoration-line: underline;
}

#app .hover\:opacity-100:hover{
  opacity: 1;
}

#app .hover\:shadow:hover{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#app .hover\:shadow-xl:hover{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#app :is(.group:hover .group-hover\:h-\[72px\]){
  height: 72px;
}

#app :is(.group:hover .group-hover\:-translate-y-0\.5){
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app :is(.group:hover .group-hover\:translate-x-0\.5){
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app :is(.group:hover .group-hover\:translate-y-0\.5){
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#app :is(.group:hover .group-hover\:text-primary){
  --tw-text-opacity: 1;
  color: rgb(84 64 244 / var(--tw-text-opacity, 1));
}

#app :is(.group:hover .group-hover\:opacity-100){
  opacity: 1;
}

#app :is(.group:hover .group-hover\:shadow-lg){
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

#app :is(.group.active .group-\[\.active\]\:h-\[72px\]){
  height: 72px;
}

#app :is(.group.active .group-\[\.active\]\:opacity-100){
  opacity: 1;
}

#app :is(.peer:checked ~ .peer-checked\:block){
  display: block;
}

#app :is(.peer:checked ~ .peer-checked\:hidden){
  display: none;
}

#app :is(.peer:checked ~ .peer-checked\:h-\[360px\]){
  height: 360px;
}

#app :is(.peer:checked ~ .peer-checked\:shadow-none){
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media not all and (min-width: 1280px){
  #app .max-xl\:flex-col{
    flex-direction: column;
  }

  #app :is(.max-xl\:space-y-6 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }
}

@media not all and (min-width: 1024px){
  #app .max-lg\:absolute{
    position: absolute;
  }

  #app .max-lg\:order-first{
    order: -9999;
  }

  #app .max-lg\:hidden{
    display: none;
  }

  #app .max-lg\:w-1\/2{
    width: 50%;
  }

  #app .max-lg\:max-w-md{
    max-width: 28rem;
  }

  #app .max-lg\:flex-col{
    flex-direction: column;
  }

  #app .max-lg\:items-center{
    align-items: center;
  }

  #app :is(.max-lg\:space-y-1 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
  }

  #app :is(.max-lg\:space-y-2 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  #app :is(.max-lg\:space-y-4 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  #app .max-lg\:bg-primary{
    --tw-bg-opacity: 1;
    background-color: rgb(84 64 244 / var(--tw-bg-opacity, 1));
  }

  #app .max-lg\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  #app .max-lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #app .max-lg\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #app .max-lg\:pt-0{
    padding-top: 0px;
  }

  #app .max-lg\:pt-4{
    padding-top: 1rem;
  }

  #app .max-lg\:text-center{
    text-align: center;
  }
}

@media not all and (min-width: 768px){
  #app .max-md\:hidden{
    display: none;
  }

  #app .max-md\:flex-col{
    flex-direction: column;
  }

  #app .max-md\:items-center{
    align-items: center;
  }

  #app :is(.max-md\:space-y-2 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  #app :is(.max-md\:space-y-4 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  #app .max-md\:text-center{
    text-align: center;
  }
}

@media not all and (min-width: 640px){
  #app .max-sm\:order-first{
    order: -9999;
  }

  #app .max-sm\:mb-1{
    margin-bottom: 0.25rem;
  }

  #app .max-sm\:ml-2{
    margin-left: 0.5rem;
  }

  #app .max-sm\:mr-1{
    margin-right: 0.25rem;
  }

  #app .max-sm\:mt-1{
    margin-top: 0.25rem;
  }

  #app .max-sm\:block{
    display: block;
  }

  #app .max-sm\:hidden{
    display: none;
  }

  #app .max-sm\:w-2\/3{
    width: 66.666667%;
  }

  #app .max-sm\:w-full{
    width: 100%;
  }

  #app .max-sm\:flex-grow{
    flex-grow: 1;
  }

  #app .max-sm\:flex-col{
    flex-direction: column;
  }

  #app .max-sm\:flex-wrap{
    flex-wrap: wrap;
  }

  #app :is(.max-sm\:space-y-2 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }

  #app :is(.max-sm\:space-y-3 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  }

  #app :is(.max-sm\:space-y-4 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }

  #app .max-sm\:text-center{
    text-align: center;
  }
}

@media (min-width: 640px){
  #app .sm\:my-2{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  #app .sm\:mb-12{
    margin-bottom: 3rem;
  }

  #app .sm\:flex{
    display: flex;
  }

  #app .sm\:hidden{
    display: none;
  }

  #app .sm\:w-1\/2{
    width: 50%;
  }

  #app .sm\:w-2\/3{
    width: 66.666667%;
  }

  #app .sm\:w-auto{
    width: auto;
  }

  #app .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app .sm\:items-center{
    align-items: center;
  }

  #app .sm\:gap-12{
    gap: 3rem;
  }

  #app :is(.sm\:space-x-0 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(0px * var(--tw-space-x-reverse));
    margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
  }

  #app :is(.sm\:space-x-1 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
  }

  #app :is(.sm\:space-x-4 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  #app .sm\:object-contain{
    -o-object-fit: contain;
       object-fit: contain;
  }

  #app .sm\:p-6{
    padding: 1.5rem;
  }

  #app .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #app .sm\:pb-20{
    padding-bottom: 5rem;
  }
}

@media (min-width: 768px){
  #app .md\:flex{
    display: flex;
  }

  #app .md\:hidden{
    display: none;
  }

  #app .md\:h-\[250px\]{
    height: 250px;
  }

  #app .md\:h-\[300px\]{
    height: 300px;
  }

  #app .md\:h-\[360px\]{
    height: 360px;
  }

  #app .md\:min-h-\[300px\]{
    min-height: 300px;
  }

  #app .md\:w-1\/2{
    width: 50%;
  }

  #app .md\:w-\[280px\]{
    width: 280px;
  }

  #app .md\:w-\[400px\]{
    width: 400px;
  }

  #app .md\:w-full{
    width: 100%;
  }

  #app .md\:max-w-screen-md{
    max-width: 768px;
  }

  #app .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app .md\:items-start{
    align-items: flex-start;
  }

  #app :is(.md\:space-x-6 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  #app .md\:object-cover{
    -o-object-fit: cover;
       object-fit: cover;
  }

  #app .md\:pt-12{
    padding-top: 3rem;
  }
}

@media (min-width: 1024px){
  #app .lg\:static{
    position: static;
  }

  #app .lg\:sticky{
    position: sticky;
  }

  #app .lg\:top-10{
    top: 2.5rem;
  }

  #app .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  #app .lg\:col-span-3{
    grid-column: span 3 / span 3;
  }

  #app .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }

  #app .lg\:col-span-7{
    grid-column: span 7 / span 7;
  }

  #app .lg\:row-span-2{
    grid-row: span 2 / span 2;
  }

  #app .lg\:-mx-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  #app .lg\:-mx-7{
    margin-left: -1.75rem;
    margin-right: -1.75rem;
  }

  #app .lg\:mt-14{
    margin-top: 3.5rem;
  }

  #app .lg\:flex{
    display: flex;
  }

  #app .lg\:grid{
    display: grid;
  }

  #app .lg\:hidden{
    display: none;
  }

  #app .lg\:h-\[400px\]{
    height: 400px;
  }

  #app .lg\:h-auto{
    height: auto;
  }

  #app .lg\:h-full{
    height: 100%;
  }

  #app .lg\:max-h-\[360px\]{
    max-height: 360px;
  }

  #app .lg\:min-h-\[420px\]{
    min-height: 420px;
  }

  #app .lg\:min-h-\[460px\]{
    min-height: 460px;
  }

  #app .lg\:w-1\/2{
    width: 50%;
  }

  #app .lg\:w-1\/3{
    width: 33.333333%;
  }

  #app .lg\:w-1\/4{
    width: 25%;
  }

  #app .lg\:w-2\/3{
    width: 66.666667%;
  }

  #app .lg\:w-\[400px\]{
    width: 400px;
  }

  #app .lg\:w-full{
    width: 100%;
  }

  #app .lg\:max-w-3xl{
    max-width: 48rem;
  }

  #app .lg\:max-w-\[280px\]{
    max-width: 280px;
  }

  #app .lg\:flex-grow{
    flex-grow: 1;
  }

  #app .lg\:grow-0{
    flex-grow: 0;
  }

  #app .lg\:animate-none{
    animation: none;
  }

  #app .lg\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  #app .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #app .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #app .lg\:items-end{
    align-items: flex-end;
  }

  #app .lg\:items-center{
    align-items: center;
  }

  #app .lg\:justify-end{
    justify-content: flex-end;
  }

  #app .lg\:justify-between{
    justify-content: space-between;
  }

  #app .lg\:gap-10{
    gap: 2.5rem;
  }

  #app .lg\:gap-12{
    gap: 3rem;
  }

  #app .lg\:gap-14{
    gap: 3.5rem;
  }

  #app .lg\:gap-16{
    gap: 4rem;
  }

  #app .lg\:gap-2{
    gap: 0.5rem;
  }

  #app .lg\:gap-6{
    gap: 1.5rem;
  }

  #app .lg\:gap-y-8{
    row-gap: 2rem;
  }

  #app :is(.lg\:space-x-1 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
  }

  #app :is(.lg\:space-x-4 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  #app :is(.lg\:space-x-8 > :not([hidden]) ~ :not([hidden])){
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  #app :is(.lg\:space-y-0 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  #app :is(.lg\:space-y-16 > :not([hidden]) ~ :not([hidden])){
    --tw-space-y-reverse: 0;
    margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4rem * var(--tw-space-y-reverse));
  }

  #app .lg\:rounded-2xl{
    border-radius: 1rem;
  }

  #app .lg\:border{
    border-width: 1px;
  }

  #app .lg\:object-contain{
    -o-object-fit: contain;
       object-fit: contain;
  }

  #app .lg\:p-10{
    padding: 2.5rem;
  }

  #app .lg\:px-24{
    padding-left: 6rem;
    padding-right: 6rem;
  }

  #app .lg\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  #app .lg\:py-14{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  #app .lg\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  #app .lg\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  #app .lg\:py-44{
    padding-top: 11rem;
    padding-bottom: 11rem;
  }

  #app .lg\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  #app .lg\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #app .lg\:pb-10{
    padding-bottom: 2.5rem;
  }

  #app .lg\:pb-16{
    padding-bottom: 4rem;
  }

  #app .lg\:pb-2{
    padding-bottom: 0.5rem;
  }

  #app .lg\:pb-20{
    padding-bottom: 5rem;
  }

  #app .lg\:pb-24{
    padding-bottom: 6rem;
  }

  #app .lg\:pl-20{
    padding-left: 5rem;
  }

  #app .lg\:pt-10{
    padding-top: 2.5rem;
  }

  #app .lg\:pt-14{
    padding-top: 3.5rem;
  }

  #app .lg\:pt-24{
    padding-top: 6rem;
  }

  #app .lg\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  #app .lg\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  #app .lg\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  #app .lg\:text-xl{
    font-size: 1.25rem;
    line-height: 2rem;
  }

  #app .lg\:shadow-xl{
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  #app .lg\:shadow-primary-600\/10{
    --tw-shadow-color: rgb(53 40 153 / 0.1);
    --tw-shadow: var(--tw-shadow-colored);
  }

  #app .lg\:ring-1{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  }

  #app .lg\:ring-black\/5{
    --tw-ring-color: rgb(0 0 0 / 0.05);
  }

  #app .odd\:lg\:flex-row-reverse:nth-child(odd){
    flex-direction: row-reverse;
  }
}

@media (min-width: 1280px){
  #app .xl\:col-span-3{
    grid-column: span 3 / span 3;
  }

  #app .xl\:mb-16{
    margin-bottom: 4rem;
  }

  #app .xl\:min-h-\[200px\]{
    min-height: 200px;
  }

  #app .xl\:min-h-screen{
    min-height: 100vh;
  }

  #app .xl\:w-1\/2{
    width: 50%;
  }

  #app .xl\:w-1\/3{
    width: 33.333333%;
  }

  #app .xl\:w-2\/3{
    width: 66.666667%;
  }

  #app .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #app .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #app .xl\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }

  #app .first\:xl\:col-span-2:first-child{
    grid-column: span 2 / span 2;
  }

  #app .first\:xl\:row-span-2:first-child{
    grid-row: span 2 / span 2;
  }

  #app .only\:xl\:col-span-2:only-child{
    grid-column: span 2 / span 2;
  }
}