@import "https://cdn.jsdelivr.net/npm/@fontsource/source-serif-pro@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/source-serif-pro@latest/700.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/fira-sans@latest/400.css";
@import "https://cdn.jsdelivr.net/npm/@fontsource/fira-sans@latest/700.css";

html {
    font-size: 100%;
    scroll-behavior: smooth
}

body {
    margin: 0;
    position: relative;
    min-height: 100vh
}

.topbar {
    background: linear-gradient(135deg, #325891 0%, #2a4a7a 100%);
    width: 100%;
    box-shadow: 1px 8px 44px 1px #3258911c
}

.topbar-shell {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    gap: 48px;
    min-height: 88px
}

.brandmark-mount {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none
}

.brandmark-ring {
    width: 62px;
    height: 62px;
    border-radius: 42px;
    background: #ffffff1f;
    border: 2px solid #8ebad48c;
    box-shadow: 1px 2px 3px 1px #32589112 inset 0 1px 6px #c8eaf42e;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    overflow: hidden
}

.brandmark-ring img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block
}

.brandlabel {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.brandlabel-name {
    font-family: 'Source Serif Pro', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    letter-spacing: .01em
}

.brandlabel-sub {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    color: #C8EAF4;
    letter-spacing: .08em;
    text-transform: uppercase
}

.primarynav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto
}

.primarynav-link {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #C8EAF4;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 26px;
    border: 1px solid transparent;
    transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out;
    white-space: nowrap
}

.primarynav-link:hover,
.primarynav-link:focus {
    color: #fff;
    background-color: #8ebad42e;
    border-color: #8ebad459;
    outline: none
}

.primarynav-link:focus {
    border-color: #8EBAD4;
    background-color: #8ebad438
}

.primarynav-link.active {
    color: #fff;
    background-color: #c8eaf426;
    border-color: #c8eaf466;
    font-weight: 700
}

.sitefooter {
    background: #325891;
    width: 100%;
    margin-top: auto
}

.sitefooter-shell {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 48px 24px
}

.sitefooter-upper {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #8ebad440;
    flex-wrap: wrap
}

.sitefooter-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0
}

.sitefooter-logolink {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px
}

.sitefooter-logoring {
    width: 58px;
    height: 58px;
    border-radius: 42px;
    background: #ffffff1a;
    border: 2px solid #c8eaf466;
    box-shadow: 1px 2px 3px 1px #32589112 inset 0 1px 4px #c8eaf426;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    overflow: hidden
}

.sitefooter-logoring img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block
}

.sitefooter-brandname {
    font-family: 'Source Serif Pro', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff
}

.sitefooter-tagline {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #8EBAD4;
    max-width: 260px
}

.sitefooter-contact {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.sitefooter-contactlabel {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: #C8EAF4;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 12px
}

.sitefooter-contactlink {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #8EBAD4;
    text-decoration: none;
    transition: color .18s ease-out
}

.sitefooter-contactlink:hover,
.sitefooter-contactlink:focus {
    color: #fff;
    outline: none
}

.sitefooter-contactlink:focus {
    color: #C8EAF4
}

.sitefooter-links {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    margin-left: auto
}

.sitefooter-linksgroup {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sitefooter-grouplabel {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: #C8EAF4;
    letter-spacing: .1em;
    text-transform: uppercase
}

.sitefooter-pagelink {
    font-family: 'Fira Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: #8EBAD4;
    text-decoration: none;
    transition: color .18s ease-out
}

.sitefooter-pagelink:hover,
.sitefooter-pagelink:focus {
    color: #fff;
    outline: none
}

.sitefooter-pagelink:focus {
    color: #C8EAF4
}

.sitefooter-lower {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px
}

.sitefooter-copy {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #8ebad4b3
}

.sitefooter-legallinks {
    display: flex;
    align-items: center;
    gap: 24px
}

.sitefooter-legallink {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #8ebad4b3;
    text-decoration: none;
    transition: color .15s ease-out
}

.sitefooter-legallink:hover,
.sitefooter-legallink:focus {
    color: #C8EAF4;
    outline: none
}

.sitefooter-legallink:focus {
    color: #fff
}

.sitefooter-divider {
    width: 1px;
    height: 14px;
    background: #8ebad44d;
    display: inline-block
}

.consentbox {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 4000;
    width: 300px;
    background: #fff;
    border-radius: 26px;
    box-shadow: 1px 8px 44px 1px #3258911c;
    border: 1px solid #8ebad459;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .38s ease-in-out, opacity .38s ease-in-out
}

.consentbox.hidden {
    transform: translateY(calc(100% + 48px));
    opacity: 0
}

.consentbox-desc {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #325891
}

.consentbox-headline {
    font-family: 'Source Serif Pro', serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #1e3a5f
}

.consentbox-toggles {
    display: none;
    flex-direction: column;
    gap: 12px
}

.consentbox-toggles.open {
    display: flex
}

.consentbox-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.consentbox-togglelabel {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #325891
}

.consentbox-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0
}

.consentbox-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute
}

.consentbox-switchtrack {
    position: absolute;
    inset: 0;
    background: #C8EAF4;
    border-radius: 26px;
    cursor: pointer;
    transition: background-color .15s ease-out
}

.consentbox-switchtrack::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 42px;
    background: #325891;
    transition: transform .15s ease-out
}

.consentbox-switch input:checked+.consentbox-switchtrack {
    background: #8EBAD4
}

.consentbox-switch input:checked+.consentbox-switchtrack::after {
    transform: translateX(18px)
}

.consentbox-switch input:focus+.consentbox-switchtrack {
    border: 2px solid #325891;
    background: #8EBAD4
}

.consentbox-actions {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.consentbox-btn {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
    border: none;
    border-radius: 26px;
    padding: 12px 24px;
    cursor: pointer;
    transition: filter .12s ease-out;
    width: 100%
}

.consentbox-btn:hover {
    filter: brightness(1.08)
}

.consentbox-btn:focus {
    outline: none;
    border: 2px solid #325891
}

.consentbox-btn.accept {
    background: #325891;
    color: #fff
}

.consentbox-btn.decline {
    background: #C8EAF4;
    color: #325891
}

.consentbox-settingslink {
    font-family: 'Fira Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #325891;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 4px 0;
    text-align: center;
    transition: color .12s ease-out
}

.consentbox-settingslink:hover {
    color: #8EBAD4
}

.consentbox-settingslink:focus {
    outline: none;
    color: #8EBAD4
}

.prefsbutton {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 3999;
    width: 44px;
    height: 44px;
    border-radius: 42px;
    background: #325891;
    border: 2px solid #8EBAD4;
    box-shadow: 1px 7px 22px 1px #3258911a;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: filter .12s ease-out
}

.prefsbutton:hover {
    filter: brightness(1.12)
}

.prefsbutton:focus {
    outline: none;
    border-color: #C8EAF4
}

.prefsbutton svg {
    width: 20px;
    height: 20px;
    fill: #C8EAF4;
    pointer-events: none
}

@media (max-width: 768px) {
    .topbar-shell {
        padding: 0 24px;
        gap: 24px;
        flex-wrap: wrap;
        min-height: auto;
        padding-top: 12px;
        padding-bottom: 12px
    }

    .primarynav {
        width: 100%;
        margin-left: 0;
        gap: 4px
    }

    .primarynav-link {
        padding: 12px;
        font-size: 14px
    }

    .sitefooter-shell {
        padding: 48px 24px 24px
    }

    .sitefooter-upper {
        flex-direction: column;
        gap: 24px
    }

    .sitefooter-links {
        margin-left: 0;
        gap: 24px
    }

    .sitefooter-lower {
        flex-direction: column;
        align-items: flex-start
    }

    .consentbox {
        width: calc(100vw - 48px);
        left: 24px;
        right: 24px
    }
}

.doc-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 48px
}

.doc-wrapper h1 {
    font-size: 66px;
    line-height: 1.1;
    color: #325891;
    margin-bottom: 48px;
    margin-top: 0
}

.doc-wrapper h2 {
    font-size: 26px;
    line-height: 1.1;
    color: #325891;
    margin-top: 48px;
    margin-bottom: 24px
}

.doc-wrapper h3 {
    font-size: 20px;
    line-height: 1.75;
    color: #2a4a7a;
    margin-top: 24px;
    margin-bottom: 12px
}

.doc-wrapper h4,
.doc-wrapper h5,
.doc-wrapper h6 {
    font-size: 16px;
    line-height: 1.75;
    color: #2a4a7a;
    margin-top: 24px;
    margin-bottom: 12px
}

.doc-wrapper p {
    font-size: 16px;
    line-height: 1.75;
    color: #2c3e55;
    margin-top: 0;
    margin-bottom: 24px
}

