/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace,monospace;
    font-size: 1em;
}

a {
    background-color: rgba(0,0,0,0)
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,strong {
    font-weight: bolder
}

code,kbd,samp {
    font-family: monospace,monospace;
    font-size: .85em;
}

small {
    font-size: 80%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none;
}

button,input,optgroup,select,textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

@font-face {
    font-family: "webflow-icons";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
    font-weight: normal;
    font-style: normal
}

small,.text_small {
    font-size: .64rem
}

h1,h2,h3,h4,h5 {
    scroll-margin-top: 74px;
    margin-block:1.38rem .5rem;font-weight: 700;
    line-height: 1.3
}

h1 a,h2 a,h3 a,h4 a,h5 a {
    color: inherit;
    text-decoration: none
}

h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover {
    text-decoration: underline
}

h1 {
    margin-top: 0;
    font-size: 2.441rem
}

h2 {
    font-size: 1.953rem;
    margin-block:1.5rem .5rem}

h3 {
    font-size: 1.563rem
}

h4 {
    font-size: 1.25rem
}

h5 {
    font-size: .8rem
}

h2+h3 {
    margin-block-start:.5rem}

:root {
    --page-max-width: 57rem;
    --page-with-toc-max-width: 81rem;
    --navbar-height: 5.937rem;
    /* --color-text: #333; */
    --color-text-light: #757575;
    --color-link: #0098d4;
    --page-header-height: 15rem;
    --borders-color: #ddd
}

@media (prefers-contrast: more) {
    :root {
        --color-text: #000;
        --color-text-light: #595959
    }
}

* {
    box-sizing: border-box
}

html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 1.875rem
}

body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background-color: #333;
    color: var(--color-text);
    font-family: "Helvetica Neue","Helvetica",Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    line-height: 1.75
}

main {
    flex: 1;
    padding-top: var(--navbar-height)
}

a {
    /* color:var(--color-link); */
    text-decoration: none
}

ul,ol {
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 40px
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

p:last-child,blockquote:last-child,figure:last-child,ul:last-child,ol:last-child {
    margin-bottom: 0
}

.content {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 1rem auto;
    padding-inline:1rem}

.content img {
    max-height: 40rem;
    max-width: 100%
}

.content video {
    max-height: 40rem;
    max-width: 100%
}

.content.with-sidebar {
    max-width: var(--page-with-toc-max-width)
}

.site-footer {
    position: relative;
    z-index: 1;
    background-color: RGB(20,110,190);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 30px 40px
}

.site-footer a {
    color: #FFFFFF;
    text-decoration: none;
    margin-inline:.8rem}

.site-footer .internal-links {
    width: 100%;
    padding-bottom: 20px;
    max-width: 960px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

@media (max-width: 767px) {
    .site-footer .internal-links {
        flex-direction:column;
        text-align: center
    }
}

.site-footer .external-links {
    display: flex;
    width: 100%;
    max-width: 960px;
    justify-content: center
}

.site-footer .external-links a {
    max-width: 100%;
    display: inline-block
}

.site-footer .external-links a img {
    margin-inline:.625rem}

.site-footer .external-links a img:hover {
    filter: brightness(0) invert(1)
}

.site-footer a:hover {
    color: #fff
}

.site-footer p {
    margin-top: 20px;
    color: #999
}

pre {
    padding: 1rem;
    overflow: auto;
    border-radius: 4px
}

pre[data-linenos] {
    padding: 1rem 0
}

pre table td {
    padding: 0
}

pre table td:nth-of-type(1) {
    text-align: center;
    user-select: none
}

pre mark {
    display: block;
    background-color: rgba(254,252,232,.9)
}

pre table {
    width: 100%;
    border-collapse: collapse
}

.page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline:5.625rem;padding-bottom: calc(var(--navbar-height)/2);
    min-height: var(--page-header-height);
    background-color: #000;
    overflow: hidden;
    background-image: url(/assets/page-header-bg.svg);
    background-size: 90% 100%;
    background-position: bottom right;
    background-repeat: no-repeat
}

@media (max-width: 767px) {
    .page-header {
        padding-inline:2rem
    }
}

@media (max-width: 767px) {
    .page-header {
        background-size:250% 100%;
        background-position-x: -533px
    }
}

.page-header .hero-block h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 120%;
    color: #fff
}

.page-header .hero-block p {
    font-style: normal;
    font-size: 1.4rem;
    line-height: 120%;
    display: flex;
    align-items: center;
    color: #fff;
    word-wrap: normal
}

:not(pre)>code {
    color: #f54029;
    border: 1px solid #f54029;
    border-radius: 4px;
    padding: 0 .4rem
}

a>code {
    border-color: var(--color-link);
    color: var(--color-link)
}

.page_card {
    background-color: #000;
    border-radius: 16px;
    background-image: url("/assets/frontpage/hero_dancing_lines.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1rem;
    max-width: 23rem
}

.page_card .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.page_card .card_content {
    color: #fff
}

.page_card .card_content h4 {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0;
    margin: 0 0 1rem 0
}

.page_card .card_content p {
    font-size: .9rem
}

.page_card .arrow {
    background-image: url("/assets/down-arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 3rem;
    height: 3rem;
    margin: auto 0 auto .5rem;
    transform: rotate(-90deg);
    filter: invert(1)
}

.youtube_placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 16/9;
    width: 100%;
    background-color: #333
}

.youtube_placeholder div {
    display: flex;
    flex-direction: column;
    color: #fff;
    padding: 1.5rem;
    gap: 1.5rem
}

.youtube_placeholder div img {
    margin-inline:auto}

.youtube_placeholder div p {
    max-width: 30rem;
    text-align: center;
    margin-inline:auto}

.youtube_placeholder div button {
    max-width: fit-content;
    margin-inline:auto;padding: .5rem 1rem;
    border-radius: 9999px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0);
    color: #000;
    cursor: pointer
}

.youtube_placeholder div button:hover {
    border: 1px solid #fff;
    color: #fff;
    background-color: #333
}

.call-to-action {
    background-color: #000;
    border: 2px solid #000;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 1000px;
    padding: .6em 2em
}

.call-to-action.inverted {
    border: 2px solid #fff;
    background-color: #fff;
    color: #093358;
}

