/* A loose stack of equal posters, with room for every headline and workflow. */
#main{--hero-card-overlap:155px}
.hero-showcase{display:flow-root;overflow:visible;padding-bottom:0;z-index:1}
/* Broad, offset colour pools soften the section boundary behind the posters. */
.hero-showcase::before{
 content:"";position:absolute;z-index:0;pointer-events:none;left:0;right:0;
 top:24%;bottom:calc(-1 * var(--hero-card-overlap));
 background:
  linear-gradient(180deg,var(--brand-blue) 0%,#0e61d9e6 6%,#0e61d980 12%,#0e61d91a 18%,#0e61d900 24%,rgb(var(--paper-rgb) / 0) 72%,rgb(var(--paper-rgb) / .18) 82%,rgb(var(--paper-rgb) / .55) 90%,rgb(var(--paper-rgb) / .87) 96%,var(--paper) 100%),
  radial-gradient(ellipse 90% 85% at 8% 30%,#46d3e84d 0%,#46d3e83b 24%,#46d3e81a 50%,#46d3e808 70%,#46d3e800 100%),
  radial-gradient(ellipse 82% 88% at 94% 43%,#b5a5ec40 0%,#b5a5ec30 24%,#b5a5ec16 50%,#b5a5ec06 70%,#b5a5ec00 100%),
  radial-gradient(ellipse 80% 65% at 48% 88%,#fff2cb66 0%,#fff2cb4d 24%,#fff2cb24 50%,#fff2cb08 70%,#fff2cb00 100%),
  radial-gradient(ellipse 100% 100% at 50% 0%,var(--brand-blue) 0%,#1c6fda 16%,#3389df 32%,#6eb1e7 47%,#a2cce9 59%,#d0e0e6 73%,#edf0e6 85%,var(--paper) 100%);
}
/* Sub-pixel tonal variation breaks up colour bands without visible grain. */
.hero-showcase::after{
 content:"";position:absolute;z-index:0;pointer-events:none;left:0;right:0;
 top:24%;bottom:calc(-1 * var(--hero-card-overlap));
 background:url("assets/hero-dither.svg") repeat;opacity:.12;mix-blend-mode:soft-light;
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%);
}
.hero-showcase+.workflow-section{position:relative;z-index:0;padding-top:calc(var(--hero-card-overlap) + 58px)}
.hero-card-showcase{position:relative;z-index:2;max-width:1560px;margin:62px auto calc(-1 * var(--hero-card-overlap))}
.hero-cards{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:start;padding:46px 30px 84px;overflow:visible}
.hero-cards>.poster-frame{--card-angle:0deg;--card-offset:0px;--scroll-tilt:1;position:relative;width:100%;margin:0;z-index:1;transform:translateY(calc(var(--card-offset) * var(--scroll-tilt))) rotate(calc(var(--card-angle) * var(--scroll-tilt)));transform-origin:50% 65%;scroll-snap-align:start}
.hero-cards>.poster-frame:nth-child(1){--card-angle:-5deg;--card-offset:26px}
.hero-cards>.poster-frame:nth-child(2){--card-angle:2.5deg;--card-offset:-22px;z-index:2}
.hero-cards>.poster-frame:nth-child(3){--card-angle:-2deg;--card-offset:18px;z-index:3}
.hero-cards>.poster-frame:nth-child(4){--card-angle:3deg;--card-offset:-12px;z-index:2}
.hero-cards>.poster-frame:nth-child(5){--card-angle:5deg;--card-offset:38px}
.hero-cards .intern-poster{box-shadow:var(--shadow)}
.hero-cards>.poster-frame:focus-within{z-index:10}
.hero-cards .intern-poster:focus-within{translate:0 -5px}
.hero-cards:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
.hero-card-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.hero-card-link:focus-visible{outline:3px solid var(--poster-ink);outline-offset:-6px}
.hero-card-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-inline:4px;color:var(--ink);font-size:12px}
.hero-card-controls>div{display:flex;gap:9px}
.hero-card-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #24272640;border-radius:50%;background:transparent;color:var(--ink);font-size:22px;line-height:1;transition:background .2s,opacity .2s}
.hero-card-controls button:hover:not(:disabled){background:#24272610}
.hero-card-controls button:disabled{opacity:.35}
.hero-card-controls button:focus-visible{outline-color:var(--brand-blue)}
@media(hover:hover) and (pointer:fine){
 .hero-cards>.poster-frame:hover{z-index:10}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-cards .intern-poster:hover{translate:0 -10px;box-shadow:var(--shadow-raised)}
}
@media(min-width:761px) and (max-width:1439px){
 #main{--hero-card-overlap:135px}
 .hero-card-showcase{max-width:980px;margin-top:48px}
 .hero-cards{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:56px;padding:38px 38px 64px}
 .hero-cards>.poster-frame{grid-column:span 2}
 .hero-cards>.poster-frame:nth-child(1){--card-angle:-5deg;--card-offset:16px}
 .hero-cards>.poster-frame:nth-child(2){--card-angle:2deg;--card-offset:-10px}
 .hero-cards>.poster-frame:nth-child(3){--card-angle:5deg;--card-offset:18px}
 .hero-cards>.poster-frame:nth-child(4){grid-column:2 / span 2;--card-angle:-4deg;--card-offset:0px}
 .hero-cards>.poster-frame:nth-child(5){grid-column:4 / span 2;--card-angle:5deg;--card-offset:12px}
}
@media(max-width:760px){
 #main{--hero-card-overlap:155px}
 .hero-showcase+.workflow-section{padding-top:calc(var(--hero-card-overlap) + 40px)}
 .hero-card-showcase{margin-top:38px;max-width:520px}
 .hero-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,310px);gap:22px;margin-inline:-22px;padding:18px 26px 38px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:26px;scrollbar-width:thin;scrollbar-color:#24272650 transparent}
 .hero-cards>.poster-frame{width:100%;margin:0}
 .hero-cards>.poster-frame:nth-child(1){--card-angle:-2deg;--card-offset:7px}
 .hero-cards>.poster-frame:nth-child(2){--card-angle:1.5deg;--card-offset:0px}
 .hero-cards>.poster-frame:nth-child(3){--card-angle:-1deg;--card-offset:7px}
 .hero-cards>.poster-frame:nth-child(4){--card-angle:2deg;--card-offset:0px}
 .hero-cards>.poster-frame:nth-child(5){--card-angle:-1.5deg;--card-offset:7px}
 .hero-card-controls{padding-inline:0}
}
@media(prefers-reduced-motion:reduce){
 .hero-card-controls button{transition:none}
 .hero-cards>.poster-frame{--scroll-tilt:0!important}
 .hero-cards .intern-poster:focus-within{translate:none}
}