@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('../assets/fonts/inter-v12-latin-300.woff2') format('woff2'),
        url('../assets/fonts/inter-v12-latin-300.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/fonts/inter-v12-latin-regular.woff2') format('woff2'),
        url('../assets/fonts/inter-v12-latin-regular.woff') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/fonts/inter-v12-latin-700.woff2') format('woff2'),
        url('../assets/fonts/inter-v12-latin-700.woff') format('woff');
}

:root {
    --md-text-font: "Inter";
    --md-code-font: "JetBrains Mono";
}

body {
    --custom-light-fg-color: rgba(0, 148, 133, 0.1); /* fallback for relative color syntax below */
    --custom-light-fg-color: rgba(from var(--md-primary-fg-color--light) r g b / 0.1);
}

/* override "auto" width to avoid title jumping during page load */
.md-header__button.md-logo img, .md-header__button.md-logo svg {
    width: 1.2rem;
}

/* reduce standard margin between logo and title */
[dir="ltr"] .md-header__title {
    margin-left: 0.5rem;
}

.md-main {
    padding-bottom: 4em;
}

h1 small, h2 small, h3 small {
    display: inline-block;
    font-size: 70%;
    padding: 0.1em 0 0 0.5em;
}

@media screen and (min-width: 640px) {
    div.columns {
        display: flex;
        column-gap: 1em;
    }

    div.columns > div {
        flex-grow: 1;
        width: 100%;
        flex-basis: 100%;
    }

    div.columns > div.x2 {
        flex-basis: 200%;
    }
    div.columns > div.x3 {
        flex-basis: 300%;
    }
    div.columns > div.x4 {
        flex-basis: 400%;
    }

    /* Try making the columns wrapper div neutral regarding margins between its descendants and the preceding heading */
    div.columns > div > :first-child {
        margin-top: 0;
    }
    div.columns > div > :first-child > pre {
        margin-top: 0;
    }

    div.columns > div > :last-child,
    div.columns > div > :last-child > pre {
        margin-bottom: 0;
    }
}

div.columns.boxed > div {
    border: .05rem solid var(--md-primary-fg-color);
    border-radius: 0.3em;
    padding: 0.2em 0.5em;
}

html footer .md-footer-meta.md-typeset a {
    color: var(--md-typeset-a-color);
}

html .md-footer-meta.md-typeset a:focus, html .md-footer-meta.md-typeset a:hover {
    color: var(--md-accent-fg-color);
}

.md-social a[title*="StartupFame"] svg {
    display: none;
}

.md-social a[title*="StartupFame"] {
    width: 150px;
    background: url('../assets/images/startupfame.webp') no-repeat center;
    background-size: contain;
    background-position-y: 65%;
    margin-left: 0.5rem;
}

.md-typeset dt {
    font-weight: bold;
}

.md-typeset dt > code {
     font-weight: normal;
 }

.md-typeset dd,
.md-typeset dd p:first-child {
    margin-top: 0;
}

.md-typeset dd ul {
    margin-top: .5em;
}

.md-sidebar__scrollwrap:focus-within, .md-sidebar__scrollwrap:hover {
    scrollbar-color: auto;
}
.md-sidebar__scrollwrap {
    scrollbar-color: auto;
    scrollbar-width: thin;
}

html {
    hyphens: auto;
}

article {
    text-align: justify;
}

span.buttonref {
    white-space: nowrap;
    border: 1px solid var(--md-typeset-kbd-border-color);
    border-radius: 0.2em;
    font-size: 80%;
    padding: 0.1em 0.3em;
    background: var(--md-code-bg-color);
}

/*
 * Disable hyphenation for inline code (like attributes and values), within code examples and for email links. Also,
 * hyphenation would be harmful on table-centric pages like the pricing page, where it would lead to word breaks
 * like 'con-↩︎nection' or 'in-↩︎cluded' that look ugly in such short pieces of text.
 */
