@import "fonts.css";
@import url('https://cdn.neoloop.cz/fonts/FontAwesome/FontAwesome.css');
:root {
  --primary-color: #00FF60;
  --secondary-color: #0265DC;
}
html {
  scroll-behavior: smooth;
}
body {
  position: relative;
  background: #0D104C;
}
body:before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 255, 0.25);
  top: 0;
  left: -15rem;
  height: 30rem;
  width: 60rem;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 10;
}
@media (max-width: 991.98px) {
  body:before {
    display: none;
  }
}
section > div {
  position: relative;
  z-index: 20;
}
p {
  color: #B1B1B1;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: .5px;
  font-family: "darkmode-on", sans-serif;
  font-weight: 400;
}
img {
  user-select: none;
  -webkit-user-drag: none;
}
/* TITLES */
h1, h2, h3, h4, h5, h6 {
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  color: white;
  margin-bottom: 0;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  color: var(--primary-color);
}
h1 {
  font-size: 4rem;
}
h2 {
  font-size: 3rem;
  margin-bottom: .75rem;
}
@media (max-width: 991.98px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2rem;
    margin-bottom: .5rem;
  }
}
/* -/ TITLES */
.text-primary {
  color: var(--primary-color) !important;
}
/* ACCORDION */
.accordion .accordion-item {
  border-radius: 0;
  border: 0;
  background-color: transparent;
}
.accordion .accordion-item:not(:last-child) {
  margin-bottom: 2.5rem;
}
.accordion .accordion-item .accordion-button {
  box-shadow: none;
  background-color: transparent;
  color: var(--secondary-color);
  transition: .1s linear;
  padding: 0 0 0 3.5rem;
  font-weight: 700;
}
.accordion .accordion-item .accordion-button.collapsed {
  color: #515356;
}
.accordion .accordion-item .accordion-button:after {
  position: absolute;
  margin-left: unset;
  top: 0;
  left: 1.25rem;
  transform: rotate(0);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjM0OCA0Ljc0Nkw3LjYwMiA3TDUuMzQ4IDkuMjU0TDYuMzQyIDEwLjI0OEw5LjYwNCA3TDYuMzQyIDMuNzUyTDUuMzQ4IDQuNzQ2Wk03IDEuNEMxMC4wOCAxLjQgMTIuNiAzLjkyIDEyLjYgN0MxMi42IDEwLjA4IDEwLjA4IDEyLjYgNyAxMi42QzMuOTIgMTIuNiAxLjQgMTAuMDggMS40IDdDMS40IDMuOTIgMy45MiAxLjQgNyAxLjRaTTcgMEMzLjEzNiAwIDAgMy4xMzYgMCA3QzAgMTAuODY0IDMuMTM2IDE0IDcgMTRDMTAuODY0IDE0IDE0IDEwLjg2NCAxNCA3QzE0IDMuMTM2IDEwLjg2NCAwIDcgMFoiIGZpbGw9IiMwMEZGNjAiLz4KPC9zdmc+Cg==");
  background-size: contain;
  transition: .1s linear;
  width: 1.15rem;
  height: 1.15rem;
}
.accordion .accordion-item .accordion-button.collapsed:after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjI1NCA1LjM0OEw3IDcuNjAyTDQuNzQ2IDUuMzQ4TDMuNzUyIDYuMzQyTDcgOS42MDRMMTAuMjQ4IDYuMzQyTDkuMjU0IDUuMzQ4Wk0xMi42IDdDMTIuNiAxMC4wOCAxMC4wOCAxMi42IDcgMTIuNkMzLjkyIDEyLjYgMS40IDEwLjA4IDEuNCA3QzEuNCAzLjkyIDMuOTIgMS40IDcgMS40QzEwLjA4IDEuNCAxMi42IDMuOTIgMTIuNiA3Wk0xNCA3QzE0IDMuMTM2IDEwLjg2NCAwIDcgMEMzLjEzNiAwIDAgMy4xMzYgMCA3QzAgMTAuODY0IDMuMTM2IDE0IDcgMTRDMTAuODY0IDE0IDE0IDEwLjg2NCAxNCA3WiIgZmlsbD0iIzA0NTNCMSIvPgo8L3N2Zz4K");
}
.accordion .accordion-body {
  padding: 1rem 4rem 0 3.5rem;
}
.accordion .accordion-body p {
  font-family: "darkmode-on", sans-serif;
  color: #333333;
  margin-bottom: 0;
}
/* -/ ACCORDION */
/* LIGHTBOX GALLERY */
.svelte-lightbox-thumbnail {
  aspect-ratio: 16/9 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  border-radius: .5rem !important;
}
.svelte-lightbox-body {
  max-height: unset !important;
  width: 80vw !important;
  height: 80vh !important;
  display: grid !important;
  place-items: center !important;
}
.svelte-lightbox-body > * {
  max-width: 100% !important;
  max-height: 80vh !important;
}
.svelte-lightbox-body .next-button {
  margin-left: 5rem !important;
}
.svelte-lightbox-body .next-button, .svelte-lightbox-body .previous-button {
  outline: none !important;
  margin: 0 3rem !important;
  filter: invert(100%) grayscale(1) drop-shadow(3px 0 2px rgb(0 0 0 / 0.4)) !important;
}
.svelte-lightbox-body .next-button:disabled, .svelte-lightbox-body .previous-button:disabled {
  display: none !important;
}
/* -/ LIGHTBOX GALLERY */
@keyframes skeletonLoading {
  0% {
    background-color: hsla(201, 20%, 80%, 0.3)
  }
  100% {
    background-color: hsla(204, 20%, 95%, 0.3)
  }
}
.skeleton {
  animation: skeletonLoading 1s linear infinite alternate;
  pointer-events: none;
  user-select: none;
}
.skeleton * {
  display: none;
}
canvas#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
/* FOOTER STRIPE */
.stripe {
  padding: 3.5rem 0;
  background: linear-gradient(180deg, #10131A 0%, #0D104C 100%);
  overflow: hidden;
  position: relative;
}
.stripe:before {
  content: '';
  position: absolute;
  background-color: rgba(0, 148, 255, .25);
  top: -10rem;
  left: -20rem;
  height: 30rem;
  width: 60rem;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 5;
}
.stripe:after {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 255, .2);
  top: -10rem;
  right: -5rem;
  height: 20rem;
  width: 20rem;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 5;
}
.stripe .stripe-inner span {
  z-index: 10;
  display: block;
  position: relative;
  font-size: 1.75rem;
  color: white;
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  margin: .5rem 0 0 0;
}
.stripe .stripe-inner .stripe-button {
  z-index: 10;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: end;
}
.stripe .stripe-inner .stripe-button button,
.stripe .stripe-inner .stripe-button a {
  padding: .75rem 4rem;
  display: flex;
  align-items: center;
}
@media (max-width: 991.98px) {
  .stripe {
    padding: 2rem 0;
  }
  .stripe .stripe-inner span {
    margin-bottom: 2rem;
  }
  .stripe .stripe-inner .stripe-button {
    justify-content: start;
  }
}
/* -/ FOOTER STRIPE */

/* Hero carousel — iframe embed slide (cropped to a specific area).
   Slide keeps its default 24rem height; embed fills the slide and the
   iframe is scaled by JS to "cover" the area, matching the image slides'
   background-size: cover behavior. */
