/* Bootstrap 5 tweak: do not underline links unless hovered over */
a:not(.btn):not(.nav-link) {
    text-decoration: none;
}
a:not(.btn):not(.nav-link):hover {
    /* this rule is too specific, need to use !important in tf-tinybox, tf-references__pill */
    text-decoration: underline;
}
a.link-underlined {
    text-decoration: underline !important;
}

img {
    /* No images in release notes or blog posts wider than screen. Also mobile friendly. */
    max-width: 100%;
}

/* Anchor links to Asciidoctor sections should not hide their title behind the sticky navbar. */
#main,
.sect1 h1,
.sect1 h2,
.sect2 h3,
.sect3 h4 {
    scroll-margin-top: calc(1rem + var(--ts-navbar-height));
}

/* hide visually but not from screen readers */
.tf-sr-only {
    text-indent: 2000px;
    overflow: hidden;
    display: block;
    width: 0;
    height: 0;
}

/*************************************************************************
 Timefold brand style
 *************************************************************************/

:root {
    /* Keep in sync with .navbar height on a large screen. */
    --ts-navbar-height: 109px;

    --tf-green-1: #12D25F;

    --ts-violet-1-rgb: #3E00FF;
    --ts-violet-2-rgb: #3423A6;
    --ts-violet-3-rgb: #2E1760;
    --ts-violet-4-rgb: #200F4F;
    --ts-violet-5-rgb: #000000; /* TODO FIXME */
    --ts-gray-rgb: #666666;
    --ts-white-rgb: #FFFFFF;
    --ts-light-rgb: #F2F2F2;
    --ts-gray-border: #c5c5c5;

    --tf-light-rgb-transparent: rgb(242,242,242,0.5); /* #F2F2F2 = rgb(242,242,242) */
    --bs-body-bg: var(--ts-light-rgb); /* link to html bg */
    --bs-link-color: var(--ts-violet-1-rgb);
    --bs-link-hover-color: var(--ts-violet-2-rgb);

    --bs-navbar-color: var(--ts-white-rgb);
    --bs-navbar-hover-color: var(--ts-white-rgb);
    --bs-nav-link-font-size: 18px;
    --bs-nav-link-font-weight: 400;
    --bs-nav-link-color: var(--ts-white-rgb);
    --ts-nav-link-hover-border-color: var(--ts-violet-1-rgb);
}
html {
  /*
    link to body bg:
    when fading, the body bg is set to transparent via js,
    so the html bg is visible and should be identical to the body bg
  */
  background-color: var(--ts-light-rgb);
}
.btn {
    --bs-btn-border-radius: 1.5rem;
}
.btn-primary {
    --bs-btn-bg: var(--ts-violet-1-rgb);
    --bs-btn-border-color: var(--ts-violet-1-rgb);
    --bs-btn-hover-bg: var(--ts-violet-2-rgb);
    --bs-btn-hover-border-color: var(--ts-violet-2-rgb);
    --bs-btn-active-bg: var(--ts-violet-2-rgb);
    --bs-btn-active-border-bg: var(--ts-violet-2-rgb);
    --bs-btn-disabled-bg: var(--ts-violet-1-rgb);
    --bs-btn-disabled-border-color: var(--ts-violet-1-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--ts-violet-1-rgb);
    --bs-btn-border-color: var(--ts-violet-1-rgb);
    --bs-btn-hover-bg: var(--ts-violet-1-rgb);
    --bs-btn-hover-border-color: var(--ts-violet-1-rgb);
    --bs-btn-active-bg: var(--ts-violet-1-rgb);
    --bs-btn-active-border-color: var(--ts-violet-1-rgb);
    --bs-btn-disabled-color: var(--ts-violet-1-rgb);
    --bs-btn-disabled-border-color: var(--ts-violet-1-rgb);
}
.text-green-1 {
  color: var(--tf-green-1);
}
.text-violet-1 {
  color: var(--ts-violet-1-rgb)
}
.tf-btn-news {
    /* arrow right */
    background-image: url(./arrow-right-light.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 0.8rem) 50%;
    background-size: 18px;
    padding: var(--bs-btn-padding-y) 0.6rem;
    padding-right: 2.6rem;
}
.tf-btn-news__pill {
    background: transparent;
    color: var(--ts-light-rgb);
    padding: 0.2rem 0.5rem;
    border-radius: 30px;
    border: 1px solid var(--ts-light-rgb);
    font-size: 0.65rem;
}
.btn-outline-light:hover > .tf-btn-news__pill {
    color: #000;
    border-color: #000;
}
/* No changes over btn-primary */
/* .tf-btn-news--1 {} */
.tf-btn-news--2 {
    --bs-btn-bg: var(--ts-violet-2-rgb);
    --bs-btn-border-color: var(--ts-violet-2-rgb);
    --bs-btn-hover-bg: var(--ts-violet-3-rgb);
    --bs-btn-hover-border-color: var(--ts-violet-3-rgb);
    --bs-btn-active-bg: var(--ts-violet-3-rgb);
    --bs-btn-active-border-bg: var(--ts-violet-3-rgb);
    --bs-btn-disabled-bg: var(--ts-violet-2-rgb);
    --bs-btn-disabled-border-color: var(--ts-violet-2-rgb);
}
.tf-btn-news--3 {
    --bs-btn-bg: var(--ts-violet-3-rgb);
    --bs-btn-border-color: var(--ts-violet-3-rgb);
    --bs-btn-hover-bg: var(--ts-violet-4-rgb);
    --bs-btn-hover-border-color: var(--ts-violet-4-rgb);
    --bs-btn-active-bg: var(--ts-violet-4-rgb);
    --bs-btn-active-border-bg: var(--ts-violet-4-rgb);
    --bs-btn-disabled-bg: var(--ts-violet-3-rgb);
    --bs-btn-disabled-border-color: var(--ts-violet-3-rgb);
}
.navbar-dark {
    --bs-navbar-color: var(--ts-white-rgb);
    --bs-navbar-hover-color: var(--ts-white-rgb);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ts-violet-1-rgb);
}