.call-to-action.inverted.secondary {
    background-color: RGB(20,110,190);
    color: #fff
}

.call-to-action.inverted.secondary:hover {
    background-color: #fff;
    color: #000
}

.call-to-action.secondary {
    background-color: #fff;
    color: #000
}

.call-to-action.secondary:hover {
    background-color: #000;
    color: #fff
}

.cta-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: .5rem
}

.cta-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 1rem;
    align-items: center
}

.site-header {
    position: fixed;
    z-index: 1000;
    --header-padding: 1.5dvw;
    --header-vertical-padding: 8px;
    display: flex;
    width: 100%;
    height: var(--navbar-height);
    padding-left: 20px;
    align-items: center;
    margin-bottom: 0;
    font-size: 1.125rem;
    color: #fff;
    background: #146ebe;
}

@media screen and (min-width: 768px) {
    .site-header {
        padding-right:10px
    }
}

@media screen and (min-width: 1000px) {
    .site-header {
        padding-right:20px
    }
}

.site-header .brand {
    margin-right: auto
}

.site-header .brand img {
    width: 128px;
    height: 55px;
    display: block
}

.site-header .dropdown-button {
    font-family: "webflow-icons";
    font-size: 1.5rem;
    padding: 0 1rem;
    align-self: stretch;
    display: flex;
    align-items: center
}

@media screen and (min-width: 768px) {
    .site-header .dropdown-button {
        display:none
    }
}

.site-header nav {
    display: flex
}

@media screen and (max-width: 767px) {
    .site-header nav {
        position:fixed;
        z-index: 800;
        top: 5.937rem;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: #000;
        max-height: calc(100vh - 5.937rem);
        overflow-y: auto
    }
}

@media screen and (min-width: 768px) {
    .site-header nav {
        align-items:center
    }
}

.site-header nav a {
    color: #fff;
    font-size: 1.125rem;
    padding: var(--header-vertical-padding) var(--header-padding)
}

@media screen and (max-width: 767px) {
    .site-header nav a {
        font-size:1.5rem
    }
}

.site-header nav a:hover {
    color: #0082f3
}

.site-header nav a.current {
    color: #0082f3
}

.site-header nav a.primary {
    border-radius: 60px;
    background-color: #fff;
    color: #000 !important;
    padding-inline:clamp(1em,3dvw,2em);margin-inline:.5rem}

@media screen and (max-width: 767px) {
    .site-header nav a.primary {
        margin-top:1.2rem;
        text-align: center
    }
}

@media screen and (min-width: 768px) {
    .site-header nav a.primary:not(:last-child) {
        margin-right:12px
    }
}

.site-header nav .submenu-checkbox {
    opacity: 0;
    position: absolute
}

@media screen and (max-width: 767px) {
    .site-header nav .submenu-checkbox:not(:checked)~.section-submenu-wrap {
        display:none
    }

    .site-header nav .submenu-checkbox:not(:checked)~.submenu-title .arrow {
        background-image: url("/assets/down-arrow.svg");
        width: 1rem;
        height: 1rem;
        margin: auto 0;
        filter: invert(1)
    }

    .site-header nav .submenu-checkbox:checked~.submenu-title .arrow {
        background-image: url("/assets/up-arrow.svg");
        width: 1rem;
        height: 1rem;
        margin: auto 0;
        filter: invert(1)
    }
}

.site-header nav .submenu-title {
    margin: auto 0;
    padding: var(--header-vertical-padding) var(--header-padding)
}

@media screen and (max-width: 767px) {
    .site-header nav .submenu-title {
        display:flex;
        flex-direction: row;
        gap: 1rem;
        font-size: 1.5rem
    }
}

.site-header nav .submenu-title label:hover {
    color: #0082f3
}

.site-header nav label {
    cursor: pointer
}

@media screen and (min-width: 768px) {
    .site-header .section-wrap {
        position:relative;
        align-self: stretch;
        display: flex;
        justify-content: center
    }

    .site-header .section-wrap:not(:hover,:focus-within) .section-submenu {
        display: none
    }

    .site-header .section-submenu-wrap {
        position: absolute;
        top: 60px;
        padding-top: 4px
    }

    .site-header .section-submenu {
        background: #fff;
        border: 1px solid #f4f4f4;
        border-radius: 6px
    }

    .site-header .section-submenu a {
        color: #000
    }
}

@media screen and (max-width: 767px) {
    .site-header .section-submenu {
        padding-left:1em;
        display: flex;
        flex-direction: column
    }

    .site-header .section-submenu a {
        font-size: 1.125rem
    }

    .site-header .section-wrap {
        margin: 8px 0
    }
}

#site-header-dropdown-checkbox {
    display: none
}

@media screen and (max-width: 767px) {
    #site-header-dropdown-checkbox:checked~.dropdown-button {
        background-color:#000
    }

    #site-header-dropdown-checkbox:checked~.page-overlay {
        position: fixed;
        z-index: 400;
        top: 5.937rem;
        right: 0;
        bottom: 0;
        left: 0;
        display: block
    }

    #site-header-dropdown-checkbox:not(:checked)~nav {
        display: none
    }
}

#frontpage h2 {
    margin-block:1.38rem 1rem}

#frontpage #hero {
    height: calc(100vh - var(--navbar-height));
    background: #093358;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    /* background: linear-gradient(90deg, #0072ff, #00c6ff); */
}

@media (max-width: 767px) {
    #frontpage #hero {
        background-image:url("/assets/frontpage/hero_dancing_lines_mobile.svg")
    }
}

#frontpage #hero .hero_content {
    height: 88%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: linear-gradient(to bottom, #146EBE, #093358), url(/assets/frontpage/hero_dancing_lines.svg);
    :;}

#frontpage #hero .hero_content h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    max-width: 36rem;
    margin: 0 auto;
    text-align: center
}

@media (max-width: 767px) {
    #frontpage #hero .hero_content h2 {
        font-size:2.125rem;
        margin: 0 30px
    }
}

#frontpage #hero .hero_content img {
    width: 200px;
    height: 86px;
    margin: 0 auto 2rem auto;
    /* filter: invert(1); */
}

