/* Storetasker /how-it-works, Platform section: six feature graphics. Every class is prefixed pf-, pay-, quo-, rec- or mem-. */
/* a graphic: 992x650 on black, everything inside sized in em off its width (52em wide, about 34em tall) */
.pf{--green:#DDF0D8;--green-ink:#17591F;--lilac:#E5E3F7;position:relative;width:100%;aspect-ratio:992/650;container-type:inline-size;overflow:hidden;background:#000;font-family:inherit;text-align:left}
.pf *{box-sizing:border-box}
.pf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pf-in{position:absolute;inset:0;font-size:calc(100cqw / 52);display:flex;align-items:center;justify-content:center;color:#fff;line-height:1.2}
.pf [data-in]{opacity:0}
.pf-g{position:relative;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.3);border-radius:1em;padding:1.5em}
.pf-cap{font-size:.7em;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1}
.pf-row{display:flex;align-items:center}
.pf-sb{justify-content:space-between}
.pf-tag{display:inline-flex;align-items:center;gap:.45em;height:2.1em;padding:0 .9em 0 .75em;border-radius:9em;font-size:.86em;font-weight:500;line-height:1;white-space:nowrap}
.pf-tag svg{display:block;width:1em;height:1em;flex:none}
.pf-tag.pf-green{background:var(--green);color:var(--green-ink)}
.pf-tag.pf-lilac{background:var(--lilac);color:#2E2B5F;padding:0 .9em}
.pf-av{display:block;border-radius:50%;background:#8a8a84 center / cover no-repeat;flex:none}
.pf-bar{display:block;height:.5em;border-radius:9em;background:rgba(255,255,255,.26)}

/* 02 payments */
.pay-svg{position:absolute;inset:0;width:100%;height:100%}
.pay-svg path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:.1;stroke-linecap:round;stroke-dasharray:.01 .5}
.pay-abs{position:absolute;inset:0;font-size:calc(100cqw / 52);color:#fff;line-height:1.2}
.pay-brand{position:absolute;left:7em;top:17.035em;width:1.1em;height:1.1em;margin:-.55em;border-radius:50%;background:#fff;box-shadow:0 0 0 .45em rgba(255,255,255,.16)}
.pay-blab{position:absolute;left:1em;width:12em;top:19em;text-align:center;display:flex;flex-direction:column;gap:.5em;align-items:center;font-weight:500}
.pay-pill{position:absolute;left:31em;display:flex;align-items:center;gap:.7em;height:2.9em;margin-top:-1.45em;padding:0 1.15em 0 .3em;border-radius:9em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);font-size:.95em;font-weight:500;white-space:nowrap;line-height:1;z-index:3}
.pay-pill .pf-av{width:2.3em;height:2.3em}
.pay-end{position:absolute;left:24.7em;display:flex;align-items:center;gap:.6em;margin-top:-.5em;height:1em}
.pay-end i{display:block;width:.5em;height:.5em;background:#fff}
.pay-dot{position:absolute;left:0;top:0;width:.5em;height:.5em;margin:-.25em;border-radius:50%;background:#fff;opacity:0;z-index:2}
/* 03 quote */
.quo{width:28em;display:flex;flex-direction:column;gap:1.25em;border-radius:0}
.quo-who{display:flex;align-items:center;gap:.8em}
.quo-who .pf-av{width:3em;height:3em}
.quo-name{font-size:.86em;color:rgba(255,255,255,.7)}
.quo-role{font-size:1.02em;font-weight:500}
.quo-title{font-size:1.5em;font-weight:500;letter-spacing:-.02em}
.quo-lines{display:flex;flex-direction:column;gap:.6em}
.quo-foot{display:flex;align-items:center;justify-content:space-between;padding-top:1.2em;border-top:1px solid rgba(255,255,255,.22)}
.quo-btn{position:relative;height:2.8em;min-width:11.6em;justify-content:center;padding:0 1.5em;border-radius:9em;background:#fff;color:#000;display:flex;align-items:center;font-size:.95em;font-weight:600;line-height:1;white-space:nowrap}
.quo-ok{position:absolute;inset:0;border-radius:9em;background:var(--green);color:var(--green-ink);display:flex;align-items:center;justify-content:center;gap:.45em;opacity:0}
.quo-ok svg{width:1em;height:1em;display:block}
.pf-cursor{position:absolute;left:0;top:0;width:1.3em;height:1.45em;opacity:0;z-index:5}
/* 04 recommendations */
.rec{display:flex;align-items:flex-start;gap:.6em}
.rec-it{position:relative;width:12.2em;padding:.8em .8em 1em;display:flex;flex-direction:column;gap:.7em}
.rec-bg{position:absolute;inset:0;border-radius:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32)}
.rec-ph{position:relative;display:block;height:12.4em;border-radius:0;background:#777 center 20% / cover no-repeat}
.rec-name{position:relative;font-size:.9em;color:rgba(255,255,255,.7);padding:0 .2em}
.rec-role{position:relative;font-size:1.3em;font-weight:500;letter-spacing:-.015em;padding:0 .15em;margin-top:-.35em}
.rec-slot{position:relative;height:1.85em;display:flex;align-items:center}
.rec-tag{position:relative}
/* 06 memory */
.mem{width:31em;display:flex;flex-direction:column;border-radius:0}
.mem-head{height:1.2em}
.mem-row{display:grid;grid-template-columns:7.4em minmax(0,1fr);align-items:center;padding:.8em 0;border-top:1px solid rgba(255,255,255,.2)}
.mem-row:first-of-type{margin-top:1em}
.mem-row:last-of-type{padding-bottom:0}
.mem-v{display:flex;align-items:center;gap:.5em;min-height:2em}
.mem-chip{font-size:.84em;font-weight:500;padding:.55em .85em;border-radius:9em;background:rgba(255,255,255,.16);line-height:1;white-space:nowrap}
.mem-chip.pf-new,.mem-stack .pf-av.pf-new{box-shadow:0 0 0 .12em #fff}
.mem-stack{display:flex}
.mem-stack .pf-av{width:2em;height:2em;margin-left:-.45em;box-shadow:0 0 0 .12em #1a1a19}
.mem-stack .pf-av:first-child{margin-left:0}
.mem-bars{display:flex;flex-direction:column;gap:.45em;flex:1}