/* fade */
.tf-fade-body{
  transition: background 1s ease;
  background-color: rgba(0,0,0,1);
}
.tf-fade-body--light{
    background: var(--bs-body-bg) !important;
}
.tf-fade-body .tf-section__title {
    transition: color 2s ease; /* same speed as background transition */
}
.tf-fade-body:not(.tf-fade-body--light) .tf-section__title {
    color: var(--ts-light-rgb);
}

/* hero */
.tf-hero {
    /* full viewport height - navbar height - 4rem spacing */
    min-height: calc(100vh - var(--ts-navbar-height) - 4rem) !important;
    background: #000 url('../frontpage-bg-hero.jpg');
    color: var(--ts-white-rgb);
    background-size: cover;
    background-clip: border-box;
    border-radius: 30px;
    padding: 2rem;
    position: relative;
}
@media (min-width: 992px) {
    .tf-hero {
        padding: 4rem;
    }
}
@media (min-width: 1200px) {
    .tf-hero {
        padding: 8rem 10rem;
    }
}
.tf-hero .display-1 {
    letter-spacing: 1px;
    line-height: 1;
    font-weight: 400;
}
.tf-hero__down{
    position: absolute;
    display: block;
    bottom: 1rem;
    transition: bottom 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
    padding: 2rem;
    opacity: 0.5;
    font-size: 1.3rem;
    background: center center no-repeat url('./arrow-bottom-light.svg');
}
.tf-hero__down,
.tf-hero__down:active,
.tf-hero__down:focus,
.tf-hero__down:hover {
    color: #fff;
}
.tf-hero__down:focus,
.tf-hero__down:hover{
    bottom: 0.5rem;
}
@media (max-width: 767.98px) {
    .tf-hero__down {
        display: none;
    }
}
.tf-hero__down--bracket{
    background: center center no-repeat url('./bracket-down-light.svg');
    background-size: 3.2rem;
    padding: 3rem;
    bottom: 2rem;
}
.tf-hero__down--right{
    left: auto;
    right: -1rem;
}