.doc-wrapper ul,
.doc-wrapper ol {
    font-size: 16px;
    line-height: 1.75;
    color: #2c3e55;
    margin-top: 0;
    margin-bottom: 24px;
    padding-left: 24px
}

.doc-wrapper ul ul,
.doc-wrapper ol ol,
.doc-wrapper ul ol,
.doc-wrapper ol ul {
    margin-bottom: 0;
    margin-top: 4px
}

.doc-wrapper li {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.75;
    color: #2c3e55
}

.doc-wrapper a {
    color: #325891;
    text-decoration: underline;
    text-decoration-color: #8EBAD4;
    text-underline-offset: 3px;
    transition: color .15s ease-out, text-decoration-color .15s ease-out
}

.doc-wrapper a:hover {
    color: #8EBAD4;
    text-decoration-color: #325891
}

.doc-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 48px;
    font-size: 14px;
    line-height: 1.75;
    box-shadow: 1px 2px 3px 1px #32589112;
    border-radius: 2px;
    overflow: hidden
}

.doc-wrapper thead {
    background-color: #325891
}

.doc-wrapper thead th {
    color: #fff;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: .06em;
    padding: 12px 24px;
    text-align: left;
    font-weight: 600
}

.doc-wrapper tbody tr {
    border-bottom: 1px solid #C8EAF4;
    transition: background-color .12s ease-out
}

.doc-wrapper tbody tr:last-child {
    border-bottom: none
}

.doc-wrapper tbody tr:nth-child(even) {
    background-color: #f4f9fc
}

.doc-wrapper tbody tr:hover {
    background-color: #e6f4fb
}

.doc-wrapper td {
    padding: 12px 24px;
    color: #2c3e55;
    font-size: 14px;
    line-height: 1.75;
    vertical-align: top
}

.doc-wrapper th {
    padding: 12px 24px
}

@media (max-width: 768px) {
    .doc-wrapper {
        padding: 48px 24px
    }

    .doc-wrapper h1 {
        font-size: 26px;
        margin-bottom: 24px
    }

    .doc-wrapper h2 {
        font-size: 20px
    }

    .doc-wrapper table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }
}

.blogDetail {
    background: #fff;
    overflow-x: clip
}

.blogDetail .postTop {
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 24px 48px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start
}

.blogDetail .postTextZone {
    padding: 48px 48px 48px 0
}

.blogDetail .postMeta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px
}

.blogDetail .postTag {
    background: #C8EAF4;
    color: #325891;
    font-size: 14px;
    letter-spacing: .08em;
    padding: 4px 12px;
    border-radius: 2px;
    font-weight: 600
}

.blogDetail .readtime {
    font-size: 14px;
    color: #5a7a9a;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 4px
}

.blogDetail .readtimeArrow {
    display: inline-flex;
    align-items: center
}

.blogDetail .readtimeArrow svg {
    width: 14px;
    height: 14px;
    stroke: #325891
}

.blogDetail .postHeading {
    font-size: 66px;
    line-height: 1.1;
    font-weight: 800;
    margin: 0 0 24px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blogDetail .postSubtitle {
    font-size: 20px;
    line-height: 1.75;
    color: #3d5a7a;
    margin: 0 0 48px;
    font-weight: 400
}

.blogDetail .postActions {
    display: flex;
    gap: 12px;
    flex-direction: row;
    flex-wrap: wrap
}

.blogDetail .btnPrimary {
    background: #325891;
    color: #fff;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 26px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #325891;
    transition: brightness .15s ease-out, box-shadow .15s ease-out;
    box-shadow: 1px 7px 22px 1px #3258911a
}

.blogDetail .btnPrimary:hover {
    filter: brightness(1.15);
    box-shadow: 1px 8px 44px 1px #3258911c
}

.blogDetail .btnPrimary:focus {
    outline: 3px solid #8EBAD4;
    outline-offset: 2px
}

.blogDetail .btnSecondary {
    background: transparent;
    color: #325891;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 26px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #325891;
    transition: background .18s ease, color .18s ease
}

.blogDetail .btnSecondary:hover {
    background: #325891;
    color: #fff
}

.blogDetail .btnSecondary:focus {
    outline: 3px solid #8EBAD4;
    outline-offset: 2px
}

.blogDetail .postImageZone {
    position: relative;
    border-radius: 42px;
    overflow: hidden;
    box-shadow: 1px 8px 44px 1px #3258911c
}

.blogDetail .postImageZone::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #3258918c 0%, transparent 60%);
    z-index: 1;
    border-radius: 42px
}

.blogDetail .postImageZone::after {
    content: "";
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 120px;
    height: 120px;
    border-radius: 42px;
    background: linear-gradient(to top, #C8EAF4, #8EBAD4);
    z-index: 0;
    opacity: .45
}

.blogDetail .postImg {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 42px;
    opacity: 0;
    transition: opacity .2s ease-out;
    position: relative;
    z-index: 0
}

.blogDetail .postImg.loaded {
    opacity: 1
}

.blogDetail .doubleBorder {
    max-width: 1140px;
    margin: 0 auto 48px;
    padding: 0 24px
}

.blogDetail .doubleBorderInner {
    border: 2px solid #325891;
    border-radius: 2px;
    padding: 4px
}

.blogDetail .doubleBorderLine {
    border: 1px solid #8EBAD4;
    border-radius: 2px;
    height: 0
}

.blogDetail .dividerBand {
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #325891, #8EBAD4, #C8EAF4);
    margin: 0 0 48px
}

.blogDetail .articleWrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px 96px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 96px;
    align-items: start
}

.blogDetail .articleBody {
    min-width: 0
}

.blogDetail .articleBody p {
    font-size: 16px;
    line-height: 1.75;
    color: #2a3d55;
    margin: 0 0 24px
}

.blogDetail .articleBody h2 {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    margin: 48px 0 24px;
    background: linear-gradient(to top, #325891, #8EBAD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blogDetail .articleBody h3 {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 600;
    color: #325891;
    margin: 24px 0 12px
}

.blogDetail .articleBody code {
    background: #C8EAF4;
    color: #325891;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 2px;
    display: inline-block
}

.blogDetail .articleBody cite {
    font-size: 14px;
    color: #5a7a9a;
    font-style: italic;
    display: block;
    margin: 12px 0;
    letter-spacing: .04em
}

.blogDetail .articleBody figure {
    margin: 48px 0;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 1px 7px 22px 1px #8ebad41a
}

.blogDetail .articleBody figure img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 26px 26px 0 0
}

.blogDetail .articleBody figcaption {
    font-size: 14px;
    color: #5a7a9a;
    padding: 12px 24px;
    background: #f4f8fc;
    border-radius: 0 0 26px 26px;
    letter-spacing: .04em
}

.blogDetail .sidebar {
    position: sticky;
    top: 24px
}

.blogDetail .sideCard {
    background: linear-gradient(to top, #C8EAF4 0%, #fff 100%);
    border-radius: 26px;
    padding: 24px;
    box-shadow: 1px 2px 3px 1px #32589112;
    margin-bottom: 24px
}

.blogDetail .sideCardHeading {
    font-size: 14px;
    font-weight: 700;
    color: #325891;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 12px
}

.blogDetail .sideNav {
    list-style: none;
    padding: 0;
    margin: 0
}

.blogDetail .sideNav li {
    padding: 4px 0;
    border-bottom: 1px solid #C8EAF4
}

.blogDetail .sideNav li:last-child {
    border-bottom: none
}

.blogDetail .sideNav a {
    font-size: 14px;
    color: #325891;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.75;
    transition: color .12s ease-out
}

.blogDetail .sideNav a::before {
    content: "–";
    color: #8EBAD4;
    flex-shrink: 0
}

.blogDetail .sideNav a:hover {
    color: #8EBAD4
}

.blogDetail .metricCard {
    background: #325891;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 1px 8px 44px 1px #3258911c;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden
}

.blogDetail .metricCard::before {
    content: "";
    position: absolute;
    top: -24px;
    right: -24px;
    width: 96px;
    height: 96px;
    border-radius: 42px;
    background: #c8eaf41f;
    pointer-events: none
}

.blogDetail .metricLabel {
    font-size: 14px;
    color: #C8EAF4;
    letter-spacing: .07em;
    margin: 0
}

.blogDetail .metricValue {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px
}

.blogDetail .metricArrow {
    display: inline-flex
}

.blogDetail .metricArrow svg {
    width: 20px;
    height: 20px;
    stroke: #C8EAF4
}

.blogDetail .metricDesc {
    font-size: 14px;
    color: #8EBAD4;
    margin: 0;
    line-height: 1.75
}

.blogDetail .bgDrift {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 42px;
    background: #3258910a;
    top: 60px;
    left: -120px;
    animation: driftMove 9s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0
}

@keyframes driftMove {
    from {
        transform: translateY(0px) translateX(0px)
    }

    to {
        transform: translateY(30px) translateX(18px)
    }
}

.blogDetail .topRelative {
    position: relative
}

@media (max-width: 900px) {
    .blogDetail .postTop {
        grid-template-columns: 1fr;
        padding: 48px 24px 24px;
        gap: 24px
    }

    .blogDetail .postTextZone {
        padding: 0
    }

    .blogDetail .postHeading {
        font-size: 26px
    }

    .blogDetail .postImg {
        height: 260px
    }

    .blogDetail .articleWrap {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px 48px
    }

    .blogDetail .sidebar {
        position: static
    }
}

.jrndet {
    background: #fff;
    min-height: 100vh;
    overflow-x: clip
}

.jrndet .titband {
    position: relative;
    padding: 48px 24px;
    background: #1b2a3e;
    overflow: hidden
}

.jrndet .titband-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none
}

