/* ==========================================================================
   Platforms page components (pl-*).
   Every rule here is opt-in: it only applies to markup that uses a pl- class in
   the page's Raw Html block. Page structure comes from cs-* in case-study.css.
   ========================================================================== */

/* Matches the width of the site header, so the page lines up with it. */
.pl-page .cs-wrap {
    max-width: 1600px;
}

/* ---------- Connected systems diagram in the hero ---------- */

.pl-flow {
    margin: 0;
    color: #fff;
}

.pl-flow-sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: .75rem;
}

.pl-layer-label {
    display: block;
    margin-bottom: .5rem;
    color: #d6d5d5;
    font-family: "Archivo";
    font-weight: 700;
    font-variation-settings: 'wdth' 125, 'wght' 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    line-height: 1.3;
}

.pl-nodes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

a.pl-node {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    height: 64px;
    padding: .6rem .75rem;
    background: #fff;
    border: 0;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

a.pl-node:hover,
a.pl-node:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--hp-orange), 0 10px 22px rgba(0, 0, 0, .5);
}

.pl-node img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Heavier wordmarks, scaled down so all the logos look about the same size. */
.pl-node-heavy img {
    width: 76%;
}

/* Rows of three and two, until there's room for all five. */
.pl-flow-commerce a.pl-node {
    flex: 0 0 calc((100% - 1rem) / 3);
}

/* Connections. Each track carries pulses of light in the direction the data moves. */
.pl-links-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.pl-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 56px;
    margin: .25rem 0 .6rem;
    transition: opacity .2s ease;
}

.pl-tracks {
    display: flex;
    flex: none;
    gap: 7px;
    height: 100%;
}

.pl-track {
    position: relative;
    width: 3px;
    height: 100%;
    overflow: hidden;
    background: #575152;
}

.pl-track::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(to bottom, transparent, var(--hp-orange) 70%, #ffb199);
    animation: pl-pulse-down 2.4s linear infinite;
}

.pl-track:nth-child(2)::after {
    animation-delay: -.8s;
}

.pl-track:nth-child(3)::after {
    animation-delay: -1.6s;
}

.pl-track-up::after {
    background: linear-gradient(to top, transparent, var(--hp-orange) 70%, #ffb199);
    animation-name: pl-pulse-up;
}

.pl-link-caption {
    max-width: 8.5rem;
    color: #e9e9ea;
    font-size: .85rem;
    line-height: 1.25;
}

@keyframes pl-pulse-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(190%); }
}

@keyframes pl-pulse-up {
    from { transform: translateY(190%); }
    to { transform: translateY(-100%); }
}

.pl-customers {
    padding: .9rem 1rem;
    border: 2px solid var(--hp-orange);
    font-family: "Archivo";
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
    text-align: center;
}

/* The layers draw in from the top when the page loads. */
.pl-flow-sources,
.pl-links-row,
.pl-flow-commerce,
.pl-link-customers,
.pl-customers {
    animation: pl-draw-in .6s ease both;
}

.pl-links-row { animation-delay: .25s; }
.pl-flow-commerce { animation-delay: .5s; }
.pl-link-customers { animation-delay: .75s; }
.pl-customers { animation-delay: 1s; }

@keyframes pl-draw-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Hovering a logo lights up its path and quiets the other one. */
.pl-flow:has(.pl-source-erp a:hover, .pl-source-erp a:focus-visible) :is(.pl-link-pim, .pl-source-pim),
.pl-flow:has(.pl-source-pim a:hover, .pl-source-pim a:focus-visible) :is(.pl-link-erp, .pl-source-erp) {
    opacity: .3;
}

.pl-flow:has(.pl-source-erp a:hover, .pl-source-erp a:focus-visible) .pl-link-erp .pl-track,
.pl-flow:has(.pl-source-pim a:hover, .pl-source-pim a:focus-visible) .pl-link-pim .pl-track,
.pl-flow:has(.pl-flow-commerce a:hover, .pl-flow-commerce a:focus-visible) .pl-track {
    background: var(--hp-orange);
}

.pl-source-erp,
.pl-source-pim {
    transition: opacity .2s ease;
}

/* ---------- Results band ---------- */