.tf-hero--small {
    min-height: calc(55vh) !important; /* width is limited (grid) so we cant go full height without giving up aspect ratio */
    padding-top: 6rem; /* account for absolute buttons */
}
.tf-hero--low {
    /* used for base pages for example */
    min-height: auto !important;
    height: calc(40vh) !important;
    max-height: 350px;
}
.tf-hero::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(0,0,0,0.7);
    border-radius: 30px;
}
/* ensure every direct child lies _above_ the dark transparent layer */
.tf-hero > * {
    z-index: 11;
}
.tf-hero--light::after{
    display: none;
}
.tf-hero__btn-left{
    position: absolute;
    font-weight: 300;
    top: 2rem;
    left: 2rem;
}
.tf-hero__btn-right{
    position: absolute;
    font-weight: 300;
    top: 2rem;
    right: 2rem;
}
.tf-hero--small .display-1,
.tf-hero--small__description{
    max-width: 37rem;
}
.tf-hero__video-container{
    /* this ensures the video border
    is cut off properly in all browsers */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    z-index: 2;
}
.tf-hero--with-video{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: url(../traffic-fallback.png);
}
.tf-hero__video{
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.ts-logo-thumbnail {
    max-width: 15rem;
    padding: 1rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
}

/* Nav bottom border animation */
/* Keep px in sync with the large devices breakpoint - https://getbootstrap.com/docs/5.2/layout/breakpoints/ */
@media (min-width: 992px) {
    a.nav-link {
        position: relative;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    a.nav-link:after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0;
        content: '.';
        color: transparent;
        background: var(--ts-nav-link-hover-border-color);
        height: 2px;
        transition: all .25s;
    }
    a.nav-link:hover:after {
        width: 100%;
    }
}

/* custom containers */
.tf-container--wide{
  padding-left:1rem;
  padding-right:1rem;
}
@media (min-width: 992px) {
    .tf-container--wide {
        max-width: none;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 768px) {
    .tf-container--narrow {
        margin: 0 auto;
        max-width: 50rem;
    }
}


/* main nav */
.tf-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* bootstrap sticky scroll elements get z-index 1040 */
    z-index: 1050;
}
.tf-nav .tf-btn-contact {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-font-size: .75rem;
    font-size: 0.7rem;
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .tf-nav {
        /* When changing, ensure to keep .tf-hero's calc expression px value in sync */
        padding-top: 1.8rem;
        padding-bottom: 1.8rem;
    }
}
.tf-nav__logo {
    display: block;
}
.tf-nav__logo svg {
    display: block;
    width: 150px;
    height: auto;
}
@media (min-width: 768px) {
    .tf-nav__logo svg {
        width: 200px;
    }
}
.tf-nav__toggler{
    border: 1px solid var(--tf-light-rgb-transparent);
}

.tf-nav--light {
    background: transparent;
}
.tf-nav--light .nav-link {
    color: #000;
}

/* footer */
.tf-footer{
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: var(--ts-light-rgb);
}
@media (min-width: 768px) {
    .tf-footer{
        padding-top:5rem;
        padding-bottom:5rem;
    }
}
.tf-footer__col{
    margin-bottom: 2rem;
}
/* ensure stylistic borders touch */
@media (min-width: 768px) {
    /* dont do this for first and last child, if `not` selector is supported in IE11,
    switch to this one => https://caniuse.com/css-not-sel-list */
    .tf-footer__col:nth-child(2),
    .tf-footer__col:nth-child(3){
        padding: 0 !important;
        margin-bottom: 0;
    }
    .tf-footer__col:nth-child(4) {
        padding-left: 0 !important;
    }
}
.tf-footer__header{
    color: var(--ts-light-rgb);
    font-weight: 400;
    padding-bottom: 0;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .tf-footer__header{
        border-bottom: 1px solid var(--ts-light-rgb);
        padding-bottom: 1.5rem;
        margin-bottom: 1.2rem;
    }
}
.tf-footer__logo{
    max-width: 80px;
}
.tf-footer__main a{
    color: var(--ts-light-rgb);
}
@media (min-width: 768px) {
    .tf-footer__logo{
        display: block;
        max-width: 150px;
    }
}
.tf-footer__meta{
    font-size: 0.8rem;
    margin-top: 2rem;
    padding-top: 1rem;
    color: var(--tf-light-rgb-transparent);
}
@media (min-width: 576px) {
    .tf-footer__meta{
        border-top: 1px solid var(--tf-light-rgb-transparent);
    }
}
.tf-footer__meta__link,
.tf-footer__meta__link:hover,
.tf-footer__meta__link:focus,
.tf-footer__meta__link:active {
    color: var(--tf-light-rgb-transparent);
}
@media (min-width: 768px) {
    .tf-footer__meta{
        margin-top: 5rem;
    }
}
/* tweak to ensure smallest footer items sit below each other  */
@media (max-width: 576px) {
    .tf-footer__meta .hstack{
        display: block;
    }
    .tf-footer__meta .list-inline{
        margin-top: 0.6rem;
    }
}

/* action boxes eg. "start solving" */
.tf-action-box{
  border-radius: 30px;
  color: var(--ts-white-rgb);
  /* #2E1760 = edge color gradient svg */
  background: #2E1760 url(../tf-gradient-purple.svg) no-repeat top center;
  background-size: cover;
  padding: 2rem;
  padding-top: 4rem;
}
@media (min-width: 768px) {
  .tf-action-box{
    padding: 3rem 7rem;
  }
}
@media (max-width: 991.98px) {
  .tf-action-box{
    /* reset hstack on narrower screens */
    display: block;
  }
  .tf-action-box__inner{
    margin-bottom: 4rem;
  }
}
.tf-action-box__title{
  font-size: 1.9rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .tf-action-box__inner {
    width: 25em;
    padding: 3rem 0 0;
  }
}
.tf-action-box__content{
  font-size: 0.9rem;
  margin: 0 0 2rem;
  line-height: 1.4;
}

.tf-action-box__extra{
  border-radius: 30px;
  background: var(--ts-violet-5-rgb);
  color: var(--bs-light-rgb);
  padding: 2rem;
}
@media (min-width: 992px) {
  .tf-action-box__extra{
    padding: 3rem;
    min-width:320px;
  }
}

/* cards */
.card{
    --bs-card-border-width: 0;
    --bs-card-border-radius: 30px;
    --bs-card-spacer-y: 1.3rem;
    --bs-card-spacer-x: 1.3rem;
    --bs-card-title-spacer-y: 1rem;
}
.card--chunky {
    --bs-card-spacer-y: 2.3rem;
    --bs-card-spacer-x: 2.3rem;
}
.card--chunky__title{
    margin: 0 0 2rem;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.1;
}
/*
  .tf-card {}
  for cards, mostly using bootstrap card + customization,
  although we need some extras so adding our BEM hooks
*/
.tf-card{
    --bs-card-spacer-y: 1.4rem;
    --bs-card-spacer-x: 1.4rem;
}
.tf-card__title{
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
}
.tf-card__media{
  /* you need this to have a frame of reference,
  when positioning children absolute */
  position: relative;
  border-radius: 30px 30px 0 0;
}
.tf-card__media--dark {
  background: var(--ts-violet-5-rgb);
}
.tf-card__img{
  border-radius: 30px 30px 0 0;
}
.tf-card__blog-meta{
    position: absolute;
    z-index: 5;
    top: 1rem;
    left: 1rem;
    right: 1rem;
}
.tf-card__blog-meta__date{
    font-size: 0.7rem;
    font-weight: 400;
    padding: 0.25rem 0.6rem;
    border-radius: 15px;
    text-transform: none;
    margin-bottom: 0.4rem;
    background: transparent;
    border: 1px solid var(--ts-white-rgb);
    color: var(--ts-white-rgb);
}
.tf-card__blog-meta__author{
    color: var(--ts-white-rgb);
    font-size: 0.7rem;
}
.tf-card__blog-meta__author img{
    max-width: 24px;
}
.tf-card__title{
  color: var(--ts-dark-rgb);
  background: #fff;
  margin: 0;
  padding: 1.6rem 1rem 0;
}
@media (min-width: 768px) {
    .tf-card__title{
        color: var(--ts-light-rgb);
        background: transparent;
        padding: 0;
        position: absolute;
        bottom: 1.4rem;
        left: 1.4rem;
        right: 1.4rem;
    }
}
.tf-card__description{
  font-size: 0.9rem;
}
.tf-card__cta{
    font-size: 0.9rem;
    background: no-repeat url(./arrow-right-primary.svg);
    background-position: calc(100% - 0.9rem) 50%;
    background-size: 18px;
    padding: var(--bs-btn-padding-y) 1.2rem;
    padding-right: 2.6rem;
}

/* tf-section */
.tf-section{
  margin-bottom: 6rem;
}
.tf-section__head{
    margin: 0 0 4rem;
}
.tf-section__title {
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 400;
    margin: 0;
}
.tf-section__cta{
    --bs-btn-padding-x: 1.5rem;

    /* arrow right */
    background-image: url(./arrow-right-light.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 0.8rem) 50%;
    background-size: 18px;
    padding: var(--bs-btn-padding-y) 1.2rem;
    padding-right: 2.6rem;
}

/* model detail */
.tf-adoc__card {
    padding: 2rem;
    margin-bottom: 5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 400px);
}
@media (min-width: 992px) {
    .tf-hero--small,
    .tf-adoc__card {
        padding: 4rem;
    }
}
@media (min-width: 1200px) {
    .tf-hero--small,
    .tf-adoc__card {
        padding: 6rem;
    }
}