/* Without carousel.js (the admin's visual editor leaves it out) the slides
   sit side by side; share the width equally so a map slide, whose content is
   all absolutely positioned, doesn't collapse to zero and lose its edit box.
   carousel.js sets each slide's flex and width inline, which wins on the site. */
.h-intro .intro-video .sc-carousel__pages-container > div {
  flex: 1 1 0;
  min-width: 0;
}
/* The compiled carousel styles every div in a slide as a full slide
   (.h-intro .intro-video .sc-carousel__pages-container div: 24rem, padding,
   gradient overlay). Embed slides and their parts opt out with selectors one
   step more specific, so the map fills the whole slide edge to edge. */
.h-intro .intro-video .sc-carousel__pages-container div.carousel-embed-slide {
  position: relative;
  padding: 0;
  background: #0d104c;
  background-size: cover;
  background-position: center;
  border-radius: 1.25rem;
}
/* Phones and tablets get the slide's picture, not the live graph (embed-fit.js
   mounts it on large screens only), so the "Live graph" tab stays hidden until
   the iframe is there. */
.h-intro .intro-video .sc-carousel__pages-container div.embed-crop[data-embed-src] ~ div.embed-hint {
  display: none;
}
.h-intro .intro-video .sc-carousel__pages-container div.carousel-embed-slide:before {
  display: none;
}
/* Thin green frame around the live map; softens while someone explores it. */
.h-intro .intro-video .sc-carousel__pages-container div.carousel-embed-slide:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(0, 255, 96, .6);
  pointer-events: none;
  transition: box-shadow .25s ease;
}
.h-intro .intro-video .sc-carousel__pages-container div.carousel-embed-slide:hover:after {
  box-shadow: inset 0 0 0 2px rgba(0, 255, 96, .25);
}
.h-intro .intro-video .sc-carousel__pages-container div.embed-crop {
  height: 100%;
  padding: 0;
}
.h-intro .intro-video .sc-carousel__pages-container div.embed-crop:before {
  display: none;
}
/* "Live graph" tab hanging from the top edge: tells visitors the slide is a
   map they can use. Clicks pass through; it slides up out of view while the
   pointer is on the slide. */
.h-intro .intro-video .sc-carousel__pages-container div.embed-hint {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 30;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: .55rem;
  height: auto;
  max-width: calc(100% - 2rem);
  overflow: visible;
  padding: .45rem 1rem .5rem .8rem;
  border-radius: 0 0 .9rem .9rem;
  background-color: var(--primary-color);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  color: #0d104c;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .25s ease, transform .25s ease;
}
.h-intro .intro-video .sc-carousel__pages-container div.embed-hint:before {
  display: none;
}
.h-intro .intro-video .sc-carousel__pages-container div.carousel-embed-slide:hover div.embed-hint {
  opacity: 0;
  transform: translate(-50%, -100%);
}
.embed-hint__icon {
  flex: 0 0 auto;
  animation: embed-hint-tap 2.4s ease-in-out infinite;
}
.embed-hint b {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.embed-hint__sep {
  opacity: .5;
}
.embed-hint__how--touch {
  display: none;
}
@media (hover: none) {
  .embed-hint__how--pointer {
    display: none;
  }
  .embed-hint__how--touch {
    display: inline;
  }
}
@keyframes embed-hint-tap {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(2px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .embed-hint__icon {
    animation: none;
  }
}
/* Carousel control bar (built by carousel.js), docked to the bottom edge the
   way the Live graph tab hangs from the top: previous, one segment per slide,
   next and Open. Same on every slide. */
.intro-video .carousel-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .4rem;
  width: min(26rem, calc(100% - 2rem));
  padding: .28125rem; /* 4.5px: the arrows and Open sit concentric with the corners */
  border-radius: .9rem .9rem 0 0;
  background-color: rgba(13, 16, 76, .92);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
  transform: translateX(-50%);
  cursor: default;
}
.carousel-bar__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem; /* as tall as Open */
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: .62rem; /* concentric with the bar's corner, like Open */
  background: transparent;
  color: white;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.carousel-bar__btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.carousel-bar__segs {
  flex: 1 1 auto;
  display: flex;
  gap: .3rem;
  min-width: 0;
}
.carousel-bar__seg {
  position: relative;
  flex: 1 1 0;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carousel-bar__seg::before,
.carousel-bar__seg i {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.carousel-bar__seg::before {
  right: 0;
  background-color: rgba(255, 255, 255, .2);
  transition: background-color .15s;
}
.carousel-bar__seg:hover::before {
  background-color: rgba(255, 255, 255, .4);
}
.carousel-bar__seg i {
  width: 0;
  background-color: var(--primary-color);
}
.carousel-bar__open {
  flex: 0 0 auto;
  display: inline-flex;
  box-sizing: border-box;
  height: 1.375rem; /* same as the arrows */
  align-items: center;
  gap: .35rem;
  padding: 0 .75rem;
  border: 1.5px solid var(--primary-color);
  border-radius: .62rem; /* bar radius (.9rem) minus the 4.5px inset: concentric with the bar's corner */
  color: var(--primary-color);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s, opacity .2s;
}
.carousel-bar__open:hover {
  background-color: var(--primary-color);
  color: #0d104c;
  text-decoration: none;
}
.carousel-bar__open.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.carousel-bar__btn:focus-visible,
.carousel-bar__seg:focus-visible,
.carousel-bar__open:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* A linked picture slide: the whole slide is the link. */
.intro-video .carousel-slide-link {
  position: absolute;
  inset: 0;
  z-index: 25;
}
/* Home: "Discover What MindShare Offers" starts at the bottom edge of the
   first screen (or lower, when the hero is taller), so nothing below the hero
   shows on load. The hero row sits in a grid track as tall as the screen less
   the section's top padding and the gap above Discover, both from the
   compiled home styles: 14rem + 14rem, 14rem + 10rem below 1200px, 8rem + 4rem
   when the columns stack. The row itself keeps its own height (align-self),
   so the track's extra space never stretches the hero. */
.h-intro .container {
  display: grid;
  /* One column the container's width: the carousel's strip of slides must
     not widen it. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(calc(100svh - 12rem), auto) auto;
}
.h-intro .container > .row:first-child {
  align-self: start;
}
@media (min-width: 992px) {
  .h-intro .container {
    grid-template-rows: minmax(calc(100svh - 28rem), auto) auto;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .h-intro .container {
    grid-template-rows: minmax(calc(100svh - 24rem), auto) auto;
  }
}
/* Home hero, side by side: the carousel is as tall as the text beside it
   (never under its 24rem), the title's capitals start level with its top edge
   and the button ends level with its bottom edge. */
@media (min-width: 992px) {
  .h-intro .row:first-child > :has(> .intro-video) {
    position: relative;
    min-height: 24rem;
  }
  .h-intro.svelte-19orlhe .row:first-child .intro-video.svelte-19orlhe {
    position: absolute;
    inset: 0 calc(var(--bs-gutter-x) * .5);
  }
  .h-intro .intro-video .sc-carousel__carousel-container,
  .h-intro .intro-video .sc-carousel__content-container,
  .h-intro .intro-video .sc-carousel__pages-window,
  .h-intro .intro-video .sc-carousel__pages-container,
  .h-intro .intro-video .sc-carousel__pages-container > div {
    height: 100%;
  }
  .h-intro.svelte-19orlhe .intro-content.svelte-19orlhe {
    justify-content: space-between;
  }
  /* AzoSans capitals start ~.14em below the top of a 1.2 line box. */
  .h-intro.svelte-19orlhe .intro-content.svelte-19orlhe h1 {
    margin-top: -.14em;
  }
  /* Use the column's width: the text wraps in fewer lines. */
  .h-intro.svelte-19orlhe .intro-content p.svelte-19orlhe {
    width: 30rem;
  }
}
/* A linked <img> (home "Discover" pictures): the link fills the picture's box. */
.image-link {
  display: block;
  height: 100%;
  border-radius: 1.25rem;
  transition: transform .15s linear, box-shadow .15s linear;
}
.image-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
}
.image-link:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.embed-crop {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.embed-crop iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1300px;
  border: 0;
  display: block;
  transform-origin: 0 0;
}

/* Features page: "Knowledge Graph Metadata" heading styled like the FAQ heading
   (the compiled .p-template h2 rule makes it small and navy). */
.p-template.svelte-kfmh1m h2.section-heading.svelte-kfmh1m {
  color: var(--secondary-color);
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
  .p-template.svelte-kfmh1m h2.section-heading.svelte-kfmh1m {
    font-size: 2rem;
  }
}

/* PAGE TITLES — pages added after the original site match its intro sections
   (Features, Services, About Us): 14rem above the h1 (8rem on tablet/phone)
   and the global h1 size, so titles sit at the same height on every page. */

/* Use Cases: the original centred the title against the image, which pushed
   it below the other pages' titles on wide screens. */
.learn.svelte-d43dvp .col-lg-6 .learn-content.svelte-d43dvp {
  justify-content: flex-start;
}
/* The intro spans the column like the title (the original capped it at 30rem). */
.learn.svelte-d43dvp .col-lg-6 .learn-content p.svelte-d43dvp {
  width: auto;
}
/* The 3D mark is sized to the title block and centred beside it; mt-lg-0
   dropped the row gutter, which lifted it above the title. */
.learn.svelte-d43dvp .learn-image.svelte-d43dvp {
  aspect-ratio: auto;
  height: 17rem;
}
@media (min-width: 992px) {
  .learn.svelte-d43dvp .row > .mt-lg-0 {
    align-self: center;
    margin-top: var(--bs-gutter-y) !important;
  }
}
@media (max-width: 991.98px) {
  .learn.svelte-d43dvp .learn-image.svelte-d43dvp {
    height: 12rem;
  }
}
/* Anchor targets (#use-cases, #templates, #contact) land below the fixed header. */
.use-cases-group,
.c-form {
  scroll-margin-top: 7rem;
}
/* Use cases, then templates: 6rem below the hero, 5rem between the groups. */
.learn .use-cases-group {
  margin-top: 5rem;
}
.learn .use-cases-list > :first-child {
  margin-top: 6rem;
}
@media (max-width: 991.98px) {
  .learn .use-cases-group {
    margin-top: 3.5rem;
  }
  .learn .use-cases-list > :first-child {
    margin-top: 4rem;
  }
}

/* USE-CASE ARTICLES */
.article-hero {
  padding: 14rem 0 4rem;
  position: relative;
}
@media (max-width: 991.98px) {
  .article-hero {
    padding-top: 8rem;
  }
}
/* Articles use the site's standard container so the title lines up with every
   other page; text without a map panel keeps a readable column on the left
   (like the Privacy and Metadata pages). The hero is two columns: title and
   intro beside the cover. */
.article-body:not(.article-body--with-map) .container > * {
  max-width: 56rem;
}
.article-title {
  margin-bottom: 1.5rem;
  color: white;
}
.article-cover {
  margin: 0;
}
.article-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
}
.article-cover .embed-crop,
.article-image .embed-crop {
  margin: 0 auto;
  border-radius: .75rem;
}
.article-intro {
  color: #B1B1B1;
  font-size: 1.15rem;
  line-height: 1.7rem;
  margin-bottom: 0;
}
.article-intro p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}
.article-intro p + p {
  margin-top: .85rem;
}
.article-intro b,
.article-intro strong {
  color: white;
}
.article-body {
  padding: 0 0 6rem;
}
.article-heading {
  color: white;
  margin: 3rem 0 1rem;
}
.article-heading--2 {
  font-size: 2rem;
  /* Each H2 section numbers its H3s from 01 again. */
  counter-reset: article-h3;
}
.article-heading--3 {
  font-size: 1.5rem;
  /* Green like the step numbers, so question-and-answer sections aren't all grey and white. */
  color: var(--primary-color);
  line-height: 1.25;
  position: relative;
  padding-left: 3.4rem;
  counter-increment: article-h3;
}
/* A numbered pill (01, 02 …) marks each question and each step; a bar beside a question read as a letter "I". */
/* The pill has a fixed height (--pill-h) and is centred on the capital letters of the
   title's first line: top = (first line height - pill height) / 2 - --cap-lift, because
   the line box also holds room for descenders below the capitals. */
.article-heading--3::before,
.article-steps__item::before {
  --pill-h: 1.5rem;
  --cap-lift: .1rem;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--pill-h);
  /* Left padding gains the letter-spacing that trails the last digit, so "01" sits in the
     middle; 2px on top lowers the digits, which AzoSans draws above the line box centre. */
  padding: 2px .55rem 0 calc(.55rem + .08em);
  color: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 999px;
  font-family: AzoSans, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}
