/* CSS is also the release timer if scripts are unavailable. */
#po-intro.po-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 32px;
    border: 0;
    background: #fff;
    color: #302d91;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: po-intro-release 1.85s ease-in-out both;
}
.po-intro-seen #po-intro,
#po-intro[hidden] { display: none !important; }
#po-intro .po-intro__logo {
    width: min(82vw, 680px);
    max-width: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    animation: po-intro-logo 1.85s ease-in-out both;
}
#po-intro .po-intro__logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
}
#po-intro .po-intro__skip {
    position: absolute;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    background: #fff;
    color: #393939;
    font: 14px/1.4 Arial, sans-serif;
    cursor: pointer;
}
#po-intro .po-intro__skip:hover { border-color: #302d91; color: #302d91; }
#po-intro .po-intro__skip:focus-visible { outline: 3px solid #302d91; outline-offset: 3px; }
@keyframes po-intro-logo {
    0% { opacity: 0; }
    20%, 100% { opacity: 1; }
}
@keyframes po-intro-release {
    0%, 74% { opacity: 1; visibility: visible; pointer-events: auto; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    #po-intro.po-intro { animation-duration: 1ms; }
    #po-intro .po-intro__logo { opacity: 1; animation: none; }
}