#frontpage #hero #hero_curve1 {
    /* border-radius:10% 100%; */
    /* background-color: RGB(2,102,186); */
    /* height:25vh; */
    /* width:200%; */
    /* position:absolute; */
    /* bottom:-1vh; */
    /* right:-50px; */
    /* width: 100%; */
    /* height: 5px; */
    /* background: #333; */
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); */
    /* width: 100%; */
    /* height: 1px; */
    /* background: repeating-linear-gradient(90deg, #000, #000 10px, transparent 10px, transparent 20px); */
    /* width: 100%; */
    /* height: 5px; */
    /* background: linear-gradient(90deg, #ff9a9e, #fad0c4); */
    /* width: 100%; */
    /* height: 50px; */
    /* background: #ff6f61; */
    /* clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); */
    /* width: 100%; */
    /* height: 200px; */
    /* background: linear-gradient(45deg, #ff7e5f, #feb47b); */
    /* clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); */
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #ffffff, #ffffff);
    clip-path: ellipse(100% 100% at 50% 100%);
}

div#hero_curve1 {
}

@media (max-width: 767px) {
    #frontpage #hero #hero_curve1 {
        height:15vh
    }
}

#frontpage #hero #hero_curve2 {
    border-radius: 10% 100%;
    background-color: RGB(73,158,222);
    height: 25vh;
    /* width:200%; */
    position: absolute;
    bottom: -3vh;
    right: -50px
}

@media (max-width: 767px) {
    #frontpage #hero #hero_curve2 {
        height:15vh
    }
}

#frontpage #hero #hero_curve3 {
    border-radius: 10% 100%;
    background-color: RGB(161,199,229);
    height: 25vh;
    /* width:200%; */
    position: absolute;
    bottom: -5vh;
    right: -50px
}

@media (max-width: 767px) {
    #frontpage #hero #hero_curve3 {
        height:15vh
    }
}

#frontpage #hero #hero_curve4 {
    border-radius: 10% 100%;
    background-color: #fff;
    height: 25vh;
    /* width:200%; */
    position: absolute;
    bottom: -7vh;
    right: -50px
}

@media (max-width: 767px) {
    #frontpage #hero #hero_curve4 {
        height:15vh
    }
}

#frontpage #use-case-personal {
    background: url("/assets/frontpage/personal-bg.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-y: bottom -20px;
    position: relative;
    overflow: hidden;
    padding-inline:2rem;padding-bottom: 175px;
}

@media (max-width: 59rem) {
    #frontpage #use-case-personal {
        background-image:url("/assets/frontpage/personal-bg-mobile.svg");
        background-size: 100% 241px;
        padding-inline:1rem}
}

#frontpage #use-case-personal .use-case-personal-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1000px;
    margin-inline:auto}

@media (max-width: 59rem) {
    #frontpage #use-case-personal .use-case-personal-content {
        flex-direction:column-reverse;
        align-items: center
    }
}

#frontpage #use-case-personal .col {
    display: flex;
    flex-direction: column;
    max-height: 418px;
    justify-content: center;
    max-width: 27.9rem
}

#frontpage #use-case-personal .col h2 {
    display: inline;
    color: #000;
    font-size: 2.5rem;
    font-weight: 700
}

@media (max-width: 59rem) {
    #frontpage #use-case-personal .col h2 {
        margin-top:2rem;
        text-align: center
    }
}

@media (max-width: 767px) {
    #frontpage #use-case-personal .col h2 {
        font-size:2.125rem
    }
}

#frontpage #use-case-personal img {
    margin: auto 0px;
    flex: auto;
    max-width: 470px;
    aspect-ratio: 470/418
}

@media (max-width: 59rem) {
    #frontpage #use-case-personal img {
        margin:0px auto
    }
}

#frontpage #use-case-personal #personal_bottom {
    position: absolute;
    bottom: -340px;
    height: 400px;
    background-color: #000;
    border-radius: 100% 100%;
    width: 150%;
    left: -25%
}

@media (max-width: 767px) {
    #frontpage #use-case-personal #personal_bottom {
        width:200%;
        left: -50%
    }
}

#frontpage #use-case-community {
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 100px;
    padding-inline:2rem}

#frontpage #use-case-community h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    max-width: 36rem;
    margin: 0 auto
}

#frontpage #use-case-community .call-to-action {
    margin-block:2em 4em}

#frontpage #use-case-community img {
    margin: 0 auto;
    aspect-ratio: 756/487;
    flex: auto;
    max-width: 756px
}

#frontpage #complex-apps {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1200px;
    margin-inline:auto;padding: 10rem 2rem
}

@media (max-width: 64rem) {
    #frontpage #complex-apps {
        flex-direction:column-reverse;
        align-items: center
    }
}

#frontpage #complex-apps .col {
    display: flex;
    flex-direction: column;
    max-height: 418px;
    justify-content: center;
    max-width: 27.9rem;
    margin-inline:auto}

@media (max-width: 767px) {
    #frontpage #complex-apps .col {
        max-width:none
    }
}

#frontpage #complex-apps .col h2 {
    display: inline;
    color: #000;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 2rem 0
}

@media (max-width: 64rem) {
    #frontpage #complex-apps .col h2 {
        text-align:center
    }
}

@media (max-width: 767px) {
    #frontpage #complex-apps .col h2 {
        font-size:2.125rem;
        margin: 0 auto 2rem auto
    }
}

#frontpage #complex-apps #complex-apps-image {
    outline: 20px solid #000;
    border-radius: 30px;
    flex: auto;
    max-width: min(576px,100%);
    margin: 20px
}

#frontpage #buildonaisns {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 50px 0 70px 0;
    overflow: hidden;
    justify-content: space-around;
    position: relative;
    color: #fff;
    background-color: #FFFFFF;
    background-image: url("/assets/frontpage/buildon-bg.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat
}

@media (max-width: 767px) {
    #frontpage #buildonaisns {
        padding: 0px 35px 50px 35px;
    }
}

@media (max-width: 767px) {
    #frontpage #buildonaisns {
        background-image:url("/assets/frontpage/buildon-bg-mobile.svg");
        background-size: 100% 480px;
        background-position-y: bottom
    }
}

#frontpage #buildonaisns h2 {
    text-align: center;
    margin: 0 auto;
    font-weight: 700
}

#frontpage #buildonaisns p {
    text-align: center;
    margin: 0 auto;
    max-width: 433px;
    font-size: 1.125rem
}

