/* How It Works Cards: elastic card row (desktop) / sticky stacked cards (phone). */
/* Cards slide in from beyond the viewport edge: clip (not hidden) so no horizontal scrollbar and sticky still works. */
html:has(.pin-hiw),body:has(.pin-hiw){overflow-x:clip}
.pin-hiw{
    --hiw-accent:var(--primary-page-color-reverse-background,#008755);
    --hiw-card:#f1f4f4;--hiw-ink:#262c2e;
    --hiw-card-hover:#000;
    --hiw-on-hover:#fff;
    --hiw-ease:cubic-bezier(.42,0,0,1);
    margin-block:0;
}
.pin-hiw__row{display:flex;justify-content:center;max-width:1240px;margin:0 auto;padding:0;list-style:none}
.pin-hiw__row>li{display:contents;margin:0;padding:0}
.pin-hiw__card{
    display:flex;flex-direction:column;position:relative;flex:1 1 0;min-width:0;margin-inline:4px;
    background:var(--hiw-card);color:var(--hiw-ink);border-radius:46px;corner-shape:squircle;
    text-decoration:none;cursor:pointer;
    transition:flex-grow .3s var(--hiw-ease),background-color .2s ease,color .1s;
}
.pin-hiw__card:focus-visible{outline:3px solid var(--hiw-accent);outline-offset:3px}
.pin-hiw__head{display:flex;align-items:center;padding:16px 24px 12px;min-height:48px;box-sizing:border-box}
.pin-hiw__head h3{margin:0;font-size:1rem;line-height:20px;font-weight:700;color:inherit}
.pin-hiw__n{color:var(--hiw-accent)}
.pin-hiw__media{height:394px;border-radius:32px;corner-shape:squircle;position:relative;overflow:hidden;background:#d7efe4}
.pin-hiw__media img,.pin-hiw__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;margin:0}
.pin-hiw__media video{opacity:0;transition:opacity .3s ease}
.pin-hiw__media video.is-playing{opacity:1}
.pin-hiw__foot{padding:20px 24px 28px;max-width:300px}
.pin-hiw__foot p{margin:0;font-size:16px;line-height:21px;color:inherit}
.pin-hiw__foot::after{
    content:"";position:absolute;right:20px;bottom:20px;width:24px;height:24px;border-radius:50%;opacity:0;
    background:var(--hiw-on-hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6.5 15 12l-5.5 5.5' fill='none' stroke='%23888' stroke-width='3'/%3E%3C/svg%3E") 55% 50%/8px auto no-repeat;
}
.pin-hiw__cta{justify-content:center;margin-top:48px}

/* Desktop and tablet */
@media (min-width:768px){
    .pin-hiw__row{container-type:inline-size}
    .pin-hiw__foot{width:calc(21cqw - 56px);max-width:none}   /* text column = width of a narrow (non-hovered) card, so text never reflows */
}
@media (min-width:768px) and (max-width:1100px){.pin-hiw__media{height:330px}}
@media (min-width:768px){.pin-hiw__head{min-height:68px}}
@media (hover:hover) and (min-width:768px){
    .pin-hiw__card:hover,.pin-hiw__card:focus-visible{flex-grow:1.67;background:var(--hiw-card-hover);color:var(--hiw-on-hover)}
    .pin-hiw__card:hover .pin-hiw__foot::after,.pin-hiw__card:focus-visible .pin-hiw__foot::after{opacity:1}
}

/* Scroll-in animation (same timelines and keyframes as the carousel on adobe.com), desktop only */
@keyframes pinHiwRise{from{transform:translateY(100px)}to{transform:none}}
@keyframes pinHiwRowIn{0%{transform:translateX(200px);opacity:0}20%{opacity:1}40%{transform:none}100%{transform:none;opacity:1}}
@keyframes pinHiwGap{0%{transform:translateX(var(--shift,0px))}40%{transform:none}100%{transform:none}}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
        .pin-hiw__reveal{animation:pinHiwRise linear both;animation-timing-function:cubic-bezier(.42,0,0,1);animation-timeline:view(40% 10%);animation-range:entry}
        .pin-hiw__row{animation:pinHiwRowIn linear both;animation-timing-function:cubic-bezier(.42,0,0,1);animation-timeline:view();animation-range:entry 20% exit}
        .pin-hiw__card{animation:pinHiwGap linear both;animation-timing-function:cubic-bezier(.42,0,0,1);animation-timeline:view();animation-range:entry exit}
    }
}

/* Phone: sticky stacked cards */
@media (max-width:767px){
    .pin-hiw__row{display:grid;gap:20vh;max-width:none;justify-content:stretch;padding-bottom:2.5rem}
    .pin-hiw__card{
        position:sticky;top:calc(10vh + var(--i,0)*14px);flex:none;margin:0;background:#000;color:#fff;overflow:clip;
        transform-origin:50% 0;will-change:transform;
    }
    .pin-hiw__card::before{content:"";position:absolute;inset:0;background:#2a2a2a;border-radius:inherit;corner-shape:inherit;opacity:var(--back,0);z-index:3;pointer-events:none}
    .pin-hiw__head{position:relative;padding:20px 24px 14px}
    .pin-hiw__head::after{
        content:"";position:absolute;right:20px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;
        background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6.5 15 12l-5.5 5.5' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 55% 50%/8px auto no-repeat;
    }
    .pin-hiw__media{height:auto;aspect-ratio:1/1;border-radius:0}
    .pin-hiw__foot{max-width:none;width:auto;padding-bottom:28px}
    .pin-hiw__foot::after{display:none}
    .pin-hiw__foot p{opacity:.8}
}
@media (prefers-reduced-motion:reduce){.pin-hiw__card,.pin-hiw__media video{transition:none}}

/* Cards are links: keep theme link hover colour/underline off the text (all layouts). */
.pin-hiw a.pin-hiw__card,.pin-hiw a.pin-hiw__card:hover,.pin-hiw a.pin-hiw__card:focus{text-decoration:none}
@media (max-width:767px){.pin-hiw a.pin-hiw__card,.pin-hiw a.pin-hiw__card:hover,.pin-hiw a.pin-hiw__card:focus,.pin-hiw a.pin-hiw__card:active{color:#fff}}
@media (min-width:768px){.pin-hiw a.pin-hiw__card:not(:hover):not(:focus-visible){color:var(--hiw-ink)}}

/* No squircle support (mobile Safari/Chrome, Firefox): plain circular radii, close to Adobe's. */
@supports not (corner-shape:squircle){
    .pin-hiw__card{border-radius:28px}
    .pin-hiw__media{border-radius:20px}
}
@supports not (corner-shape:squircle){@media (max-width:767px){.pin-hiw__media{border-radius:0}}}