code,
a[href^="mailto:"],
.md-container datalist[data-pagetype=tabular] ~ * {
    hyphens: none;
}

/* Ensure things like `WORKING_ELSEWHERE` are not hacked to pieces when a table is squeezed. */
.md-typeset code {
    word-break: keep-all;
}

/* JetBrains Mono breaks the code annotation button, so we revert to the default font family on that element */
code .md-annotation__index {
    font-family: SFMono-Regular,Consolas,Menlo,monospace;
}

/* Display copy-to-clipboard button more prominently (default: wait for code block to be hovered). */
.md-clipboard {
    color: var(--md-default-fg-color--light);
}

/*
 * The wasted space by the scroll wrapper really hurts our Reference documents, where tables are short and not intended
 * for independent scrolling. Kill the useless margins.
 */
*:not(.tabbed-block) > .md-typeset__scrollwrap {
    margin-top: auto;
    margin-bottom: auto;
}

.twemoji[title]:not([title^=":"]) {
    height: fit-content;
    margin: 0 0.1em;
}
.twemoji[title]:not([title^=":"]) > svg {
    border-radius: 50%;
    box-sizing: content-box;
    padding: 3px;
    width: 14px;
    height: 14px;
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
}
.twemoji[title]:not([title^=":"]):hover > svg {
    background-color: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color);
}

@media (pointer: coarse), (hover: none) {
    .twemoji[title]:not([title^=":"]) {
        display: block;
        width: fit-content;
        margin-top: 6px;
    }

    /*
     * beat the specifity of a margin-killing rule with .md-typeset table:not([class]) td > :first-child
     */
    .md-content .md-typeset .twemoji[title]:not([title^=":"]) {
        margin-top: 6px;
    }

    .twemoji[title]:not([title^=":"]) > svg {
        padding: 4px;
        min-width: 18px;
        height: 18px;
    }
    .twemoji[title]:not([title^=":"]):focus {
        display: flex;
    }
    .twemoji[title]:not([title^=":"]):focus > svg {
        content: attr(title);
        background-color: var(--md-accent-fg-color);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .twemoji[title]:not([title^=":"]):focus::after {
        display: flex;
        content: attr(title);
        background-color: var(--md-accent-fg-color);
        color: var(--md-primary-bg-color);
        padding: 0 0.3em;
    }
}


#pricingParameterBox {
    margin: 0 auto 1rem auto;
    border-radius: .2rem;
    width: fit-content;
    display: flex;
    justify-content: center;
    background-color: var(--custom-light-fg-color);
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0.9rem 1.3rem;
    box-sizing: content-box;

    & > * {
        margin: 0;
    }

    select#country {
        width: 16em;
        padding: 0.5em;
        background: var(--md-admonition-bg-color);
        border: 1px solid #9e9e9e;
        border-radius: .2rem;
    }
}

.segmented-buttons {
    position: relative;
    border: 1px solid lightgrey;
    border-radius: 30px;
    background: var(--md-admonition-bg-color);
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    /* the child elements don't have rounded corners to avoid any gaps. thus, we need to hide their corners. */
    overflow: hidden;
    text-align: center;
}

.segmented-buttons label {
    padding: 5px 12px;

    /* copied from .md-typeset .md-button */
    font-size: .64rem;
    font-weight: 700;
}

.segmented-buttons label:not(:last-of-type) {
    border-right: 1px solid lightgrey;
}

.segmented-buttons [type="radio"] {
    position: absolute;
    left: -9999px;
}

.segmented-buttons [type="radio"]:checked + label {
    color: var(--md-primary-bg-color);
    background: var(--md-primary-fg-color);
}

.segmented-buttons [type="radio"] + label::before {
    width: 1em;
    height: 1em;
    content: " ";
    display: inline-block;
    margin-right: .2rem;
}

.segmented-buttons [type="radio"]:checked + label::before {
    background-size: contain;
    background-color: currentColor;
    transform: translateY(0.13em);
    -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42Z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42Z"></path></svg>');
}