.article-heading--3::before {
  content: counter(article-h3, decimal-leading-zero);
  /* h3: 1.5rem × line-height 1.25 = 1.875rem first line; its bigger capitals need more lift */
  --cap-lift: .17rem;
  top: calc((1.875rem - var(--pill-h)) / 2 - var(--cap-lift));
  /* The digits read high in the question pills (founder, 2026-10-18): 2px lower than the steps
     (the pill centres what is left after padding, so 4px more padding moves them 2px). */
  padding-top: 6px;
}
.article-paragraph {
  margin-bottom: 1.5rem;
}
.article-paragraph b,
.article-paragraph strong {
  color: white;
}
.article-paragraph p {
  margin-bottom: 1rem;
}
/* Lists in article text: same grey as paragraphs (Bootstrap's body colour is near-black). */
.article-intro ul,
.article-intro ol,
.article-paragraph ul,
.article-paragraph ol,
.article-two-column ul,
.article-two-column ol,
.article-steps__body ul,
.article-steps__body ol,
.article-callout__body ul,
.article-callout__body ol,
.article-cta__body ul,
.article-cta__body ol {
  color: #B1B1B1;
  margin-bottom: 1rem;
}
.article-image {
  margin: 2rem 0;
  text-align: center;
}
.article-image img {
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
}
.article-image figcaption {
  margin-top: .75rem;
  color: #8a8a8a;
  font-size: .9rem;
  font-style: italic;
}
.article-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}
@media (max-width: 767.98px) {
  .article-two-column {
    grid-template-columns: 1fr;
  }
}
.article-callout {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: .75rem;
  background-color: #003069;
  border-left: 4px solid var(--primary-color);
}
.article-callout--note {
  border-left-color: #B1B1B1;
}
.article-callout--illustrative {
  border-left-color: #f5b301;
}
.article-callout__label {
  margin: 0 0 .25rem;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary-color);
}
.article-callout--note .article-callout__label {
  color: #B1B1B1;
}
.article-callout--illustrative .article-callout__label {
  color: #f5b301;
}
.article-callout__title {
  margin: 0 0 .5rem;
  color: white;
  font-weight: 600;
}
/* The callout title is a <p>, not a heading: give bare spans the same green
   the global h1–h6 span rule gives rich heading titles. */