.jrndet .titband-spot {
    position: absolute;
    border-radius: 42px;
    filter: blur(60px);
    pointer-events: none;
    opacity: .18
}

.jrndet .titband-spot.a {
    width: 320px;
    height: 220px;
    background: #325891;
    top: -48px;
    left: -48px
}

.jrndet .titband-spot.b {
    width: 240px;
    height: 180px;
    background: #8EBAD4;
    bottom: -24px;
    right: 12px
}

.jrndet .titband-inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px
}

.jrndet .titband-text {
    flex: 1 1 0;
    min-width: 0
}

.jrndet .titband-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px
}

.jrndet .tagpill {
    display: inline-block;
    padding: 4px 12px;
    background: #32589152;
    border: 1px solid #8ebad461;
    border-radius: 2px;
    font-size: 14px;
    letter-spacing: .1em;
    color: #C8EAF4;
    line-height: 1.75
}

.jrndet .titband-h1 {
    font-size: 66px;
    line-height: 1.1;
    margin: 0 0 24px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    clip-path: inset(0 0 0 0);
    animation: vertclip .55s ease-out both
}

.jrndet .titband-sub {
    font-size: 20px;
    line-height: 1.75;
    color: #C8EAF4;
    margin: 0 0 24px
}

.jrndet .titband-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center
}

.jrndet .metaitem {
    font-size: 14px;
    color: #8EBAD4;
    letter-spacing: .07em;
    line-height: 1.75
}

.jrndet .metaitem strong {
    color: #fff
}

.jrndet .titband-imgwrap {
    flex: 0 0 380px;
    width: 380px;
    height: 260px;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 8px 44px 1px #3258911c
}

.jrndet .titband-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .55s ease
}

.jrndet .titband-imgwrap img.loaded {
    opacity: 1
}

.jrndet .titband-imgfade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #1b2a3e8c 0%, transparent 55%);
    pointer-events: none
}

@keyframes vertclip {
    from {
        clip-path: inset(0 0 100% 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

.jrndet .curvediv {
    display: block;
    line-height: 0;
    background: #fff
}

.jrndet .curvediv svg {
    display: block;
    width: 100%
}

.jrndet .articlebody {
    background: #fff;
    padding: 48px 24px;
    position: relative
}

.jrndet .articlebody-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 48px;
    align-items: start
}

.jrndet .articletext {
    min-width: 0;
    animation: vertclip .45s .1s ease-out both
}

.jrndet .articletext p {
    font-size: 16px;
    line-height: 1.75;
    color: #2a3545;
    margin: 0 0 24px
}

.jrndet .articletext h2 {
    font-size: 26px;
    line-height: 1.1;
    margin: 48px 0 24px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.jrndet .articletext h3 {
    font-size: 20px;
    line-height: 1.75;
    color: #325891;
    margin: 24px 0 12px
}

.jrndet .articletext h4 {
    font-size: 16px;
    line-height: 1.75;
    color: #325891;
    margin: 24px 0 12px;
    letter-spacing: .05em
}

.jrndet .articletext ul {
    margin: 0 0 24px;
    padding: 0 0 0 24px;
    list-style: none
}

.jrndet .articletext ul li {
    font-size: 16px;
    line-height: 1.75;
    color: #2a3545;
    padding-left: 12px;
    position: relative;
    margin-bottom: 4px
}

.jrndet .articletext ul li::before {
    content: "–";
    position: absolute;
    left: -12px;
    color: #8EBAD4
}

.jrndet .articletext ol {
    margin: 0 0 24px;
    padding: 0 0 0 24px
}

.jrndet .articletext ol li {
    font-size: 16px;
    line-height: 1.75;
    color: #2a3545;
    margin-bottom: 4px
}

.jrndet .articletext cite {
    font-size: 14px;
    color: #8EBAD4;
    font-style: italic;
    display: block;
    margin-top: 12px
}

.jrndet .articletext mark {
    background: #C8EAF4;
    color: #1b2a3e;
    border-radius: 2px;
    padding: 0 4px
}

.jrndet .articletext table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px
}

.jrndet .articletext thead {
    background: #325891;
    color: #fff
}

.jrndet .articletext th,
.jrndet .articletext td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #C8EAF4;
    line-height: 1.75
}

.jrndet .articletext tbody tr:nth-child(even) {
    background: #f4f9fc
}

.jrndet .articlesidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 24px
}

.jrndet .sidecard {
    border-radius: 26px;
    padding: 24px;
    background: #f4f9fc;
    box-shadow: 1px 2px 3px 1px #32589112
}

.jrndet .sidecard-label {
    font-size: 14px;
    letter-spacing: .1em;
    color: #325891;
    text-transform: uppercase;
    margin: 0 0 12px;
    line-height: 1.75
}

.jrndet .authorname {
    font-size: 16px;
    color: #1b2a3e;
    font-weight: 600;
    line-height: 1.75;
    margin: 0
}

.jrndet .doubleborder {
    border: 1px solid #8EBAD4;
    outline: 3px solid #325891;
    outline-offset: 3px;
    border-radius: 2px;
    padding: 12px;
    margin-top: 12px
}

.jrndet .doubleborder .statnum {
    font-size: 26px;
    color: #325891;
    line-height: 1.1;
    font-weight: 700
}

.jrndet .doubleborder .statlabel {
    font-size: 14px;
    color: #8EBAD4;
    letter-spacing: .07em;
    line-height: 1.75
}

.jrndet .statrow {
    display: flex;
    flex-direction: row;
    gap: 12px
}

.jrndet .statrow .doubleborder {
    flex: 1 1 0;
    text-align: center
}

.jrndet .matte-divider {
    height: 4px;
    background: linear-gradient(to right, #325891, #C8EAF4, transparent);
    margin: 0
}

.jrndet .processsec {
    background: #f4f9fc;
    padding: 48px 24px;
    position: relative;
    overflow: hidden
}

.jrndet .processsec-mathbg {
    position: absolute;
    font-size: 320px;
    color: transparent;
    -webkit-text-stroke: 1px #32589112;
    line-height: 1;
    top: -48px;
    right: -24px;
    pointer-events: none;
    user-select: none;
    z-index: 0
}

.jrndet .processsec-inner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.jrndet .processsec-heading {
    font-size: 26px;
    line-height: 1.1;
    margin: 0 0 48px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: vertclip .45s ease-out both
}

.jrndet .processsteps {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap
}

.jrndet .pstep {
    flex: 1 1 200px;
    background: #fff;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 1px 7px 22px 1px #3258911a;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s ease-out
}

.jrndet .pstep:hover {
    box-shadow: 1px 8px 44px 1px #3258911c
}

.jrndet .pstep-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #325891, #8EBAD4, #C8EAF4, #8EBAD4, #325891);
    background-size: 200% 100%;
    transition: background-position .55s ease-in-out
}

.jrndet .pstep:hover .pstep-wave {
    background-position: 100% 0
}

.jrndet .pstep-num {
    font-size: 66px;
    line-height: 1.1;
    color: #C8EAF4;
    font-weight: 700;
    margin: 0
}

.jrndet .pstep-icon {
    width: 40px;
    height: 40px;
    border-radius: 42px;
    background: #325891;
    display: flex;
    align-items: center;
    justify-content: center
}

.jrndet .pstep-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round
}

.jrndet .pstep-title {
    font-size: 16px;
    color: #1b2a3e;
    font-weight: 600;
    margin: 0;
    line-height: 1.75
}

.jrndet .pstep-desc {
    font-size: 14px;
    color: #4a5a6e;
    line-height: 1.75;
    margin: 0
}

.jrndet .svgcurve {
    display: block;
    line-height: 0
}

.jrndet .svgcurve svg {
    display: block;
    width: 100%
}

.jrndet .checkboard {
    background: #fff;
    padding: 48px 24px 96px
}

.jrndet .checkboard-inner {
    max-width: 1140px;
    margin: 0 auto
}

