:root {
    --ink:#102c51;
    --text:#355783;
    --blue:#5483bd;
    --line:#cfdaea;
    --glass:rgba(255,255,255,.49);
    --paper:#edf3fa;
    --white:#fff
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    color:var(--ink);
    font-family:"Trebuchet MS",Arial,sans-serif;
    background:radial-gradient(ellipse at 0 42%,#dce9f7 0,transparent 32%),radial-gradient(ellipse at 100% 83%,#e4eaf3,transparent 43%),#f2f5f9;
    font-size:17px;
    line-height:1.5
}
button,input {
    font:inherit
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
a {
    color:inherit;
    text-decoration:none
}
button {
    color:inherit
}
h1,h2,h3,p,figure {
    margin:0
}
h1,h2,.brand {
    font-family:Arial,sans-serif
}
h2 {
    font-size:34px;
    line-height:1.17;
    letter-spacing:-1px
}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #3477b8;
    outline-offset:5px
}
.wrap {
    width:min(1120px,88%);
    margin-inline:auto
}
.wide {
    width:min(1170px,92%);
    margin-inline:auto
}
.glass {
    background:var(--glass);
    border:1.5px solid rgba(255,255,255,.9);
    box-shadow:inset 0 1px 6px #fff9,0 12px 32px #56729713;
    backdrop-filter:blur(16px)
}
.symbols {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.icon {
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex-shrink:0
}
.header {
    width:min(1090px,86%);
    margin:18px auto 0;
    padding:15px 30px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    z-index:5
}
.brand {
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    font-size:23px;
    letter-spacing:-.8px
}
.brand strong {
    font-size:27px;
    letter-spacing:-1px
}
.brand img {
    object-fit:contain
}
.header nav {
    display:flex;
    align-items:center;
    gap:34px;
    font-size:15px
}
.header nav a,.header nav button {
    background:none;
    border:0;
    padding:7px 0
}
.header [aria-current] {
    border-bottom:1px solid var(--ink)
}
.menu-toggle {
    display:none
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:4px;
    color:var(--blue);
    font-size:12px;
    margin-bottom:18px
}
.button {
    border:1px solid #d4deed;
    border-radius:30px;
    min-height:53px;
    padding:12px 30px;
    background:linear-gradient(130deg,#ffffffc9,#e8f0f980);
    box-shadow:inset 0 2px 6px #fff,0 6px 18px #526f8c12;
    display:inline-flex;
    gap:16px;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
    transition:transform .2s,box-shadow .2s
}
.button:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 18px #526f8c30
}
.primary {
    color:white;
    background:linear-gradient(#477da9,#102d50 85%);
    border-color:#6fa7d2;
    box-shadow:inset 0 1px 5px #b4def280,0 9px 19px #264c7733
}
.socials {
    display:flex;
    gap:12px
}
.socials>span {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:2px solid white;
    background:#ffffff65;
    box-shadow:0 4px 9px #39567d20;
    font:bold 21px Arial;
    letter-spacing:0;
    color:#245487
}
.socials>span:last-child {
    font-size:16px
}
.footer {
    border-radius:34px;
    padding:32px 38px 20px;
    margin-top:25px;
    margin-bottom:24px
}
.footer-grid {
    display:grid;
    grid-template-columns:1.4fr .9fr .95fr 1.3fr
}
.footer-grid>div {
    padding:0 30px;
    border-right:1px solid var(--line)
}
.footer-grid>div:first-child {
    padding-left:0
}
.footer-grid>div:last-child {
    border:0
}
.footer-brand {
    font-size:19px;
    gap:6px
}
.footer-brand strong {
    font-size:23px
}
.footer p {
    font-size:14px;
    color:var(--text);
    margin-top:10px
}
.footer h3 {
    font-size:14px;
    margin-bottom:10px
}
.footer-grid>div>a:not(.brand),.footer button {
    display:flex;
    gap:12px;
    align-items:center;
    font-size:13px;
    margin-bottom:10px
}
.footer button {
    border:0;
    padding:0;
    background:none
}
.footer .icon {
    width:18px;
    height:18px
}
.location {
    display:flex;
    gap:12px;
    align-items:center
}
.footer .socials {
    margin-top:14px;
    gap:12px
}
.footer .socials>span {
    width:31px;
    height:31px;
    font-size:17px
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:17px;
    margin-top:32px;
    font-size:12px;
    color:var(--text)
}
.sr-only,.skip:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%)
}
.skip:focus {
    position:absolute;
    z-index:10;
    background:white;
    padding:10px
}
dialog {
    border:1px solid white;
    border-radius:28px;
    background:#edf4fb;
    padding:34px;
    color:var(--ink);
    max-width:450px;
    width:90%;
    box-shadow:0 20px 100px #102c5155
}
dialog::backdrop {
    background:#102c5166;
    backdrop-filter:blur(5px)
}
dialog h2 {
    font-size:25px;
    margin:10px 0
}
dialog p {
    margin-bottom:24px;
    color:var(--text)
}
.dialog-close {
    position:absolute;
    right:16px;
    top:10px;
    border:0;
    background:none;
    font-size:30px
}
@media(max-width:1050px) {
    .header {
        padding-inline:20px
    }
    .header nav {
        gap:20px
    }
    .brand {
        font-size:19px
    }
    .brand strong {
        font-size:24px
    }
    .footer-grid>div {
        padding-inline:17px
    }
    .footer-brand {
        white-space:normal;
        display:block
    }
}
@media(max-width:700px) {
    body {
        font-size:16px;
        background:radial-gradient(ellipse at 0 35%,#dfedfa,transparent 36%),#f2f8fe
    }
    .wrap {
        width:88%
    }
    .wide {
        width:90%
    }
    .header {
        width:84%;
        border-radius:30px;
        margin-top:10px;
        padding:12px 18px
    }
    .brand {
        font-size:16px;
        gap:4px;
        letter-spacing:-.5px
    }
    .brand strong {
        font-size:21px
    }
    .brand img {
        width:28px;
        height:32px
    }
    .menu-toggle {
        display:grid;
        gap:5px;
        border:0;
        background:none;
        padding:8px;
        margin-left:12px
    }
    .menu-toggle span {
        width:24px;
        height:1.5px;
        background:var(--ink)
    }
    .header nav {
        display:none;
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        border-radius:20px;
        background:#f3f8ff;
        box-shadow:0 12px 25px #16385725;
        padding:15px 25px
    }
    .header nav.open {
        display:grid;
        gap:10px
    }
    .header nav a,.header nav button {
        text-align:left;
        justify-self:start
    }
    .eyebrow {
        font-size:10px;
        letter-spacing:3px;
        margin-bottom:13px
    }
    .socials {
        gap:10px
    }
    .socials>span {
        width:34px;
        height:34px;
        font-size:20px
    }
    .footer {
        padding:18px 18px 12px;
        border-radius:25px;
        margin-top:12px;
        margin-bottom:12px
    }
    .footer-grid {
        grid-template-columns:1.2fr .8fr .8fr 1.25fr
    }
    .footer-grid>div {
        padding-inline:9px
    }
    .footer-brand {
        font-size:12px;
        line-height:1.15;
        letter-spacing:-.3px
    }
    .footer-brand strong {
        font-size:19px;
        display:block
    }
    .footer p {
        font-size:10px;
        line-height:1.3
    }
    .footer h3 {
        font-size:10px
    }
    .footer-grid>div>a:not(.brand),.footer button {
        font-size:9px;
        margin-bottom:6px;
        gap:5px;
        overflow-wrap:anywhere
    }
    .footer .icon {
        width:12px;
        height:12px
    }
    .footer .location {
        gap:5px
    }
    .footer .socials {
        gap:5px;
        margin-top:9px
    }
    .footer .socials>span {
        width:22px;
        height:22px;
        font-size:13px
    }
    .footer-bottom {
        font-size:9px;
        margin-top:16px;
        padding-top:10px;
        border:0
    }
    .footer-bottom>span:last-child {
        display:none
    }
}
@media(max-width:370px) {
    .brand {
        font-size:13px
    }
    .brand strong {
        font-size:18px
    }
    .brand img {
        width:23px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:18px
    }
    .footer-grid>div:nth-child(2) {
        border:0
    }
    .footer-grid>div:nth-child(3) {
        padding-left:0
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        transition:none!important
    }
}
.header .brand-descriptor {
    font-size:.7em;
    font-weight:300;
    color:var(--text);
    letter-spacing:-.3px
}
@media(max-width:700px) {
    .footer-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px 24px
    }
    .footer-grid>div {
        min-width:0;
        padding:0;
        border:0
    }
    .footer-grid>div:first-child,.footer-grid>div:last-child {
        grid-column:1/-1
    }
    .footer-brand {
        display:flex;
        white-space:nowrap;
        font-size:15px;
        gap:6px
    }
    .footer-brand strong {
        display:inline;
        font-size:22px
    }
    .footer p {
        font-size:12px;
        line-height:1.5
    }
    .footer h3 {
        font-size:13px;
        margin-bottom:10px
    }
    .footer-grid>div>a:not(.brand),.footer button {
        font-size:12px;
        overflow-wrap:normal;
        word-break:normal;
        white-space:nowrap;
        gap:8px
    }
    .footer .location {
        white-space:nowrap;
        gap:8px
    }
    .footer .icon {
        width:16px;
        height:16px
    }
    .footer .socials {
        gap:10px
    }
    .footer .socials>span {
        width:28px;
        height:28px;
        font-size:16px
    }
    .footer-bottom {
        font-size:10px
    }
}
.footer-brand {
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap
}
.footer-brand img {
    width:32px;
    height:38px;
    flex-shrink:0
}
.footer-brand>span {
    white-space:normal
}
.footer-brand strong {
    display:inline
}
@media(max-width:700px) {
    .footer-brand>span {
        white-space:nowrap
    }
    .footer-brand img {
        width:30px;
        height:36px
    }
}
[hidden] {
    display:none!important
}
.brand-descriptor,.header .brand-descriptor {
    font-size:.7em;
    font-weight:300;
    color:var(--text)
}
.nav-group {
    position:relative;
    display:flex;
    align-items:center;
    gap:5px
}
.header nav .dropdown-toggle {
    display:flex;
    align-items:center;
    padding:6px
}
.dropdown-toggle .icon {
    width:14px;
    height:14px
}
.account-toggle .icon {
    width:23px;
    height:23px
}
.dropdown {
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    min-width:170px;
    padding:10px;
    border-radius:18px;
    background:#f3f7fcf5;
    z-index:20
}
.header nav .dropdown a,.header nav .dropdown button {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
    white-space:nowrap;
    width:100%
}
.dropdown a:hover,.dropdown button:hover {
    background:#e1ebf6
}
.account-group .dropdown {
    left:auto;
    right:0
}
.dropdown .icon {
    width:17px;
    height:17px
}
#page-overlay {
    width:min(760px,92%);
    max-width:760px;
    max-height:85dvh;
    padding:45px 24px 28px;
    overflow:auto
}
#page-overlay .support-page {
    width:100%;
    padding:15px;
    min-height:0
}
.support-page {
    padding:90px 20px;
    min-height:50vh
}
.support-page h1 {
    font-size:clamp(32px,5vw,52px);
    line-height:1.15;
    margin-bottom:20px
}
.support-page p {
    margin-bottom:24px
}
#site-loader {
    position:fixed;
    top:100px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 20px;
    border-radius:30px;
    background:#f3f8fff2;
    box-shadow:0 8px 30px #264c7733;
    font-size:13px;
    color:var(--text);
    pointer-events:none
}
#site-loader img {
    animation:loader-pulse 1s ease-in-out infinite alternate
}
@keyframes loader-pulse {
    from {
        opacity:.5;
        transform:scale(.85)
    }
    to {
        opacity:1;
        transform:scale(1)
    }
}
.socials>a {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    border:2px solid white;
    background:#ffffff65;
    box-shadow:0 4px 9px #39567d20;
    font:bold 21px Arial;
    color:#245487
}
.socials>a[aria-label="YouTube"] {
    font-size:16px
}
.footer .socials>a {
    width:31px;
    height:31px;
    font-size:17px;
    margin:0
}
.footer h3 a {
    font:inherit
}
@media(max-width:700px) {
    .header nav .nav-group {
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between
    }
    .header nav .dropdown {
        position:static;
        width:100%;
        box-shadow:none;
        background:#eaf1fa;
        border-radius:12px;
        margin-top:4px
    }
    .header nav .account-group {
        justify-content:flex-start
    }
    .socials>a {
        width:34px;
        height:34px;
        font-size:20px
    }
    .footer {
        padding:24px
    }
    .footer-grid {
        gap:24px 20px
    }
    .footer-identity {
        padding-bottom:20px!important;
        border-bottom:1px solid var(--line)!important
    }
    .footer-contact {
        padding-top:18px!important;
        border-top:1px solid var(--line)!important
    }
    .footer .socials>a {
        width:32px;
        height:32px
    }
    .footer .brand-descriptor {
        font-size:.7em
    }
    .footer-bottom {
        border-top:1px solid var(--line);
        padding-top:16px
    }
}
@media(prefers-reduced-motion:reduce) {
    #site-loader img {
        animation:none
    }
}

/* Scalable social marks, independent of font rendering. */
.socials .icon { width:19px; height:19px; stroke-width:1.8; }
.footer .socials .icon { width:17px; height:17px; }

/* Legal navigation wraps as whole labels, including on small screens. */
.footer-legal {
    display:flex;
    flex-wrap:wrap;
    gap:12px 22px;
    border-top:1px solid var(--line);
    padding-top:22px;
    margin-top:28px;
    font-size:12px;
    color:var(--text);
}
.footer-legal a { white-space:nowrap; }
.footer-legal a:hover { text-decoration:underline; }
.footer-legal + .footer-bottom { margin-top:18px; }
@media(max-width:700px) {
    .footer-legal { gap:12px 18px; font-size:11px; }
}