.article-callout__title span {
  color: var(--primary-color);
}
.article-callout__body p:last-child {
  margin-bottom: 0;
}
.article-steps {
  list-style: none;
  counter-reset: article-step;
  margin: 2rem 0;
  padding: 0;
}
.article-steps__item {
  counter-increment: article-step;
  position: relative;
  padding-left: 3.4rem;
  margin-bottom: 2.5rem;
}
/* Same pill as the questions (see .article-heading--3::before), level with the step title. */
.article-steps__item::before {
  content: counter(article-step, decimal-leading-zero);
  /* step title: 1.35rem × line-height 1.3 = 1.755rem first line (its top margin collapses
     through the list item, so the title starts at the item's top) */
  top: calc((1.755rem - var(--pill-h)) / 2 - var(--cap-lift));
}
.article-steps__title {
  color: white;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: .25rem 0 .75rem;
}
.article-steps__image {
  margin: 1rem 0 0;
}
.article-steps__image img {
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
}
.article-cta {
  margin: 3rem 0 0;
  padding: 2rem;
  border-radius: 1rem;
  background-color: #003069;
  text-align: center;
}
.article-cta__heading {
  color: white;
  font-size: 1.75rem;
  margin: 0 0 .75rem;
}
.article-cta__body {
  margin-bottom: 1.25rem;
}
.article-cta__body p:last-child {
  margin-bottom: 0;
}
.article-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.article-cta__button {
  display: inline-block;
  padding: .75rem 1.75rem;
  border: 2px solid var(--primary-color);
  border-radius: 2rem;
  color: var(--primary-color);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s linear, color .15s linear;
}
.article-cta__button:hover,
.article-cta__button:focus-visible {
  background-color: var(--primary-color);
  color: #001b3d;
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .article-steps__item {
    padding-left: 3rem;
  }
  .article-cta {
    padding: 1.5rem 1.25rem;
  }
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
/* The story's first block starts level with the side panel. */
.article-story > :first-child,
.article-body:not(.article-body--with-map) .container > :first-child {
  margin-top: 0;
}
@media (min-width: 992px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas: "story panel";
    align-items: start;
  }
  .article-layout > .map-panel {
    grid-area: panel;
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #1f2d6e transparent;
  }
  .article-layout > .article-story {
    grid-area: story;
  }
}
.map-panel {
  background-color: #0e1a52;
  border: 1px solid #1f2d6e;
  border-radius: 1rem;
  padding: 1.25rem;
}
.map-panel__eyebrow {
  margin: 0 0 .25rem;
  color: var(--primary-color);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.map-panel__name {
  margin: 0 0 .9rem;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
}
.map-panel__open {
  display: block;
  margin-bottom: 1rem;
  padding: .6rem 0;
  border: 2px solid var(--primary-color);
  border-radius: 2rem;
  color: var(--primary-color);
  text-align: center;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.map-panel__open:hover,
.map-panel__open:focus-visible {
  background-color: var(--primary-color);
  color: #001b3d;
  text-decoration: none;
}
.map-panel__section {
  border-top: 1px solid #1f2d6e;
}
.map-panel__section > summary {
  list-style: none;
  cursor: pointer;
  padding: .75rem 0;
  color: white;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map-panel__section > summary::-webkit-details-marker {
  display: none;
}
.map-panel__section > summary::after {
  content: "+";
  color: var(--primary-color);
  font-size: 1.25rem;
  line-height: 1;
}
.map-panel__section[open] > summary::after {
  content: "–";
}
.map-panel__body {
  padding-bottom: .9rem;
  font-size: .875rem;
}
.map-muted {
  color: #B1B1B1;
  margin: 0 0 .4rem;
}
.map-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.map-glance div {
  background-color: #003069;
  border-radius: .6rem;
  padding: .6rem .3rem;
  text-align: center;
}
.map-glance b {
  display: block;
  color: white;
  font-size: 1.4rem;
  line-height: 1.1;
}
.map-glance span {
  color: #B1B1B1;
  font-size: .75rem;
}
.map-type {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .5rem 0;
  border-bottom: 1px solid #16235f;
}
.map-type:last-child {
  border-bottom: 0;
}
.map-shape {
  flex: none;
  margin-top: 2px;
}
.map-type__name {
  color: white;
  font-weight: 600;
}
.map-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .25rem;
}
.map-chip {
  background-color: #16235f;
  color: #cfd6f3;
  border-radius: .6rem;
  padding: 0 .5rem;
  font-size: .75rem;
}
.map-chip i {
  color: #7f8fcf;
  font-style: normal;
}
.map-chip--empty {
  color: #8a8a8a;
}
.map-conn {
  padding: .45rem 0;
  border-bottom: 1px solid #16235f;
  overflow-wrap: anywhere;
}
.map-conn:last-child {
  border-bottom: 0;
}
.map-conn__node {
  color: white;
}
.map-conn__verb {
  color: var(--primary-color);
}
.map-links {
  /* Nest the rows visibly under the "Links" heading. */
  margin-left: .25rem;
  padding-left: .85rem;
  border-left: 2px solid #1f2d6e;
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #1f2d6e transparent;
  padding-right: .25rem;
}
.map-links:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* Sources: a text heat map — bigger and brighter = the article draws on it more. */
.article-sources {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: .75rem;
  background-color: #003069;
}
.article-sources__title {
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: white;
  margin-bottom: .35rem;
}
.article-sources__body,
.article-sources__body p {
  color: #B1B1B1;
  font-size: .95rem;
  margin-bottom: 0;
}
.article-sources__cloud {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.1rem;
  line-height: 1.2;
}
.article-sources__item {
  font-family: AzoSans, sans-serif;
}
.article-sources__item a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.article-sources__item a:hover {
  text-decoration-thickness: 2px;
}
.article-sources__item--w5 { font-size: 2rem; font-weight: 700; color: var(--primary-color); }
.article-sources__item--w4 { font-size: 1.5rem; font-weight: 700; color: white; }
.article-sources__item--w3 { font-size: 1.2rem; font-weight: 700; color: #D5E3F7; }
.article-sources__item--w2 { font-size: 1rem; color: #B9C3DB; }
.article-sources__item--w1 { font-size: .85rem; color: #8C97B5; }
.article-sources__note {
  margin: 1.25rem 0 0;
  font-size: .8rem;
  color: #8C97B5;
}
/* -/ USE-CASE ARTICLES */

/* USE-CASES LIST */
.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 4rem;
}
.use-case-card {
  display: block;
  background-color: #003069;
  border-radius: 1rem;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform .15s linear, box-shadow .15s linear;
}
.use-case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
}
.use-case-card__media {
  margin-bottom: 1rem;
}
.use-case-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .5rem;
  display: block;
}
.use-case-card__category {
  display: inline-block;
  margin-bottom: .5rem;
  color: #00ff60;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.use-case-card__title {
  font-size: 1.15rem;
  margin-bottom: .5rem;
  color: white;
}
.use-case-card__intro {
  color: #B1B1B1;
  font-size: .9rem;
  line-height: 1.4rem;
  margin-bottom: 0;
}
.use-cases-empty {
  color: #B1B1B1;
  text-align: center;
  padding: 2rem 0;
}
.use-cases-group__intro {
  color: #B1B1B1;
  font-size: 1.15rem;
  margin: 0;
}
.use-cases-group .use-cases-grid {
  margin-top: 2rem;
}
/* Templates: the same card on brand blue. */
.use-case-card--template {
  background-color: #0453b1;
}
.use-case-card--template .use-case-card__intro {
  color: #D5E3F7;
}
/* -/ USE-CASES LIST */

/* Team cards: the person's name right under the role, in plain white text
   (the role keeps the compiled bold capitals). */
.c-info .person-item .person-title {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.c-info .person-item .person-name {
  color: #fff;
  font-family: "darkmode-on", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: .5px;
}
/* ABOUT US (contact page) — rich blocks: paragraphs, numbered steps, lists */
.c-info .about-text {
  margin-bottom: 1.5rem;
}
.c-info .about-text:last-child {
  margin-bottom: 0;
}
.c-info .about-text p,
.c-info .about-text li {
  color: #B1B1B1;
  font-family: "darkmode-on", sans-serif;
  font-size: 1rem;
  line-height: 1.75rem;
  letter-spacing: .5px;
}
.c-info .about-text p {
  margin-bottom: .75rem;
}
.c-info .about-text p:last-child,
.c-info .about-text ol:last-child,
.c-info .about-text ul:last-child {
  margin-bottom: 0;
}
.c-info .about-text ol,
.c-info .about-text ul {
  margin: 0 0 .75rem;
  padding-left: 1.5rem;
}
.c-info .about-text li {
  padding-left: .25rem;
  margin-bottom: .6rem;
}
.c-info .about-text li:last-child {
  margin-bottom: 0;
}
.c-info .about-text li::marker {
  color: var(--primary-color);
  font-family: AzoSans, sans-serif;
  font-weight: 700;
}
.c-info .about-text strong {
  color: white;
  font-weight: 600;
}
.c-info .about-text a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.c-info .about-text a:hover {
  text-decoration-thickness: 2px;
}
/* -/ ABOUT US */
/* METADATA PAGE */
.metadata-page {
  padding: 14rem 0 6rem;
  position: relative;
  --metadata-sticky-top: 6.5rem;
}
.metadata-hero {
  max-width: 50rem;
  margin-bottom: 6rem;
}
@media (max-width: 991.98px) {
  .metadata-hero {
    margin-bottom: 4rem;
  }
}
.metadata-hero h1 {
  margin-bottom: 1.25rem;
}
.metadata-lead,
.metadata-text {
  color: #B1B1B1;
  font-family: "darkmode-on", sans-serif;
  letter-spacing: .5px;
}
.metadata-lead {
  font-size: 1.2rem;
  line-height: 1.9rem;
}
.metadata-text {
  font-size: 1rem;
  line-height: 1.6rem;
}
.metadata-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  color: var(--primary-color);
  background: rgba(2, 101, 220, .18);
  border-radius: .3rem;
  padding: .05rem .35rem;
  white-space: nowrap;
}
.metadata-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
@media (min-width: 992px) {
  .metadata-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}
/* code card */
.metadata-code {
  margin: 0;
  background: #080B33;
  border: 1px solid #1F2A78;
  border-radius: 1rem;
  overflow: hidden;
}
.metadata-code.is-sticky {
  position: sticky;
  top: var(--metadata-sticky-top);
}
.metadata-code__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: #0F1560;
  border-bottom: 1px solid #1F2A78;
  font: 500 .8rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #93A3E0;
}
.metadata-code__dots {
  display: inline-flex;
  gap: .35rem;
}
.metadata-code__dots i {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #2A3790;
}
.metadata-copy {
  margin: -.45rem -.4rem -.45rem auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: .3rem .55rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: #93A3E0;
  font: 500 .75rem/1 "darkmode-on", sans-serif;
  letter-spacing: .5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.metadata-copy:hover {
  color: white;
  background: rgba(255, 255, 255, .06);
  border-color: #2A3790;
}
.metadata-copy:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
.metadata-copy__icon {
  flex: none;
}
.metadata-copy__icon--done,
.metadata-copy.is-copied .metadata-copy__icon--copy {
  display: none;
}
.metadata-copy.is-copied .metadata-copy__icon--done {
  display: block;
}
.metadata-copy.is-copied {
  color: var(--primary-color);
}
.metadata-copy.is-failed {
  color: #F5B301;
}
.metadata-copy__label:empty {
  display: none;
}
.metadata-code__pre {
  margin: 0;
  padding: 1.1rem 0;
  font: .8rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #D4D4D4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: visible;
  tab-size: 2;
  /* pre-wrap lines start at the gutter; blocks below add their own padding */
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.metadata-code__pre:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: -2px;
}
.metadata-code .json-block {
  display: block;
  margin: 0 -1.1rem;
  padding: 0 1.1rem 0 calc(1.1rem - 3px);
  border-left: 3px solid transparent;
}
.metadata-code .json-block.is-active {
  background: rgba(0, 255, 96, .07);
  border-left-color: var(--primary-color);
}
.json-key { color: #9CDCFE; }
.json-str { color: #CE9178; }
.json-num { color: #B5CEA8; }
.json-lit { color: #569CD6; }
.json-punc { color: #D4D4D4; }
/* sections */
.metadata-section {
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #1C2470;
}
.metadata-section::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 0;
  bottom: 2rem;
  width: 3px;
  border-radius: 2px;
  background: var(--primary-color);
  opacity: 0;
}
.metadata-section.is-active::before {
  opacity: 1;
}
.metadata-section__title {
  font-size: 1.65rem;
  line-height: 1.25;
  margin-bottom: .75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
}
.metadata-section__title .metadata-section__name {
  color: white;
}
.metadata-page .metadata-badge {
  font-size: .9rem;
  font-weight: 600;
  padding: .1rem .5rem;
}
.metadata-required {
  font: 500 .75rem/1 "darkmode-on", sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #F5B301;
}
.metadata-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.metadata-chip {
  font: .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #16206A;
  color: #CFD6F3;
  border-radius: .6rem;
  padding: .1rem .55rem;
}
.metadata-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .5rem 1.1rem;
  margin: 1.1rem 0 0;
}
.metadata-fields dt {
  font: 500 .82rem/1.6rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #9CDCFE;
  max-width: 11rem;
}
.metadata-fields dd {
  margin: 0;
  color: #C7CBE0;
  font-family: "darkmode-on", sans-serif;
  font-size: .95rem;
  line-height: 1.6rem;
  letter-spacing: .3px;
}
.metadata-fields dd code {
  white-space: normal;
}
.metadata-note {
  background: #003069;
  border-left: 4px solid var(--primary-color);
  border-radius: .75rem;
  padding: 1.1rem 1.4rem;
}
.metadata-note .metadata-note__title {
  color: white;
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  margin-bottom: .35rem;
}
.metadata-note .metadata-text {
  color: #C7CBE0;
}
@media (prefers-reduced-motion: no-preference) {
  .metadata-code .json-block,
  .metadata-section::before {
    transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
  }
}
@media (max-width: 991.98px) {
  .metadata-page {
    padding: 8rem 0 4rem;
  }
  .metadata-section::before {
    left: -.75rem;
  }
}
@media (max-width: 575.98px) {
  .metadata-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: .1rem;
  }
  .metadata-fields dd {
    margin-bottom: .6rem;
  }
  .metadata-code__pre {
    font-size: .78rem;
  }
}
/* -/ METADATA PAGE */
/* PAGE BACKGROUND — Metadata and Roadmap have no intro section of their own,
   so the body carries the same dark-to-blue gradient as the Features and
   Services intros (.p-intro / .s-intro), under the glow and the fluid canvas. */
body:has(.metadata-page),
body:has(.roadmap-page) {
  background: linear-gradient(180deg, #10131A 0, #0D104C 100rem) #0D104C;
}
/* -/ PAGE BACKGROUND */
/* ROADMAP PAGE — a timeline: planned releases (dashed spine) above Today,
   the latest release highlighted, earlier ones below (solid spine). */
/* The page shares the Features / Services background (see the gradient rule
   above); only the dotted grid in .roadmap-backdrop is its own. --rel-bg is
   the solid fill that lets nodes and the Today pill cut through the spine. */
body:has(.roadmap-page) {
  --rel-bg: #0D104C;
}
/* Above the canvas and, like `section > div` on other pages, the body glow. */
body:has(.roadmap-page) main,
body:has(.roadmap-page) footer {
  position: relative;
  z-index: 20;
}
body:has(.roadmap-page) header {
  position: relative;
  z-index: 1030;
}
/* Backdrop: the app's dotted canvas grid over the shared page background. */
.roadmap-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.roadmap-backdrop::before {
  content: "";
  position: absolute;
  inset: -2rem;
  background-image: radial-gradient(rgba(156, 195, 255, .16) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 30%, transparent 80%);
}
.roadmap-page {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 14rem 0 6rem;
}
.roadmap-hero {
  max-width: 50rem;
}
.roadmap-hero h1 {
  margin-bottom: 1.25rem;
}
.roadmap-hero h1 span {
  color: var(--primary-color);
}
/* Same intro text as the Metadata page (.metadata-lead). */
.roadmap-hero__body,
.roadmap-hero__body p {
  color: #B1B1B1;
  font-family: "darkmode-on", sans-serif;
  letter-spacing: .5px;
  font-size: 1.2rem;
  line-height: 1.9rem;
}
.roadmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  color: #B1B1B1;
}
.roadmap-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.roadmap-legend__dot {
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  flex: none;
}
.roadmap-legend__dot--future {
  border: 2px dashed rgba(213, 227, 247, .6);
}
.roadmap-legend__dot--latest {
  background: #00FF60;
  box-shadow: 0 0 10px rgba(0, 255, 96, .7);
}
.roadmap-legend__dot--past {
  background: #0265DC;
}
.roadmap-empty {
  color: #B1B1B1;
  text-align: center;
  padding: 4rem 0;
}
.roadmap-timeline {
  max-width: 62rem;
  margin: 5rem auto 0;
}
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
}
.timeline--future::before {
  background: repeating-linear-gradient(to bottom, rgba(213, 227, 247, .45) 0 .5rem, transparent .5rem 1rem);
}
.timeline--past::before {
  background: linear-gradient(to bottom, rgba(0, 255, 96, .9) 0, #0265DC 22rem, rgba(2, 101, 220, .25) 100%);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 4rem 1fr;
  align-items: start;
  padding-bottom: 3rem;
}
.tl-item > .tl-card {
  grid-column: 1;
  grid-row: 1;
}
.tl-item > .tl-date {
  grid-column: 3;
  grid-row: 1;
}
.tl-item:nth-child(even) > .tl-card {
  grid-column: 3;
}
.tl-item:nth-child(even) > .tl-date {
  grid-column: 1;
  text-align: right;
}
.tl-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 1.6rem;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  background: #0265DC;
  box-shadow: 0 0 0 4px var(--rel-bg);
}
.tl-date {
  padding-top: 1.2rem;
}
.tl-date__day {
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  color: white;
  font-size: 1.1rem;
  display: block;
}
.tl-date__rel {
  color: #8C97B5;
  font-size: .8rem;
}
.tl-card {
  position: relative;
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(160deg, rgba(4, 83, 177, .55), rgba(0, 48, 105, .72));
  border: 1px solid rgba(156, 195, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .15s linear, box-shadow .15s linear;
}
.tl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
}
.tl-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .5rem;
  display: block;
  margin-bottom: 1.1rem;
}
.tl-card__top {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.tl-card__top:empty {
  display: none;
}
.tl-version {
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  padding: .15rem .55rem;
  border-radius: 2rem;
  background: rgba(2, 101, 220, .35);
  color: #D5E3F7;
}
.tl-badge {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 2rem;
}
.tl-card__title {
  font-size: 1.25rem;
  color: white;
  margin-bottom: .5rem;
}
.tl-card__summary,
.tl-card__summary p {
  color: #B1B1B1;
  font-size: .95rem;
  line-height: 1.5rem;
}
.tl-card__summary {
  margin-bottom: 1rem;
}
.tl-changes {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: .4rem;
}
.tl-changes li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  color: #D5E3F7;
  font-size: .9rem;
}
.tl-tag {
  flex: none;
  width: 4.6rem;
  text-align: center;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1rem 0;
  border-radius: .3rem;
}
.tl-tag--new {
  background: rgba(0, 255, 96, .15);
  color: #00FF60;
}
.tl-tag--improved {
  background: rgba(2, 101, 220, .35);
  color: #9CC3FF;
}
.tl-tag--fixed {
  background: rgba(255, 255, 255, .08);
  color: #B9C3DB;
}
/* The full notes open in place. */
.tl-notes summary {
  color: var(--primary-color);
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
}
.tl-notes summary::-webkit-details-marker {
  display: none;
}
.tl-notes summary::after {
  content: " →";
}
.tl-notes[open] summary::after {
  content: " ↑";
}
.tl-notes summary:hover {
  text-decoration: underline;
}
.tl-notes__body,
.tl-notes__body p,
.tl-notes__body li {
  color: #D5E3F7;
  font-size: .95rem;
  line-height: 1.55rem;
}
.tl-notes__body {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(156, 195, 255, .15);
}
/* Latest: the release to look at first. */
.tl-item--latest .tl-node {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 1.4rem;
  background: #00FF60;
  box-shadow: 0 0 0 4px var(--rel-bg), 0 0 0 7px rgba(0, 255, 96, .35), 0 0 24px rgba(0, 255, 96, .6);
  animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
  50% {
    box-shadow: 0 0 0 4px var(--rel-bg), 0 0 0 12px rgba(0, 255, 96, .12), 0 0 36px rgba(0, 255, 96, .8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl-item--latest .tl-node {
    animation: none;
  }
}
.tl-item--latest .tl-card {
  background: linear-gradient(160deg, #0453b1 0%, #003069 60%);
  border: 1px solid rgba(0, 255, 96, .55);
  box-shadow: 0 0 2.5rem rgba(0, 255, 96, .12);
}
.tl-item--latest .tl-badge {
  background: #00FF60;
  color: #0d104c;
  font-weight: 700;
}
.tl-item--latest .tl-date__day {
  color: #00FF60;
  font-size: 1.35rem;
}
/* Planned: outlined and quieter. */
.tl-item--future .tl-node {
  background: var(--rel-bg);
  border: 2px dashed rgba(213, 227, 247, .6);
}
.tl-item--future .tl-card {
  background: rgba(0, 48, 105, .25);
  border: 1px dashed rgba(213, 227, 247, .3);
}
.tl-item--future .tl-card__title {
  color: #D5E3F7;
}
.tl-item--future .tl-badge {
  border: 1px solid rgba(213, 227, 247, .4);
  color: #D5E3F7;
}
.tl-item--future .tl-changes li {
  color: #B9C3DB;
}
.tl-item--future .tl-date__day {
  color: #D5E3F7;
}
/* "Today" across the spine, with a glow behind it. */
.tl-today {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 3rem;
  z-index: 2;
}
.tl-today::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5rem);
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 255, 96, .6), transparent);
}
.tl-today::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: 0;
  width: 46rem;
  height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 255, 96, .13), rgba(2, 101, 220, .08) 55%, transparent);
  filter: blur(10px);
}
.tl-today > span {
  position: relative;
  background: var(--rel-bg);
  color: #00FF60;
  border: 1px solid rgba(0, 255, 96, .6);
  border-radius: 2rem;
  padding: .35rem 1rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tl-section-label {
  text-align: center;
  color: #8C97B5;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}
/* Phone: spine on the left, every card to its right. */
@media (max-width: 991.98px) {
  .roadmap-page {
    padding-top: 8rem;
  }
  .roadmap-timeline {
    margin-top: 3rem;
  }
  .timeline::before {
    left: 1rem;
  }
  .tl-item,
  .tl-item:nth-child(even) {
    grid-template-columns: 2rem 1fr;
    column-gap: .75rem;
  }
  .tl-item > .tl-node {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .tl-item > .tl-date,
  .tl-item:nth-child(even) > .tl-date {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding: .9rem 0 .5rem;
  }
  .tl-item > .tl-card,
  .tl-item:nth-child(even) > .tl-card {
    grid-column: 2;
    grid-row: 2;
  }
  .tl-date__day,
  .tl-date__rel {
    display: inline;
    margin-right: .5rem;
  }
  .tl-today {
    justify-content: flex-start;
  }
  .tl-today::before {
    left: 0;
    right: 0;
  }
  .tl-section-label {
    text-align: left;
    padding-left: 2.75rem;
  }
}
/* -/ ROADMAP PAGE */
/* LEGAL PAGES (privacy policy, terms of use) */
.legal-page {
  padding: 14rem 0 6rem;
  position: relative;
}
.legal-article {
  max-width: 46rem;
}
.legal-header {
  margin-bottom: 3rem;
}
.legal-header h1 {
  margin-bottom: 1rem;
}
.legal-updated {
  color: var(--primary-color);
  font-size: .95rem;
  letter-spacing: .5px;
  margin-bottom: 1.75rem;
}
.legal-section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 7rem;
}
.legal-section h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  color: white;
  margin-bottom: .75rem;
}
.legal-text {
  color: #B1B1B1;
  font-family: "darkmode-on", sans-serif;
  font-size: 1rem;
  line-height: 1.7rem;
  letter-spacing: .5px;
}
.legal-intro {
  font-size: 1.1rem;
  line-height: 1.85rem;
}
.legal-text p,
.legal-text ul,
.legal-text ol {
  margin-bottom: 1rem;
}
.legal-text ul,
.legal-text ol {
  padding-left: 1.25rem;
}
.legal-text li {
  margin-bottom: .4rem;
}
.legal-text h3 {
  font-size: 1.1rem;
  color: white;
  margin: 1.5rem 0 .5rem;
}
.legal-text strong {
  color: white;
}
.legal-text a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.legal-text a:hover {
  text-decoration-thickness: 2px;
}
@media (max-width: 991.98px) {
  .legal-page {
    padding: 8rem 0 4rem;
  }
}
/* -/ LEGAL PAGES */

/* FOOTER: EU co-funding badge in the third column, under the MindShare icon */
footer .footer-eu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  margin: 1.5rem 0;
  text-align: right;
}
footer .footer-eu img {
  max-height: 4rem;
  max-width: 100%;
  height: auto;
}
footer .footer-eu .eu-badge-context {
  margin: 0;
  max-width: 22rem;
}
@media (max-width: 991.98px) {
  footer .footer-copyright {
    flex-wrap: wrap;
  }
  footer .footer-eu {
    order: 1;
    flex-basis: 100%;
    align-items: flex-start;
    margin: 0 0 1.5rem;
    text-align: left;
  }
}
/* -/ FOOTER */