.segmented-buttons [type="radio"] + label .text {
    /* needs to be an inline block so that we can apply the transformation in the unchecked state */
    display: inline-block;
}

.segmented-buttons [type="radio"] + label .text {
    transition: transform 200ms;
}

.segmented-buttons [type="radio"]:not(:checked) + label .text {
    transform: translateX(-0.6em);
}

.segmented-buttons [type="radio"]:not(:checked) + label:hover {
    background: var(--md-primary-fg-color--light);
    color: var(--md-primary-bg-color);
}

#pricing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 1.25rem;

    & > .plan-box {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / span 4;

        & > * {
            margin-block: 0 0.5rem;
        }

        & > ul {
            margin-block-start: 0.5rem;
        }
    }
}

.md-typeset .admonition.plan-box,
.md-typeset details.plan-box {
    border-color: var(--md-primary-fg-color);
    text-align: center;
}
.md-typeset .plan-box > .admonition-title,
.md-typeset .plan-box > summary {
    background-color: var(--md-primary-fg-color);
    background-color: var(--custom-light-fg-color);
}
.md-typeset .plan-box > .admonition-title::before,
.md-typeset .plan-box > summary::before {
    display: none;
}
.md-typeset .plan-box > .admonition-title {
    padding: .4rem .6rem;
    text-align: center;
    font-size: 1.5625em; /* from .md-typeset h2 */
}

.md-typeset *[disabled] .admonition.plan-box,
.md-typeset *[disabled] details.plan-box[disabled] {
    border-color: #9e9e9e; /* from .md-typeset .admonition.quote */
    color: #9e9e9e;
}
.md-typeset *[disabled] .plan-box > .admonition-title,
.md-typeset *[disabled] .plan-box > summary {
    background-color: #9e9e9e1a; /* from .md-typeset .quote > .admonition-title */
}

/*

.md-typeset .quote > .admonition-title, .md-typeset .quote > summary {
  background-color: #9e9e9e1a;
}

 */
.md-typeset .plan-box .price {
    font-size: 2em;
}

html .md-main .md-content .md-typeset .plan-box > ul {
    margin-top: 2.5em;
    margin-bottom: 1.5em;
}

.md-typeset .plan-box ul {
    text-align: left;

    li {
        list-style-type: none;
        list-style-position: outside;
        display: grid;
        grid-template-columns: min-content 1fr;
        gap: 0.2em;
        margin-inline: 0;
    }

    li::before {
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.3em;
        margin-right: 0.3em;
        transform: translateY(-0.09em);
        background-color: var(--md-admonition-fg-color);
        content: " ";
        -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4Z"/></svg>');
        mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4Z"/></svg>');
    }

    li.range::before {
        -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 10H7v2h2zm4 0h-2v2h2zm4 0h-2v2h2zm2-7h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 16H5V8h14z"/></svg>');
        mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 10H7v2h2zm4 0h-2v2h2zm4 0h-2v2h2zm2-7h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 16H5V8h14z"/></svg>');
    }

    li.cards::before {
        -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 16V6H7v10zm0-12c.53 0 1.04.21 1.41.59.38.37.59.88.59 1.41v10c0 .53-.21 1.04-.59 1.41-.37.38-.88.59-1.41.59H7a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2zM3 20h15v2H3c-.53 0-1.04-.21-1.41-.59C1.21 21.04 1 20.53 1 20V9h2z"/></svg>');
        mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 16V6H7v10zm0-12c.53 0 1.04.21 1.41.59.38.37.59.88.59 1.41v10c0 .53-.21 1.04-.59 1.41-.37.38-.88.59-1.41.59H7a2 2 0 0 1-2-2V6c0-1.11.89-2 2-2zM3 20h15v2H3c-.53 0-1.04-.21-1.41-.59C1.21 21.04 1 20.53 1 20V9h2z"/></svg>');
    }

    li.timer::before {
        -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20a7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7 7 7 0 0 1-7 7m7.03-12.61 1.42-1.42c-.45-.51-.9-.97-1.41-1.41L17.62 6c-1.55-1.26-3.5-2-5.62-2a9 9 0 0 0-9 9 9 9 0 0 0 9 9c5 0 9-4.03 9-9 0-2.12-.74-4.07-1.97-5.61M11 14h2V8h-2m4-7H9v2h6z"/></svg>');
        mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20a7 7 0 0 1-7-7 7 7 0 0 1 7-7 7 7 0 0 1 7 7 7 7 0 0 1-7 7m7.03-12.61 1.42-1.42c-.45-.51-.9-.97-1.41-1.41L17.62 6c-1.55-1.26-3.5-2-5.62-2a9 9 0 0 0-9 9 9 9 0 0 0 9 9c5 0 9-4.03 9-9 0-2.12-.74-4.07-1.97-5.61M11 14h2V8h-2m4-7H9v2h6z"/></svg>');
    }
}