a.pl-stat {
    display: block;
    border: 0;
    color: #fff;
}

a.pl-stat:hover {
    color: #fff;
}

a.pl-stat:hover .cs-stat-label {
    text-decoration: underline;
}

/* ---------- Section ---------- */

.pl-section {
    padding: 4.5rem 0;
    background: #fff;
    color: var(--hp-dark);
}

.pl-section-alt {
    background: var(--hp-light);
}

.pl-head {
    max-width: 46rem;
    margin-bottom: 2.5rem;
}

.pl-head .hp-label {
    display: block;
    margin-bottom: .75rem;
    color: var(--hp-orange);
}

.pl-head p {
    margin: 1rem 0 0;
    font-size: 1.15rem;
    line-height: 1.55;
}

/* ---------- Which platform fits ---------- */

.pl-guide {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--hp-dark);
}

.pl-guide a {
    display: grid;
    gap: .25rem;
    padding: 1.1rem .5rem;
    border: 0;
    border-bottom: 1px solid #c9c8c9;
    color: var(--hp-dark);
    line-height: 1.4;
}

.pl-guide a:hover {
    background: #fff;
    color: var(--hp-dark);
}

.pl-guide-name {
    font-family: "Archivo";
    font-weight: 800;
    font-size: 1.1rem;
}

.pl-guide a:hover .pl-guide-name {
    color: var(--hp-orange);
}

.pl-guide-type {
    font-size: .95rem;
    color: #5d5859;
}

/* ---------- Platform cards ---------- */

.pl-group + .pl-group {
    margin-top: 4.5rem;
}

.pl-cards {
    display: grid;
    gap: 1.5rem;
}

.pl-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: #fff;
    border-top: 6px solid var(--hp-dark);
    box-shadow: 0 1px 3px rgba(23, 19, 20, .14);
}

.pl-card-logo {
    display: flex;
    align-items: center;
    height: 56px;
    margin-bottom: 1.5rem;
}

.pl-card-logo img {
    display: block;
    width: auto;
    max-width: 210px;
    max-height: 100%;
}

.pl-card .hp-label {
    display: block;
    margin-bottom: .5rem;
    color: var(--hp-orange);
}

.pl-card h3 {
    margin-bottom: .75rem;
}

.pl-card p {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    line-height: 1.55;
}

.pl-fit {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--hp-light);
    border-left: 4px solid var(--hp-orange);
    line-height: 1.45;
}

.pl-fit strong {
    display: block;
    margin-bottom: .2rem;
}

.pl-proof {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.pl-proof li {
    padding: .75rem 0;
    border-top: 1px solid #dcdbdc;
    line-height: 1.4;
}

.pl-proof a {
    border: 0;
    color: var(--hp-dark);
}

.pl-proof a:hover {
    color: var(--hp-orange);
}

.pl-proof strong {
    font-family: "Archivo";
    font-weight: 800;
}

.pl-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin-top: auto;
}

.pl-links a {
    border-bottom: 2px solid var(--hp-orange);
    color: var(--hp-dark);
    font-weight: 700;
}

.pl-links a:hover {
    color: var(--hp-orange);
}

/* ---------- Larger screens ---------- */

@media (max-width: 767px) {
    a.pl-node {
        padding: .5rem;
    }

    .pl-node-heavy img {
        width: 88%;
    }
}

@media (min-width: 768px) {
    .pl-guide a {
        grid-template-columns: 200px 200px 1fr;
        gap: 1.5rem;
        align-items: baseline;
    }

    .pl-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .pl-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .pl-page .cs-hero-inner {
        grid-template-columns: 1fr 1.05fr;
    }
}

@media (min-width: 1280px) {
    .pl-flow-commerce a.pl-node {
        flex: 1 1 0;
    }
}

/* Without motion, the connections stay lit and the captions explain them. */
@media (prefers-reduced-motion: reduce) {
    .pl-track::after,
    .pl-flow-sources,
    .pl-links-row,
    .pl-flow-commerce,
    .pl-link-customers,
    .pl-customers {
        animation: none;
    }

    .pl-track {
        background: var(--hp-orange);
    }

    .pl-track::after {
        display: none;
    }

    a.pl-node {
        transition: none;
    }
}