/* ABOUT US FAQ (same look as the Features FAQ) */
.c-faq {
  padding: 5rem 0;
  background-image: url(/assets/images/elements/dots.webp);
  position: relative;
  z-index: 10;
}
.c-faq h2 {
  color: var(--secondary-color);
}
.c-faq .accordion-header {
  font-size: 1rem;
  margin: 0;
}
.c-faq .faq-answer p,
.c-faq .faq-answer li {
  font-family: "darkmode-on", sans-serif;
  color: #333333;
}
.c-faq .faq-answer p:last-child {
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .c-faq {
    padding: 4rem 0;
  }
}

/* ABOUT US FAQ (same look as the Features FAQ) */
.c-faq {
  padding: 5rem 0;
  background-image: url(/assets/images/elements/dots.webp);
  position: relative;
  z-index: 10;
}
.c-faq h2 {
  color: var(--secondary-color);
}
.c-faq .accordion-header {
  font-size: 1rem;
  margin: 0;
}
.c-faq .faq-answer p,
.c-faq .faq-answer li {
  font-family: "darkmode-on", sans-serif;
  color: #333333;
}
.c-faq .faq-answer p:last-child {
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .c-faq {
    padding: 4rem 0;
  }
}

/* Download link next to the copy button on the metadata example */
.metadata-download {
  margin: -.45rem 0 -.45rem auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: .3rem .55rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: #93A3E0;
  -webkit-tap-highlight-color: transparent;
}
.metadata-download:hover {
  color: white;
  background: rgba(255, 255, 255, .06);
  border-color: #2A3790;
}
.metadata-download:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
.metadata-download + .metadata-copy {
  margin-left: .25rem;
}