.jrndet .checkboard-heading {
    font-size: 26px;
    line-height: 1.1;
    margin: 0 0 48px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.jrndet .chboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.jrndet .chitem {
    border-radius: 42px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 7px 22px 1px #3258911a;
    transition: box-shadow .18s ease
}

.jrndet .chitem:hover {
    box-shadow: 1px 8px 44px 1px #3258911c
}

.jrndet .chitem.light {
    background: #f4f9fc
}

.jrndet .chitem.colored {
    background: #325891
}

.jrndet .chitem.offset {
    margin-top: 48px
}

.jrndet .chitem-bignum {
    font-size: 66px;
    line-height: 1.1;
    font-weight: 700;
    color: #C8EAF4;
    margin: 0
}

.jrndet .chitem.colored .chitem-bignum {
    color: #c8eaf459
}

.jrndet .chitem-title {
    font-size: 20px;
    line-height: 1.75;
    font-weight: 600;
    color: #1b2a3e;
    margin: 0
}

.jrndet .chitem.colored .chitem-title {
    color: #fff
}

.jrndet .chitem-body {
    font-size: 16px;
    line-height: 1.75;
    color: #4a5a6e;
    margin: 0
}

.jrndet .chitem.colored .chitem-body {
    color: #C8EAF4
}

.jrndet .chitem-geobg {
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 120px;
    height: 120px;
    pointer-events: none;
    opacity: .08
}

.jrndet .scrolltop {
    position: fixed;
    bottom: 48px;
    right: 24px;
    z-index: 90
}

.jrndet .scrolltop a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 42px;
    background: #325891;
    box-shadow: 1px 7px 22px 1px #3258911a;
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease
}

.jrndet .scrolltop a:hover {
    background: #8EBAD4;
    box-shadow: 1px 8px 44px 1px #3258911c
}

.jrndet .scrolltop a:focus-visible {
    outline: 3px solid #C8EAF4 !important;
    outline-offset: 3px !important
}

.jrndet .scrolltop svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none
}

.jrndet .topanchor {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    visibility: hidden
}

.jrndet .tagpill:focus-visible {
    outline: 3px solid #C8EAF4 !important;
    outline-offset: 2px !important
}

.jrndet .pstep:focus-within {
    outline: 2px solid #325891;
    outline-offset: 2px
}

@media (max-width: 900px) {
    .jrndet .titband-inner {
        flex-direction: column;
        gap: 24px
    }

    .jrndet .titband-imgwrap {
        flex: none;
        width: 100%;
        height: 200px
    }

    .jrndet .titband-h1 {
        font-size: 26px
    }

    .jrndet .articlebody-inner {
        grid-template-columns: 1fr
    }

    .jrndet .articlesidebar {
        position: static
    }

    .jrndet .chboard-grid {
        grid-template-columns: 1fr
    }

    .jrndet .chitem.offset {
        margin-top: 0
    }

    .jrndet .processsteps {
        flex-direction: column
    }

    .jrndet .titband-sub {
        font-size: 16px
    }
}

@media (max-width: 600px) {
    .jrndet .titband {
        padding: 24px 12px
    }

    .jrndet .articlebody {
        padding: 24px 12px
    }

    .jrndet .processsec {
        padding: 48px 12px
    }

    .jrndet .checkboard {
        padding: 48px 12px 96px
    }

    .jrndet .chitem {
        padding: 24px
    }

    .jrndet .pstep-num {
        font-size: 26px
    }
}

.blg {
    background: #fff;
    overflow-x: clip
}

.blg .postsgrid {
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 24px
}

.blg .postsgrid-label {
    font-size: 14px;
    letter-spacing: .12em;
    color: #325891;
    text-transform: uppercase;
    margin-bottom: 12px
}

.blg .postsgrid-heading {
    font-size: 66px;
    line-height: 1.1;
    margin-bottom: 48px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    filter: blur(8px);
    animation: blgReveal .7s ease-out .1s forwards
}

@keyframes blgReveal {
    to {
        opacity: 1;
        filter: blur(0)
    }
}

.blg .postsgrid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.blg .pcard {
    border-radius: 26px;
    background: #fff;
    box-shadow: 1px 7px 22px 1px #3258911a;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    filter: blur(6px);
    animation: blgReveal .6s ease-out forwards;
    transition: box-shadow .18s ease-out, transform .18s ease-out;
    border-top: 2px solid #C8EAF4;
    border-bottom: 2px solid #C8EAF4
}

.blg .pcard:nth-child(1) {
    animation-delay: .15s
}

.blg .pcard:nth-child(2) {
    animation-delay: .25s
}

.blg .pcard:nth-child(3) {
    animation-delay: .35s
}

.blg .pcard:nth-child(4) {
    animation-delay: .45s
}

.blg .pcard:nth-child(5) {
    animation-delay: .55s
}

.blg .pcard:hover {
    box-shadow: 1px 8px 44px 1px #3258911c;
    transform: translateY(-4px)
}

.blg .pcard-imgwrap {
    overflow: hidden;
    height: 200px
}

.blg .pcard-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease-out;
    display: block
}

.blg .pcard-imgwrap img.loaded {
    opacity: 1
}

.blg .pcard-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1
}

.blg .pcard-readtime {
    font-size: 14px;
    letter-spacing: .09em;
    color: #8EBAD4;
    text-transform: uppercase
}

.blg .pcard-title {
    font-size: 20px;
    line-height: 1.1;
    color: #1b2d4a;
    background: linear-gradient(to top, #325891, #1b2d4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blg .pcard-sub {
    font-size: 14px;
    color: #325891;
    line-height: 1.75;
    opacity: .75
}

.blg .pcard-desc {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c;
    flex: 1
}

.blg .pcard-link {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 24px;
    background: #325891;
    color: #fff;
    font-size: 14px;
    letter-spacing: .07em;
    border-radius: 2px;
    text-decoration: none;
    align-self: flex-start;
    transition: filter .15s ease-out
}

.blg .pcard-link:hover {
    filter: brightness(1.18)
}

.blg .pcard-link:focus-visible {
    outline: 2px solid #325891;
    outline-offset: 3px
}

.blg .featured {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 24px 96px
}

.blg .featured-strip {
    border-radius: 42px;
    background: linear-gradient(to top, #C8EAF4 0%, #fff 100%);
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    box-shadow: 1px 2px 3px 1px #8ebad412;
    position: relative
}

.blg .featured-strip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 4px;
    background: linear-gradient(to bottom, #325891, #8EBAD4);
    border-radius: 2px
}

.blg .featured-imgwrap {
    border-radius: 26px;
    overflow: hidden;
    height: 340px
}

.blg .featured-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease-out;
    display: block
}

.blg .featured-imgwrap img.loaded {
    opacity: 1
}

.blg .featured-text {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.blg .featured-label {
    font-size: 14px;
    letter-spacing: .11em;
    color: #8EBAD4;
    text-transform: uppercase
}

.blg .featured-heading {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #1b2d4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blg .featured-body {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c
}

.blg .featured-cta {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 42px;
    background: #325891;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    align-self: flex-start;
    margin-top: 12px;
    transition: filter .15s ease-out
}

.blg .featured-cta:hover {
    filter: brightness(1.15)
}

.blg .featured-cta:focus-visible {
    outline: 2px solid #325891;
    outline-offset: 3px
}

.blg .journalsec {
    background: #f4f9fd;
    padding: 96px 24px;
    position: relative
}

.blg .journalsec::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to bottom, #325891, #C8EAF4);
    border-radius: 2px
}

.blg .journalinner {
    max-width: 1140px;
    margin: 0 auto
}

.blg .journal-toprow {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px
}

.blg .journal-heading {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #1b2d4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blg .journal-viewall {
    font-size: 14px;
    color: #325891;
    text-decoration: none;
    letter-spacing: .07em;
    border-bottom: 1px solid #8EBAD4;
    padding-bottom: 4px;
    transition: color .15s ease-out, border-color .15s ease-out
}

.blg .journal-viewall:hover {
    color: #8EBAD4;
    border-color: #C8EAF4
}

.blg .journal-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0
}

.blg .jitem {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    background: #fff;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 1px 2px 3px 1px #32589112;
    transition: box-shadow .18s ease-out
}

.blg .jitem:hover {
    box-shadow: 1px 7px 22px 1px #3258911a
}

.blg .jitem-tag {
    font-size: 14px;
    letter-spacing: .09em;
    color: #fff;
    background: #325891;
    padding: 4px 12px;
    border-radius: 2px;
    white-space: nowrap
}