.tf-card--video img {
    border-radius: 30px;
}
.tf-card--aside{
    align-items: flex-start;
    padding: 2rem;
}
.tf-card--aside.sticky-top {
    top: calc(var(--ts-navbar-height) + 2rem);
}
.tf-pill {
    background: var(--ts-light-rgb);
    color: var(--ts-violet-1-rgb);
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: inline-block;
}
.tf-pill--outline{
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.6rem 1rem;
    text-transform: none;
    margin-bottom: 0.4rem;
    background: transparent;
    border: 1px solid var(--ts-light-rgb);
    color: var(--ts-violet-5-rgb);
}
.tf-pill--outline-dark{
    outline: 1px solid var(--ts-violet-5-rgb);
    color: var(--ts-violet-5-rgb);
}

/* tiny boxes: as used for events */
.tf-tinybox{
    display: block;
    background: var(--ts-white-rgb);
    color: var(--ts-violet-5-rgb);
    border-radius: 30px;
    padding: 2.4rem;
    transition: all 0.3s ease-in;
    text-decoration: none !important;
}
.tf-tinybox:hover,
.tf-tinybox:focus,
.tf-tinybox:active{
    color: var(--ts-violet-5-rgb);
    text-decoration: none !important;
}
.tf-tinybox:hover,
.tf-tinybox:focus{
    transform: scale(1.03);
}
.tf-tinybox__place{
    /* also uses .tf-pill */
    color:  var(--ts-violet-5-rgb);
    padding: 0.2rem 0.5rem;
    font-size:0.6rem;
    margin: 0;
}
.tf-tinybox__title{
    font-size: 2.2rem;
    line-height: 1.1;
    font-weight: 600;
    margin: 0.8rem 0 2.2rem;
}
.tf-tinybox__date{
    font-size: 0.85rem;
    font-weight: 400;
    margin: 0;
}
.tf-tinybox__button{
    display: block;
}
.tf-flag{
    width: 18px;
    height:12px;
    background-color:#666;
    border-radius: 3px;
}