#frontpage #buildonaisns .logo {
    /* filter: invert(1); */
    width: 130px;
    height: 130px;
    margin: 0 auto
}

#frontpage #buildonaisns #bridge_visual {
    position: absolute;
    top: 100px;
    left: calc(60dvw - 800px);
    width: 240px;
    height: 287px
}

#frontpage #buildonaisns #homeserver {
    position: absolute;
    bottom: 10px;
    left: calc(60dvw - 800px);
    width: 230px;
    height: 235px
}

#frontpage #buildonaisns #federation_visual {
    position: absolute;
    top: calc(200px - 4dvw);
    right: calc(60dvw - 800px)
}

#frontpage #buildonaisns .call-to-action {
    display: flex;
    align-items: center;
    gap: .5em
}

#frontpage #buildonaisns .call-to-action img {
    max-height: 1.5em
}

#frontpage #sponsors {
    display: flex;
    flex-direction: column;
    padding: 5rem 45px
}

#frontpage #sponsors h2 {
    text-align: center;
    margin: 0 auto;
    font-weight: 700
}

#frontpage #sponsors #sponsors_grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 2rem auto
}

@media (max-width: 767px) {
    #frontpage #sponsors #sponsors_grid {
        margin:0 auto
    }
}

#frontpage #sponsors #sponsors_grid .sponsor_card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 1rem 0;
    padding: 1rem 0;
    width: 22rem
}

@media (max-width: 767px) {
    #frontpage #sponsors #sponsors_grid .sponsor_card {
        width:100%
    }
}

#frontpage #sponsors #sponsors_grid .sponsor_card img {
    margin-bottom: 1rem
}

#frontpage #sponsors #sponsors_grid .sponsor_card .sponsor_text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 12.5rem
}

#frontpage #sponsors #sponsors_grid .sponsor_card .sponsor_text h3 {
    text-align: center;
    margin: 0 auto;
    font-size: 1.125rem;
    font-weight: 700
}

#frontpage #sponsors #sponsors_grid .sponsor_card .sponsor_text a {
    margin: 0 auto
}

#frontpage #sponsors p {
    text-align: center;
    margin: 0 auto;
    max-width: 638px
}

#frontpage #sponsors .call-to-action {
    margin-block-start:2rem}

article.post {
    width: 100%;
    word-break: break-word
}

article.post:not(:last-of-type) {
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid #ddd
}

article.post:last-of-type {
    margin-bottom: 1.5rem
}

article.post table {
    table-layout: fixed;
    border-spacing: 0
}

article.post table th {
    border-top: 1px solid var(--borders-color)
}

article.post table td,article.post table th {
    padding: .5rem;
    border-bottom: 1px solid var(--borders-color)
}

article.post table td:first-of-type,article.post table th:first-of-type {
    border-left: 1px solid var(--borders-color)
}

article.post table td:last-of-type,article.post table th:last-of-type {
    border-right: 1px solid var(--borders-color)
}

article.post table th:first-of-type {
    border-top-left-radius: 16px
}

article.post table th:last-of-type {
    border-top-right-radius: 16px
}

article.post table tbody tr:last-of-type td:first-of-type {
    border-bottom-left-radius: 16px
}

article.post table tbody tr:last-of-type td:last-of-type {
    border-bottom-right-radius: 16px
}

article.post table tr:nth-child(odd) td {
    background-color: #eee
}

article.post blockquote {
    margin: 0 0 10px 0;
    padding: 10px 20px;
    border-left: 5px solid #e2e2e2
}

article.post header {
    margin-bottom: 1rem
}

.post-main {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: center
}

.post-main .callout {
    display: grid;
    grid-template-columns: 300px auto;
    color: #fff;
    background-color: #000;
    border-radius: 16px
}

@media (max-width: 767px) {
    .post-main .callout {
        grid-template-columns:auto;
        grid-template-rows: 10rem auto
    }
}

.post-main .callout .left-col {
    display: grid;
    place-content: center;
    background-image: url("/assets/mandala.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

.post-main .callout .left-col h2 {
    margin: 2rem;
    text-align: center
}

.post-main .callout .right-col {
    padding: 2rem
}

.post-main .callout a {
    color: #226de3
}

.post-main .callout .call-to-action {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 700;
    background-color: #226de3;
    padding: .5rem 1.5rem;
    border-radius: 9999px;
    color: #fff;
    margin-block-start:1rem}

.post-main .callout .call-to-action:hover {
    background-color: #fff;
    color: #226de3
}

.post-main aside {
    flex: 1 1;
    max-width: 320px;
    margin-left: 4rem;
    padding: 1.5rem;
    background-color: #f4f4f4
}

@media (max-width: 1023px) {
    .post-main aside {
        display:none
    }
}

.post-main aside a {
    color: #333
}

.post-main aside a:hover {
    color: #0098d4
}

.post-main aside>:first-child {
    margin-top: 0
}

.post-main aside>ul>li:not(:last-child) {
    margin-bottom: .5rem
}

.post-content {
    flex: 3;
    min-width: 0
}

.post-content blockquote h2 {
    font-size: 1.5rem
}

.post-content blockquote h3 {
    font-size: 1.2rem
}

.post-content blockquote h4 {
    font-size: 1.1rem;
    font-style: italic
}

#continue-reading {
    scroll-margin-top: 60px
}

h3 a {
    color: var(--color-link)
}

.footnote-definition>p {
    display: inline
}

.pagination {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    font-size: 120%
}

.pagination>div {
    flex: 1
}

.pagination a {
    padding: .5rem;
    display: block;
    width: 100%;
    text-align: center
}

#taxonomy-list h4 {
    margin-top: 0px
}

#taxonomy-list h3 {
    margin-bottom: 0px
}

#taxonomy-single .content {
    align-items: flex-start
}

#taxonomy-single .content>header {
    position: relative;
    margin-bottom: 10px
}

#taxonomy-single .content>header:after {
    content: "";
    height: 1px;
    width: 70px;
    position: absolute;
    bottom: -10px;
    left: 24px;
    margin-left: -25px;
    background: rgba(0,0,0,.25) none repeat scroll 0% 0%
}

#taxonomy-single .content>header h2 {
    margin-top: 0px;
    margin-bottom: 0px
}