.md-typeset *[disabled] .plan-box ul li::before {
    background-color: #9e9e9e;
}

.md-typeset .cl-button-disabled {
    pointer-events: none;
    color: #9e9e9e;
    border-color: #9e9e9e;
    font-style: italic;
}

.md-typeset .cl-button-ethereal {
    pointer-events: none;
    color: var(--md-typeset-color);
    border-color: transparent;
}

.md-typeset {
    h1 {
        &.center {
            text-align: center;
        }

        &.singleton .headerlink {
            display: none;
        }
    }
}

.md-typeset #subscribeIntermediate {
    max-width: 50em;
    margin: 0 auto;

    #billingCycle, #subscriptionType {
        display: inline-block;
        border-radius: .2rem;
        background: var(--custom-light-fg-color);
        padding: 0 0.15rem;
        font-weight: bold;
    }

    p {
        text-align: center;
    }
}

.md-typeset #newlySubscribed {
    max-width: 50em;
    margin: 0 auto;
}

h1::after,
h2::after {
    display: block;
    color: #595959 /* from "small", combining color and opacity */;
    font-size: calc(.8rem /* from ".md-typeset" */ * 0.8 /* from "small" */);
    font-weight: 400 /* from "small", which inherits browser defaults */;
    letter-spacing: normal /* from "small", which inherits browser defaults */;
    margin-top: 0.5em;
    margin-bottom: 2em;
}

table td[role="rowheader"] {
    font-weight: bold;
}

.md-container datalist[data-pagetype=numbering] ~ div:is(.md-sidebar, .md-content) { counter-reset: level1; }
.md-container datalist[data-pagetype=numbering] ~ div h2 { counter-reset: level2; }
.md-container datalist[data-pagetype=numbering] ~ div h3 { counter-reset: level3; }
.md-container datalist[data-pagetype=numbering] ~ div h2::before {
    counter-increment: level1;
    content: "Section " counter(level1) " – ";
}
.md-container datalist[data-pagetype=numbering] ~ div h2+ol > li {
    counter-increment: level2;
}
.md-container datalist[data-pagetype=numbering] ~ div h2+ol > li::marker {
    content: "(" counter(level2) ") ";
    font-size: 80%;
    color: gray;
}
.md-container datalist[data-pagetype=numbering] ~ div h2+ol > li > ol {
    counter-reset: level3;
}

.md-container datalist[data-pagetype=numbering] ~ div h2+ol > li > ol > li {
    counter-increment: level3;
}

.md-container datalist[data-pagetype=numbering] ~ div h2+ol > li > ol > li::marker {
    content: "(" counter(level3, lower-alpha) ") ";
    font-size: 80%;
    color: gray;
}

