/*
    Vidym's own layer over the Cloudly template.

    <b>Two things only: the palette, and the sign-in link.</b> Everything else — the grid, the type
    scale, the components — is the template's `main.css`, untouched, so the template can be updated
    without unpicking our changes from it.

    Loaded after `main.css` in `_Styles.cshtml`; it overrides, so the order is load-bearing.

    It was inline in the layout, which meant re-sending the same two kilobytes with every page and
    never caching them. As a file the browser fetches it once for the whole site.
*/

/* Teal / Mint — overrides only the theme tokens; layout and type are untouched */
:root {
  --pp-theme: #008476;
  --pp-theme-2: #008D91;
  --pp-tint: #ECFFFC;
  --pp-theme-70: #008476B3;
  --pp-theme-60: #00847699;
  --pp-theme-24: #0084763D;
  --pp-theme2-24: #008D913D;
}


.pp-login-link {
    display: inline-flex;
    align-items: center;
    margin-right: 18px;
    font-weight: 600;
    font-size: 16px;
    color: var(--pp-heading, #0d1b2a);
    white-space: nowrap;
    transition: color .3s ease;
}

.pp-login-link:hover,
.pp-login-link:focus-visible {
    color: var(--pp-theme, #008476);
}



section {
    position: relative;
    z-index: 10;
}
@media (max-width: 575px) {
    .pp-login-link {
        margin-right: 12px;
        font-size: 15px;
    }
}
section {
    position: relative;
    z-index: 10;
}


.pp-footer-section::before {
    top: 0;
}

.pp-cta-section + .pp-footer-section::before {
    top: -50%;
}

@media (prefers-reduced-motion: reduce) {
    .wow,
    .animated {
        visibility: visible !important;
        animation: none !important;
    }
}