@charset "UTF-8";

/* Approved matte boundary: a shallow diagonal blend through slate, with
   feathered solid endpoints matching the adjacent surfaces. No glow or filter.
   The 1.5 degree incline changes the blend height by ~38px at 1440px. */
.pl-transition {
    --pl-from: var(--pl-surface);
    --pl-to: var(--pl-navy-900);
    height: 80px;
    pointer-events: none;
    --pl-matte-start: #d4dce1;
    --pl-matte-end: #536875;
    background:
        linear-gradient(180deg, var(--pl-from), transparent 24%, transparent 76%, var(--pl-to)),
        linear-gradient(181.5deg, var(--pl-from) 4%, var(--pl-matte-start) 30%, var(--pl-matte-end) 70%, var(--pl-to) 96%);
}
.pl-transition--from-navy { --pl-matte-start: #536875; --pl-matte-end: #d4dce1; }
.pl-transition--to-footer { background: linear-gradient(180deg, var(--pl-from), var(--pl-to)); }
.pl-transition--from-navy { --pl-from: var(--pl-navy-900); }
.pl-transition--from-light { --pl-from: var(--pl-surface); }
.pl-transition--from-white { --pl-from: var(--pl-white); }
.pl-transition--from-aqua { --pl-from: var(--pl-aqua-50); }
.pl-transition--to-navy { --pl-to: var(--pl-navy-900); }
.pl-transition--to-light { --pl-to: var(--pl-surface); }
.pl-transition--to-white { --pl-to: var(--pl-white); }
.pl-transition--to-footer { --pl-to: var(--pl-navy-foot); }
/* The satin variant replaces the matte background only at the eleven opted-in
   boundaries. The first desktop hero boundary keeps its approved geometry. */
.pl-transition--satin {
    --pl-ribbon-first: #6bb8c4;
    --pl-ribbon-second: #285b6b;
    --pl-ribbon-first-opacity: .30;
    --pl-ribbon-second-opacity: .52;
    height: clamp(64px, 6.12vw, 110px);
    background: var(--pl-from);
}
.pl-transition--satin.pl-transition--from-navy {
    --pl-ribbon-first: #9acbd3;
    --pl-ribbon-second: #d5f1f3;
    --pl-ribbon-first-opacity: .44;
    --pl-ribbon-second-opacity: .62;
}
.pl-transition--satin.pl-transition--to-footer {
    --pl-ribbon-first: #285262;
    --pl-ribbon-second: #163e50;
    --pl-ribbon-first-opacity: .35;
    --pl-ribbon-second-opacity: .60;
}
.pl-transition--satin > svg { display: block; width: 100%; height: 100%; }
.pl-transition__ribbon--first { fill: var(--pl-ribbon-first); fill-opacity: var(--pl-ribbon-first-opacity); }
.pl-transition__ribbon--second { fill: var(--pl-ribbon-second); fill-opacity: var(--pl-ribbon-second-opacity); }
.pl-transition__surface { fill: var(--pl-to); }
.pl-home > .pl-band, .pl-investors > .pl-band {
    --pl-edge-start: var(--pl-surface);
    --pl-edge-end: var(--pl-surface);
    isolation: isolate;
}
.pl-home > .pl-band--navy, .pl-investors > .pl-band--navy {
    --pl-edge-start: var(--pl-navy-900);
    --pl-edge-end: var(--pl-navy-900);
}
.pl-home > .pl-connected { --pl-edge-start: var(--pl-white); --pl-edge-end: var(--pl-aqua-50); }
.pl-home > .pl-integration { --pl-edge-start: var(--pl-aqua-50); --pl-edge-end: var(--pl-aqua-50); }
.pl-home > .pl-band::before, .pl-investors > .pl-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, var(--pl-edge-start), transparent 32px, transparent calc(100% - 32px), var(--pl-edge-end));
}
.pl-home > .pl-hero::before { background: linear-gradient(0deg, var(--pl-edge-end), transparent 64px); }
@media (max-width: 1023px) {
    .pl-transition { height: 48px; }
    .pl-transition--satin { height: clamp(64px, 16vw, 84px); }
}
@media print { .pl-transition { display: none; } }