@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap");

header .logo,
header .brand,
header .logo:visited,
header .logo:hover,
header .logo:active,
header .brand:visited,
header .brand:hover,
header .brand:active {
    font-family: "Sora", "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif !important;
    font-weight: 650 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.012em !important;
    word-spacing: 0.11em !important;
    color: var(--text, #f5f5f7) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: normal !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    padding-right: clamp(14px, 2vw, 26px) !important;
}

header .logo-symbol,
header .brand-symbol {
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 1rem !important;
    line-height: 1 !important;
    --logo-gap: 12%;
    position: relative !important;
    display: inline-block !important;
    color: currentColor !important;
}

header .logo-symbol::before,
header .logo-symbol::after,
header .brand-symbol::before,
header .brand-symbol::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: currentColor !important;
}

header .logo-symbol::before,
header .brand-symbol::before {
    clip-path: polygon(0 0, 100% 0, 0 calc(100% - var(--logo-gap))) !important;
}

header .logo-symbol::after,
header .brand-symbol::after {
    clip-path: polygon(100% var(--logo-gap), 100% 100%, 0 100%) !important;
}

header.is-bubble .logo,
header.is-bubble .brand {
    color: #e8f1ff !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 1px 6px rgba(2, 8, 16, 0.62) !important;
}

header.is-bubble .logo:hover,
header.is-bubble .brand:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}