.blg .jitem-mid {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.blg .jitem-title {
    font-size: 20px;
    line-height: 1.1;
    color: #1b2d4a
}

.blg .jitem-meta {
    font-size: 14px;
    color: #8EBAD4;
    letter-spacing: .06em
}

.blg .jitem-author {
    font-size: 14px;
    color: #325891;
    white-space: nowrap
}

.blg .jitem-link {
    text-decoration: none;
    color: inherit;
    display: contents
}

.blg .jitem-readmore {
    font-size: 14px;
    color: #325891;
    text-decoration: none;
    letter-spacing: .06em;
    border-bottom: 1px solid #C8EAF4;
    white-space: nowrap;
    transition: color .12s ease-out
}

.blg .jitem-readmore:hover {
    color: #8EBAD4
}

.blg .qasec {
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 24px
}

.blg .qa-heading {
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 48px;
    background: linear-gradient(to top, #325891, #1b2d4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blg .qacard {
    background: #fff;
    border-radius: 26px;
    padding: 48px;
    box-shadow: 1px 7px 22px 1px #3258911a;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    border-top: 2px solid #C8EAF4;
    border-bottom: 2px solid #325891
}

.blg .qa-question {
    font-size: 20px;
    line-height: 1.75;
    color: #1b2d4a
}

.blg .qa-answer {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.blg .qa-answerlabel {
    font-size: 14px;
    letter-spacing: .1em;
    color: #8EBAD4;
    text-transform: uppercase
}

.blg .qa-answertext {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c
}

.blg .qa-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.blg .qa-points li {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c;
    padding-left: 16px;
    position: relative
}

.blg .qa-points li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #8EBAD4
}

.blg .metricssec {
    background: linear-gradient(to top, #C8EAF4 0%, #fff 100%);
    padding: 96px 24px;
    position: relative;
    overflow: hidden
}

.blg .metricssec-geo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}

.blg .geo-shape {
    position: absolute;
    opacity: .06;
    background: #325891
}

.blg .geo-shape.s1 {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    top: 12%;
    left: 8%;
    transform: rotate(22deg)
}

.blg .geo-shape.s2 {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    top: 60%;
    left: 15%;
    transform: rotate(45deg)
}

.blg .geo-shape.s3 {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    top: 30%;
    right: 10%;
    transform: rotate(12deg)
}

.blg .geo-shape.s4 {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    bottom: 20%;
    right: 22%;
    transform: rotate(33deg)
}

.blg .geo-shape.s5 {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    top: 75%;
    left: 50%;
    transform: rotate(18deg)
}

.blg .metricsinner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px
}

.blg .metrics-toptext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start
}

.blg .metrics-heading {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #1b2d4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.blg .metrics-desc {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c
}

.blg .metrics-nums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.blg .metricbox {
    background: #fff;
    border-radius: 26px;
    padding: 24px;
    box-shadow: 1px 2px 3px 1px #32589112;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: inset 0 2px 8px #c8eaf480 1px 7px 22px 1px #3258911a
}

.blg .metricbox-pair {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: baseline
}

.blg .metricbox-before {
    font-size: 26px;
    line-height: 1.1;
    color: #C8EAF4;
    font-weight: 700
}

.blg .metricbox-after {
    font-size: 66px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #8EBAD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.blg .metricbox-label {
    font-size: 14px;
    letter-spacing: .08em;
    color: #3a4a5c
}

@media (max-width: 900px) {
    .blg .postsgrid-cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .blg .featured-strip {
        grid-template-columns: 1fr
    }

    .blg .qacard {
        grid-template-columns: 1fr
    }

    .blg .metrics-toptext {
        grid-template-columns: 1fr
    }

    .blg .metrics-nums {
        grid-template-columns: repeat(2, 1fr)
    }

    .blg .jitem {
        grid-template-columns: 1fr
    }
}

@media (max-width: 600px) {
    .blg .postsgrid-cards {
        grid-template-columns: 1fr
    }

    .blg .postsgrid-heading {
        font-size: 26px
    }

    .blg .metrics-nums {
        grid-template-columns: 1fr
    }

    .blg .featured-strip {
        padding: 24px
    }

    .blg .qacard {
        padding: 24px
    }

    .blg .journal-toprow {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

.jrnl {
    background: #fff;
    overflow-x: hidden
}

.jrnl .pagetop {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 1140px;
    margin: 0 auto;
    padding: 96px 24px 48px;
    gap: 48px
}

.jrnl .pagetop-img {
    flex: 0 0 340px;
    position: relative;
    border-radius: 26px;
    overflow: hidden
}

.jrnl .pagetop-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .18s ease-out
}

.jrnl .pagetop-img img.loaded {
    opacity: 1
}

.jrnl .pagetop-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #3258918c 0%, transparent 60%);
    border-radius: 26px;
    pointer-events: none
}

.jrnl .pagetop-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 48px 48px 24px;
    position: relative
}

.jrnl .pagetop-text-deco {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    background: repeating-linear-gradient(to bottom, #8EBAD4 0px, #8EBAD4 8px, transparent 8px, transparent 18px);
    border-radius: 2px;
    pointer-events: none
}

.jrnl .pagetop-label {
    font-size: 14px;
    letter-spacing: .12em;
    color: #325891;
    margin-bottom: 24px;
    text-transform: uppercase
}

.jrnl .pagetop-heading {
    font-size: 66px;
    line-height: 1.1;
    font-weight: 800;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 24px
}

.jrnl .pagetop-desc {
    font-size: 20px;
    line-height: 1.75;
    color: #3a4a5c;
    max-width: 520px;
    margin: 0
}

.jrnl .divider-tri {
    width: 100%;
    line-height: 0;
    overflow: hidden
}

.jrnl .divider-tri svg {
    display: block;
    width: 100%
}

.jrnl .postsgrid-area {
    background: #f2f7fc;
    padding: 48px 24px 96px
}

.jrnl .postsgrid-inner {
    max-width: 1140px;
    margin: 0 auto
}

.jrnl .postsgrid-label {
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #325891;
    margin-bottom: 12px
}

.jrnl .postsgrid-title {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 48px
}

.jrnl .posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.jrnl .postcard {
    background: #fff;
    border-radius: 26px;
    box-shadow: 1px 7px 22px 1px #3258911a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .18s ease-out, transform .15s ease-out;
    position: relative
}

.jrnl .postcard:hover {
    box-shadow: 1px 8px 44px 1px #3258911c;
    transform: translateY(-3px)
}

.jrnl .postcard-imgwrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative
}

.jrnl .postcard-imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .2s ease-out
}

.jrnl .postcard-imgwrap img.loaded {
    opacity: 1
}

.jrnl .postcard-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #325891;
    color: #fff;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 2px;
    letter-spacing: .06em
}

.jrnl .postcard-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px
}

.jrnl .postcard-cat {
    font-size: 14px;
    color: #8EBAD4;
    letter-spacing: .08em;
    text-transform: uppercase
}

.jrnl .postcard-heading {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: #1b2d45;
    margin: 0;
    background: linear-gradient(to top, #325891, #1b2d45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.jrnl .postcard-sub {
    font-size: 14px;
    color: #5a6e85;
    line-height: 1.75;
    margin: 0
}

.jrnl .postcard-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #C8EAF4
}

.jrnl .postcard-author {
    font-size: 14px;
    color: #325891;
    font-weight: 600;
    flex: 1
}

.jrnl .postcard-stats {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center
}

.jrnl .postcard-stat {
    font-size: 14px;
    color: #8EBAD4;
    display: flex;
    align-items: center;
    gap: 4px
}

.jrnl .postcard-stat svg {
    width: 14px;
    height: 14px;
    fill: #8EBAD4
}

.jrnl .postcard-link {
    display: inline-block;
    margin-top: 4px;
    padding: 12px 24px;
    background: #325891;
    color: #fff;
    font-size: 14px;
    border-radius: 42px;
    text-decoration: none;
    letter-spacing: .06em;
    transition: filter .15s ease-out;
    align-self: flex-start
}

.jrnl .postcard-link:hover {
    filter: brightness(1.18)
}

.jrnl .divider-wave {
    width: 100%;
    line-height: 0;
    background: #f2f7fc
}

.jrnl .divider-wave svg {
    display: block;
    width: 100%
}

.jrnl .about-area {
    background: #fff;
    padding: 96px 24px 48px
}

.jrnl .about-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 96px;
    align-items: flex-start
}

.jrnl .about-text {
    flex: 1
}

.jrnl .about-heading {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 24px
}

.jrnl .about-para {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c;
    margin: 0 0 24px
}

.jrnl .about-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.jrnl .about-checklist li {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c;
    display: flex;
    align-items: flex-start;
    gap: 12px
}

.jrnl .about-checklist li::before {
    content: "—";
    color: #325891;
    font-weight: 700;
    flex-shrink: 0
}