#taxonomy-single .content>header h1 {
    margin-bottom: 0px
}

#taxonomy-single .content>article>.post h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.563rem
}

.projects-card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, 17.6rem);
    gap: 1rem;
    margin-inline:auto}

@media (max-width: 767px) {
    .projects-card-deck {
        max-width:17.6rem
    }
}

.projects-card-deck>div {
    height: 100%;
    width: 100%
}

.project-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 1rem;
    min-height: 100%;
    border: 1px solid #d2d2d2;
    border-radius: 16px
}

.project-card img {
    margin: 0;
    width: 65px;
    height: 65px;
    box-sizing: content-box
}

.project-card h3 {
    margin: 0;
    font-style: normal;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1
}

.project-card a,.project-card .open-project {
    margin-block:auto 0;color: var(--color-text-light);
    text-decoration: none
}

.project-card p {
    line-height: 1
}

.project-card .licence-language {
    display: flex;
    flex-direction: row;
    gap: .2rem
}

.project-card .pill {
    background-color: #e9e9e9;
    border-radius: 9999px;
    padding-inline:.5rem;color: var(--color-text)
}

.filtered-out {
    display: none
}

.filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 40rem;
    margin: 0 auto 2rem auto;
    justify-content: center;
    gap: 1rem
}

.filters .filter-wrap {
    position: relative
}

.filters .filter-wrap .filter {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: .8rem;
    z-index: 100;
    padding: .5rem .8rem;
    background-color: #fafafa;
    color: #000;
    border: 1px solid #d2d2d2;
    border-radius: 1000px;
    cursor: pointer;
    user-select: none
}

.filters .filter-wrap .filter .divider {
    width: 1px;
    height: 100%;
    border-left: 1px solid var(--borders-color)
}

.filters .filter-wrap .filter img {
    height: .9em;
    margin-block:auto}

.filters .filter-wrap .filter.enabled {
    background-color: #000;
    border-color: #666;
    color: #fff
}

.filters .filter-wrap .filter.enabled img {
    filter: invert(1)
}

.filters .filter-wrap .filter.expanded {
    z-index: 200
}

.filters .filter-wrap .filter-menu {
    position: absolute;
    top: 2.7rem;
    left: 0;
    min-width: 15rem;
    max-width: 20rem;
    z-index: 200;
    padding: .5rem 1rem;
    background-color: #fafafa;
    border: 1px solid var(--borders-color);
    border-radius: 16px
}

.filters .filter-wrap .filter-menu p {
    margin: 0;
    margin-bottom: .5rem;
    font-size: .8rem;
    text-align: start
}

.filters .filter-wrap .filter-menu input {
    accent-color: #000
}

.filters .filter-wrap .filter-menu input,.filters .filter-wrap .filter-menu label {
    cursor: pointer;
    user-select: none
}

.filters .filter-wrap .filter-menu .reset-links {
    font-size: .8rem
}

.filters .filter-wrap .filter-menu .reset-links a {
    cursor: pointer;
    user-select: none
}

.filters .filter-wrap .filter-menu:not(.display) {
    display: none
}

.filters .filter-wrap .filter-menu button {
    background: none;
    border: rgba(0,0,0,0);
    color: var(--color-text);
    cursor: pointer
}

.maturity {
    border: 1px solid var(--borders-color);
    border-radius: 9999px;
    padding: 0 .6rem;
    font-size: 1rem;
    font-weight: 400;
    max-width: fit-content
}

.maturity.stable {
    background-color: #dff6d5;
    border-color: #245c0c;
    color: #245c0c
}

.maturity.beta {
    background-color: #f6e7d5;
    border-color: #6f420f;
    color: #6f420f
}

.maturity.alpha {
    background-color: #f6d5d5;
    border-color: #8b1212;
    color: #8b1212
}

.maturity.obsolete {
    background-color: #e6e6e6;
    border-color: #4a4a4a;
    color: #4a4a4a
}

.title-row {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    gap: .2rem;
    align-items: start
}

#filters-overlay {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(0,0,0,.5)
}

#filters-overlay:not(.display) {
    display: none
}

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1rem
}

.project-links .pill {
    display: flex;
    align-items: center;
    gap: .2rem;
    border: 1px solid var(--color-text);
    color: var(--color-text);
    border-radius: 9999px;
    padding: .1rem .4rem
}

.project-links .pill .fillme {
    fill: var(--color-text);
    stroke: var(--color-text)
}

.project-links .pill .fillme-inverse {
    stroke: #fff
}

.project-links .pill:hover {
    background-color: var(--color-text);
    color: #fff
}

.project-links .pill:hover .fillme {
    fill: #fff;
    stroke: #fff
}

.project-links .pill:hover .fillme-inverse {
    stroke: var(--color-text)
}

.features-matrix ul {
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    padding-inline:1rem}

.features-matrix ul li {
    padding: .5rem;
    line-height: 1.6;
    list-style-position: inside;
    list-style-image: url("/assets/cross_unsupported.svg")
}

.features-matrix ul li.supported {
    list-style-image: url("/assets/tick_supported.svg")
}

.features-matrix ul li+li {
    border-top: 1px solid #d2d2d2
}

body:has(.projects-card-deck>div>.client-checkbox:checked) {
    overflow: hidden
}

.clients_page {
    padding-top: 3rem
}

.clients_page h2 {
    text-align: center;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem
}

.clients_page p {
    text-align: center;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 120%;
    margin: 0 auto 4rem auto;
    max-width: 40rem
}

.projects-card-deck.clients {
    margin-bottom: 5rem
}

.project-card.client {
    color: var(--color-text);
    cursor: pointer
}

.platform-links {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 16px 4px;
    flex-wrap: wrap
}

.platform-pill {
    background: #e9e9e9;
    border-radius: 16px;
    padding: .375rem .625rem;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 120%;
    color: #000
}

.client-details {
    padding-top: 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem
}

@media (max-width: 767px) {
    .client-details {
        grid-template-columns:1fr
    }
}