/* Download link next to the copy button on the metadata example */
.metadata-download {
  margin: -.45rem 0 -.45rem auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  min-width: 2.25rem;
  padding: .3rem .55rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  color: #93A3E0;
  -webkit-tap-highlight-color: transparent;
}
.metadata-download:hover {
  color: white;
  background: rgba(255, 255, 255, .06);
  border-color: #2A3790;
}
.metadata-download:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
.metadata-download + .metadata-copy {
  margin-left: .25rem;
}

/* ---------- Not-found page (site/not-found.html) ---------- */
.nf {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 10rem 0 6rem;
  background: linear-gradient(180deg, #10131a, #0d104c);
}
.nf h1 {
  margin: 0 0 1.5rem;
}
.nf-eyebrow {
  font-family: AzoSans, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15rem;
  font-size: .8rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}
.nf-text {
  line-height: 1.75rem;
  max-width: 34rem;
  margin-bottom: 1rem;
}
.nf-path {
  color: #9aa6c4;
  font-size: .9rem;
  margin-bottom: 2.5rem;
}
.nf-path code {
  color: white;
  background: rgba(255, 255, 255, .08);
  padding: .15rem .5rem;
  border-radius: .4rem;
  word-break: break-all;
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.nf-actions .btn {
  padding: .75rem 2rem;
}
.nf-help {
  font-size: .9rem;
  color: #9aa6c4;
  margin: 0;
}
.nf-help a {
  color: var(--primary-color);
}
.nf-canvas {
  position: relative;
}
.nf-canvas-caption {
  margin: .25rem 0 0;
  font: 400 .8rem "Source Sans 3", sans-serif;
  color: #9aa6c4;
  text-align: center;
}
.nf-canvas-caption span {
  color: #FF5151;
}

/* The graph: nodes drawn like the Mindshare app (lib/not-found-graph.ts). */
.nf-graph {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.nf-graph .label {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  fill: black;
}
.nf-graph .l line {
  stroke: rgba(213, 216, 237, .45);
  stroke-width: 2.2;
}
.nf-graph .l .arrow {
  fill: #d5d8ed;
}
.nf-graph .l.hl line {
  stroke: #d5d8ed;
}
.nf-graph .stub {
  stroke: #FF5151;
  stroke-width: 2.2;
  stroke-dasharray: 5 5;
}
.nf-graph .spark circle {
  fill: #FF5151;
}
.nf-graph .spark {
  animation: nf-spark 1.6s ease-in-out infinite;
}
.nf-graph .n {
  cursor: pointer;
  text-decoration: none;
}
.nf-graph .ring-light,
.nf-graph .ring-bold,
.nf-graph .tint {
  opacity: 0;
}
.nf-graph .tint {
  transition: opacity 1s linear;
}
.nf-graph .hl .ring-light,
.nf-graph .hl .ring-bold,
.nf-graph .hl .tint {
  opacity: 1;
}
.nf-graph .dim {
  opacity: .45;
}
.nf-graph .dim .border,
.nf-graph .dim .tint {
  stroke: #ccc;
}
.nf-graph .dim .label {
  fill: #ccc;
}
.nf-graph .n:focus-visible {
  outline: none;
}
.nf-graph .n:focus-visible .ring-bold,
.nf-graph .n:focus-visible .ring-light {
  opacity: 1;
}
.nf-graph .n-lost .ring-bold,
.nf-graph .n-lost .ring-light {
  opacity: 1;
  animation: nf-pulse 2s linear infinite;
}
@keyframes nf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes nf-spark {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-graph .spark,
  .nf-graph .n-lost .ring-bold,
  .nf-graph .n-lost .ring-light {
    animation: none;
  }
}
@media (max-width: 991px) {
  .nf {
    padding: 8rem 0 4rem;
    min-height: auto;
  }
  .nf-actions .btn {
    flex: 1 1 100%;
  }
  .nf-canvas {
    max-width: 520px;
    margin: 0 auto 2rem;
  }
  .nf-canvas-caption {
    font-size: .7rem;
  }
}
/* BUTTON TEXT ALIGNMENT
   AzoSans keeps room for descenders below the line, and the buttons are all
   capitals, so equal padding leaves the text 1.35px too high. Move it down. */
.btn.svelte-30irc8:not(.btn-secondary-link),
.navbar.svelte-1rmpuur .nav-link.nav-button.svelte-1rmpuur,
.stripe .stripe-inner .stripe-button a.btn {
  padding-top: calc(.75rem + 1.35px);
  padding-bottom: calc(.75rem - 1.35px);
}
/* Desktop nav links: the same descender room, plus the link box sitting
   ~0.4px high in the bar, leaves the capitals 2px above the bar's centre. */
@media (min-width: 992px) {
  .navbar.svelte-1rmpuur .nav-link.svelte-1rmpuur:not(.nav-button) {
    padding-top: calc(.75rem + 2px);
    padding-bottom: calc(.75rem - 2px);
  }
}
/* Home's upload section forces its own padding with !important. */
.h-upload a.btn {
  padding-top: calc(.75rem + 1.35px) !important;
  padding-bottom: calc(.75rem - 1.35px) !important;
}
/* -/ BUTTON TEXT ALIGNMENT */
/* CONTACT MAP (MS-367)
   Contact details stacked at the top of the column, the office map below. */
.c-form .form-info.svelte-1jntdui {
  justify-content: flex-start;
  gap: 1.5rem;
}
.c-form .form-info .info-map {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: .5rem;
}
.c-form .form-info .info-map iframe {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 16rem;
  border: 0;
  border-radius: 1.25rem;
}
/* MS-598: nothing loads from Google until the visitor presses the button. */
.c-form .form-info .map-consent {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  min-height: 16rem;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 1.25rem;
}
.c-form .form-info .map-note {
  margin: 0;
  color: #212529;
}
.c-form form .contact-privacy {
  margin: 1rem 0 0;
  font-size: .875rem;
  color: #212529;
}
.c-form form .contact-privacy a {
  color: inherit;
  text-decoration: underline;
}
/* -/ CONTACT MAP */
/* STRIPE TEXT COLOURS (MS-375)
   The stripe rule above makes its text span a block. Spans inside it come from
   the editor (coloured words) and stay in the line. */
.stripe .stripe-inner span span {
  display: inline;
  margin: 0;
  font-size: inherit;
}
/* -/ STRIPE TEXT COLOURS */

/* FEATURES DISCOVER USE CASES
   The picture column has a min-height, so the white text box fills its column
   to stay as tall as the picture beside it. */
.p-database .database-content {
  height: 100%;
}
/* -/ FEATURES DISCOVER USE CASES */

/* SERVICES AUDIENCE ICONS
   The Businesses / Creators icons are about twice their original size. The
   icon column is as wide as the widest icon, so both texts line up; on phones
   the icon sits above its text. */
.s-intro.svelte-1j77dbg .type-item .item-icon.svelte-1j77dbg {
  width: auto;
  flex: 0 0 7.5rem;
}
.s-intro.svelte-1j77dbg .type-item .item-icon img.svelte-1j77dbg {
  height: 7.4375rem;
  width: auto;
}
/* The Businesses icon is wider, so it is a fifth smaller to sit level with the other. */
.s-intro.svelte-1j77dbg .type-item .item-icon img.svelte-1j77dbg[src*="type-corp"] {
  height: 5.95rem;
}
.s-intro.svelte-1j77dbg .type-item .item-content.svelte-1j77dbg {
  width: auto;
  flex: 1 1 auto;
}
@media (max-width: 767px) {
  .s-intro.svelte-1j77dbg .type-item.svelte-1j77dbg {
    flex-direction: column;
    gap: 1rem;
  }
  .s-intro.svelte-1j77dbg .type-item .item-icon.svelte-1j77dbg {
    flex-basis: auto;
    justify-content: flex-start;
  }
}
/* -/ SERVICES AUDIENCE ICONS */

/* METADATA HERO ART
   The scattered cylinders sit to the right of the intro, behind the content,
   in the free space but nearer its right side; the intro is narrower to make
   room. Hidden below the lg breakpoint, where the text takes the full width. */
.metadata-page {
  isolation: isolate;
  overflow-x: clip;
  /* The isolated section is one layer; lift it above the body glow (z 10),
     as `section > div` does on the other pages. */
  z-index: 20;
}
.metadata-lead {
  max-width: 36rem;
}
.metadata-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 13rem;
  right: calc(max(0rem, (100vw - 1320px) / 2) + 4.5rem);
  width: 23.4rem;
  aspect-ratio: 900 / 884;
  background: url(/assets/images/elements/cylinders-scatter.webp) no-repeat center / contain;
}
@media (max-width: 1199.98px) {
  .metadata-page::after {
    right: 2rem;
    width: 19.8rem;
  }
}
@media (max-width: 991.98px) {
  .metadata-page::after {
    display: none;
  }
}
/* -/ METADATA HERO ART */