/* Storetasker /become-an-expert, software section: six feature graphics. Every class is prefixed xs. */
/* a graphic: 992x650 on black, everything inside sized in em off its width (52em wide, about 34em tall) */
.xs{--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}
.xs *{box-sizing:border-box}
.xs-in{position:absolute;inset:0;font-size:calc(100cqw / 44);display:flex;align-items:center;justify-content:center;color:#fff;line-height:1.2}
.xs [data-in]{opacity:0}
.xs-g{position:relative;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);padding:1.5em}
.xs-cap{font-size:.7em;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1}
.xs-row{display:flex;align-items:center}
.xs-sb{justify-content:space-between}
.xs-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}
.xs-tag svg,.xs-cap svg{display:block;width:1em;height:1em;flex:none}
.xs-tag.xs-green{background:var(--green);color:var(--green-ink)}
.xs-tag.xs-lilac{background:var(--lilac);color:#2E2B5F;padding:0 .9em}
.xs-tag.xs-line{border:1px solid rgba(255,255,255,.4);color:#fff}
.xs-tag.xs-sm{font-size:.74em}
.xs-av{display:block;border-radius:50%;background:#8a8a84 center / cover no-repeat;flex:none}
.xs-bar{display:block;height:.5em;border-radius:9em;background:rgba(255,255,255,.26)}
.xs-sq{display:block;width:2.9em;height:2.9em;background:#fff;position:relative;flex:none}
.xs-sq::after{content:"";position:absolute;left:50%;top:50%;width:.7em;height:.7em;margin:-.35em;background:#000}
/* dotted-line diagrams */
.xs-dg-svg{position:absolute;inset:0;width:100%;height:100%}
.xs-dg-svg path,.xs-dg-svg circle{fill:none;stroke:rgba(255,255,255,.5);stroke-width:.1;stroke-linecap:round;stroke-dasharray:.01 .5}
.xs-dg{position:absolute;inset:0;font-size:calc(100cqw / 52);color:#fff;line-height:1.2}
.xs-dg-dot{position:absolute;left:0;top:0;width:.55em;height:.55em;margin:-.275em;border-radius:50%;background:#fff;opacity:0;z-index:2}
/* 01 quote */
.xs-qt{width:28em;display:flex;flex-direction:column;gap:1.2em}
.xs-qt-title{font-size:1.5em;font-weight:500;letter-spacing:-.02em;margin-top:-.3em}
.xs-qt-lines{display:flex;flex-direction:column;gap:.6em}
.xs-qt-foot{display:flex;flex-direction:column;gap:.8em;padding-top:1.2em;border-top:1px solid rgba(255,255,255,.22)}
.xs-qt-chips{display:flex;gap:.5em}
.xs-chip{position:relative;display:flex;align-items:center;height:2.4em;padding:0 1em;border-radius:9em;border:1px solid rgba(255,255,255,.32);font-size:.86em;font-weight:500;line-height:1;white-space:nowrap}
.xs-chip em{position:relative;font-style:normal}
.xs-chip-on{position:absolute;inset:-1px;border-radius:9em;border:1px solid #fff;background:rgba(255,255,255,.2)}
/* 02 retainer */
.xs-rt{width:29em;display:flex;flex-direction:column;gap:1.3em}
.xs-rt-who{display:flex;align-items:center;gap:.8em}
.xs-rt-name{font-size:1.1em;font-weight:500}
.xs-rt-sub{font-size:.86em;color:rgba(255,255,255,.7)}
.xs-rt-rows{display:flex;flex-direction:column}
.xs-rt-row{display:grid;grid-template-columns:3.4em minmax(0,1fr) 7em;align-items:center;column-gap:1em;height:3em;border-top:1px solid rgba(255,255,255,.2)}
.xs-rt-row .xs-tag{justify-self:end}
.xs-bar.xs-dim{background:rgba(255,255,255,.12)}
/* 03 escrow */
.xs-es-client{position:absolute;left:7.05em;top:15.585em}
.xs-es-you{position:absolute;left:41.2em;top:14.835em;width:4.4em;height:4.4em}
.xs-es-lab{position:absolute;top:21.6em;width:8em;text-align:center;font-weight:500}
.xs-at{position:absolute;display:flex;align-items:center;justify-content:center}
.xs-es-ok{display:flex;align-items:center;gap:.5em;white-space:nowrap}
/* 04 countries */
.xs-ct-end{position:absolute;left:0;width:12.3em;margin-top:-.5em;height:1em;display:flex;align-items:center;justify-content:flex-end;gap:.6em}
.xs-ct-end i{display:block;width:.5em;height:.5em;background:#fff}
.xs-ct-pill{position:absolute;left:38.7em;top:17.035em;margin-top:-1.6em;display:flex;align-items:center;gap:.7em;height:3.2em;padding:0 1.3em 0 .32em;border-radius:9em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font-size:1em;font-weight:500;line-height:1;z-index:3}
.xs-ct-pill .xs-av{width:2.56em;height:2.56em}
.xs-dg-svg circle.xs-es-hold{stroke:rgba(255,255,255,.55);stroke-width:.08;stroke-dasharray:none}
.xs-es-orb{width:.8em;height:.8em;margin:-.4em;box-shadow:0 0 1.2em rgba(255,255,255,.55)}
/* 05 scheduling */
.xs-sc{width:30em;display:flex;flex-direction:column;gap:1.3em}
.xs-sc-head{display:flex;align-items:center;gap:1em}
.xs-sc-date{width:3.6em;height:3.6em;background:#fff;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;line-height:1;flex:none}
.xs-sc-date span{font-size:.62em;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.xs-sc-date b{font-size:1.5em;font-weight:600;letter-spacing:-.02em}
.xs-sc-title{font-size:1.3em;font-weight:500;letter-spacing:-.02em}
.xs-sc-sub{font-size:.9em;color:rgba(255,255,255,.7);margin-top:.2em}
.xs-sc-rows{display:flex;flex-direction:column}
.xs-sc-row{display:grid;grid-template-columns:1.3em 5em minmax(0,1fr) auto;align-items:center;column-gap:.8em;height:3.2em;border-top:1px solid rgba(255,255,255,.2)}
.xs-sc-row > svg{display:block;width:1.2em;height:1.2em}
.xs-sc-t{font-size:.98em}
.xs-ck{width:1.35em;height:1.35em;border-radius:50%;background:#F1F0EB;color:#1B1C1B;display:flex;align-items:center;justify-content:center}
.xs-ck svg{display:block;width:.72em;height:.72em}
/* 06 leads */
.xs-ld{width:32em;display:flex;flex-direction:column;gap:.8em}
.xs-ld-row{display:flex;align-items:center;gap:1.1em;padding:1.05em 1.2em}
.xs-ld-sq{display:block;width:.6em;height:.6em;background:#fff;flex:none}
.xs-ld-body{display:flex;flex-direction:column;gap:.45em;flex:1;min-width:0}
.xs-ld-t{font-size:1.08em;font-weight:500;letter-spacing:-.01em}