.client-details .details {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.client-details .details .app-logo {
    width: 8rem;
    margin-inline:auto}

.client-details .details h3 {
    display: flex;
    gap: .5rem;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 700;
    font-size: 2rem
}

.client-details .details h3 .maturity {
    padding-block:.3rem}

.client-details .details p {
    margin: 0;
    text-align: center;
    font-size: 1rem
}

.client-details .details .latest-release {
    margin-bottom: 0 auto;
    font-size: .8rem;
    text-align: center
}

.client-details .project-links {
    margin-top: 1rem;
    justify-content: center
}

.client-checkbox {
    display: none
}

.client-checkbox:checked~.client-details-overlay {
    position: fixed;
    z-index: 150;
    top: var(--navbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5)
}

.client-checkbox:not(:checked)~.client-details-overlay {
    display: none
}

.client-checkbox:not(:checked)~.client-details {
    display: none
}

.stores {
    display: flex;
    justify-content: center;
    gap: .3rem 1rem;
    flex-wrap: wrap;
    margin-block:2rem}

.stores a img {
    height: 54px;
    display: block
}

.bridges-page.content p {
    margin-block:2.5rem}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 17.6rem);
    row-gap: .8rem;
    margin-block:2rem 3rem;margin-inline:auto}

.platforms-grid .platform {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    padding-block:.5rem;padding-inline:.5rem 1rem;max-width: fit-content;
    cursor: pointer;
    color: var(--color-text)
}

.platforms-grid .platform img {
    width: 64px;
    height: 64px;
    border: 1px solid #d2d2d2;
    border-radius: 15px
}

.platforms-grid .platform .details {
    display: flex;
    flex-direction: column
}

.platforms-grid .platform .details h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2
}

.platforms-grid .platform .details p {
    margin: 0;
    font-size: .875rem;
    color: #545454
}

.platforms-grid .platform:hover {
    background-color: #e9e9e9;
    border-radius: 12px
}

.bridges_implem>:nth-child(even) {
    background-color: #fafafa
}

.implementation {
    padding: 80px;
    max-width: var(--page-max-width);
    margin-inline:auto;display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem
}

@media (max-width: 767px) {
    .implementation {
        padding:1rem
    }
}

@media (max-width: 767px) {
    .implementation {
        grid-template-columns:1fr
    }
}

.implementation .title-row {
    align-items: center;
    justify-content: flex-start;
    gap: .5rem
}

.implementation .title-row h3 {
    margin-block:1rem}

.implementation .recommended-chip {
    display: flex;
    align-items: center;
    gap: .2rem;
    max-width: fit-content;
    font-style: normal;
    border-bottom: 1px dotted var(--borders-color)
}

.implementation .privileges,.implementation .licence {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block:.5rem;margin-bottom: 1rem
}

.implementation .privileges>div,.implementation .licence>div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem
}

.implementation .privileges>div div,.implementation .privileges>div a,.implementation .licence>div div,.implementation .licence>div a {
    background-color: #e9e9e9;
    border-radius: 9999px;
    padding-inline:.5rem;color: var(--color-text)
}

.servers p {
    text-align: center;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 120%;
    margin: 0 auto 4rem auto
}

.server-links {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem
}

.server-links a {
    display: flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid #777;
    border-radius: 999px;
    padding-inline:.5rem;font-size: .8rem
}

.server-links a svg {
    width: 1.2em;
    height: 1.2em
}

.server-links a svg * {
    fill: #777
}

.server-links a svg line {
    stroke: #777
}

.server-links a:hover {
    color: #fff;
    background-color: #777
}

.server-links a:hover svg * {
    fill: #fff
}

.server-links a:hover svg line {
    stroke: #fff
}

#sdk-purpose-selector {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
    border: rgba(0,0,0,0)
}

#sdk-purpose-selector input {
    display: none
}

#sdk-purpose-selector label {
    cursor: pointer;
    user-select: none;
    font-weight: 700;
    font-size: 1.25rem
}

#sdk-purpose-selector input[type=radio]:checked+label {
    border-bottom: 3px solid #000
}

.hidden {
    display: none
}

.podcasts-content {
    display: flex;
    max-width: 1200px;
    margin: 0 auto 2em
}

@media (max-width: 767px) {
    .podcasts-content {
        flex-direction:column
    }
}

.podcasts-column {
    margin: 0 1em;
    flex: 1
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: .2em
}

.badges img {
    height: 39px
}

.otwsu h2 {
    display: inline-block;
    color: #fff;
    padding: .2em .4em .1em;
    background-color: #282828;
    border-radius: 3px;
    font-size: 1.563rem
}

.otwsu h2+h3 {
    margin-top: 0
}

.otwsu time {
    color: #777
}

.otwsu-episode {
    margin-bottom: 1em;
    clear: both
}

.otwsu-episode h3 {
    margin-top: 0
}

@media screen and (max-width: 703px) {
    .otwsu-episode img {
        margin:-1em 0 1em;
        width: 100%;
        max-height: 33vw;
        object-fit: cover;
        object-position: 0 100%
    }
}

@media screen and (min-width: 704px) {
    .otwsu-episode img {
        margin:0 0 .5em 1em;
        float: right;
        width: 40%
    }
}

.guardian,.staff {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 2.5em 0;
    gap: 1.25rem
}

.guardian.reverse,.staff.reverse {
    flex-direction: row-reverse
}

.guardian .staff-details p,.staff .staff-details p {
    margin-block:0}

.guardian .staff-details .socials,.staff .staff-details .socials {
    display: flex;
    flex-direction: row;
    padding-inline:0;list-style: none;
    gap: .6em
}

.guardian img,.staff img {
    width: 128px;
    max-width: 25vw;
    border-radius: 100%
}

.guardian-name,.staff-name {
    font-weight: bold;
    margin: 0 0 .5rem
}

.legacy-doc-warning {
    padding: 1rem;
    border-radius: .5rem;
    background-color: #f6e7d5;
    color: #6f420f;
    margin-top: 1rem;
    margin-bottom: 1rem
}

.legacy-doc-warning h2 {
    margin-top: 0px;
    margin-bottom: 10px
}

.legacy-doc-warning.outdated {
    background-color: #f6d5d5;
    color: #8b1212
}

header {
    margin-bottom: 1em
}

header h1 {
    margin-bottom: 0
}

header .metadata {
    font-size: .8rem
}

.docs-body {
    width: 100vw;
    display: flex;
    flex-direction: row;
    --docs-menu-width: 18rem
}