.jrnl .about-aside {
    flex: 0 0 300px;
    background: linear-gradient(to bottom, #C8EAF4, #fff);
    border-radius: 26px;
    padding: 48px 24px;
    box-shadow: 1px 2px 3px 1px #32589112;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.jrnl .about-aside-heading {
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: #325891;
    margin: 0
}

.jrnl .about-aside-para {
    font-size: 14px;
    line-height: 1.75;
    color: #3a4a5c;
    margin: 0
}

.jrnl .about-aside-link {
    display: inline-block;
    padding: 12px 24px;
    background: #325891;
    color: #fff;
    font-size: 14px;
    border-radius: 42px;
    text-decoration: none;
    letter-spacing: .06em;
    transition: filter .15s ease-out;
    align-self: flex-start
}

.jrnl .about-aside-link:hover {
    filter: brightness(1.18)
}

.jrnl .divider-geo {
    width: 100%;
    line-height: 0;
    background: #fff
}

.jrnl .divider-geo svg {
    display: block;
    width: 100%
}

.jrnl .atmbg-area {
    position: relative;
    padding: 96px 24px;
    background-image: url("../images/pricing_3.jpg");
    background-size: cover;
    background-position: center
}

.jrnl .atmbg-overlay {
    position: absolute;
    inset: 0;
    background: #1b2d45b8;
    pointer-events: none
}

.jrnl .atmbg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: innerglow 4s ease-in-out infinite alternate
}

@keyframes innerglow {
    from {
        background: radial-gradient(ellipse 60% 40% at 50% 50%, #8ebad412 0%, transparent 70%)
    }

    to {
        background: radial-gradient(ellipse 60% 40% at 50% 50%, #8ebad421 0%, transparent 70%)
    }
}

.jrnl .atmbg-inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center
}

.jrnl .atmbg-heading {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    color: #C8EAF4;
    margin: 0
}

.jrnl .atmbg-para {
    font-size: 16px;
    line-height: 1.75;
    color: #C8EAF4;
    max-width: 620px;
    margin: 0;
    opacity: .9
}

.jrnl .atmbg-link {
    display: inline-block;
    padding: 12px 48px;
    background: #8EBAD4;
    color: #1b2d45;
    font-size: 16px;
    font-weight: 700;
    border-radius: 42px;
    text-decoration: none;
    letter-spacing: .06em;
    transition: filter .12s ease-out
}

.jrnl .atmbg-link:hover {
    filter: brightness(1.12)
}

.jrnl .divider-tri2 {
    width: 100%;
    line-height: 0;
    background: #fff
}

.jrnl .divider-tri2 svg {
    display: block;
    width: 100%
}

.jrnl .reveal-area {
    background: #fff;
    padding: 48px 24px 96px
}

.jrnl .reveal-inner {
    max-width: 1140px;
    margin: 0 auto
}

.jrnl .reveal-heading {
    font-size: 26px;
    line-height: 1.1;
    font-weight: 700;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 48px
}

.jrnl .reveal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

.jrnl .revealcard {
    border-radius: 26px;
    border: 1.5px solid #C8EAF4;
    padding: 48px 24px 24px;
    position: relative;
    background: #fff;
    box-shadow: 1px 2px 3px 1px #32589112;
    overflow: hidden
}

.jrnl .revealcard-mask {
    position: absolute;
    inset: 0;
    background: #f2f7fc;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .18s ease-out;
    pointer-events: none
}

.jrnl .revealcard:focus-within .revealcard-mask,
.jrnl .revealcard:hover .revealcard-mask {
    opacity: 0;
    pointer-events: none
}

.jrnl .revealcard-mask-label {
    font-size: 14px;
    color: #325891;
    letter-spacing: .1em;
    text-transform: uppercase
}

.jrnl .revealcard-num {
    font-size: 66px;
    line-height: 1.1;
    font-weight: 800;
    background: linear-gradient(to top, #325891, #8EBAD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px
}

.jrnl .revealcard-label {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c;
    margin: 0
}

@media (max-width: 900px) {
    .jrnl .pagetop {
        flex-direction: column;
        padding: 48px 24px 24px
    }

    .jrnl .pagetop-img {
        flex: 0 0 220px;
        height: 220px
    }

    .jrnl .pagetop-text {
        padding: 24px 12px
    }

    .jrnl .pagetop-heading {
        font-size: 26px
    }

    .jrnl .posts-grid {
        grid-template-columns: 1fr
    }

    .jrnl .about-inner {
        flex-direction: column;
        gap: 24px
    }

    .jrnl .about-aside {
        flex: unset;
        width: 100%
    }

    .jrnl .reveal-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 600px) {
    .jrnl .pagetop-heading {
        font-size: 26px
    }

    .jrnl .pagetop-desc {
        font-size: 16px
    }
}

.abtauth {
    background: #fff;
    overflow-x: clip
}

.abtauth .splitscreen {
    display: flex;
    flex-direction: row;
    min-height: 560px;
    max-width: 100%;
    position: relative
}

.abtauth .splitscreen-text {
    flex: 1 1 50%;
    background: #325891;
    padding: 96px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1
}

.abtauth .splitscreen-label {
    font-size: 14px;
    letter-spacing: .18em;
    color: #8EBAD4;
    text-transform: uppercase;
    margin-bottom: 24px;
    line-height: 1.1
}

.abtauth .splitscreen-desc {
    font-size: 20px;
    color: #C8EAF4;
    line-height: 1.75;
    margin-bottom: 24px;
    max-width: 440px
}

.abtauth .splitscreen-name {
    font-size: 66px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: -.01em
}

.abtauth .splitscreen-imgzone {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    min-height: 480px
}

.abtauth .splitscreen-imgzone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .2s ease-out
}

.abtauth .splitscreen-imgzone img.loaded {
    opacity: 1
}

.abtauth .splitscreen-imgzone::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent 30%, #325891 100%);
    pointer-events: none
}

.abtauth .splitscreen-deco {
    position: absolute;
    bottom: 24px;
    right: 24px;
    font-size: 220px;
    line-height: 1.1;
    color: transparent;
    -webkit-text-stroke: 2px #8ebad42e;
    pointer-events: none;
    user-select: none;
    z-index: 0
}

.abtauth .perspective {
    background: #f4f8fb;
    background: linear-gradient(to bottom, #eaf3f9, #fff);
    padding: 96px 48px;
    position: relative
}

.abtauth .perspective-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px 48px;
    align-items: start
}

.abtauth .perspective-visual {
    position: relative
}

.abtauth .perspective-visual img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 26px;
    display: block;
    box-shadow: 1px 8px 44px 1px #3258911c;
    opacity: 0;
    transition: opacity .18s ease-out
}

.abtauth .perspective-visual img.loaded {
    opacity: 1
}

.abtauth .perspective-visual-accent {
    position: absolute;
    top: -24px;
    left: -24px;
    width: 120px;
    height: 120px;
    border-radius: 42px;
    background: #C8EAF4;
    z-index: 0;
    pointer-events: none
}

.abtauth .perspective-visual {
    z-index: 1
}

.abtauth .perspective-visual img {
    position: relative;
    z-index: 1
}

.abtauth .perspective-copy {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.abtauth .perspective-eyebrow {
    font-size: 14px;
    letter-spacing: .15em;
    color: #325891;
    text-transform: uppercase;
    line-height: 1.1
}

.abtauth .perspective-heading {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #8EBAD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0
}

.abtauth .perspective-rule {
    width: 48px;
    height: 2px;
    background: linear-gradient(to right, #325891, #8EBAD4);
    border-radius: 2px
}

.abtauth .perspective-para {
    font-size: 16px;
    line-height: 1.75;
    color: #2a3a52;
    margin: 0
}

.abtauth .perspective-stats {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 12px
}

.abtauth .statitem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    background: #fff;
    border-radius: 26px;
    box-shadow: 1px 7px 22px 1px #3258911a;
    flex: 1 1 0;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: box-shadow .15s ease-out
}

.abtauth .statitem:hover {
    box-shadow: 1px 8px 44px 1px #32589124
}

.abtauth .statitem-num {
    font-size: 26px;
    line-height: 1.1;
    color: #325891;
    font-weight: 700
}

.abtauth .statitem-label {
    font-size: 14px;
    color: #5a7a9a;
    line-height: 1.75;
    letter-spacing: .04em
}

.abtauth .statitem-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, #325891, #8EBAD4);
    border-radius: 0 0 2px 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease-out
}

.abtauth .statitem:hover .statitem-bar {
    transform: scaleX(1)
}

.abtauth .divider-fade {
    height: 2px;
    background: linear-gradient(to right, transparent, #8EBAD4 30%, #8EBAD4 70%, transparent);
    border: none;
    margin: 0
}

.abtauth .fieldwork {
    padding: 96px 48px;
    background: #fff;
    position: relative
}

.abtauth .fieldwork::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, transparent, #C8EAF4 40%, #325891 60%, transparent);
    pointer-events: none
}

.abtauth .fieldwork-inner {
    max-width: 1140px;
    margin: 0 auto
}

.abtauth .fieldwork-top {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 48px
}

.abtauth .fieldwork-headgroup {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px
}

