/* Supra Core: only brand, palette and decorative surfaces extend Inspinia. */
.supra-landing {
    --theme-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --supra-page-bg: #cbd5e1;
    --supra-surface: rgba(255, 255, 255, .96);
    --supra-accent: #087e96;
    --theme-info-rgb: 8, 126, 150;
    --theme-info-bg-subtle: #dcf4f8;
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    font-family: var(--theme-font-sans-serif);
    /* This page owns its background, including when Inspinia restores a skin. */
    background: var(--supra-page-bg) !important;
}
html[data-bs-theme="dark"] .supra-landing {
    --supra-page-bg: #000;
    --supra-surface: rgba(8, 13, 21, .94);
    --supra-accent: #39d9ed;
    --theme-info-rgb: 57, 217, 237;
    --theme-info-bg-subtle: #092a33;
    --theme-body-color: #d5deea;
    --theme-body-color-rgb: 213, 222, 234;
    --theme-heading-color: #f3f7fc;
    --theme-secondary-color: #aab8cb;
    --theme-secondary-color-rgb: 170, 184, 203;
    --theme-emphasis-color: #f3f7fc;
    --theme-emphasis-color-rgb: 243, 247, 252;
    --theme-border-color: #263340;
    color: var(--theme-body-color);
}
.supra-landing :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--theme-font-sans-serif);
    letter-spacing: -.035em;
}
.supra-landing :is(section, [id="api"], [id="market-overview"], [id="activity-overview"]) {
    scroll-margin-top: 100px;
}
.supra-landing .supra-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--supra-page-bg);
}
.supra-landing .supra-halo-scene {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}
.supra-landing #supra-background-halo {
    --supra-halo-mask: radial-gradient(circle at var(--supra-halo-center-x) var(--supra-halo-center-y), rgba(0, 0, 0, .9) var(--supra-halo-outer-solid), transparent var(--supra-halo-tail-end));
    -webkit-mask-image: var(--supra-halo-mask), var(--supra-halo-protection);
    mask-image: var(--supra-halo-mask), var(--supra-halo-protection);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    mask-repeat: no-repeat;
    filter: saturate(1.4) brightness(.85);
}
html[data-bs-theme="light"] .supra-landing #supra-background-halo {
    filter: url("../images/halo-light.svg?v=2#halo-light") saturate(1.4) brightness(.85);
}
html[data-bs-theme] .supra-landing #main-content [data-supra-intro] .lead,
html[data-bs-theme] .supra-landing #main-content .lead[data-supra-intro] {
    --theme-secondary-color: #243449;
    color: var(--theme-secondary-color);
}
html[data-bs-theme="dark"] .supra-landing #main-content [data-supra-intro] .lead,
html[data-bs-theme="dark"] .supra-landing #main-content .lead[data-supra-intro] {
    --theme-secondary-color: #e2e8f0;
    color: var(--theme-secondary-color);
}
html[data-bs-theme="light"] .supra-landing #landing-navbar #theme-toggle {
    color: #fff;
}
html[data-bs-theme="light"] .supra-landing main :is(.lead, .text-muted, .text-body-secondary):not(#contact-form *) {
    --theme-secondary-color: #344152;
    color: var(--theme-secondary-color);
}
.supra-landing .supra-brand-mark {
    position: relative;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    isolation: isolate;
}
.supra-landing [data-supra-logo] {
    border-radius: 50%;
    mix-blend-mode: screen;
    /* Keep Halo's feedback glow close to the ring, in both brand marks. */
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 48%, #000 57%, #000 75%, transparent 86%);
    mask-image: radial-gradient(circle closest-side, transparent 48%, #000 57%, #000 75%, transparent 86%);
    filter: saturate(2.2) brightness(.85);
}
.supra-landing .supra-brand-mark::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid #14d9f4;
    border-right-color: #7961ff;
    border-bottom-color: #368cff;
    border-radius: 50%;
}
.supra-landing .supra-brand-mark.is-animated::before { opacity: 0; }
.supra-landing .supra-brand-name {
    font-family: var(--theme-font-sans-serif);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    line-height: 1.1;
    letter-spacing: -.045em;
    color: #edfaff;
    background: linear-gradient(180deg, #fff 15%, #eef8ff 60%, #b8e9ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.supra-landing section .card {
    --theme-card-bg: var(--supra-surface);
    --theme-card-color: var(--theme-body-color);
    box-shadow: 0 12px 36px rgb(0 0 0 / 8%);
}
.supra-landing .btn-primary {
    --theme-btn-color: #02151b;
    --theme-btn-bg: #39d9ed;
    --theme-btn-border-color: #39d9ed;
    --theme-btn-hover-color: #02151b;
    --theme-btn-hover-bg: #77e9f6;
    --theme-btn-hover-border-color: #77e9f6;
    --theme-btn-active-color: #02151b;
    --theme-btn-active-bg: #27c6dc;
    --theme-btn-active-border-color: #27c6dc;
    --theme-btn-disabled-color: #02151b;
    --theme-btn-disabled-bg: #39d9ed;
    --theme-btn-disabled-border-color: #39d9ed;
    --theme-btn-focus-shadow-rgb: 57, 217, 237;
    font-weight: 600;
}
.supra-landing .btn-outline-primary {
    --theme-btn-color: var(--supra-accent);
    --theme-btn-border-color: var(--supra-accent);
    --theme-btn-hover-color: #02151b;
    --theme-btn-hover-bg: #39d9ed;
    --theme-btn-hover-border-color: #39d9ed;
    --theme-btn-active-color: #02151b;
    --theme-btn-active-bg: #27c6dc;
    --theme-btn-active-border-color: #27c6dc;
    --theme-btn-focus-shadow-rgb: 57, 217, 237;
}
/* Both bars keep their dark palette even when the page uses the light theme. */
.supra-landing #landing-navbar,
.supra-landing .section-footer {
    --theme-font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --theme-body-color: #d5deea;
    --theme-secondary-color: #aab8cb;
    --theme-heading-color: #f3f7fc;
    --theme-emphasis-color-rgb: 243, 247, 252;
    --theme-border-color: #263340;
    color: #d5deea;
    background: #03070c;
}
.supra-landing #landing-navbar {
    --theme-navbar-color: #b8c5d5;
    --theme-navbar-hover-color: #fff;
    --theme-navbar-active-color: #39d9ed;
    border-bottom: 1px solid rgb(57 217 237 / 14%);
}
.supra-landing #landing-navbar .nav-link {
    font-size: .95rem;
    padding: .625rem .75rem;
    min-height: 44px;
}
@media (max-width: 1919.98px) {
    .supra-landing #landing-navbar .navbar-collapse {
        flex-basis: 100%;
    }
    .supra-landing #landing-navbar .navbar-nav {
        margin-inline: 0 !important;
    }
    .supra-landing #landing-navbar .nav-link {
        display: flex;
        align-items: center;
    }
}
/* Expand the public menu only when every localized label fits on one row. */
@media (min-width: 1920px) {
    .supra-landing #landing-navbar .container {
        width: calc(100% - 3rem);
        max-width: 1760px;
    }
    .supra-landing #landing-navbar {
        flex-wrap: nowrap;
    }
    .supra-landing #landing-navbar .navbar-toggler {
        display: none;
    }
    .supra-landing #landing-navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        min-width: 0;
    }
    .supra-landing #landing-navbar .navbar-nav {
        flex-direction: row;
        margin-top: 0 !important;
        gap: .25rem;
    }
    .supra-landing #landing-navbar .nav-link {
        white-space: nowrap;
    }
    .supra-landing #landing-navbar .navbar-collapse > div {
        flex-wrap: nowrap;
        margin-top: 0 !important;
    }
}
.supra-landing #landing-navbar.top-fixed {
    background: rgba(3, 7, 12, .97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.supra-landing .section-footer {
    --supra-accent: #39d9ed;
    border-top: 1px solid rgb(57 217 237 / 18%);
}
.supra-landing .section-footer .btn-outline-light {
    --theme-btn-color: var(--theme-white);
    --theme-btn-bg: transparent;
    --theme-btn-border-color: rgba(var(--theme-white-rgb), .1);
    --theme-btn-hover-bg: rgba(var(--theme-white-rgb), .1);
    --theme-btn-hover-border-color: rgba(var(--theme-white-rgb), .1);
    --theme-btn-active-bg: rgba(var(--theme-white-rgb), .1);
    --theme-btn-active-border-color: transparent;
}
.supra-landing .section-footer .nav-link { color: #b8c5d5; }
.supra-landing .supra-donate-button {
    min-height: 44px;
}
.supra-landing .supra-donate-button:focus-visible {
    outline: 2px solid #39d9ed;
    outline-offset: 4px;
}
.supra-landing .section-footer .nav-link:is(:hover, :focus-visible) { color: #39d9ed; }
html[data-bs-theme="dark"] .supra-landing #contact .form-control {
    background: #090f18;
    color: var(--theme-body-color);
    border-color: #344152;
}
.supra-landing #contact .form-control:focus {
    border-color: var(--supra-accent);
    box-shadow: 0 0 0 .2rem rgb(34 199 229 / 15%);
}
/* Scope skin overrides to the affected service and contact cards. */
.supra-landing #services .card,
.supra-landing #plans .card,
.supra-landing #contact-form,
.supra-landing #main-content .supra-policy-card,
.supra-landing #main-content .supra-doc-index {
    background-color: var(--supra-surface);
}
.supra-landing .supra-account { max-width: 1040px; }
.supra-account .col,
.supra-account .col-sm { min-width: 0; }
.supra-account .avatar-lg { display: flex; }
.supra-account .supra-account-avatar { position: relative; width: 80px; height: 80px; }
.supra-account .supra-account-avatar img { object-fit: cover; }
.supra-account .supra-account-avatar-placeholder {
    display: grid; place-items: center; width: 100%; height: 100%;
    border-radius: 50%; background: var(--theme-info-bg-subtle);
    color: var(--supra-accent); font-size: 2.5rem;
}
.supra-account .supra-account-avatar-pick {
    position: absolute; inset: 0; border: 1px solid var(--supra-accent);
    border-radius: 50%; background: transparent; color: var(--supra-accent);
}
.supra-account .supra-account-avatar-pick i {
    position: absolute; bottom: 0; left: 0; padding: .25rem;
    border-radius: 50%; background: var(--supra-surface); font-size: 1rem;
}
.supra-account .supra-account-avatar-remove {
    position: absolute; top: -12px; right: -16px; width: 44px; height: 44px;
    display: grid; place-items: center; border: 0; background: transparent;
    color: var(--theme-body-color); border-radius: 50%;
}
.supra-account .supra-account-avatar-remove i {
    background: var(--supra-surface); border: 1px solid var(--theme-border-color);
    border-radius: 50%; padding: .2rem;
}
.supra-account .supra-account-avatar button:focus-visible {
    outline: 3px solid var(--supra-accent); outline-offset: 3px;
}
.supra-account .supra-account-avatar button:not(:disabled):hover { color: var(--supra-accent); }
.supra-account .supra-account-avatar button:disabled { cursor: wait; }
.supra-account #avatar-status:empty { display: none; }
.supra-account .supra-account-identity { border-top: 2px solid var(--supra-accent); }
.supra-account .card-body { padding: clamp(1rem, 3vw, 1.5rem) !important; }
.supra-account .form-label { font-size: .875rem; font-weight: 600; }
.supra-account .card h2 { letter-spacing: -.02em; }
.supra-account .text-break { overflow-wrap: anywhere; }
.supra-account .card { border: 1px solid var(--theme-border-color); }
.supra-account .text-primary { color: var(--supra-accent) !important; }
.supra-account .form-text { font-size: .8125rem; line-height: 1.5; }
.supra-account .supra-account-current {
    padding: .4532rem 1.1rem;
    font-size: var(--theme-font-size-base);
    font-weight: var(--theme-font-weight-medium);
    line-height: 1.5;
    border: var(--theme-border-width) solid transparent;
}
.supra-landing .grecaptcha-badge { visibility: hidden; }
/* A quiet colour band separates the developer invitation from the content. */
.supra-landing #build { background-color: #e8f3f6; }
html[data-bs-theme="dark"] .supra-landing #build {
    background-color: rgba(7, 27, 36, .90);
}
/* Room for the template's original rays and dot patterns inside each column. */
@media (min-width: 768px) {
    .supra-landing .supra-product-figure { margin-inline: 3.5rem; padding-block: 2rem; }
}
.supra-landing a:focus-visible { outline: 2px solid var(--supra-accent); outline-offset: 4px; }
.supra-landing .supra-back-to-top {
    width: 44px;
    height: 44px;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1020;
}
.supra-landing .supra-back-to-top[hidden] { display: none; }
.supra-landing .supra-back-to-top:focus-visible { outline: 2px solid var(--supra-accent) !important; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .supra-landing *, .supra-landing *::before, .supra-landing *::after { scroll-behavior: auto !important; }
}
.supra-language { display: inline-flex; flex-shrink: 0; gap: .125rem; padding: .2rem; border: 1px solid currentColor; border-radius: 2rem; font-size: .75rem; }
.supra-language a { color: inherit; text-decoration: none; padding: .3rem .4rem; border-radius: 2rem; font-weight: 600; }
.supra-language a[aria-current="true"] { background: #27c9df; color: #111827; }
.supra-cms .cms-topbar .supra-language a[aria-current="true"] { color: #111827; }
.supra-language a:hover { text-decoration: underline; }
.supra-language a:focus-visible { outline: 2px solid #27c9df; outline-offset: 2px; }
.cms-topbar { flex-wrap: wrap; }
.cms-topbar > .ms-auto { flex-wrap: wrap; }
:is(.supra-landing, .supra-cms) .form-floating { min-width: 0; }
:is(.supra-landing, .supra-cms) .form-floating > label { font-size: .85rem; }
.supra-landing #contact .form-floating > textarea { height: 9rem; }
:is(.supra-landing, .supra-cms) .dt-container :is(.dt-length, .dt-search).form-floating { display: block; padding: 0; min-width: min(100%, 12rem); width: 100%; max-width: 100%; }
:is(.supra-landing, .supra-cms) .dt-container .dt-length.form-floating { width: 14rem; }
:is(.supra-landing, .supra-cms) .dt-container :is(.dt-length, .dt-search).form-floating > :is(input, select) { width: 100%; margin: 0; height: 3.75rem; min-height: 3.75rem; padding: 1.75rem 1rem .5rem; font-size: .875rem; line-height: 1.4; }
:is(.supra-landing, .supra-cms) .dt-container .dt-length.form-floating > select { padding-right: 3rem; background-position: right 1rem center; }
:is(.supra-landing, .supra-cms) .dt-container :is(.dt-length, .dt-search).form-floating > label { height: auto; max-width: 100%; margin: 0; padding: .65rem 1rem; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; transform: scale(.85); transform-origin: top left; }