.docs-menu {
    position: fixed;
    padding-block-start:var(--navbar-height);inset-block: 0;
    inset-inline-start: 0;
    overflow-y: auto;
    background-color: #fff;
    border-right: 1px solid var(--borders-color);
    max-width: var(--docs-menu-width)
}

.docs-menu .docs-menu-inner {
    padding: 1.5rem
}

@media (max-width: 767px) {
    .docs-menu {
        --panel-bottom-trick: 300px;
        border-right: unset;
        max-width: unset;
        inset-inline-end: 0;
        inset-block-end: calc(-1*var(--panel-bottom-trick));
        padding-block-end:calc(var(--panel-bottom-trick) + 5rem);z-index: 990
    }
}

.docs-menu .submenu-checkbox {
    display: none
}

.docs-menu .submenu-checkbox:not(:checked)~.section-submenu-wrap {
    display: none
}

.docs-menu .submenu-checkbox:not(:checked)~.submenu-title .arrow {
    background-image: url("/assets/down-arrow.svg");
    width: 1rem;
    height: 1rem;
    margin: auto 0
}

.docs-menu .submenu-checkbox:checked~.submenu-title .arrow {
    background-image: url("/assets/up-arrow.svg");
    width: 1rem;
    height: 1rem;
    margin: auto 0
}

.docs-menu .submenu-title {
    display: flex;
    flex-direction: row;
    gap: .8rem;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none
}

.docs-menu ul {
    padding-inline-start:0;list-style: none
}

.docs-menu ul li {
    margin-inline-start:1em;margin-block:.5em}

.docs-menu ul li ul {
    border-left: 1px solid #bbb
}

.docs-menu ul li ul li:hover {
    color: var(--color-link);
    text-decoration: underline
}

.docs-menu ul a {
    color: var(--color-text)
}

.docs-content {
    padding-inline-start:calc(var(--docs-menu-width) + 3rem + .5rem)}

@media (max-width: 767px) {
    .docs-content {
        margin-inline:auto;
        padding-inline:.5rem}
}

.docs-content article p img {
    max-width: 100%;
    margin-inline:auto}

#docs-menu-button {
    position: fixed;
    display: none;
    z-index: 991;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    border: rgba(0,0,0,0);
    border-radius: 9999px;
    padding: .5rem 2rem;
    box-shadow: 0 2px 2px #666
}

@media (max-width: 767px) {
    #docs-menu-button {
        display:inline-block
    }
}

#docs-menu-checkbox:checked~#docs-menu-button {
    background-color: #333
}

@media (max-width: 767px) {
    #docs-menu-checkbox:not(:checked)~.docs-menu {
        display:none
    }
}

@media (max-width: 767px) {
    #docs-menu-checkbox:checked~.docs-content {
        display:none
    }
}

.mjolnir_button {
    border: 1px solid #d9d9d9;
    border-radius: 1000px;
    padding: 0 .4rem;
    background-color: #f2f7fc
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-inline:0;padding: 1rem;
    border: 1px solid #dedede;
    border-radius: 4px
}

figure img {
    max-width: 100%;
    max-height: 100%
}

figure figcaption {
    font-size: .8rem;
    text-align: center
}

.hidden {
    display: none
}

.finding-container {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: .5em;
    padding-top: 0;
    padding-bottom: 0;
    border-left-color: #333;
    border-left-style: solid;
    border-left-width: 2px
}

.finding-header {
    font-style: italic
}

.hosting_page {
    margin: 0 auto;
    padding: 5.625rem 0 2rem 0
}

@media (max-width: 767px) {
    .hosting_page {
        padding:5.625rem 32px 2rem 32px
    }
}

.hosting_page h2 {
    text-align: center;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem
}

.hosting_page .hosting_providers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3.125rem
}

.hosting_page .hosting_providers .provider_card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    flex: 1 0 400px;
    max-width: 400px;
    border: 1px solid #d2d2d2;
    border-radius: 16px
}

@media (max-width: 767px) {
    .hosting_page .hosting_providers .provider_card {
        flex:1 0 300px;
        max-width: 300px
    }
}

.hosting_page .hosting_providers .provider_card .details {
    text-align: center
}

.hosting_page .hosting_providers .provider_card .details .provider_logo_container {
    height: 10rem
}

.hosting_page .hosting_providers .provider_card .details h3 {
    height: 5rem;
    margin: 0;
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: 2rem;
    line-height: 120%
}

.hosting_page .hosting_providers .provider_card .details .operating_since {
    height: 1.5rem;
    font-size: .9rem
}

.hosting_page .hosting_providers .provider_card .call-to-action {
    background-color: #000;
    color: #fff;
    border-radius: 1000px;
    padding: .4rem 2rem;
    align-self: center
}

.try_matrix {
    display: flex;
    flex-direction: column
}

.try_matrix .step-background {
    padding: 5rem 5.625rem
}

@media (max-width: 767px) {
    .try_matrix .step-background {
        padding:1rem
    }
}

.try_matrix .step-background.coloured {
    background-color: #fafafa
}

.try_matrix .step {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block:auto}

@media (max-width: 767px) {
    .try_matrix .step {
        grid-template-columns:1fr
    }
}

.try_matrix .step .instructions {
    display: flex;
    flex-direction: column;
    padding-block:1rem}

.try_matrix .step .instructions h3 {
    font-size: 2.2rem;
    margin-top: 0
}

.try_matrix .step .instructions p {
    font-size: 1.3rem
}

.try_matrix .step img {
    max-height: 220px;
    max-width: 360px;
    margin: auto
}

@media (max-width: 767px) {
    .try_matrix .step img {
        margin-block:2rem;
        max-width: calc(100% - 2rem)
    }
}

.try_matrix .cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center
}

.page-header.support .donate-row {
    display: flex;
    gap: 1rem;
    margin-block-start:2rem}

@media (max-width: 767px) {
    .page-header.support .donate-row {
        flex-direction:column
    }
}

.page-header.support .call-to-action {
    display: flex;
    align-items: center;
    gap: .625rem;
    background: #fff;
    color: #000;
    border-radius: 9999px;
    padding: .5rem 1rem;
    font-size: 1.125rem;
    font-weight: 600
}

@media (max-width: 767px) {
    .page-header.support .call-to-action {
        justify-content:center
    }
}

