/* /platforms/magento. Page-only rules, prefix pm-. No accent bars, side lines or icon tiles. */
.pf-job .steps{--n:5}

/* Jobs: the Hyvä mark sits at the foot of its image tile; three plainer jobs run in columns under the tiles. */
.pm-mark{display:block;width:auto;height:22px;margin-top:auto;padding-top:0;align-self:flex-start}
.box-pic > .pm-mark{margin-top:auto;margin-bottom:clamp(22px,2.4vw,30px)}
.box-pic > p + .pm-mark{margin-top:16px}
.pm-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,52px)}
.pm-more > div{padding:20px 0;border-top:1px solid var(--line)}
.pm-more h3{font-size:1.1rem}
.pm-more p{margin-top:6px;color:var(--muted);line-height:1.55}

/* Demos: a screenshot, then the two links. */
.pm-demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pm-demo{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pm-demo > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#E9E8E4}
.pm-demo-body{display:flex;flex:1;flex-direction:column;gap:4px;padding:20px 22px 10px}
.pm-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px}
.pm-demo h3{font-size:1.1rem}
.pm-demo-mark{display:block;width:auto;height:22px;flex:none}
.pm-demo-body p{color:var(--muted);font-size:.93rem;line-height:1.5}
.pm-demo-body .pm-demo-links{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:0 22px}
.pm-demo-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--blue-ink)}
.pm-demos + .btn-row{margin-top:28px;align-items:center}
.pm-demos + .btn-row .link{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:900px){
  .pm-more{grid-template-columns:minmax(0,1fr)}
  .pm-demos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-demo:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){
  .pm-demos{grid-template-columns:minmax(0,1fr)}
}