/*
    asciidoc contents:
    as we cant really control the markup of the contents,
    the selectors here have lots more specificity.
    Should not be a big problem as we only have a few of these.
 */
.tf-adoc h1,
.tf-adoc h2,
.tf-adoc h3,
.tf-adoc h4,
.tf-adoc h5,
.tf-adoc h6 {
    margin: 2.4rem 0 1rem;
    line-height: 1.1;
    font-weight: 400;
}
/*
asciidoc creates div sections,
the first-child header in the first div section should not have margin-top,
as the card has space with padding */
.tf-adoc .card > div:first-child > h1:first-child,
.tf-adoc .card > div:first-child > h2:first-child,
.tf-adoc .card > div:first-child > h3:first-child,
.tf-adoc .card > div:first-child > h4:first-child,
.tf-adoc .card > div:first-child > h5:first-child,
.tf-adoc .card > div:first-child > h6:first-child {
    margin-top: 0;
}
.tf-adoc p,
.tf-adoc ul,
.tf-adoc ol,
.tf-adoc pre {
    margin: 0 0 1rem;
}
.tf-adoc ul,
.tf-adoc ol {
    padding-left: 1.5rem;
}
.tf-adoc li p {
    margin-bottom: 0.3rem;
}
.tf-adoc ul ul,
.tf-adoc ul ol,
.tf-adoc ol ul,
.tf-adoc ol ol {
    margin-bottom: 0;
}
.tf-adoc img,
.tf-adoc code {
    border-radius: 6px;
    margin: 0 0 1rem;
}
.tf-adoc code {
    background: var(--ts-white-rgb);
}
.tf-adoc .videoblock > .content > iframe{
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1rem;
    /*border-radius: 30px;*/
    display: block;
    aspect-ratio: 16 / 9;
    width: 90%;
    max-width: 480px;
}