.support.main>div {
    padding-block:3rem}

@media (max-width: 767px) {
    .support.main>div {
        padding-block:2rem
    }
}

.support.main #join-foundation {
    padding-inline:1rem;max-width: var(--page-max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-inline:auto}

.support.main #join-foundation h2 {
    text-align: center
}

.support.main #join-foundation p {
    text-align: center
}

.support.main #join-foundation .call-to-action {
    background-color: #000;
    font-weight: 600;
    color: #fff;
    border-radius: 9999px;
    padding: .5rem 2rem
}

.support.main #platinum-supporters .supporters-card {
    --cards-per-row: 4
}

.support.main #gold-supporters .supporters-card {
    --cards-per-row: 4
}

.support.main #silver-supporters .supporters-card {
    --cards-per-row: 5
}

.support.main #associate-supporters .supporters-card {
    --cards-per-row: 5
}

.support.main #ecosystem-supporters .supporters-card {
    --cards-per-row: 5
}

.support.main #supporters {
    display: flex;
    flex-direction: column;
    max-width: var(--page-max-width);
    margin-inline:auto;--supporters-padding-inline: 1rem;
    padding-inline:var(--supporters-padding-inline)}

.support.main #supporters .supporters-section {
    display: flex;
    flex-direction: column
}

.support.main #supporters .supporters-section h2 {
    text-align: center
}

.support.main #supporters .supporters-section .cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    --cards-gap: 1rem;
    gap: var(--cards-gap);
    justify-content: center
}

.support.main #supporters .supporters-section .cards .supporters-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --supporters-card-border-width: 1px;
    border: var(--supporters-card-border-width) solid var(--borders-color);
    border-radius: 16px;
    --supporters-card-hpadding: 8px;
    padding: var(--supporters-card-hpadding);
    padding-top: calc(1.5*var(--supporters-card-hpadding));
    gap: var(--supporters-card-hpadding)
}

.support.main #supporters .supporters-section .cards .supporters-card img {
    aspect-ratio: 1/1;
    object-fit: contain;
    width: calc((var(--page-max-width) - 2*var(--supporters-padding-inline) - (var(--cards-per-row) - 1)*var(--cards-gap))/var(--cards-per-row) - 2*var(--supporters-card-hpadding) - 2*var(--supporters-card-border-width))
}

.support.main #the-spec {
    background-color: #fafafa
}

.support.main #the-spec .content {
    display: flex;
    flex-direction: row;
    gap: 3rem
}

@media (max-width: 767px) {
    .support.main #the-spec .content {
        flex-direction:column-reverse
    }
}

.support.main #the-spec .content img {
    max-width: 50%;
    margin-inline:auto}

.support.main #tangible-work {
    background-color: #000;
    color: #fff
}

.support.main #tangible-work .content {
    display: flex;
    flex-direction: row;
    gap: 3rem
}

@media (max-width: 767px) {
    .support.main #tangible-work .content {
        flex-direction:column
    }
}

.support.main #all-your-comms .content {
    display: flex;
    flex-direction: row;
    gap: 3rem
}

.support.main #all-your-comms .content div {
    flex: 2
}

.support.main #all-your-comms .content img {
    flex: 1;
    min-width: 0
}

@media (max-width: 767px) {
    .support.main #all-your-comms .content {
        flex-direction:column-reverse
    }
}

.support.main #open-dev {
    background-color: #000;
    color: #fff
}

.support.main #open-dev .content {
    max-width: 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem
}

.support.main #help-us .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem
}

@media (max-width: 767px) {
    .support.main #help-us .content {
        grid-template-columns:1fr
    }
}

.support.main #help-us .content .blurb {
    display: flex;
    flex-direction: column;
    align-items: start
}

.support.main #help-us .call-to-action {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem 1.5rem
}

.membership {
    max-width: 65rem;
    padding-inline:1rem;margin-inline:auto}

.membership h3 {
    font-size: 1.25rem
}

.membership .row {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin-block:2rem 3rem}

@media (max-width: 767px) {
    .membership .row {
        flex-direction:column
    }
}

.membership .representatives {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1
}

.membership .representatives h3 {
    text-align: center
}

.membership .representatives ul {
    padding-inline:0;width: 100%
}

.membership .representatives li {
    list-style: none;
    text-align: center;
    background-color: #fafafa;
    border-radius: 8px;
    margin-block:.5em;padding: .5em 1rem
}

.membership .tiers-row {
    display: grid;
    grid-template-columns: repeat(4, 15rem);
    gap: 1rem;
    overflow-y: auto;
    padding-block-start:1.5em;margin-block-end:2em}

.membership .tiers-row .tier-card {
    border: 1px solid var(--borders-color);
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1em
}

.membership .tiers-row .tier-card h3 {
    margin-inline:auto;margin-block-start:.5rem}

.membership .tiers-row .tier-card .pricing {
    background-color: #e9e9e9;
    border-radius: 9999px;
    margin-inline:auto;padding-inline:.8em}

.membership .tiers-row .tier-card ul {
    margin-block-start:1rem;padding-inline-start:1em}

.membership .tiers-row .tier-card ul li {
    list-style-image: url("/assets/tick_supported.svg");
    margin-block:.3em}

#howitworks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-block-end:2em}

@media (max-width: 1024px) {
    #howitworks {
        grid-template-columns:1fr
    }
}

#diagram {
    max-width: 680px;
    width: 100%
}

.hidden {
    display: none
}

.legend pre {
    font-size: 14px;
    white-space: pre-wrap
}

.legendNav {
    margin-block-start:1em;background-color: #000;
    color: #fff;
    border-radius: 9999px;
    padding: .5rem 1.5rem;
    max-width: fit-content;
    outline: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
    cursor: pointer
}

.networkNode circle {
    stroke-width: 1px;
    stroke: #ccc
}

#diagram text {
    font-size: 14px
}

.message circle {
    fill: #fff;
    stroke-width: 3px
}

.message text {
    font-weight: bold
}

.networkLink {
    stroke: #ccc;
    stroke-width: 3px
}

.graphNode circle {
    fill: #fff;
    stroke-width: 3px
}

.graphLink,.danglingGraphLink {
    fill: none;
    stroke: #eee;
    stroke-width: 3px
}