.md-container datalist[data-pagetype=numbering] ~ div h3+ol > li {
    counter-increment: level3;
}
.md-container datalist[data-pagetype=numbering] ~ div h3+ol > li::marker {
    counter-increment: level2;
    content: counter(level1) "." counter(level2) "." counter(level3) ". ";
    font-size: 80%;
    color: gray;
}
.md-container datalist[data-pagetype=numbering] ~ *[data-md-type=toc] { counter-reset: level1 level2; }
.md-container datalist[data-pagetype=numbering] ~ *[data-md-type=toc] .md-nav__link { display: block; }
.md-container datalist[data-pagetype=numbering] ~ *[data-md-type=toc] ul[data-md-component=toc] > li {
    counter-reset: level2;
}
.md-container datalist[data-pagetype=numbering] ~ *[data-md-type=toc] ul[data-md-component=toc] > li > a::before {
    counter-increment: level1;
    content: counter(level1) ". ";
}

.md-container datalist[data-pagetype=numbering] ~ *[data-md-type=toc] ul[data-md-component=toc] > li li > a::before {
    counter-increment: level2;
    content: counter(level1) "." counter(level2) ". ";
}

h1[data-last-updated]::after,
h2[data-last-updated]::after {
    content: "Last updated: " attr(data-last-updated);
}
h1[data-last-updated][data-effective]::after,
h2[data-last-updated][data-effective]::after {
    content: "Last updated " attr(data-last-updated) ", effective as of " attr(data-effective);
}
h1[data-published]::after,
h2[data-published]::after {
    content: "Published " attr(data-published);
}
h1[data-published][data-effective]::after,
h2[data-published][data-effective]::after {
    content: "Published " attr(data-published) ", effective as of " attr(data-effective);
}


html .md-typeset {
    .hug-next,
    h1.hug-next::after,
    h2.hug-next::after {
        margin-bottom: 0;
        margin-block-end: 0;
    }
    .hug-next + p {
        margin-top: 0;
        margin-block-start: 0;
    }
    .hug-next + p + p {
        margin-block-start: 2.5em;
        margin-top: 2.5em;
    }
    .hug-next + details {
        margin-top: 0;
    }
    .hug-next + ul {
        /* 0.5em matches the <li>-to-<li> margin */
        margin-top: 0.5em;
    }
}

.changed-line {
    box-shadow: -1em 0 0 var(--md-default-bg-color), -1.5em 0 0 var(--md-default-fg-color);
}
.md-typeset dl .changed-line {
    box-shadow: calc(-1em - 1.875em) 0 0 var(--md-default-bg-color), calc(-1.5em - 1.875em) 0 0 var(--md-default-fg-color);
}
.md-typeset ul li.changed-line {
    box-shadow: calc(-1em - 1 * (1.25em + .625em)) 0 0 var(--md-default-bg-color), calc(-1.5em - 1 * (1.25em + .625em)) 0 0 var(--md-default-fg-color);
}
.md-typeset ul ul li.changed-line {
    box-shadow: calc(-1em - 2 * (1.25em + .625em)) 0 0 var(--md-default-bg-color), calc(-1.5em - 2 * (1.25em + .625em)) 0 0 var(--md-default-fg-color);
}


#processor-table-wrapper table .twemoji {
    height: 2em;
    vertical-align: middle;
}

#processor-table-wrapper table td {
    line-height: 2em;
}


.md-post__content :is(h3,h4) a {
    pointer-events: none;
    color: inherit;
}
.md-post__content :is(h3,h4) {
    /*
     * The 'a' embedded in headings is rendered neutral with pointer-events:none, but the side effect is that hovering
     * the heading results in the wrong cursor. Workaround: declare it on the heading.
     */
    cursor: text;

    /*
     * Without display:initial, the heading (and therefore the 'text' cursor) extend all the way to the end of the line.
     */
    display: initial;
}

.md-post__action {
    /*
     * Get rid of the "Continue reading" links, which are inappropriate as the full post is already on the index page.
     */
    display: none;
}