/* ------------------------------------------------------------------
   Landing-page footer band, for store pages (layouts.front-end.app).

   Ported from the `.footer-copyright*` rules in
   public/assets/front-end/css/landing.css, scoped under `.lp-site-footer`
   so nothing else on a store page is affected. landing.css itself is NOT
   imported here: it restyles the whole page.
   ------------------------------------------------------------------ */

.lp-site-footer {
    --lp-darker: #1c2023;
    /* The curve in .footer-copyright:after is painted white, so it only
       reads as a curve over white. Store pages often end on light grey. */
    background-color: #fff;
    position: relative;
    /* The curve is sized in vw, which includes the scrollbar; clip so it
       can never push a horizontal scrollbar onto the page. */
    overflow: hidden;
}

/* Dark curved copyright band */
.lp-site-footer .footer-copyright {
    background: var(--lp-darker);
    display: flex;
    align-items: center;
    position: relative;
    min-height: 7.2vw;
}

.lp-site-footer .footer-copyright:after {
    content: '';
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgaWQ9IiIgdmlld0JveD0iMCAwIDE5MjAgMTM2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCgl4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIg0KCXg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTkyMHB4IiBoZWlnaHQ9IjEzNnB4Ig0KPg0KCTxnIGlkPSJsYXllcjEiPg0KCQk8cGF0aCBkPSJNIDAgMC4xMSBMIDAgMTM2IEwgMTkyMCAxMzYgTCAxOTIwIDEuOSBDIDE2NTAuMDQ4MiA3OS4wOTU1IDEzMjcuMDY0OCAxMzQgOTgwIDEzNCBDIDYxNS42MjE4IDEzNCAyNzcuNzg3OCA4NC41MDU5IDAgMC4xMSBaIiBmaWxsPSIjZmZmZmZmIi8+DQoJPC9nPg0KPC9zdmc+);
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    left: 0;
    top: -2px;
    bottom: auto;
    width: 100vw;
    /* Keeps the curve exactly as wide as the band even when 100vw is wider
       than the content box (classic scrollbar), so nothing is clipped away
       by the wrapper's overflow: hidden. */
    max-width: 100%;
    height: 7.2vw;
    transform: rotateX(180deg);
    z-index: 0;
}

.lp-site-footer .footer-copyright .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2.5rem 15px;
}

.lp-site-footer .footer-copyright p {
    color: #555;
    margin: 0;
    padding: 0;
    font-size: .9em;
    text-align: center;
}

.lp-site-footer .footer-copyright p strong {
    font-weight: 400;
    color: #fff;
    opacity: .7;
}