/* forms */
.form-label {
    padding-left: 1.5rem;
}
.form-control {
    border-radius: 25px;
    padding: .6rem 1.5rem;
    border-color: var(--ts-gray-border);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ts-violet-5-rgb);
    --bs-btn-border-color: var(--ts-violet-5-rgb);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ts-violet-5-rgb);
    --bs-btn-hover-border-color: var(--ts-violet-5-rgb);
    --bs-btn-padding-x: 1.15rem;
  }
  .border-light {
    border-color: var(--ts-light-rgb) !important;
  }

/* reference */
.tf-references {
    background-size: cover;
}
.tf-references__bg {
    padding: 2rem;
    background: rgb(0,0,0,0.85);
}
.tf-references__logos {
    margin-bottom: 3rem;
}
.tf-references__meta {
    padding-top: 3rem;
}
.tf-references__logos .nav-link {
    background: none;
    border: none;
    width: 50%;
    opacity: 0.5;
}
.tf-references__logos .nav-link.active{
    opacity: 1;
}
.tf-references__pill,
.tf-references__pill:hover,
.tf-references__pill:focus,
.tf-references__pill:active{
    /* also uses .tf-pill */
    color: var(--ts-light-rgb);
    background: transparent;
    border: 1px solid var(--ts-light-rgb);
    padding: 0.2rem 0.5rem;
    font-size:0.6rem;
    margin: 0;
    display: inline-block;
    text-decoration: none !important;
}
.tf-references__constrain{
    max-width: 600px;
}
.tf-references__title{
    color: var(--ts-light-rgb);
    margin: 1.6rem 0;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
}
.tf-references__description{
    color: var(--ts-light-rgb);
    font-size: 0.95rem;
    line-height: 1.4;
}
/* .tf-references-pane {
    background-size: cover;
}
.tf-references-pane__bg {
    padding: 2rem;
    background: rgb(0, 0, 0, 0.85);
} */
.tf-metric {
    padding: .5rem 1rem;
    margin-right: 0.7rem;
}
.tf-metric__number{
    margin-right: 0.7rem;
}
.tf-metric__text{
    font-size:0.8rem;
    line-height: 1.1;
}
@media (min-width: 768px) {
    .rf-references__logos {
        margin-bottom: 0;
    }
    .tf-references__meta{
        padding-top: 0;
    }
    .tf-references__bg {
        padding: 3rem;
    }
    .tf-references__inner {
        display: flex;
    }
    .tf-references__logos{
        max-width: 270px;
        padding-right: 3rem; /* equals outer padding .tf-references__bg */
    }
    .tf-references__logos nav{
        height: 32rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column !important;
    }
    .tf-references__logos .nav-link {
        width: auto;
    }
    .tf-references__content{
        padding: 2rem 0 2rem 4rem;
        flex: 1;
        border-left: 1px solid var(--ts-light-rgb);
    }
}

@media (max-width: 767.98px) {
    .tf-references__meta,
    .tf-metrics {
        display: block !important;
    }
    .tf-metrics {
        margin-bottom: 2rem;
    }
    .tf-metric {
        margin-bottom:1rem;
    }
}

/* compatibility logos */
.tf-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem; /* Set the desired fixed height */
    width: 100%;
}

.tf-logo__img {
    max-height: 100%;
    max-width: 8rem; /* This tweak ensure the visually bigger logo's are bit smaller */
}

.tf-card-icon {
  background: #eee;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: inline-flex;
  font-size: 2.5rem;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

.tf-pricing-features--core {
  margin-top: -0.5rem;
}

.tf-pricing-features--core,
.tf-pricing-features--core ul,
.tf-pricing-features--core li,
.tf-pricing-features--specifics {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.tf-pricing-features--core li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tf-pricing-features--core > li + li {
  border-top: 1px solid #000;
}

.tf-pricing-features--specifics {
  margin-top: 0.25rem;
}

.tf-pricing-features--specifics li {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.tf-pricing-features--specifics i {
  margin-right: 0.25rem;
}