.abtauth .fieldwork-tag {
    font-size: 14px;
    letter-spacing: .15em;
    color: #8EBAD4;
    text-transform: uppercase;
    line-height: 1.1
}

.abtauth .fieldwork-heading {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(to top, #325891, #8EBAD4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0
}

.abtauth .fieldwork-rule {
    width: 48px;
    height: 2px;
    background: #325891;
    border-radius: 2px
}

.abtauth .fieldwork-lead {
    font-size: 16px;
    line-height: 1.75;
    color: #2a3a52;
    max-width: 340px;
    margin: 0
}

.abtauth .fieldwork-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px
}

.abtauth .fieldwork-imgblock {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 1px 8px 44px 1px #3258911c
}

.abtauth .fieldwork-imgblock img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 380px;
    opacity: 0;
    transition: opacity .2s ease-out
}

.abtauth .fieldwork-imgblock img.loaded {
    opacity: 1
}

.abtauth .fieldwork-card {
    background: linear-gradient(to bottom, #f0f6fb, #e8f1f8);
    border-radius: 26px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 1px 2px 3px 1px #32589112;
    transition: box-shadow .15s ease-out, transform .15s ease-out
}

.abtauth .fieldwork-card:hover {
    box-shadow: 1px 7px 22px 1px #3258911f;
    transform: translateY(-2px)
}

.abtauth .fieldwork-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 42px;
    background: #325891;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.abtauth .fieldwork-card-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.abtauth .fieldwork-card-title {
    font-size: 16px;
    line-height: 1.1;
    color: #325891;
    margin: 0;
    font-weight: 600
}

.abtauth .fieldwork-card-text {
    font-size: 14px;
    line-height: 1.75;
    color: #3a5070;
    margin: 0
}

.abtauth .fieldwork-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.abtauth .fieldwork-list li {
    font-size: 14px;
    line-height: 1.75;
    color: #3a5070;
    padding-left: 16px;
    position: relative
}

.abtauth .fieldwork-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: #8EBAD4
}

.abtauth .deco-quote {
    position: absolute;
    top: 48px;
    right: 48px;
    font-size: 220px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #8ebad421;
    pointer-events: none;
    user-select: none;
    z-index: 0
}

.abtauth .fieldwork-inner {
    position: relative;
    z-index: 1
}

@media (max-width: 900px) {
    .abtauth .splitscreen {
        flex-direction: column
    }

    .abtauth .splitscreen-text {
        padding: 96px 24px 48px
    }

    .abtauth .splitscreen-name {
        font-size: 48px
    }

    .abtauth .splitscreen-imgzone {
        min-height: 320px
    }

    .abtauth .splitscreen-imgzone::after {
        background: linear-gradient(to top, transparent 30%, #325891 100%)
    }

    .abtauth .perspective-inner {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .abtauth .perspective {
        padding: 48px 24px
    }

    .abtauth .fieldwork {
        padding: 48px 24px
    }

    .abtauth .fieldwork-top {
        flex-direction: column;
        align-items: flex-start
    }

    .abtauth .fieldwork-grid {
        grid-template-columns: 1fr
    }

    .abtauth .fieldwork-imgblock {
        grid-column: 1;
        grid-row: auto
    }

    .abtauth .perspective-stats {
        flex-direction: column
    }

    .abtauth .deco-quote {
        font-size: 120px;
        top: 24px;
        right: 24px
    }
}

@keyframes revealup {
    from {
        opacity: 0;
        transform: scale(0.97)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.abtauth .splitscreen-text {
    animation: revealup .2s ease-out both
}

.abtauth .perspective-copy {
    animation: revealup .18s ease-out .08s both
}

.abtauth .tooltip-container {
    position: relative;
    display: inline-block
}

.strt {
    max-width: 100%;
    overflow-x: hidden;
    background: #fff
}

.strt .pageinner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px
}

.strt .frameline {
    position: absolute;
    pointer-events: none
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-32px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(32px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeImg {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.strt .bentoGrid {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    position: relative
}

.strt .bentoGrid::before {
    content: '';
    position: absolute;
    inset: 24px;
    border: 1px solid #3258912e;
    border-radius: 42px;
    pointer-events: none;
    z-index: 0
}

.strt .bentoGrid::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid #8ebad41f;
    border-radius: 42px;
    pointer-events: none;
    z-index: 0
}

.strt .bentoimgCell {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    border-radius: 42px;
    overflow: hidden;
    min-height: 420px;
    box-shadow: 1px 7px 22px 1px #3258911a;
    animation: slideFromLeft .18s ease-out both;
    z-index: 1
}

.strt .bentoimgCell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: fadeImg .2s ease-out both;
    animation-delay: .1s
}

.strt .bentoimgCell .imgoverlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #32589185 0%, #3258911f 100%)
}

.strt .bentotextCell {
    grid-column: 2;
    grid-row: 1;
    background: linear-gradient(180deg, #325891 0%, #fff 100%);
    border-radius: 26px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
    animation: slideFromRight .16s ease-out both;
    animation-delay: .05s
}

.strt .bentotextCell .sitenameLabel {
    font-size: 14px;
    letter-spacing: .12em;
    color: #ffffffbf;
    text-transform: uppercase
}

.strt .bentotextCell .mainHeading {
    font-size: 66px;
    line-height: 1.1;
    background: linear-gradient(180deg, #fff 0%, #C8EAF4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0
}

.strt .bentotextCell .counterRow {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px
}

.strt .bentotextCell .bignum {
    font-size: 66px;
    line-height: 1.1;
    background: linear-gradient(180deg, #C8EAF4 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.strt .bentotextCell .numLabel {
    font-size: 16px;
    color: #fffc;
    line-height: 1.75
}

.strt .bentometaCell {
    grid-column: 2;
    grid-row: 2;
    background: #fff;
    border-radius: 26px;
    padding: 24px 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
    box-shadow: 1px 2px 3px 1px #32589112;
    z-index: 1;
    animation: slideFromBottom .18s ease-out both;
    animation-delay: .1s
}

.strt .bentometaCell .metaitem {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.strt .bentometaCell .metaitem .metaval {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700
}

.strt .bentometaCell .metaitem .metalabel {
    font-size: 14px;
    color: #555;
    letter-spacing: .08em
}

.strt .metadivider {
    width: 1px;
    height: 48px;
    background: #32589126
}

.strt .svgdivider {
    width: 100%;
    line-height: 0;
    margin-top: 48px
}

.strt .svgdivider svg {
    display: block;
    width: 100%
}

.strt .postlisting {
    background: #f4f8fb;
    padding: 48px 0
}

.strt .postlisting .listhead {
    max-width: 1140px;
    margin: 0 auto 48px;
    padding: 0 24px
}

.strt .postlisting .listhead h2 {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px
}

.strt .postlisting .listhead p {
    font-size: 16px;
    color: #444;
    line-height: 1.75;
    max-width: 560px;
    margin: 0
}

.strt .postsgrid {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.strt .postcard {
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 1px 2px 3px 1px #32589112;
    display: flex;
    flex-direction: column;
    transition: box-shadow .16s ease-out
}

.strt .postcard:hover {
    box-shadow: 1px 8px 44px 1px #3258911c
}

.strt .postcard .cardimgwrap {
    position: relative;
    height: 220px;
    overflow: hidden
}

.strt .postcard .cardimgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .18s ease-out;
    opacity: 1
}

.strt .postcard .cardimgwrap .cardoverlay {
    position: absolute;
    inset: 0;
    background: #32589100;
    transition: background .16s ease-out
}

.strt .postcard:hover .cardimgwrap .cardoverlay {
    background: #3258912e
}

.strt .postcard .cardbody {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1
}

.strt .postcard .cardreadtime {
    font-size: 14px;
    color: #8EBAD4;
    letter-spacing: .1em
}

.strt .postcard .cardtitle {
    font-size: 20px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0
}

.strt .postcard .cardsub {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin: 0
}

.strt .postcard .carddesc {
    font-size: 16px;
    color: #444;
    line-height: 1.75;
    margin: 0
}

.strt .postcard .cardlink {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    color: #325891;
    text-decoration: none;
    border-bottom: 1px solid #3258914d;
    padding-bottom: 2px;
    transition: border-color .12s ease-out, color .12s ease-out;
    align-self: flex-start
}

.strt .postcard .cardlink:hover {
    color: #8EBAD4;
    border-color: #8EBAD4
}

.strt .svgdivider2 {
    width: 100%;
    line-height: 0
}

.strt .svgdivider2 svg {
    display: block;
    width: 100%
}

.strt .journalstrip {
    background: #fff;
    padding: 48px 0
}

.strt .journalstrip .journalinner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: center
}

.strt .journalstrip .journaltext h2 {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px
}

.strt .journalstrip .journaltext p {
    font-size: 16px;
    color: #444;
    line-height: 1.75;
    margin: 0 0 24px
}

.strt .journalstrip .journaltext .jlink {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    background: #325891;
    padding: 12px 24px;
    border-radius: 2px;
    text-decoration: none;
    transition: filter .14s ease-out
}

.strt .journalstrip .journaltext .jlink:hover {
    filter: brightness(1.18)
}

.strt .journalcard {
    background: #f4f8fb;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 1px 7px 22px 1px #3258911a;
    display: flex;
    flex-direction: column
}

.strt .journalcard .jcardimgwrap {
    position: relative;
    height: 200px;
    overflow: hidden
}

.strt .journalcard .jcardimgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: fadeImg .2s ease-out both
}

.strt .journalcard .jcardimgwrap .jcardoverlay {
    position: absolute;
    inset: 0;
    background: #32589159
}

.strt .journalcard .jcardimgwrap .jcardtag {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 14px;
    color: #fff;
    background: #325891cc;
    padding: 4px 12px;
    border-radius: 2px;
    letter-spacing: .08em
}

.strt .journalcard .jcardbody {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.strt .journalcard .jcardtitle {
    font-size: 20px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0
}

.strt .journalcard .jcardsub {
    font-size: 14px;
    color: #666;
    line-height: 1.75;
    margin: 0
}

.strt .journalcard .jcarddesc {
    font-size: 16px;
    color: #444;
    line-height: 1.75;
    margin: 0
}

.strt .journalcard .jcardmeta {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center
}

.strt .journalcard .jcardmeta .jauthor {
    font-size: 14px;
    color: #325891;
    letter-spacing: .06em
}

.strt .journalcard .jcardmeta .jdate {
    font-size: 14px;
    color: #888
}

.strt .journalcard .jcardlink {
    display: inline-block;
    font-size: 14px;
    color: #325891;
    text-decoration: none;
    border-bottom: 1px solid #3258914d;
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color .12s ease-out, border-color .12s ease-out
}

.strt .journalcard .jcardlink:hover {
    color: #8EBAD4;
    border-color: #8EBAD4
}

.strt .quoteband {
    background: linear-gradient(180deg, #325891 0%, #fff 100%);
    padding: 96px 24px;
    position: relative
}

.strt .quoteband .quoteinner {
    max-width: 1140px;
    margin: 0 auto;
    position: relative
}

.strt .quoteband .quotebigchar {
    font-size: 66px;
    line-height: 1.1;
    color: #c8eaf42e;
    position: absolute;
    top: -24px;
    left: -12px;
    pointer-events: none;
    font-weight: 700;
    letter-spacing: -4px;
    user-select: none
}

.strt .quoteband .quotetext {
    font-size: 26px;
    line-height: 1.75;
    color: #fff;
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
    position: relative;
    z-index: 1
}

.strt .quoteband .quoteattrib {
    font-size: 14px;
    color: #C8EAF4;
    text-align: center;
    letter-spacing: .1em;
    position: relative;
    z-index: 1
}

.strt .archivestrip {
    background: #fff;
    padding: 96px 0 48px
}

.strt .archivestrip .archiveinner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: start
}

.strt .archivestrip .archivevisual {
    position: relative;
    border-radius: 42px;
    overflow: hidden;
    box-shadow: 1px 8px 44px 1px #3258911c
}

.strt .archivestrip .archivevisual img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    animation: fadeImg .18s ease-out both
}

.strt .archivestrip .archivevisual .archoverlay {
    position: absolute;
    inset: 0;
    background: #32589147
}

.strt .archivestrip .archivevisual .archdecor {
    position: absolute;
    bottom: 24px;
    left: 24px;
    font-size: 66px;
    line-height: 1.1;
    color: #c8eaf438;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    letter-spacing: -2px
}

.strt .archivestrip .archivetext h2 {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px
}

.strt .archivestrip .archivetext p {
    font-size: 16px;
    color: #444;
    line-height: 1.75;
    margin: 0 0 24px
}

.strt .archivestrip .topiclist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.strt .archivestrip .topiclist li {
    font-size: 16px;
    color: #333;
    line-height: 1.75;
    padding-left: 16px;
    position: relative
}

.strt .archivestrip .topiclist li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: #8EBAD4
}

.strt .archivestrip .archivetext .archlink {
    display: inline-block;
    font-size: 16px;
    color: #325891;
    border: 1px solid #325891;
    padding: 12px 24px;
    border-radius: 2px;
    text-decoration: none;
    transition: background .14s ease-out, color .14s ease-out
}

.strt .archivestrip .archivetext .archlink:hover {
    background: #325891;
    color: #fff
}

.strt .svgdivider3 {
    width: 100%;
    line-height: 0
}

.strt .svgdivider3 svg {
    display: block;
    width: 100%
}

.strt .nextstrip {
    background: #f4f8fb;
    padding: 96px 0
}

.strt .nextstrip .nextinner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center
}

.strt .nextstrip .nexttext {
    flex: 1
}

.strt .nextstrip .nexttext h2 {
    font-size: 26px;
    line-height: 1.1;
    background: linear-gradient(180deg, #325891 0%, #8EBAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px
}

.strt .nextstrip .nexttext p {
    font-size: 16px;
    color: #444;
    line-height: 1.75;
    margin: 0
}

.strt .nextstrip .nextactions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 240px
}

.strt .nextstrip .nextactions .nlink {
    display: block;
    font-size: 16px;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 2px;
    text-align: center;
    transition: filter .14s ease-out
}

.strt .nextstrip .nextactions .nlink.primary {
    background: #325891;
    color: #fff;
    box-shadow: 1px 7px 22px 1px #3258911a
}

.strt .nextstrip .nextactions .nlink.secondary {
    background: #fff;
    color: #325891;
    border: 1px solid #3258914d
}

.strt .nextstrip .nextactions .nlink:hover {
    filter: brightness(1.12)
}

@media (max-width: 820px) {
    .strt .bentoGrid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 24px
    }

    .strt .bentoimgCell {
        grid-column: 1;
        grid-row: 1;
        min-height: 260px
    }

    .strt .bentotextCell {
        grid-column: 1;
        grid-row: 2;
        padding: 24px
    }

    .strt .bentometaCell {
        grid-column: 1;
        grid-row: 3;
        padding: 24px;
        gap: 24px
    }

    .strt .bentotextCell .mainHeading {
        font-size: 26px
    }

    .strt .bentotextCell .bignum {
        font-size: 26px
    }

    .strt .postsgrid {
        grid-template-columns: 1fr
    }

    .strt .journalstrip .journalinner {
        grid-template-columns: 1fr
    }

    .strt .archivestrip .archiveinner {
        grid-template-columns: 1fr
    }

    .strt .nextstrip .nextinner {
        flex-direction: column
    }

    .strt .nextstrip .nextactions {
        min-width: unset;
        width: 100%
    }
}

.SuccessPage {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 96px 24px;
    background: #fff
}

.SuccessPage .ConfirmCard {
    max-width: 540px;
    width: 100%;
    background: #fff;
    border-radius: 26px;
    padding: 48px;
    box-shadow: 1px 8px 44px 1px #3258911c;
    text-align: center
}

.SuccessPage .ConfirmCard .IconRing {
    width: 72px;
    height: 72px;
    border-radius: 42px;
    background: #C8EAF4;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 2px 3px 1px #32589112
}

.SuccessPage .ConfirmCard .IconRing svg {
    display: block
}

.SuccessPage .ConfirmCard .SuccessHeading {
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    background: linear-gradient(to top, #325891, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.SuccessPage .ConfirmCard .SuccessBody {
    font-size: 16px;
    line-height: 1.75;
    color: #3a4a5c;
    margin: 0 0 48px
}

.SuccessPage .ConfirmCard .ReturnLink {
    display: inline-block;
    font-size: 14px;
    letter-spacing: .06em;
    color: #fff;
    background: #325891;
    padding: 12px 48px;
    border-radius: 2px;
    text-decoration: none;
    box-shadow: 1px 7px 22px 1px #3258911a;
    transition: brightness .15s ease-out
}

.SuccessPage .ConfirmCard .ReturnLink:hover {
    filter: brightness(1.18)
}

.SuccessPage .ConfirmCard .ReturnLink:focus-visible {
    outline: 2px solid #325891;
    outline-offset: 4px
}

.SuccessPage .ConfirmCard .SecondaryNav {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap
}

.SuccessPage .ConfirmCard .SecondaryNav a {
    font-size: 14px;
    line-height: 1.75;
    color: #325891;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity .12s ease
}

.SuccessPage .ConfirmCard .SecondaryNav a:hover {
    opacity: .65
}

@media (max-width: 600px) {
    .SuccessPage .ConfirmCard {
        padding: 48px 24px
    }
}

h1, h2, h3, h4, h5, h6 {word-break: break-word;}